아이스크림 샌드위치(android 4.0) ui review

[Limepaper Research]

Android Icecream Sandwich UI

2012.01

Copyright 2011 Limepaper, Inc. All rights reserved.ⓒ

2

02

H/W

01

Overview

03

UI Features

Contents


3

01

OverviewCopyright 2011 Limepaper, Inc. All rights reserved.ⓒ

01

4

OverviewAndroid 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. : 삼성전자 , 구글 합작 안드로이드폰 ‘갤럭시 넥서스’ 공개

안드로이드 버전 명이 음식 이름인 이유새로운 버전이 나올 때마다 벌이는 축하 파티에서 사용가능한 테마를 모색했기 때문에 버전 명은 디저트 이름으로 발표


01

5

OverviewMarket share

Operating System 3Q11 Units3Q11 Market Share

(%) 3Q10 Units3Q10 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


[ 출처 ] 가트너

http://www.gartner.com/it/page.jsp?id=1848514

6

02

H/WCopyright 2011 Limepaper, Inc. All rights reserved.ⓒ

02

7

H/WGALAXY Nexus > specs


[ 출처 ] Google

http://www.google.com/nexus/

02

8

H/WGALAXY Nexus > Pictures


[ 이미지 출처 ] GSM Arena

http://www.gsmarena.com/

9

03

UI featuresCopyright 2011 Limepaper, Inc. All rights reserved.ⓒ

03

10

Features1. Lock screen

• 기본 슬라이드 잠금해제 방식 변경• 얼굴 인식 잠금해제 방식 추가 (* 어플리케이션 활용 가능 )

• 잠금화면 에서 notification 확인 ( 슬라이드 잠금 방식인 경우에만 가능 )


03

11

Features1. Lock screen > Face recognition

• 얼굴 인식 잠금해제는 영역 안에 얼굴을 위치시키면 인식을 하고 다음 단계로 넘어간다 .

• 얼굴 인식 잠금해제 방식의 경우 100% 성공되지 않기 때문에 패턴 또는 PIN 방식의 백업 잠금 옵션을 제공한다 .

• 얼굴 인식을 통해 잠금해제시 얼굴 인식 실패시 바로 패턴 또는 PIN 방식으로 넘어간다 .

• 사진은 얼굴로 인식하지 않는다 .


03

12

Features2. Home screen

• 기존 버전과 달리 상단에 구글 통합 검색 ( 로컬 + 웹 ) 영역이 고정되어 있다 .

• 폴더 기능이 추가되었다 . 폴더의 경우 홈스크린 영역과 하단 메뉴 영역에 모두 위치할 수 있다 .


03

13

Features3. All apps

• 허니콤과 동일하게 어플리케이션과 위젯 화면이 탭으로 구성• Shortcut 추가 방식은 이전과 동일하나 홈스크린 화면에서 제거 및 앱 정보 메뉴를 제공한다 .


03

14

Features4. Widgets

• 위젯 추가 방식은 어플리케이션 shortcut 추가 방식과 동일하게 변경• 위젯 화면에서 미리보기를 제공• 위젯을 long tap 시 크기 변경 모드로 변경된다 .

• 모든 위젯이 크기 변경이 되지는 않고 예제 화면과 같이 정보를 표시하는 위젯 종류에 크기 변경이 가능한 타입으로 위젯을 구성하는 편이 좋다 .


03

15

Features5. Notification

• 설정 메뉴 제공• Notification 항목의 경우 좌측에 이미지 또는 아이콘이 표시된다 .

• Notification 항목을 좌 / 우로 flick 하면 바로 notification 영역에서 제거가 가능하다 .

• 슬라이드 잠금 해제인 경우 잠금화면에서 notification 영역에 접근이 가능하다 .


03

16

Features6. Main button

• 메인 버튼은 Back/Home/Multi-tasking 버튼으로 구성• 카메라 이미지 뷰어와 같이 전체 화면으로 사용하는 경우에는 세번째 화면과 같이 표시 ( 이러한 방식 사용은 화면 전체를 사용하는 느낌을

제공하기 위한 것이라 추측 )

• 동영상 재생과 같은 화면 전체를 사용하는 화면에서는 메인 버튼 영역이 사라진다 .


03

17

Features7. Applications UI > Action bar

• 액션바의 경우 up 네비게이션 , 타이틀 / 어플리케이션 아이콘 , 화면과 관련된 메뉴 , 그리고 메뉴 ( 이전 버전의 메뉴 버튼 ) 기능을 포함한다 .

• 액션바에 위치하는 기능의 경우 특정 항목에 종속적인 기능은 포함되지 않는다 . ( 선택 모드가 따로 존재 )• 가로 화면에서는 액션바의 액션 아이템 개수가 증가하거나 label 이 표시된다 .


03

18

Features7. Applications UI > Action bar > Split action bar

• 적정한 수의 액션 아이템을 표시하기 위해 액션바를 split 한다 .• 가로 화면에서는 하단 액션 아이템이 상단에 표시되며 아이템의 개수가 줄어드는 경우도 생긴다 .


03

19

Features7. Applications UI > Action bar > Up navigation

• 허니콤 이후 액션 바 영역에 up navigation 이 추가되었으며 back 버튼과 달리 동일 어플리케이션의 홈 화면 또는 구조적으로 상위 화면으로 이동한다 .

• 현재 아이스크림 샌드위치에 탑재된 기본 어플리케이션 중 Up navigation 이 적용되지 않은 부분 (settings) 과 아이콘은 표시되지 않지만 up navigation 이 동작하는 경우가 있으나 기본적으로 아이콘 또는 타이틀 좌측에 < 표시가 되어야 up navigation 으로 동작하는 것이 맞다 .

• 화면 가장 우측은 up navigation 과 back navigation 의 차이를 보여주는 것으로 구글 안드로이드 개발자 사이트에서 확인할 수 있다 .


http://developer.android.com/guide/topics/ui/actionbar.html




03

20

Features7. Applications UI > Action bar > Selection mode

• 특정 항목이 선택된 경우에는 액션 바 영역은 선택 모드로 변경된다 .

• 선택 모드 진입은 Long tap touch interaction 을 통해 가능하다 .(Touch interaction 에서 long tap 을 통해 context

popup 을 띄우는 방식은 지양해야 한다 .)

• 는 확인 버튼을 의미한다 .

• 화면 타이틀이 표시되는 영역에는 일반적으로 항목이 선택된 개수가 표시되는데 어플리케이션에 따라 포맷은 다르다 .(UI 디자인시 frame 만 맞추고 구성 요소는 개인의 판단에 따라 적용하면 된다 .)

• 하단에 액션바가 있는 경우 선택모드에서도 동일하게 하단 액션바를 사용한다 .


03

21

Features7. Applications UI > Action bar > Navigation tab&Dropdown list

• 액션바에서 동일한 레벨의 화면을 제공하는 방식은 다음과 같이 2 가지의 경우로 제공된다 .• 첫 번째 방식은 navgation tab 을 사용하는 경우이다 . ‘All apps’ 화면을 제외한 모든 화면에서 탭을 제외한 다른 기능이 포함되지

않는다 .• 액션 아이템이 필요한 경우에는 split action bar 방식을 사용한다 .• 탭 항목이 적은 경우 ( 일반적으로 3 개 이하 ) 또는 탭 개수의 변동이 없는 경우에 사용한다 .

• 두 번째 방식은 dropdown list 를 사용하는 경우이다 .• 액션 아이템이 필요한 경우 , 액션 아이템 개수에 따라 split action bar 방식을 사용한다 .• 제공해야 하는 화면의 개수가 많은 경우 또는 가변적일 경우 이러한 방식을 사용한다 .• 액션바 타이틀 영역 우측에 인디케이터가 있는 경우에 dropdown list 를 의미한다 .

Type 1 Type2


03

22

Features7. Applications UI > Action bar > Navigation tab&Dropdown list > Landscape mode

• 화면 성격에 따라 가로 화면에서는 navigation tab 이 dropdown list 로 사용되는 경우가 있다 .


03

23

Features7. Applications UI > Action bar > Menu

• 버튼이 사라지고 하단 메인 버튼 영역이 3 개로 줄면서 이전 Menu 버튼은 액션바 끝에 위치한다 .• Menu 의 경우 아이콘이 없는 리스트 형식으로 변경• 하위 버전의 경우 하단 메인 버튼 영역의 우측 끝에 위치한다 .


03

24

Features7. Applications UI > Action bar > Menu > Exception

• 액션 바가 탭으로 구성되어 있고 하단에 액션바를 위치할 수 없거나 액션바가 없는 경우에는 예외적으로 메뉴 위치는 화면 레이아웃을 고려하여 제공된다 .


03

25

Features7. Applications UI > Layout > Magazine

• 많은 어플리케이션에서 사용하고 있지 않지만 안드로이드 4.0 부터는 리스트 , 그리드가 아닌 매거진 레이아웃이 적용• 최근 출시되는 어플리케이션의 경우 이미지를 적극 활용한 매거진 레이아웃을 사용하는 추세


03

26

Features7. Applications UI > Specific mode

• 추가 , 편집 등의 특정 모드에서 상단 또는 하단에 현재 task 를 종료하는 버튼이 위치한다 .• 팝업과 동일하게 positive 버튼이 우측에 위치한다 .• 편집의 경우 취소가 불필요한 경우에는 선택 모드와 유사한 방식으로 버튼을 제공한다 .


03

27

Features7. Applications UI > Quick scroll

• 퀵스크롤을 제공하는 화면의 경우 우측에 스크롤 인디케이터가 항상 표시된다 .• 인덱싱이 가능한 경우에는 인덱스가 표시된다 .


03

28

Features7. Applications UI > Context menu

• 아이템이 하나의 기능만 하는 경우에는 기존과 동일한 방식을 사용한다 .• 한가지 이상의 기능을 제공하는 경우 인디케이터가 표시된다 .( 기존의 Long tap 을 통한 컨텍스트 메뉴 방식에서 변경된 사항 )

• 컨텍스트 메뉴의 경우 용도에 따라 리스트 타입을 사용하기도 하고 전혀 다른 레이아웃을 사용할 수 있다 .


03

29

Features7. Applications UI > Context menu/action bar/Menu > List

• 액션 바 , 메뉴 , 컨텍스트 메뉴의 리스트의 겨우 타이틀 영역은 제공하지 않는다 .• 컨텍스트 메뉴의 경우 이전 버전까지는 아이템의 텍스트가 타이틀 영역에 표시

• 항목이 많은 경우 항목 중 일부만 노출 시키고 확장이 가능하다 .• 메뉴 또는 컨텍스트 메뉴 리스트의 경우 특정 메뉴의 on/off 를 표시 가능하다 .• 화면이 회전 되었을 때에도 리스트는 사라지지 않고 유지된다 .


03

30

Features7. Applications UI > Context menu/action bar/Menu > List > Confirm

• 삭제와 같이 사용자의 확인이 필요한 경우 팝업을 사용하지 않고 리스트를 사용 (iPad 와 유사 )• 팝업으로 삭제를 해야 하는 경우와 그렇지 않은 경우가 따로 있지 않지만 전체적인 어플리케이션 UI 의 상황을 고려하여 팝업 또는 리스트 con-

firm 방식을 선택하여 사용• 무조건 둘 중 하나만 사용하는 것보다 화면 특성에 따라 사용 하는 것을 권장


03

31

Features7. Applications UI > Popup

• 모달 팝업의 경우 타이틀 / 컨텐츠 / 팝업 영역으로 구분된다 .• 타이틀과 버튼은 생략 가능하다 .• 2 버튼의 경우 우측에 Positive button 이 위치한다 .( 이전 버전은 좌측에 위치 )

• 이전 버전과 다르게 팝업 위에 팝업을 제공하는 방식은 지양하고 이러한 상황에서는 이전 팝업을 전체 화면으로 제공


03

32

Features8. Touch interaction > Left/Right swipe > Tab

• 액션바에 type1 의 탭으로 구성되어 있거나 메인 컨텐츠 영역이 탭 방식 ( 우측 화면의 경우 매거진 타입의 탭 ) 으로 되어 있는 경우 좌 / 우 flick 을 통해 화면 전환이 가능• 이런 방식은 갤러리 상세 화면을 제외한 다른 화면에서 사용하지 않았었으나 최근 들어 좌 / 우 flick 을 통한 화면 전환을 많이 도입하는

추세


03

33Copyright 2011 Limepaper, Inc. All rights reserved.ⓒ

Features8. Touch interaction > Left/Right swipe > 그 외

• Notification, Multi-tasking, 브라우저의 탭 화면에서 좌 / 우 flick 을 하면 해당 항목을 제거 또는 삭제• 시스템에서 제공하는 경우를 제외하고 좌 / 우 flick 을 통해 아이템을 삭제하는 방식은 권장하지 않는다 . 다만 삭제되는 아이템이 원본이 아닌

경우에는 동일한 방식으로 쉽게 삭제하는 방식을 적용하는 것은 허용 가능하다 .


03

34

Features8. Touch interaction > Long tap

• 기존 버전과 다르게 long tap 은 항목 선택하는 interaction 으로 변경 ( 기존에는 컨텍스트 메뉴를 띄우는 interaction)

• 몇몇 어플리케이션에서는 기존과 동일하게 컨텍스트 메뉴를 띄우기도 하지만 이 부분은 적용하지 않고 선택 모드로 진입하는 것으로 동작하게 UI 를 설계해야 한다 .

• 선택모드가 없는 경우 , long tap 은 tap 과 동일하게 동작하도록 UI 를 설계해야 한다 .

• 단 , 홈스크린에서 위젯과 shortcut 은 제외• 어플리케이션 화면이 홈스크린의 위젯이나 shortcut 과 유사한 상황인 경우 long tap 을 통해 특정 모드로 진입하도록 UI 를

설계하는 것은 가능하나 수정과 같이 화면이 변경되는 것은 지양


03

35

Features8. Touch interaction > Long tap > Text

• Text 부분은 따로 이야기를 해도 되지만 touch interaction 부분에 추가• Text selection 이 가능한 텍스트 영역을 long tap 하게 되면 단어 단위로 단어가 선택되고 text selection 모드로 변경된다 .

• 수정 가능한 텍스트를 선택한 경우 : 모두선택 /잘라내기 /복사 /붙여넣기• 수정이 불가한 텍스트를 선택한 경우 : 모두선택 /복사 / 공유 /찾기 / 웹 검색


03

36

Features9. Settings

• 설정 화면에서 새로 추가된 on/off 와 기존의 check/uncheck 가 혼합되어 사용• on/off 는 상위 레벨에서 사용자가 봤을 때 스위치 on/off 와 같이 특정 기능을 키거나 끌 때 사용• Check/uncheck 는 on/off 상황을 제외한 일반적인 상황에서 사용

• 설정 화면의 경우 이전 버전과 다른 레이아웃과 UI component 를 사용하지만 아직까지는 복잡하고 산만하며 일반 사용자가 쉽게 설정과 관련된 기능을 사용하는데 있어 진입 장벽이 낮은 편이 아님

• 데이터 사용량의 경우 interactive 한 방식으로 범위를 설정할 수 있는 UI 를 제공


LIMEPAPER 는 Mobile Computing 분야와 Ubiquitous Computing 분야에서 선도적인 기술을 통해 혁신적이고 풍부한 사용자 경험을 창출하고자 설립된 UX 디자인 전문회사입니다 .

We create the new digital media experiences and propose a new standard of interaction designs for Mobile + Ubiquitous environ-

ments.37Copyright 2011 Limepaper, Inc. All rights reserved.ⓒ

Limepaper, Inc.Tel_070-8222-5463Fax_050-5959-5463e-mail_partner@lime-paper.comWeb_www.lime-paper.comAddress_2F, 14 Nonhyeon-ro 38 gil, Gangnam-gu, SEOUL, KOREA

Thank you!본 문서는 ㈜라임페이퍼의 자산입니다 .이 문서를 자유롭게 구독하고 출처를 표기하여 사용 또는 재배포 하실 수 있습니다 . 단 , 문서 내용의 일부만 발췌하여 복사하거나 재사용해서는 안 되며 ,문서 내용의 임의 변경 후 재배포 하실 수 없습니다 .

38Copyright 2011 Limepaper, Inc. All rights reserved.ⓒ

http://cfile1.uf.tistory.com/original/136B84214C7E58F522C625

아이스크림 샌드위치(android 4.0) ui review

Design