머티리얼 디자인

머티리얼(material)?

머티리얼 디자인(material design)

아름답고직관적인사용자경험을위한

자연스러운애니메이션

질감이느껴지는표면

대담하고선명한그래픽

지향점 1

지금까지의디자인원리와현대과학기술을융합한디자인언어의생성

지향점 2

디바이스의크기및플랫폼의특성을떠나하나의통합된경험을제공

3D세상

평면의 X, Y축을비롯하여높낮이가있는 Z축을포함한환경을의미Z축에는각각의머티리얼이쌓이며각머티리얼은 1dp의두께를가짐

빛과 그림자

그림자효과는 Z축에쌓여진머티리얼의높낮이및방향을제공함

물리적 특성

머티리얼은다양한평면크기를가지나높이는 1dp의두께로일관적임하지만 0dp의두께를가질수없음

그림자 효과

머티리얼은 Z축의높낮이에따라그림자효과를제공함

컨텐츠 표현

각컨텐츠는머티리얼표면을기준으로제공됨

모양 바꾸기

각머티리얼은모양이바뀔수있음

합치기

각머티리얼은분리되거나결합할수있음

재결합

하나의머티리얼에서분리된머리티얼은다시재결합됨

상대적 높이

각머티리얼은 Z축을기준으로상대적높이를가짐

높/낮이 복구

높낮이가변경된머티리얼은빠르게원래상태로돌아감

타이포그래피

화면내텍스트는일정수준의크기및줄간격을가짐

핵심 가이드라인 및 간격

모바일레이아웃은핵심가이드라인및간격을준수함

24dp

56dp

48dp

72dp

핵심 가이드라인 및 간격

모바일레이아웃은핵심가이드라인및간격을준수함

48dp

8dp

56dp

터치영역 크기

터치영역은최소 48dp의크기를가지며아이콘의경우 24dp, 아바타의경우 40dp를준수

터치영역 크기

터치영역은최소 48dp의크기를가지며팝업내버튼의경우 36dp를권장

기본 레이아웃

모바일의기본레이아웃은앱바와돌출된액션버튼으로구성됨사이드메뉴는레이어된상태로제공하며, 우측사이드메뉴도활용가능

레이아웃 경계

카드형태의머티리얼또는돌출된액션버튼은특정레이아웃에구속될필요없음

컨텐츠 그룹핑

컨텐츠는동일속성끼리카드형태로그룹핑하여제공하며각카드간의경계를분명히함

앱바

앱바는전형적인형태뿐만아니라확장된형태로사용가능

앱바

앱바의형태에따라다음의가이드라인을권장함

시스템바

화면내콘텐츠와어울리는시스템바를구성

콘텐츠에기반한시스템바색상 #000000(검정색)의투명도 20%

검정색시스템바 앱바보다어두운톤의시스템바

즉각적인 반응

사용자인터랙션을통한즉각적인반응이애니메이션으로표현됨

즉각적인 반응

사용자인터랙션을통한머티리얼생성시애니메이션효과제공인터랙션을가한지점으로부터머티리얼을확장시켜해당지점과의관련성제공

시각적 연속성

콘텐츠전환은분리되어표현되지않고연속된느낌을제공해야함

시각적 연속성

기존안드로이드의 Pop in/out 대신 Sliding left/right 등의연속된효과제공

더 알아보기(http://www.google.com/design)