2014 UI/UX 디자인 트렌드 중간 점검

바이널엑스에서 정리한 내용인데 보기 깔금하게 되어 있어 공유합니다. 

2014년도 어느덧 하반기를 향해 달려가고 있습니다. 시간 참 빠르죠? 중간 점검의 차원에서 올해 UX/UI 디자인 트렌드에는 어떤 것들이 있는지, 어떤 디자인 요소들이 주목 받고 있는지 다시 한 번 살펴볼까요. 다음은 바이널엑스가 꼽는 올해의 디자인 키워드들입니다. 

 

 

 

 

 

1. GUI 디자인 

 

1) 플랫 (Flatness)

 

출처: http://bit.ly/1hp5MBE (左)  http://bit.ly/1tDLJH7(右)

 

지난해 iOS7 출시 이후 디자인 트렌드의 대세로 자리잡은 플랫 디자인. 스큐어모픽 디자인 (Skeumorphic design)을 벗어나 해당 콘텐츠의 의미를 중점적으로 전달할 수 있는 간결한 디자인을 추구하는 디자인으로, OS 뿐만 아니라 출시되는 애플리케이션 또한 플랫 디자인을 반영하는 추세입니다.

 

UX 디자이너들의 필수 용어 사전: Flat Design (플랫디자인) ☜연관 포스팅 보기 클릭!

 

 

 

 

2) 원형 콘텐츠 (More Rounded Contents)

 

출처: http://bit.ly/S7Da9R(左)  http://bit.ly/1tbH2SL (右)

사각형에서 벗어나 플랫한 원형 UI 구성 방식이 많이 시도되고 있으며, 사각형에 익숙한 사용자들에게 새로운 경험을 제공함으로써 최근 주목 받고 있는 디자인 방식입니다. 이미 이러한 전략이 적용되어 런칭된 애플리케이션도 다수 존재하며, 메시징 앱이나 연락처 앱에서 특히 많이 쓰이고 있습니다.

 

3) 블러 효과 (Blur effects) 

출처: http://bit.ly/1gurWHD(左) http://bit.ly/1oklmpI (右)

사용자에게 감성적으로 접근하기 위해 많은 애플리케이션들이 사용 중인 효과입니다. 날씨 또는 이미지가 사용되는 콘텐츠에 주로 사용되고 있습니다. 블러 효과를 적용하여 이전 화면을 백그라운드에 보여줄 경우, 사용자에게 애플리케이션의 계층 구조를 인지시키는데 용이합니다. 

4) 단순한 컬러 (Simple color schemes)

출처: http://bit.ly/1hp5YRn

애플리케이션에 너무 많은 색상을 사용할 경우, 사용자에게 부정적인 인식을 심어줄 여지가 있습니다. 따라서 배색을 최소화하되, 강렬하고 단순한 색상을 사용하여 몰입도를 높이려는 디자인 방식이 많이 채택되고 있습니다. 

5) 서체 통일 (One app, one typeface)

출처: http://bit.ly/1w5EDNV

 

 

깔끔한 산세리프 서체를 주로 사용하고, 하나의 애플리케이션에 가능한 하나의 폰트 스타일을 유지합니다. 심플함을 추구하는 트렌드에 맞춰 하나의 폰트만을 사용하여 통일성 및 애플리케이션의 완성도를 높이고 있습니다.

 

 

 

 

 

2. UI/UX 디자인 

 

1) 계층 인터페이스 (Layered Interfaces)

출처: http://bit.ly/1gus4a7(左) http://bit.ly/1tDMbFd (右)

 

Depth로 구성된 UI 구조를 시각화(e.g.: overlaid)하여 제공하는 디자인으로, 각 메뉴의 상호 작용 과정을 사용자에게 보다 명확하게 인지할 수 있도록 합니다. Z축을 기반으로 하는 인터페이스를 접목함으로써 애플리케이션에 입체감을 더합니다.

 

 

 

2) 이미지 중심 인터페이스 (Image Centered Interface)

출처: http://bit.ly/1oklUw3(左) http://bit.ly/1pq6Zh2(右)

 

텍스트보다 이미지를 중심으로 구성하는 디자인 방식으로, 등록된 이미지를 통해 콘텐츠의 목적을 쉽게 파악 가능하다는 장점이 있습니다. 시각적 효과가 더해짐으로 인해 텍스트 중심과 비교할 때 사용자의 흥미 및 관심 유발에 효과를 보입니다.

 

 

 

3) 콘텐츠 큐레이션 (Content Curating)  ​

 출처: http://bit.ly/JEvsjI

 

사용자와 상호 작용하는 인터페이스로, 사용자가 설정해 놓은 상황에 맞춰 시스템에서 능동적으로 콘텐츠를 제공합니다. 사용자에게 복잡한 태스크를 요구하지 않는다는 점에서 각광받고 있습니다.

 

 

 

4) 카드 디자인 (Cards & Tiles)

 

 

출처: http://bit.ly/1jP4aWg

타일의 자유로운 크기 조절로 단조로운 화면 구성을 개선하는 디자인 방식입니다. 카드 타입 디자인 도입으로 주목을 받았던 페이스북 이외에도 Google now, Windows 8, Flipboard, Pinterest 등의 애플리케이션이 대표적인 타일 형태의 디자인을 선보이고 있습니다. 

5) 선이 아닌 요소나 공간으로 분류 (Divide by elements & spacing, not lines)

 

출처: http://slidesha.re/TLMtO8

 

기능에 더 많은 초점을 두고 있으며, 불필요한 요소를 최대한 배제하는 추세입니다. 화면 내에 각 콘텐츠의 구분선을 자제하여 복잡도를 줄입니다. 충분한 여백을 활용하여 안정감 있고, 정보의 인지력 향상을 도모합니다. 

 

 

 

6) 네비게이션 아이콘 (Navigation Icon) 

 

출처 : http://slate.me/1pq8g7P

출처 : , http://bit.ly/1r7ENnY(左), http://www.facebook.com/(右) 

 

최근 많은 웹사이트와 앱들이 모바일 인터페이스에 맞게 세 줄짜리 네비게이션 아이콘을 도입하고 있습니다. 일부 사이트는 반응형 디자인의 일환으로 이 네비게이션 구조를 적용하여 일관적인 UI 구조를 제공하고 있습니다. 이러한 UI 구조는 사용자들에게 좀 더 쉬운 UI와 깔끔한 화면 구성을 제공한다는 장점이 있지만, Depth 가 한 단계 더 들어간다는 단점이 있습니다. 

 

 

 

 

 

3. 제스쳐 

1) 스와이프 (Swipe)

 

출처: http://bit.ly/1lMp5pP(左)  http://bit.ly/1h46R7z(右)

 

스와이프를 이용해 다양한 기능을 적용할 수 있습니다. 많은 애플리케이션에서 화면 전환 뿐만 아니라 목록 삭제, 편집 또는 숨겨진 메뉴 호출 등을 할 때 스와이프 동작을 사용하고 있습니다. 

 

 

 

2) 엄지손가락 중심 인터랙션 (Thumb-focused Interactions)

 출처: http://bit.ly/1ij93CQ

 

간편하고 쉬운 사용성이 강조됨에 따라 엄지 손가락 하나만으로 프로세스를 완료할 수 있는 구조가 요구되고 있습니다. 연락처 애플리케이션의 경우 목록 삭제, 이동, 그룹핑 등에 유용하게 사용될 것으로 보입니다.  

3) 아래로 당겨 새로고침 (Pull Down to Refresh)

출처: http://read.bi/1tEcDhX(左)  http://bit.ly/1k8bS9B(右)

 

‘새로고침’ 기능을 버튼화하여 화면에 표시했던 과거와 달리, 숨겨진 기능으로 제공하고 있습니다. 목록을 하단으로 끌어내린 후 손가락을 놓으면 새로고침이 실행됩니다. 목록 위주로 구성된 애플리케이션에서 주로 사용되고 있습니다.

 

 

 

4) 핀치 (Pinch)

 

출처: http://bit.ly/1h46R7z

 

‘Pull Down To Refresh’와 동일하게 숨겨진 기능으로 제공됩니다. 기존 확대/축소의 개념이었던 Pinch에 변화를 주어 새로운 목록을 만들거나, 다른 목록으로 변경이 가능하도록 제공하고 있습니다.

5) 흔들기 (​Shake)

 

 출처: http://www.brit.co/wake/

 

화면을 터치하는 방식은 아니지만, 애플리케이션의 특성에 따라 ‘Shake’와 같이 다양한 방식의 제스처를 접목 가능해지고 있습니다. 

 

디자이너와 개발자의 원활한 소통을 도와줄 제스처 총정리! ☜연관 포스팅 보기 클릭!

 

 

 

 

 

 

4. 트랜지션, UI 애니메이션 

 

출처 (좌측 상단에서부터 시계방향): http://bit.ly/1lMomoA, http://bit.ly/1mqwRZQ, http://bit.ly/1jTtAU3, http://bit.ly/1jlRFg8

 

스마트폰의 발전에 맞춰 트랜지션 효과도 다양해지는 추세입니다. 잘 만들어진 트랜지션 효과는 사용자들의 긍정적인 반응을 이끌어내지만, 과한 효과가 적용되면 오히려 정보의 인지에 방해가 될 수 있습니다.

 

UX 디자이너들의 필수 용어 사전: 트랜지션 (Transition) ☜연관 포스팅 보기 클릭!

 

 

 

 

지금까지 올해의 UX/UI 트렌드에 대해 알아보았습니다. 남은 반 년간 올해의 디자인 트렌드가 어떻게 바뀔지도 벌써부터 궁금해지네요! :-)

출처 : http://vinylx.blog.me/20208087173

[출처] [바이널 X] 2014 UX/UI 디자인 트렌드 중간 점검!|작성자 바이널엑스