최근 모바일 앱 UI UX 디자인 동향.

1. 최근 모바일 앱
디자인 동향
UI

2. 목차
• 플랫 디자인
- 플랫 디자인 이란?
- 종류
- 이전 디자인들과의 차이점 및 장점
• 메트로 디자인
- 메트로 디자인 이란?
- 이전 디자인들과의 차이점 및 장점
• 플랫 디자인과 메트로 디자인의 공통점

3. 플랫 디자인

4. 플랫 디자인이란?
2013 최고의 디자인 트랜드
차별화된 디자인적 특징
- 심플한 아이콘
- 배제된 효과
- 타이포 그래피
- 단순한 컬러
- 미니멀리즘
다섯 가지 특성 강조
플랫 디자인

5. 종류
Real Flat Design
- 미니멀리즘을 최대한 살린 디자인
Real Flat Design
Almost Flat
- 아이콘의 크기를 증가시켜
직관적인 인터페이스를 강조
Almost Flat
플랫 디자인

6. 이전 디자인들과의 차이점 및 장점
•
경험하지 못한 사람이라도 알 수 있는 직관적인 인터페이스
•
이미지 크기 가 아닌 색깔로 강조를 하는 인터페이스
•
최대한 심플하면서도 필요한 기능만 강조 함
•
모든 이동 행동은 손가락 하나로 넘길 수 있게 제작 함
•
숨겨진 페이지를 활용하여 여러 기능을 편리하게 제공
대표적으로 상단을 내리거나
하단에서 올리면 숨겨진 바가
등장한다.
이런 숨겨진 기능을 잘 활용
하는 것이 최근 동향 중 하나
IOS7 Design
IOS7 Botton Bar
IOS7 Top Bar
플랫 디자인

7. 이전 디자인들과의 차이점 및 장점
•
화면 레이어를 다중으로 활용
•
여러 숨겨져 있는 레이어를 활용,
최대한 심플한 UI 구성
•
숨겨진 레이어는 반투명하여 메인 레이어가
불투명하게 보이도록 설계
플랫 디자인

8. 이전 디자인들과의 차이점 및 장점
•
•
확장 영역에서 여러 기능 제공
•
보통 왼쪽 , 오른쪽은 카테고리나
마이 페이지 기능 제공
•
Left Drag Bar
확장 영역이 동서남북으로 존재함
확장 영역 접근 방법은 드래그나 아이콘 클릭
으로 이루어 진다.
Left Drag Bar
플랫 디자인

9. 이전 디자인들과의 차이점 및 장점
•
효과가 적다
- 효과라고 해봐야 부드럽게 왼쪽에서
오른쪽으로 움직이는 효과
- 효과를 넣는다고 하더라도 심플한 효과를 추구함
•
카테고리는 시원시원한 크기
- 카테고리 나눌 때도 한눈에 볼 수 있는
크기 이되 , 세부정보는 최대한 심플
하게 나타낸다.
- 보통 폰트의 색은 흰색을 많이 쓰는 편
배경색의 경우 검정색을 많이 선호한다
(검정색 + 회색의 그라데이션 선호)
플랫 디자인

10. 메트로 디자인

11. 메트로 디자인이란?
•
Micro Soft 에서 윈도우 8 베이스로 만들어 놓은 디자인
5가지 특징
•
전체적으로 미래지향적인 디자인이며 도시를 연상시킴
•
•
•
•
•
화려한 장식 효과 등 절제
Bold 와 고딕 서체를 사용해 강조
픽토그램 스타일의 아이콘
아이콘의 스퀘어 박스 화
비비드한 컬러 사용
메트로 디자인

12. 이전 디자인들과의 차이점 및 장점
•
글의 배치가 띄엄띄엄 규격적으로 적혀있고, 굵은 글씨로 강조를 함
•
따로 칸 구별이 명확히 되어 있지 않음
•
배경 위의 오브젝트 중 글자를 뺀 모든 부분은 불투명 처리가 되어 있음
메트로 디자인

13. 이전 디자인들과의 차이점 및 장점
•
아이콘과 바탕화면의 심플화
•
글씨의 강조로 인한 주목효과
•
자신이 원하는 위치로 자유로운 이동 가능
•
필요한 부분만 볼 수 있음
•
아이콘 크기의 자유화
•
자신이 원하는 UI를 만들 수 있다는 것
메트로 디자인

14. 플랫 디자인과 메트로 디자인 공통점

15. 플랫 디자인과 메트로 디자인 공통점
Flat Design
Metro Design
•
백그라운드 위의 객체들이
반투명 하여 비쳐 보임
비쳐 보임으로써 시원한
느낌 전달
•
아이콘이 단순, 심플 하면서
의미전달이 빠름

16. 결과
• 플랫 디자인과 메트로 디자인 둘 다 직관적인 인터페이스 사용
• UI가 반투명 하여 뚫려있는 느낌을 주어 넓어 보이며, 시원함
• 아이콘의 크기나 이미지 다름이 아닌 색으로 강조 또는 구분
• 화려한 효과가 들어가지 않음 최대한 심플한 구성
• 누구나 다 한번에 알아볼 수 있는 쉬운 구성