안드로이드 UI 컴포넌트, UI 플로우 등등 http://developer.android.com/design/patterns/index.html 사이트를 발췌 정리.

1. Android UI Pattern
안드로이드개발팀, 김상권
realmove@nate.com
13년 3월 29일 금

2. Overview
• 안드로이드 APP을 제작할 때에, 참고할 것들
• UI Components - 이것들을 사용하세요.
• UI Pattern - 흐름은 이렇게
• Pure Android - 안드로이드 스타일 APP
• Missings - 오늘은 생략합니다.
• 아이폰 따라하니 멋이 없지.
가이드를 따라해야, 안드로이드 스타일의 완성.
13년 3월 29일 금

3. Overview
http://developer.android.com/design/index.html
• Building Blocks &
Patterns = 발표내용
• Style 은 디자이너들이
볼만한 내용
• 아이콘, 이미지, 스텐실
등등 다운로드 가능 ➞
디자인 & MockUp시
사용 가능
13년 3월 29일 금

4. UI Components
• Tab • Sliders
• List • Progress/Indicators
• GridList • Switches
• Spinners • Dialogs
• Buttons • Pickers
• TextFields
13년 3월 29일 금

5. Tab w/ ActionBar
13년 3월 29일 금

6. List
: Section Divider & Line Items
13년 3월 29일 금

7. Grid: Overlay 를 쓰면 더 예쁘죠
13년 3월 29일 금

8. Spinners
13년 3월 29일 금

9. Buttons
13년 3월 29일 금

10. TextFields
13년 3월 29일 금

11. SeekBars
13년 3월 29일 금

12. Progress & Indicator
언제 끝날지 알고 있나요?
13년 3월 29일 금

13. Switches
13년 3월 29일 금

14. AlertDialog vs. Toast
= Confirm vs. Acknowledgement
13년 3월 29일 금

15. Dialogs - 이런 입력형도 있어요
13년 3월 29일 금

16. Popup - OK/Cancel 버튼이 없어요
13년 3월 29일 금

17. Pickers
13년 3월 29일 금

18. • And....
• 제공되는 아이콘들, 텍스트 스타일들, 컴포넌
트 스텐실들 등등도 받을 수 있어요.
• http://developer.android.com/design/
downloads/index.html
13년 3월 29일 금

19. Android UI Patterns
• Gestures
• Writing Style
• Navigation & BackStack
• Action Bar
• Confirm vs. Acknowledgement
• Notifications
13년 3월 29일 금

20. Gesture 1/2
•Touch, Long Press, Swipe
13년 3월 29일 금

21. Gesture 2/2
•Drag, Double Touch, Pinch(Open/Close)
• Pull To Refresh? - 일단 구글앱들은 사용하지 않는 것 같아요
• Accessibility 고려: 왠만하면 Touch 로도 조작이 가능하도록.
13년 3월 29일 금

22. Writing Style 1/2
짧게
단순하게
친숙하게
13년 3월 29일 금

23. Writing Style 2/2
중요한 것을 앞으로
필요한 것만
13년 3월 29일 금

24. Back vs. Up 1/2
• iPhone의 Back 버튼이
있는 자리에, Up 이 있어
요.
• Back과 Up 은 달라요
13년 3월 29일 금

25. Back vs. Up 2/2
• Widget, IndicatorBar,
다른앱 실행 등으로 Task
가 변경된 경우
• UP은 언제나 상위 화면
으로 이동하지만, TASK
가 달라질 수 있죠.
• 다른 APP에서 다시 한
번 이동한 경우에는,
TASK가 달라져요.
• 개발자들은 BackStack
이라고 부릅니다.
13년 3월 29일 금

26. ActionBar
1. APP Icon
2. View Control
3. Action Buttons
4. Action Overflow
13년 3월 29일 금

27. Contextual ActionBar
상황에 따라 ActionBar 가 변해요
13년 3월 29일 금

28. Action Provider
똑똑한 ActionButton
13년 3월 29일 금

29. 13년 3월 29일 금

30. 13년 3월 29일 금

31. Confirming & Acknowledgement
= Dialog & Toast
Confirm은 사용자를 방해하지요.
반드시 필요한 경우에만 사용하세요.
13년 3월 29일 금

32. Confirm & Acknowledgement
• 매우매우 심각한 일인가요?
Confirm
• 사용자가 실수로 실행했을 가능
성이 높은가요?
• 심각한가요? Confirm
• 복구 가능한 작업인가요? Ack
with Undo
• 완료 여부를 사용자가 이미 명확
알 수 있나요? Do nothing
(예컨대, 카메라 사용시 셔터음으
로 사용자가 촬영여부를 확인할
수 있는 상황에서는 별도의 conf/
ack 가 불필요)
13년 3월 29일 금

33. Notifications
on JellyBean
PushNoti 가 달라졌어요.
친구 사진을 띄우면, 더 친근감이
느껴지겠죠.
APP Icon 은 오른쪽으로 갔어요.
다양한 기능도 넣을 수 있어요.
13년 3월 29일 금

34. Notifications
on JellyBean
사용자가 확장/축소할
수도 있습니다.
13년 3월 29일 금

35. Notifications
on JellyBean
13년 3월 29일 금

36. Notifications
Bad Examples
• Avoid notifying the user of information that is not directed specifically at them, or
information that is not truly time sensitive. For instance the asynchronous and
undirected updates flowing through a social network generally do not warrant a real
time interruption. For the users that do care about them, allow them to opt-in. 사용자
에게 직접 연관이 없고, 진짜로 시간이 중요한 내용이 아니면 알림을 주지 말아라.
• Don't create a notification if the relevant new information is currently on screen.
Instead, use the UI of the application itself to notify the user of new information
directly in context. For instance, a chat application should not create system
notifications while the user is actively chatting with another user. 새로운 정보를 화면에
표시할 수 있으면, 알림 말고 화면에 표시해라.
• Don't interrupt the user for low level technical operations, like saving or syncing
information, or updating an application, if it is possible for the system to simply take
care of itself without involving the user. 사용자가 몰라도 되는 기술적인 정보를 알려주진
말아라.
• Don't interrupt the user to inform them of an error if it is possible for the application
to quickly recover from the error on its own without the user taking any action. 복구
가능한 에러는 알려주지말고 처리해라.
• Don't create notifications that have no true notification content and merely advertise
your app. A notification should inform the user about a state and should not be
used to merely launch an app. 앱광고 하지 말아라. 알림은 정보를 주어야지 단순하게 앱을
띄우기만 하면 안된다.
• Don't create superfluous notifications just to get your brand in front of users. Such
notifications will only frustrate and likely alienate your audience. The best way to
provide the user with a small amount of updated information and to keep them
engaged with your application is to develop a widget that they can choose to place
on their home screen. 너무 많이 알림을 주지 말아라. 차라리 위젯을 써라.
13년 3월 29일 금

37. Pure Android
• 아이폰 따라하지 마세요. Don't mimic UI elements from other
platforms
• 아이폰 아이콘 쓰지 마세요. Don't carry over platform-specific icons
• 하단탭 쓰지 마세요. Don't use bottom tab bars
• 다른앱에 하드링크 걸지 마세요. Don't hardcode links to other
apps
• 액션바에 [이전]버튼 금지. Don't use labeled back buttons on action
bars
• 라인 오른쪽에 화살표 넣지 마세요. Don't use right-pointing
carets on line items
13년 3월 29일 금

38. 아이폰 따라하지 마세요
• 플랫폼(OS)들은 UI Theme
들은 잘 디자인되었고, 독특
합니다.
• 다른 플랫폼의 UI Theme를
가져오기 보다는, 안드로이드
자체의 UI 컴포넌트들을 사
용하세요.
• 서비스브랜드에 맞게 UI 디
자인을 변경할 때에도, 다른
플랫폼을 흉내내지 마세요.
13년 3월 29일 금

39. 아이폰 아이콘 쓰지 마세요
• 플랫폼(OS)들은 공통적인 기
능(공유,새글,삭제 등등)에 맞
는 고유의 아이콘들을 제공합
니다.
• 다른 플랫폼 앱을 안드로이드
에 포팅할 경우에도, 아이콘
은 안드로이드 것으로 교체하
세요.
13년 3월 29일 금

40. 하단탭 쓰지 마세요
• 안드로이드의 Convention
(규칙,관습)에 의하여,
• 상단에는 Tab 을 배치해, 뷰를
전환할 수 있게 합니다.
• ActionBar 를 상하로 나누어
하단에 Action 들을 배치할
수는 있습니다.
13년 3월 29일 금

41. 다른 앱에 하드링크 걸지 마세요
• Web링크를 보여주려고 브라
우저를 띄우거나, 내용을 공
유하기 위해 SNS/MSG 앱을
띄울 경우,
• 그 앱을 바로 띄우지 말고, 안
드로이드의 Intent API 를 사
용하세요.
• 사용자는 선호하는 APP을 사
용할 수 있게 됩니다.
13년 3월 29일 금

42. 액션바에 [이전]버튼 금지
• 아이폰은 [이전]버튼이 있지
만,
• 안드로이드는
UP(ActionBar)과 Back(Key)
를 같이 제공합니다.
13년 3월 29일 금

43. 오른쪽에 화살표 넣지 마세요.
• 아이폰은 ‘>’기호를 사용해서,
하위 depth 에 상세한 내용이
있다는 것을 표시합니다.
• 플랫폼 일관성을 유지해주세
요.
• 사용자에게 불필요한 궁금증
을 유발하지 말아주세요.
13년 3월 29일 금

44. Missing
• Accessibilities
• Widget
• Multi-Screen : 9-Patch, dp, sp
• Multi-Pane Layout
• Setting & Help
• Backward Compatibility
13년 3월 29일 금

45. 질문과 답변
http://developer.android.com/design/index.html
13년 3월 29일 금