1. 탭바란?
- 탭바는 스크린의 맨 아래에 위치하며, 사용자에게 앱이 제공하는 정보나 기능의 이해를 도움
- 사용자가 앱의 다른 부분 사이를 쉽게 이동할 수 있도록 돕는 하단 바
- 주로 앱의 주요 기능, 화면 사이를 이동하는데 도움이 됨
iOS에서는 Tab bar이라 하고, Material Design에서는 Navigation bar, Bottom Navigation 이라고 하는 등 명칭이 조금씩 다르다
2. 탭바의 기본적인 규칙
By default, a tab bar is translucent:
It uses a background material only when content appears behind it, removing the material when the view scrolls to the bottom. A keyboard covers the tab bar when it’s onscreen.
기본적으로 탭바는 반투명하다
뒤에 콘텐츠가 있을 시에는 - 반투명한 탭바에 콘텐츠를 배경으로 한다.
뒤에 콘텐츠가 없을 시에는 - 콘텐츠가 배경으로 사용되지 않는다.
탭바는 화면의 하단에 위치한다
스마트폰은 한 손으로 사용하는 경우가 많다. 터치스크린은 특히 엄지손가락에 맞게 구성되었기 때문에, 탭바도 이 원칙을 따른다. 엄지손가락으로 가장 좋은 접근성을 가지는 곳이 화면의 하단이기 때문에, 대부분의 주요 인터페이스들은 화면의 하단에 위치한다.
데스크톱 경험을 위해 설계된 인터페이스는 주로 탐색 인터페이스 요소 (메뉴)들을 화면의 상단(Global Navigation Bar)이나 화면의 왼쪽에 배치하는 규칙을 따른다.
데스크톱 경험과는 다르게, 모바일 환경의 주요 컨트롤은 엄지손가락만 사용하여 탐색할 수 있는 영역인 Thumb zone에 있어야 한다.
사진과 같이 대부분의 화면을 Thumb zone에 위치시키고, 모바일의 주요 컨트롤은 화면의 하단에 위치시킨다.
3. 탭바의 구조
탭바는 최대 5개의 항목 탭으로 구성된다.
구성요소가 너무 많을 시, 사용자를 혼란에 빠뜨릴 수 있다.
여기에는 밀러의 법칙이 쓰인다.
밀러의 법칙
사용자가 작업 중인 기억에 5+2, 5-2 개의 항목만 유지할 수 있는 이론
한 번에 처리할 수 있는 정보의 한계를 제시
1. Icon
아이콘은 탭의 주요 기능과 콘텐츠를 상징적으로 표현한다. 일반적인 형태의 아이콘보다는 브랜드의 아이덴티티를 가진 아이콘을 사용한다.
의미가 명확하게 전달되지 않는다면, 레이블을 함께 사용한다
2. Label text
레이블 텍스트는 간결하게 작성하여 탭이 무엇을 할 수 있는지 직관적으로 전달한다.
작은 모바일 화면에서 긴 레이블은 피하도록 하자.
탭의 레이블은 앱 계층 구조의 최상위 콘텐츠, 기능을 의미한다.
ex) profile(상위) - 프로필 편집 / 개인정보 / 주문내역 / 쿠폰 / 포인트 ...
3. Container
탭 아이템들을 감싸는 바 형태의 영역이다. iOS에서는 탭바 영역을 백그라운드 블러로 반투명처리하여 탭 아래에 콘텐츠가 있음을 암시한다.
4. Badge area
탭 아이템의 아이콘 오른쪽 상단에 새로운 콘텐츠가 있을 경우 배지를 표시한다.
4. Usage guidelines
모달 상태에서는 탭바를 노출하지 않는다
사용자가 직접 텍스트를 입력하는 등의 작업이 필요한 모달 상태에서는 탭바를 노출하지 않는다.
사용자가 작업을 완료하는데 집중할 수 있도록, 작업과 관련 없는 컨트롤은 숨긴다.
탭바의 항목을 5개 이상으로 하지 않는다
모바일에서 탭바는 3~5개를 권장한다.
6개일 경우, 화면의 복잡도가 높아지고, 터치 타깃의 크기가 작아져 잘못 터치할 수도 있기 때문이다.
탭바에 지나친 그래픽 요소는 사용하지 않는다
최근 인터페이스 요소의 그래픽은 단순해지고 있는 추세이다. 콘텐츠의 가독성을 높이기 위해서는 내비게이션 요소의 그래픽은 최대한 단순화한다.
또한, 탭바의 영역은 지나치게 강조하지 않도록 주의한다.
탭바 영역에는 포인트 컬러만 주어 사용자의 위치를 확인할 수 있도록 한다. 탭바 영역 전체가 포인트 컬러가 되어서는 안된다.
