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

목차

• 플랫 디자인 - 플랫 디자인 이란 ? - 종류 - 이전 디자인들과의 차이점 및 장점

• 메트로 디자인 - 메트로 디자인 이란 ? - 이전 디자인들과의 차이점 및 장점

• 플랫 디자인과 메트로 디자인의 공통점

플랫 디자인

플랫 디자인

2013 최고의 디자인 트랜드

차별화된 디자인적 특징

- 심플한 아이콘

- 배제된 효과

- 타이포 그래피

- 단순한 컬러

- 미니멀리즘

플랫 디자인이란 ?

다섯 가지 특성 강조

종류

플랫 디자인

Real Flat Design

Almost Flat

Real Flat Design - 미니멀리즘을 최대한 살린 디자인

Almost Flat - 아이콘의 크기를 증가시켜 직관적인 인터페이스를 강조

이전 디자인들과의 차이점 및 장점

IOS7 Design

• 경험하지 못한 사람이라도 알 수 있는 직관적인 인터페이스

• 이미지 크기 가 아닌 색깔로 강조를 하는 인터페이스

• 최대한 심플하면서도 필요한 기능만 강조 함

• 모든 이동 행동은 손가락 하나로 넘길 수 있게 제작 함

• 숨겨진 페이지를 활용하여 여러 기능을 편리하게 제공

대표적으로 상단을 내리거나 하단에서 올리면 숨겨진 바가등장한다 .

이런 숨겨진 기능을 잘 활용하는 것이 최근 동향 중 하나

플랫 디자인

IOS7 Botton Bar IOS7 Top Bar

이전 디자인들과의 차이점 및 장점

• 화면 레이어를 다중으로 활용

• 여러 숨겨져 있는 레이어를 활용 , 최대한 심플한 UI 구성

• 숨겨진 레이어는 반투명하여 메인 레이어가 불투명하게 보이도록 설계

플랫 디자인

이전 디자인들과의 차이점 및 장점

플랫 디자인

Left Drag Bar

• 확장 영역이 동서남북으로 존재함

• 확장 영역에서 여러 기능 제공

• 보통 왼쪽 , 오른쪽은 카테고리나 마이 페이지 기능 제공

• 확장 영역 접근 방법은 드래그나 아이콘 클릭 으로 이루어 진다 .

Left Drag Bar

플랫 디자인

이전 디자인들과의 차이점 및 장점

• 효과가 적다 - 효과라고 해봐야 부드럽게 왼쪽에서 오른쪽으로 움직이는 효과

- 효과를 넣는다고 하더라도 심플한 효과를 추구함

• 카테고리는 시원시원한 크기 - 카테고리 나눌 때도 한눈에 볼 수 있는 크기 이되 , 세부정보는 최대한 심플 하게 나타낸다 . - 보통 폰트의 색은 흰색을 많이 쓰는 편 배경색의 경우 검정색을 많이 선호한다 ( 검정색 + 회색의 그라데이션 선호 )

메트로 디자인

메트로 디자인이란 ?

• Micro Soft 에서 윈도우 8 베이스로 만들어 놓은 디자인

• 전체적으로 미래지향적인 디자인이며 도시를 연상시킴

5 가지 특징

• 화려한 장식 효과 등 절제• Bold 와 고딕 서체를 사용해 강조• 픽토그램 스타일의 아이콘• 아이콘의 스퀘어 박스 화• 비비드한 컬러 사용

메트로 디자인

메트로 디자인

이전 디자인들과의 차이점 및 장점

• 글의 배치가 띄엄띄엄 규격적으로 적혀있고 , 굵은 글씨로 강조를 함

• 따로 칸 구별이 명확히 되어 있지 않음

• 배경 위의 오브젝트 중 글자를 뺀 모든 부분은 불투명 처리가 되어 있음

이전 디자인들과의 차이점 및 장점

메트로 디자인

• 아이콘과 바탕화면의 심플화

• 글씨의 강조로 인한 주목효과

• 자신이 원하는 위치로 자유로운 이동 가능

• 필요한 부분만 볼 수 있음

• 아이콘 크기의 자유화

• 자신이 원하는 UI 를 만들 수 있다는 것

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

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

• 백그라운드 위의 객체들이 반투명 하여 비쳐 보임 비쳐 보임으로써 시원한 느낌 전달

• 아이콘이 단순 , 심플 하면서 의미전달이 빠름

Flat Design Metro Design

결과

• 플랫 디자인과 메트로 디자인 둘 다 직관적인 인터페이스 사용

• UI 가 반투명 하여 뚫려있는 느낌을 주어 넓어 보이며 , 시원함

• 아이콘의 크기나 이미지 다름이 아닌 색으로 강조 또는 구분

• 화려한 효과가 들어가지 않음 최대한 심플한 구성

• 누구나 다 한번에 알아볼 수 있는 쉬운 구성