Android Honeycomb UI design guide Bryan Woo (pyramos@gmail.com) Bryan Woo (pyramos@gmail.com)
Table of Contents Announcement Basic Screen Portrait Screen Action Bar System Bar Main Menu Options Menu Small Arrow Scheme Tab Pop-up Quick Feedback Pop-Up Multi Select Widgets Graphical Concept Screenshots Page 2 28
Announcement 본문서의내용은 Honeycomb 전용 Application에서제공하는디자인을검토하여작성된것으로 Google의공식적인디자인가이드와는관계가없음 본문서에서제시하는모든디자인요소는반드시지켜야하는것 (Mandatory) 이아니며 Honeycomb에서일반적으로사용하는요소를안내하는것임 Page 3 28
Basic Screen Screen Size: 1280 x 800 (mdpi) 기본화면구성요소 Action Bar와 System Bar가항상고정 ( 각각 48 pixels) Main Pane: Application의 Shortcut ( 사용자등록 ) 및 Widget 제공 Action Bar Main Pane System Bar Page 4 28
Portrait Screen 가로및세로화면지원 Honeycomb 전용앱은가로를기본으로함 안드로이드 2.x 버전의앱은세로화면을기본으로실행됨 가로 / 세로화면을고려하여 Action Bar를 Flexible하게운영 Page 5 28
Action Bar Action Bar는 title bar의역할뿐아니라다양한 action을수행할수있는메뉴를제공 App 로고가왼쪽에제공됨. Navigation 진행시로고좌상단에작은화살표가생기며, 이때로고를선택하면 Back 동작 Web UI 등에서서비스 Logo 선택시 Home으로이동하는것과상이하며, Home 이동이가능한메뉴 / 버튼제공해야함 Action bar의우측에는서비스공통또는상황별로사용가능한메뉴제공 (Options Menu) 로고를제공하지않는경우 로고가 back 으로동작하는경우 Options Menu 제공 Page 6 28
System Bar System Bar의좌측에는 Navigation을위한버튼 (Back/Home/ 멀티태스킹 ) 을제공하고, 우측에는시스템 Notification을제공 Android 2.x 앱을실행시키면메뉴버튼이추가로제공됨 Galaxy Tab에서는왼쪽에화면을캡쳐할수있는버튼이추가로제공됨 App에서 Customize 할수없는고정영역임 단, App에서 notification 제공이필요한경우이를위한 icon 제공은필요 Silent System Bar Video Play 또는 Photo View 등의화면에서는 System Bar의 icon을 Dimmed Dot으로제공하여 Task에방해를받지않도록함 Silent System Bar Page 7 28
Main Menu iphone 또는 ipad 의하단에고정적으로제공하는방식의메뉴제공은불가능한구조임 App 실행시첫화면에메뉴를분리하여제공하기도하나일반적으로는화면전체를활용하여메뉴별요소를제공 Hierachical 메뉴방식보다 Content 를바로 Present 할수있는 UX 컨셉설계가필요 Action Bar 를활용한 Main Menu 제공 App 실행시전체화면에서메뉴제공 ipad 하단의메뉴를화면전체에서제공 Page 8 28
Options Menu Options menu는주로 Action Bar의오른쪽영역에제공 Android 2.x 앱을실행시키면 System Bar의좌측에메뉴버튼이나타남 Honeycomb의일반적인 UI에맞지않으므로우측상단에서메뉴를제공하는것이필요 서비스또는상황별로필요한메뉴 (Situational or Contextual Menu) 가아이콘또는메뉴버튼내에서제공됨 설정, 정보, 도움말등의공통메뉴는메뉴버튼내에숨겨서제공할수있음 Android 2.x apps provide options menu on the system bar Page 9 28
Small Arrow Scheme Honeycomb 전체적으로사용되는 Convention으로, 버튼에 Small Arrow를제공하여 More 의의미를전달 로고의좌상단에 Small Arrow가나타나면 Back 동작이가능함을의미 버튼의우하단에 Small Arrow를제공하는경우는더많은메뉴또는옵션을볼수있다는것을의미함 팝업등의형식으로관련메뉴를제공 Filter 또는 Selection 등의동작에서사용됨 주로 Action Bar에서사용되지만, Main Pane에서도자유롭게사용이가능 Page 10 28
Tab Action Bar 또는 Main Pane에서 Tab 요소들을제공 면으로표현하는기존의방식과는달리 Underline으로 Tab을표현 Bold Underline이선택된 Tab 일반카테고리영역에서도선을사용하여선택됨을표현하는방법을사용하기도함 Page 11 28
Pop-up Pop-up의전체적인스타일은 Title Bar를포함하는방식으로제공 Query Pop-Up 및 Confirmation Pop-Up 등 Progress Pop-Up은 title 제공하지않음 버튼의제공숚서는 [OK] [Cancel] 의숚서로 ios와다름 컬러및 Box 등의디자인스타일이 App마다상이 시스템팝업은 Black 바탕에 Blue Line을사용한스타일 Page 12 28
Quick Feedback Pop-Up 갂단한 Feedback 을제공하기위하여 Quick Feedback Pop-Up 사용 화면의하단영역에제공 작업이진행중임을알리는 Progress Pop-Up 은화면의중갂에제공하며, Quick Feedback Pop-Up 과구분됨 Page 13 28
Multi Select List View 에서 Multi-Selection Box 를 Single Tab 하거나 Thumbnail View 에서 Long Tab 할경우다중선택모드로진입 선택된항목은 Green Color 로표시되며, Action Bar 의좌측에 [ 취소 ] 버튼이제공됨 Page 14 28
Widgets Home Screen 에 Application 에서제공하는 Widget 을추가할수있음 하나의 App 의경우에도두가지이상의 Size 를제공할수있음 Widget 안에서항목을탐색할수있는기능제공 Flicking 동작으로 Widget 안에서항목이동, 선택이가능 Page 15 28
Graphical Concept 면을사용하지않고선과 Shape을그대로표현하는방식 Home 화면의 App Short Cut Icon을 Box에넣지않고 Shape을그대로표현 메뉴버튼도 Box를사용하지않음 팝업등의버튼에서도면사용을최소화하거나면의표현을최소화하여제공 새로운 UI Convention 사용및기존의일반적인요소디자인변경사용 Small Arrow Scheme Underline Tab, Check Box, Radio Button 등의변형사용 Design Guide 면이없는방식의버튼의경우명령과일반문구의구분이모호할수있으므로장식을위한이미지사용은자제하고, 버튼과일반문구를명확하게구분하여제공 새로운 Convention의사용이친숙하지않거나인지가명확하지않을수있음을고려해야함필수요소에과도한사용보다는편의향상을위한용도로사용하는것을권장 Page 16 28
Bryan Woo (pyramos@gmail.com) Screenshots
Home Page 18 28
Market Page 19 28
YouTube Page 20 28
YouTube, CNN Player Page 21 28
CNN Page 22 28
Kindle Page 23 28
Kindle Page 24 28
Other apps Page 25 28
Other apps Page 26 28
Other apps Page 27 28
Other apps Page 28 28