Material Design Components
2018 메터리얼 디자인의 컴포넌트, 이런 것들이 바뀌었습니다.
올해 구글 I/O에서 발표된 메터리얼 디자인의 컴포넌트에서 크게 바뀐 부분들을 정리하였습니다. App bar가 하단으로 내려온 Bottom App bar, Bottom App bar와 같이 하단에서 올라오는 bottom drawer, 텍스트와 같이 적용할 수 있는 Extended FAB, Front layer를 제어하는 Back drop 정도가 크게 바뀌거나 추가되었고, 나머지도 소소한 변경사항들이 있는 것 같습니다. 가이드라인의 디테일한 디자인들은 앱의 컨셉이나 사용 맥락에 따라 변수가 많이 발생하기 때문에 그대로 적용하기 어려운 경우가 많은 것 같습니다. 여기서는 크게 변경되어 앱 디자인시 고려해야 할 사항들만 간단히 소개하도록 하겠습니다.
Bottom App bar
FAB(Floating Action Button)와 주요 액션 버튼을 하단에 배치하여 한 손으로 조작을 할 수 있는 사용성을 제공하고 있습니다. 모바일 디바이스(Phone)에만 적용할 수 있습니다.
Centered FAB
홈스크린에서는 좌측에는 메뉴가 위치하고 우측에는 overflow아이콘을 제외하고 최대 2개까지 액션을 배치할 수 있습니다.End FAB
서브화면에서는 FAB가 우측으로 이동하고, 좌측에 액션 아이콘을 4개까지 배치할 수 있습니다.No FAB
FAB가 필요없는 경우에는 좌측에 메뉴아이콘을, 우측에 4개까지 액션 아이콘을 배치할 수 있습니다.Landscape
가로화면에서도 디바이스를 잡은 상태에서 버튼을 누르기 쉽도록 동일한 레이아웃이 적용됩니다.Overlap과 Inset의 두 가지 스타일로 적용할 수 있습니다.
Overlapping FAB
Inset FAB서브뎁스로 진입했을 때와 스크롤했을 때의 트랜지션입니다.
Top App bar와 같이 사용할 때는 아래의 규칙을 따릅니다.
- 메뉴아이콘은 Bottom App bar에만 적용
- Overflow 아이콘은 Top 또는 Bottom 중 한 군데에만 적용
- Search와 같이 앱 전체적으로 사용되는 액션은 항상 같은 위치에 적용
- '삭제’와 같이 부정적인 액션은 top app bar에 적용(근데 예시에는 휴지통이 bottom app bar에 있네요;;)
서브뎁스에서 up 아이콘은 Top app bar에 위치
Overflow 아이콘(more 아이콘)은 Top/Bottom 중 한 군데에 위치
Bottom에는 navigation menu나 search와 같이 전 화면에 일괄적으로 쓰이는 액션을, Top에는 현재 화면에서 사용되는 액션을 배치Navigation Drawer
최상위 카고리가 5개 이상일 때 사용합니다.
Standard Drawer
Tablet과 Desktop에서 사용됩니다. 적용 방식에 따라 항상 보여지게 할 수도 있고, 메뉴 아이콘으로 여닫게 할 수도 있습니다. 내비게이션 이동을 자주 할 경우 항상 보여지는 형태를 적용하고, 내비게이션을 자주 할 필가 없으며, 컨텐츠에 집중을 할 필요가 있을 경우 여닫는 형태를 적용 합니다.
항상 보이는 형태 (Permanently visible)
메뉴 아이콘으로 여닫는 형태 (Dismissible)
Modal drawer
모바일과 같이 화면 폭에 제한이 있을 경우(600dp이하) 적용하며, 화면 위로 뜨기 때문에 레이아웃에 영향을 미치지 않습니다. dim처리된 배경으로 수행 중인 인터렉션을 중단시키면서 나타납니다. Bottom app bar를 사용할 경우 한 손으로 조작하기 쉬운 하단에서 올라오는 bottom drawer를 적용합니다.
Modal drawerBottom drawer는 Bottom app bar 사용시 적용되며, reachability가 좋습니다. 아래에 있어서 한 손으로 누르기 쉽습니다.
Bottom drawerbottom drawer 는 화면의 50% 이상으로 올라오지 않으며, 스크롤시 화면 끝까지 채운 후 스크롤 됩니다.
- 메뉴를 디바이스를 잡은 손의 엄지가 닿는 영역 안에 위치하게 하고, 스크롤 할 때는 전체 메뉴를 한 눈에 볼 수 있게 하려는 의도 같네요.
가로 화면에서는 풀스크린으로 보여준다.카테고리가 5개 이하일 때는 Bottom navigation을 사용합니다.
FAB
화면의 주요 액션을 수행합니다.
생성, 즐겨찾기, 공유, 시작 등 긍정적인 주요 기능을 적용합니다. 삭제나 오버플로우 같은 부정적이거나 부차적인 기능은 적용하지 않습니다.FAB를 눌러 연관된 액션을 불러올 수 있지만, 6개 이상은 제공하지 않고, Overflow메뉴도 제공하지 않는다고 합니다. 주요 액션만 명료하게 제공하게 하려는 의도 같습니다.
연관된 액션으로 확장할 수 있습니다.
Overflow메뉴는 제공하지 않습니다.
텍스트 레이블은 제공할 수 있습니다.
리스트 형식의 action menu를 제공할 수도 있습니다.
Morphing 효과나
Full Screen으로 트랜지션되는 효과도 멋있습니다.
이번에 새롭게 제공되는 형상은 Extended FAB입니다. 아이콘과 레이블을 같이 제공하는 형태입니다.
Extended FAB모바일에서는 하단 중앙이나 우측에 위치합니다.
이렇게 스크롤에 따라서 FAB와 Extended FAB가 전환되기도 합니다. 시선을 집중시키면서도 리스트를 보는데 거슬릴 것 같긴 합니다.
Backdrop
백드롭은 backy layer와 front layer 로 구성되어 있고, back layer 는 front layer의 컨텐츠에 대한 정보나 액션을 보여줍니다.
1. Back layer
2. Front layer
1. 닫혀있을 때는 front layer의 현재 상태에 대한 정보를 보여줍니다.
2. 열려있을 때는 front layer에 대한 액션을 동작할 수 있습니다.
Back layer는 다음과 같이 사용 됩니다.
1. Navigation
2. Steppers
3. Text fields
4. selection controls
Front layer 는 메뉴 아이콘을 누르거나, 인풋필드를 눌러서 호출 할 수 있습니다.
Swipe 동작으로는 열리게 하지 않습니다.
Back layer에는 fix되어 있는 subheader를 적용할 수 있습니다.
Back layer는 닫기 버튼이나(1), front layer 전체 영역(2), front layer의 화살표 아이콘(3)으로 닫을 수 있습니다.
출처 : https://material.io/design/
