아이스크림 샌드위치(Android 4.0) UI Review

Overview 01 Android OS History # 2007. 11. : 오픈 핸드셋 얼라이언스(OHA)에서 안드로이드 플랫폼 발표 # 2007. 11. : 안드로이드 소프트웨어 개발자 킷(SDK) # 2008. 9. : 티모바일, 세계 최초 안드로이드폰 ‘G1’ 발표 # 2008. 10. : 최초의 안드로이드폰 ‘G1’ 시판 및 안드로이드 소스코드 완전 공개 # 2009. 2. : 호주에서 아시아 최초의 안드로이드폰 ‘HTC 드림’ 출시 # 2009. 4. : SDK 1.5 버전(컵케이크, Cupcake) 공개 # 2009. 10. : SDK 1.6 버전(도넛, Donut) 공개 # 2010. 1. : SDK 2.1 버전(에클레어, Eclair) 공개 # 2010. 1. : 구글 애플리케이션 최적화된 ‘HTC 넥서스원’ 공개 # 2010. 1. : 모토로라, 국내 최초 안드로이드폰 ‘모토로이’ 출시 # 2010. 5. : SDK 2.2 버전(프로요, Froyo) 공개 # 2010. 10. : 국내 최초 안드로이드 개발자 랩 개최 # 2010. 12. : SDK 2.3 버전(진저브레드, Gingerbread) 공개 # 2010. 12. : 삼성전자, 구글 합작 안드로이드폰 ‘넥서스S’ 출시 # 2011. 1. : SDK 3.0 버전(허니콤, Honeycomb) 프리뷰 # 2011. 10. : SDK 4.0 버전(아이스크림샌드위치, Icecream Sandwich) 공개 # 2011. 10. : 삼성전자, 구글 합작 안드로이드폰 ‘갤럭시 넥서스’ 공개 안드로이드 버전 명이 음식 이름인 이유 새로운 버전이 나올 때마다 벌이는 축하 파티에서 사용가능한 테마를 모색했기 때문에 버전 명은 디저트 이름으로 발표Copyright ⓒ2011 Limepaper, Inc. All rights reserved. 4

Overview 01 Market share Operating System 3Q11 Units 3Q11 Market Share (%) 3Q10 Units 3Q10 Market Share (%) Android 60,490.4 52.5 20,544.0 25.3 Symbian 19,500.1 16.9 29,480.1 36.3 iOS 17,295.3 15.0 13,484.4 16.6 Research In Motion 12,701.1 11.0 12,508.3 15.4 Bada 2,478.5 2.2 920.6 1.1 Microsoft 1,701.9 1.5 2,203.9 2.7 Others 1,018.1 0.9 1,991.3 2.5 Total 115,185.4 100 81,132.6 10 [출처] 가트너Copyright ⓒ2011 Limepaper, Inc. All rights reserved. 5

Features 03 1. Lock screen > Face recognition • 얼굴 인식 잠금해제는 영역 안에 얼굴을 위치시키면 인식을 하고 다음 단계로 넘어간다. • 얼굴 인식 잠금해제 방식의 경우 100% 성공되지 않기 때문에 패턴 또는 PIN 방식의 백업 잠금 옵션을 제공한다. • 얼굴 인식을 통해 잠금해제시 얼굴 인식 실패시 바로 패턴 또는 PIN 방식으로 넘어간다. • 사진은 얼굴로 인식하지 않는다.Copyright ⓒ2011 Limepaper, Inc. All rights reserved. 11

Features 03 4. Widgets • 위젯 추가 방식은 어플리케이션 shortcut 추가 방식과 동일하게 변경 • 위젯 화면에서 미리보기를 제공 • 위젯을 long tap시 크기 변경 모드로 변경된다. • 모든 위젯이 크기 변경이 되지는 않고 예제 화면과 같이 정보를 표시하는 위젯 종류에 크기 변경이 가능한 타입으로 위젯을 구성하는 편이 좋다.Copyright ⓒ2011 Limepaper, Inc. All rights reserved. 14

Features 03 5. Notification • 설정 메뉴 제공 • Notification 항목의 경우 좌측에 이미지 또는 아이콘이 표시된다. • Notification 항목을 좌/우로 flick하면 바로 notification 영역에서 제거가 가능하다. • 슬라이드 잠금 해제인 경우 잠금화면에서 notification 영역에 접근이 가능하다.Copyright ⓒ2011 Limepaper, Inc. All rights reserved. 15

Features 03 6. Main button • 메인 버튼은 Back/Home/Multi-tasking 버튼으로 구성 • 카메라 이미지 뷰어와 같이 전체 화면으로 사용하는 경우에는 세번째 화면과 같이 표시(이러한 방식 사용은 화면 전체를 사용하는 느낌 을 제공하기 위한 것이라 추측) • 동영상 재생과 같은 화면 전체를 사용하는 화면에서는 메인 버튼 영역이 사라진다.Copyright ⓒ2011 Limepaper, Inc. All rights reserved. 16

Features 03 7. Applications UI > Action bar • 액션바의 경우 up 네비게이션, 타이틀/어플리케이션 아이콘, 화면과 관련된 메뉴, 그리고 메뉴(이전 버전의 메뉴 버튼) 기능을 포함한 다. • 액션바에 위치하는 기능의 경우 특정 항목에 종속적인 기능은 포함되지 않는다. (선택 모드가 따로 존재) • 가로 화면에서는 액션바의 액션 아이템 개수가 증가하거나 label이 표시된다.Copyright ⓒ2011 Limepaper, Inc. All rights reserved. 17

Features 03 7. Applications UI > Action bar > Split action bar • 적정한 수의 액션 아이템을 표시하기 위해 액션바를 split한다. • 가로 화면에서는 하단 액션 아이템이 상단에 표시되며 아이템의 개수가 줄어드는 경우도 생긴다.Copyright ⓒ2011 Limepaper, Inc. All rights reserved. 18

Features 03 7. Applications UI > Action bar > Up navigation • 허니콤 이후 액션 바 영역에 up navigation이 추가되었으며 back 버튼과 달리 동일 어플리케이션의 홈 화면 또는 구조적으로 상위 화 면으로 이동한다. • 현재 아이스크림 샌드위치에 탑재된 기본 어플리케이션 중 Up navigation이 적용되지 않은 부분(settings)과 아이콘은 표시되지 않지 만 up navigation이 동작하는 경우가 있으나 기본적으로 아이콘 또는 타이틀 좌측에 < 표시가 되어야 up navigation으로 동작하는 것 이 맞다. • 화면 가장 우측은 up navigation과 back navigation의 차이를 보여주는 것으로 구글 안드로이드 개발자 사이트에서 확인할 수 있다.Copyright ⓒ2011 Limepaper, Inc. All rights reserved. 19

Features 03 7. Applications UI > Action bar > Selection mode • 특정 항목이 선택된 경우에는 액션 바 영역은 선택 모드로 변경된다. • 선택 모드 진입은 Long tap touch interaction을 통해 가능하다.(Touch interaction에서 long tap을 통해 context popup을 띄우는 방 식은 지양해야 한다.) • 는 확인 버튼을 의미한다. • 화면 타이틀이 표시되는 영역에는 일반적으로 항목이 선택된 개수가 표시되는데 어플리케이션에 따라 포맷은 다르다.(UI 디자인시 frame만 맞추고 구성 요소는 개인의 판단에 따라 적용하면 된다.) • 하단에 액션바가 있는 경우 선택모드에서도 동일하게 하단 액션바를 사용한다.Copyright ⓒ2011 Limepaper, Inc. All rights reserved. 20

Features 03 7. Applications UI > Action bar > Navigation tab&Dropdown list Type 1 Type2 • 액션바에서 동일한 레벨의 화면을 제공하는 방식은 다음과 같이 2가지의 경우로 제공된다. • 첫 번째 방식은 navgation tab을 사용하는 경우이다. ‘All apps’ 화면을 제외한 모든 화면에서 탭을 제외한 다른 기능이 포함되지 않는 다. • 액션 아이템이 필요한 경우에는 split action bar 방식을 사용한다. • 탭 항목이 적은 경우(일반적으로 3개 이하) 또는 탭 개수의 변동이 없는 경우에 사용한다. • 두 번째 방식은 dropdown list를 사용하는 경우이다. • 액션 아이템이 필요한 경우, 액션 아이템 개수에 따라 split action bar 방식을 사용한다. • 제공해야 하는 화면의 개수가 많은 경우 또는 가변적일 경우 이러한 방식을 사용한다. • 액션바 타이틀 영역 우측에  인디케이터가 있는 경우에 dropdown list를 의미한다.Copyright ⓒ2011 Limepaper, Inc. All rights reserved. 21

Features 03 7. Applications UI > Action bar > Navigation tab&Dropdown list > Landscape mode • 화면 성격에 따라 가로 화면에서는 navigation tab이 dropdown list로 사용되는 경우가 있다.Copyright ⓒ2011 Limepaper, Inc. All rights reserved. 22

Features 03 7. Applications UI > Action bar > Menu • 버튼이 사라지고 하단 메인 버튼 영역이 3개로 줄면서 이전 Menu 버튼은 액션바 끝에 위치한다. • Menu의 경우 아이콘이 없는 리스트 형식으로 변경 • 하위 버전의 경우 하단 메인 버튼 영역의 우측 끝에 위치한다.Copyright ⓒ2011 Limepaper, Inc. All rights reserved. 23

Features 03 7. Applications UI > Action bar > Menu > Exception • 액션 바가 탭으로 구성되어 있고 하단에 액션바를 위치할 수 없거나 액션바가 없는 경우에는 예외적으로 메뉴 위치는 화면 레이아웃을 고려하여 제공된다.Copyright ⓒ2011 Limepaper, Inc. All rights reserved. 24

Features 03 7. Applications UI > Layout > Magazine • 많은 어플리케이션에서 사용하고 있지 않지만 안드로이드 4.0부터는 리스트, 그리드가 아닌 매거진 레이아웃이 적용 • 최근 출시되는 어플리케이션의 경우 이미지를 적극 활용한 매거진 레이아웃을 사용하는 추세Copyright ⓒ2011 Limepaper, Inc. All rights reserved. 25

Features 03 7. Applications UI > Specific mode • 추가, 편집 등의 특정 모드에서 상단 또는 하단에 현재 task를 종료하는 버튼이 위치한다. • 팝업과 동일하게 positive 버튼이 우측에 위치한다. • 편집의 경우 취소가 불필요한 경우에는 선택 모드와 유사한 방식으로 버튼을 제공한다.Copyright ⓒ2011 Limepaper, Inc. All rights reserved. 26

Features 03 7. Applications UI > Context menu • 아이템이 하나의 기능만 하는 경우에는 기존과 동일한 방식을 사용한다. • 한가지 이상의 기능을 제공하는 경우  인디케이터가 표시된다.(기존의 Long tap을 통한 컨텍스트 메뉴 방식에서 변경된 사항) • 컨텍스트 메뉴의 경우 용도에 따라 리스트 타입을 사용하기도 하고 전혀 다른 레이아웃을 사용할 수 있다.Copyright ⓒ2011 Limepaper, Inc. All rights reserved. 28

Features 03 7. Applications UI > Context menu/action bar/Menu > List • 액션 바, 메뉴, 컨텍스트 메뉴의 리스트의 겨우 타이틀 영역은 제공하지 않는다. • 컨텍스트 메뉴의 경우 이전 버전까지는 아이템의 텍스트가 타이틀 영역에 표시 • 항목이 많은 경우 항목 중 일부만 노출 시키고 확장이 가능하다. • 메뉴 또는 컨텍스트 메뉴 리스트의 경우 특정 메뉴의 on/off를 표시 가능하다. • 화면이 회전 되었을 때에도 리스트는 사라지지 않고 유지된다.Copyright ⓒ2011 Limepaper, Inc. All rights reserved. 29

Features 03 7. Applications UI > Context menu/action bar/Menu > List > Confirm • 삭제와 같이 사용자의 확인이 필요한 경우 팝업을 사용하지 않고 리스트를 사용(iPad와 유사) • 팝업으로 삭제를 해야 하는 경우와 그렇지 않은 경우가 따로 있지 않지만 전체적인 어플리케이션 UI의 상황을 고려하여 팝업 또는 리스 트 confirm 방식을 선택하여 사용 • 무조건 둘 중 하나만 사용하는 것보다 화면 특성에 따라 사용 하는 것을 권장Copyright ⓒ2011 Limepaper, Inc. All rights reserved. 30

Features 03 7. Applications UI > Popup • 모달 팝업의 경우 타이틀/컨텐츠/팝업 영역으로 구분된다. • 타이틀과 버튼은 생략 가능하다. • 2 버튼의 경우 우측에 Positive button이 위치한다.(이전 버전은 좌측에 위치) • 이전 버전과 다르게 팝업 위에 팝업을 제공하는 방식은 지양하고 이러한 상황에서는 이전 팝업을 전체 화면으로 제공Copyright ⓒ2011 Limepaper, Inc. All rights reserved. 31

Features 03 8. Touch interaction > Left/Right swipe > Tab • 액션바에 type1의 탭으로 구성되어 있거나 메인 컨텐츠 영역이 탭 방식(우측 화면의 경우 매거진 타입의 탭)으로 되어 있는 경우 좌/우 flick을 통해 화면 전환이 가능 • 이런 방식은 갤러리 상세 화면을 제외한 다른 화면에서 사용하지 않았었으나 최근 들어 좌/우 flick을 통한 화면 전환을 많이 도 입하는 추세Copyright ⓒ2011 Limepaper, Inc. All rights reserved. 32

Features 03 8. Touch interaction > Left/Right swipe > 그 외 • Notification, Multi-tasking, 브라우저의 탭 화면에서 좌/우 flick을 하면 해당 항목을 제거 또는 삭제 • 시스템에서 제공하는 경우를 제외하고 좌/우 flick을 통해 아이템을 삭제하는 방식은 권장하지 않는다. 다만 삭제되는 아이템이 원본이 아닌 경우에는 동일한 방식으로 쉽게 삭제하는 방식을 적용하는 것은 허용 가능하다.Copyright ⓒ2011 Limepaper, Inc. All rights reserved. 33

Features 03 8. Touch interaction > Long tap • 기존 버전과 다르게 long tap은 항목 선택하는 interaction으로 변경(기존에는 컨텍스트 메뉴를 띄우는 interaction) • 몇몇 어플리케이션에서는 기존과 동일하게 컨텍스트 메뉴를 띄우기도 하지만 이 부분은 적용하지 않고 선택 모드로 진입하는 것으로 동작하게 UI를 설계해야 한다. • 선택모드가 없는 경우, long tap은 tap과 동일하게 동작하도록 UI를 설계해야 한다. • 단, 홈스크린에서 위젯과 shortcut은 제외 • 어플리케이션 화면이 홈스크린의 위젯이나 shortcut과 유사한 상황인 경우 long tap을 통해 특정 모드로 진입하도록 UI를 설계 하는 것은 가능하나 수정과 같이 화면이 변경되는 것은 지양Copyright ⓒ2011 Limepaper, Inc. All rights reserved. 34

Features 03 8. Touch interaction > Long tap > Text • Text 부분은 따로 이야기를 해도 되지만 touch interaction 부분에 추가 • Text selection이 가능한 텍스트 영역을 long tap하게 되면 단어 단위로 단어가 선택되고 text selection 모드로 변경된다. • 수정 가능한 텍스트를 선택한 경우 : 모두선택/잘라내기/복사/붙여넣기 • 수정이 불가한 텍스트를 선택한 경우 : 모두선택/복사/공유/찾기/웹 검색Copyright ⓒ2011 Limepaper, Inc. All rights reserved. 35

Features 03 9. Settings • 설정 화면에서 새로 추가된 on/off와 기존의 check/uncheck가 혼합되어 사용 • on/off는 상위 레벨에서 사용자가 봤을 때 스위치 on/off와 같이 특정 기능을 키거나 끌 때 사용 • Check/uncheck는 on/off 상황을 제외한 일반적인 상황에서 사용 • 설정 화면의 경우 이전 버전과 다른 레이아웃과 UI component를 사용하지만 아직까지는 복잡하고 산만하며 일반 사용자가 쉽게 설정 과 관련된 기능을 사용하는데 있어 진입 장벽이 낮은 편이 아님 • 데이터 사용량의 경우 interactive한 방식으로 범위를 설정할 수 있는 UI를 제공Copyright ⓒ2011 Limepaper, Inc. All rights reserved. 36

LIMEPAPER는 Mobile Computing분야와 Ubiquitous Computing 분야에서 선도적인 기술을 통해 혁신적이고 풍부한 사용자 경험을 창출하고자 설립된 UX 디자인 전문회사입니다. We create the new digital media experiences and propose a new standard of interaction designs for Mobile + Ubiquitous environments.Copyright ⓒ2011 Limepaper, Inc. All rights reserved. 37

http://blog.lime-paper.com	271
http://1370.me	264
http://www.hanrss.com	13
http://heyoom.tistory.com	11
http://cooing.tistory.com	9
http://flavors.me	4
http://lime-paper.tistory.com	1
http://a0.twimg.com	1
http://webcache.googleusercontent.com	1
http://www.1370.me	1

아이스크림 샌드위치(Android 4.0) UI Review

by delver on Jan 04, 2012

Accessibility

Categories

Upload Details

Usage Rights

10 Embeds 576

Statistics

아이스크림 샌드위치(Android 4.0) UI Review Presentation Transcript