탭 표시줄 및 하단 탐색: 유지되는 디자인 규칙
iOS 및 Android에서 탭 표시줄 및 하단 탐색을 디자인하는 방법: 3~5개의 대상, 작업이 아닌 탐색, 레이블, 배지, 가시성 및 애니메이션 활성 상태.
핵심 포인트
작업이 아닌 3~5개의 최상위 대상에 대해 탭 표시줄이나 하단 탐색을 사용하세요. 모든 탭에 아이콘과 라벨을 지정하고, 사람들이 섹션 사이를 이동할 때 막대가 보이도록 유지하고, 가능한 경우 '더보기' 탭이 넘치지 않도록 하고, 배지를 아껴서 사용하세요. 사람들이 현재 위치를 볼 수 있도록 활성 상태를 미묘하게 애니메이션화합니다.
플랫폼이 말하는 것
Material Design 3은 내비게이션 바가 각각 아이콘과 라벨이 있는 3~5개의 대상에 대한 액세스를 제공하며 하나의 대상은 항상 활성화되어 있다고 말합니다. Apple의 지침에 따르면 작업을 제공하는 것이 아니라 탐색용으로 탭 막대를 사용하고, 사람들이 섹션 사이를 이동할 때 표시되도록 유지하고(모달이 덮는 경우 제외) 탭이 넘치지 않도록 해야 합니다.
탭 선택
탭은 앱의 구조를 나타냅니다.
- 가지고 있는 모든 섹션이 아닌 사람들이 가장 자주 사용하는 섹션을 선택하세요.
- 작업("업로드")에는 동사가 아닌 대상("라이브러리")에는 명사를 사용하세요.
- 화면 자체, 도구 모음 또는 부동 작업 버튼에 작업을 추가합니다.
- 5개 이상이 필요한 경우 "자세히" 탭을 추가하기 전에 구조를 다시 고려하십시오.
라벨 및 배지
아이콘 전용 탭은 공간을 절약하지만 사람들이 추측하도록 강요합니다. 라벨을 사용하면 탐색이 더 명확해지며, 특히 덜 일반적인 아이콘의 경우 더욱 그렇습니다. 배지는 사람들이 조치를 취해야 한다는 신호를 전달해야 합니다. 항상 존재하는 배지는 눈에 띄지 않습니다.
탭당 상태 유지
Apple은 탭 막대를 사용하면 각 섹션 내에서 현재 탐색 상태를 유지하면서 섹션을 전환할 수 있다고 지적합니다. 탭으로 돌아가면 맨 위로 재설정되는 것이 아니라 중단한 위치가 표시되어야 합니다.
운동
미끄러지는 알약이나 채워지는 아이콘과 같은 활성 표시기의 작은 전환은 사람들이 자신의 위치를 추적하는 데 도움이 됩니다. 약 250밀리초 미만으로 빠르게 유지하고, 탭할 때마다 모든 아이콘이 튀는 것을 방지하고, 모션 감소가 켜져 있을 때 단순화합니다.
기억할 핵심 원칙
- 3~5개의 최상위 대상
- 액션이 아닌 탐색
- 모든 탭에 대한 아이콘과 라벨
- 표시되도록 유지하고 각 탭의 상태를 유지합니다.
- 미묘하고 빠른 활성 상태 모션
자주 묻는 질문
출처
- Navigation bar guidelines — Material Design 3
- Tab bars — Apple 휴먼 인터페이스 지침