SKT Basic UI Component 사용법
Components
Buttons
Floating action buttons
Device back button
Navigation drawer
Tabs
Top app bar
Dialogs (Popup)
Bottom sheets
Radio button / checkbox
Text fields
Design
Navigation
Navigation drawer
원하는 화면에 접근하거나 앱 기능을 수행할 수 있습니다.
Basic principles
Identifiable
메뉴 위치와 리스트 스타일의 콘텐츠를 사용해 navigation component 임이 명확히 드러나게 합니다.
Organized
사용 빈도 순으로 먼저 나열하고, 관련성 있는 것들끼리 그룹으로 묶어서 제공합니다.
Contextual
앱 레이아웃에 따라 보일수도 ,숨길 수도 있습니다.
Usage
Navigation drawer를 통해 원하는 화면에 접근하거나 계정 변경과 같은 앱 기능을 수행할 수 있습니다.
Navigation drawer는 아래와 같은 경우 권장합니다.
- 5개 이상의 top-level 화면이 있는 경우
- 2 단계 이상의 navigation 레벨이 있는 경우
- 관계 없는 화면 간 빠른 이동이 필요할 때
- 큰 디스플레이에서 navigation bar를 대체해 사용
Navigation drawer의 위치
Left-to-right 언어의 경우 navigation drawer는 왼쪽에 위치합니다.
Don’t
Right-to-left 언어(중동어 등)가 아닌 이상 navigation drawer를 오른쪽에서 열지 않습니다.
Navigation drawer와 타 navigation component의 관계
Navigation drawer 는 다른 navigation component와 중복 사용하지 않습니다.
Caution
Navigation drawer 와 bottom navigation bar 중복 사용은 이질적인 레벨의 메뉴 옵션이 동시에 노출되어 권장하지 않습니다.