UI 컴포넌트 오픈북을 읽고, UI 스터디 목적으로 기록합니다.
•
BANNER
Banner : 중요한 메시지를 전달하거나, 메시지와 관련된 추가 동작을 제공하는 컴포넌트
•
ANATOMY, 컴포넌트 내부요소
1) Container
2) Supporting visual(Optional)
3) Text
4) Button
•
사용 방법 팁
Banner는 사용자가 인지해야 하는 중요 메시지를 간결하게 전달할 때 사용되며, 사용자가 처리해야 할 작업 내용을 전달한다.
제공되는 Button을 통해 Banner를 닫거나 특정 기능을 수행할 수 있다.
•
Snackbar : 낮은 우선순위 / 사용법 : (선택 사항) 사용자의 액션 없이도 일정 시간이 지나면 자동으로 사라짐
•
Banner : 중간 우선 순위 / (선택 사항) : 사용자가 닫거나 배너를 생성한 원인이 해결될 때까지 유지
•
Dialog : 가장 높은 우선 순위 / (필수 사항) : 사용자가 직접 작업을 수행하거나 Dialog를 종료할 때까지 유지
•
버튼 구성 팁
•
Banner에서 단일 버튼을 사용하는 경우, Banner를 닫는 기능보다는 해당 메시지와 연관된 작업의 수행을 돕는 기능을 제공할 것을 권장한다.
•
Button은 Text button을 사용하되, 복수로 사용하는 경우 다른 위계를 가진 스타일의 버튼을 함께 적용하지 않는 것이 좋다.
•
PLACEMENT, 배치
1) With app bar
Banner는 화면 상단에 배치한다. App bar와 함께 사용되는 경우 Banner를 App bar 하단에 배치한다.
스크롤 시 상황에 따라 해당 위치에 공정되거나, 콘텐츠와 함께 스크롤 되도록 설정할 수 있다.
2) With persistent search bar
Search bar를 함께 사용하는 경우 Banner는 Search bar 하단에 배치한다.
•
SPEC, 제작 가이드
1) Single-line
Text button
2) Multi-line + Supporting visual
Text button이 두개일 경우에는 텍스트 정보 아래에 배치한다.
•
느낀점
배너에서는 텍스트 버튼을 사용하는 것을 권장한다는 것을 알게 되었다. 실제로 여러 서비스를 이용하면서 상단에 있는 배너에는 텍스트 버튼을 주로 사용하는 것을 많이 보았다. 텍스트 버튼과 다른 레벨의 버튼을 같이 사용하는 것은 주의해야한다는 것을 배웠다. 이러한 가이드를 숙지하여 여러 서비스를 이용하는 사용자들의 멘탈모델을 고려하여 비슷한 사용자 경험을 제공하려고 한다.
출처 : UI 컴포넌트 오픈북 For Android