Toolbars

J.Noma·2021년 10월 24일
0

Human Interface Guidelines - Toolbars


toolbar는 화면 아래쪽에 나타나며 현재 화면과 관련된 action들을 수행하는 버튼들을 포함합니다

By default, toolbar는 tab bar와 동일하게 반투명합니다
뒤에 content가 있을 때 background material이 있는데 배경은 없어지기도 합니다 (when the view scrolls to the bottom)

toolbar도 키보드가 화면에 나타나면 숨겨집니다

tab bar vs toolbar
비록 tab bar와 toolbar 둘 다 화면의 아래에서 보여지지만, 다른 목적을 가지고 있습니다

tab bar는 서로 다른 영역 사이를 navigate하기 위해 존재합니다
예로, "시계" app에는 알람/스톱워치/타이머 tab이 있습니다
tool bar는 현재 화면과 관련된 action들을 수행하는 버튼 set입니다.
예로, 어떤 item에 대해 생성/필터링/내용표시 등을 합니다

tab bar와 toolbar는 하나의 view에 같이 보여질 수는 없습니다


유저가 현재 context에서 most likely 수행할 action들을 승급시키는 용도

toolbar는 유저가 빈번히 사용하는 command를 위해 눈에 잘 띄고, 일관된 위치에 제공됩니다
만약 context를 전환할 방법이 필요하다면 tab bar를 대신 써야할 것입니다

iPad에서는 toolbar대신 navigation bar를 고려

iPad 화면에서는 상단에 위치하는 버튼이 아래쪽보다 눈에 더 잘 띄고 접근성도 좋습니다
(이유는 적혀있지 않지만, 아마 iPhone에서는 엄지 손가락 위치 상 아래쪽이 접근성이 좋고 iPad는 딱히 상관없는데 사람의 시선 상 기본적으로 위쪽이 편하기 때문일듯)

toolbar의 버튼이 3개 이하라면, 명확성을 위해 title을 붙혀주길 고려하라

제곧내..
그리고, title 간 간격을 충분히 확보한다

toolbar의 버튼이 3개 초과라면, 공간을 아끼기 위해 SF symbol을 고려하라

이것도 제곧내
custom glyph같은걸 쓰려면 규격이 정해져있으니 따르길 바람

segmented control 쓰지 말자

segmented control은 context switching용이므로 현재 화면에 대한 action을 정의하는 toolbar와는 맞지 않다

profile
노션으로 이사갑니다 https://tungsten-run-778.notion.site/Study-Archive-98e51c3793684d428070695d5722d1fe

0개의 댓글