Android design guideline overview

2,127 views
1,923 views

Published on

안드로이드 개발 문서에 있는 디자인 섹션을 간단하게 한국어 슬라이드로 정리하였습니다.
교육자료 용도로 제작되어 설명이 부족할 수 있으니 http://developer.android.com/design/를 읽어보세요

Published in: Technology
0 Comments
12 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
2,127
On SlideShare
0
From Embeds
0
Number of Embeds
1
Actions
Shares
0
Downloads
71
Comments
0
Likes
12
Embeds 0
No embeds

No notes for slide
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • Android design guideline overview

    1. 1. Android DesignGuideline Overview
    2. 2. UI Overview
    3. 3. Home, All Apps, and Recents
    4. 4. Home Screen• 안드로이드의 홈화면• 사용자들이 커스터마이즈 할 수 있는 공간• 앱 단축아이콘, 위젯, 폴더 등이 위치 해있다• 자주사용하는 아이콘을 하단에 지정 할수 있다
    5. 5. All Apps Screen• Android에 설치되어있는 모든 앱과 위젯을 보여주는 화면• 사용자는 앱과 위젯의 위치를 임의로 변경할 수 있다.
    6. 6. Recents Screen• 최근 사용한 앱을 보여주는 화면• 앱간의 이동을 용이하게 하는 기능을 제공한다• 탭하여 앱으로 이동할 수 있고 스와이 프하여 제거할 수 있다
    7. 7. System Bars
    8. 8. Status Bar• 현재 알림이 좌측에 표시되고 배터리, 신호감도, 시간 등이 우측에 표시된다• 아래로 드래그하여 자세한 알림 내용을 볼 수 있다 Status Bar
    9. 9. Navigation Bar Navigation Bar• 하드웨어 버튼들을 대체하는 버튼들을 표시하는 바• Android 4.0에서 추가되었다• 하드웨어 버튼이 없는 휴대폰에서 표시된다
    10. 10. Combined Bar Combined Bar• 태블릿에선 Status Bar와 Navigation Bar가 하나로 합쳐 져 하단에 표시된다
    11. 11. Notifications• Notification은 유저가 어디에서 나 확인할 수 있는 짧은 메시지 이다• 주로 업데이트, 알림, 중요한 정 보를 표시한다• Status Bar를 아래로 드래그하여 Notification Drawer를 열 수 있으 며 Notification을 터치하면 연관 된 앱을 실행한다
    12. 12. Notifications• Notification은 연관된 자세 한 내용을 포함할 수 있다.• 일반적으로 한줄의 제목과 한줄의 메시지를 포함한다• 제목과 메시지를 포함하여 총 두줄의 레이아웃을 권 장한다• 필요시 세번째 줄을 추가 할 수 있다
    13. 13. Common App UI
    14. 14. Main Action Bar• 앱의 가장 기초가되는 Bar• 앱의 네비게이팅(이동경로)과 화면의 계층을 관리한다• 가장 중요한 기능들을 표시한다 Main Action Bar
    15. 15. View Control• 사용자가 앱이 제공하는 여러가지 화면에 접근할 수 있도록 한다• 각 화면은 대체적으로 각각 다르게 정렬된 데이터를 보여주거나 서로 다른 기능을 제공한다 View Control
    16. 16. View Control• 사용자가 앱이 제공하는 여러가지 화면에 접근할 수 있도록 한다• 각 화면은 대체적으로 각각 다르게 정렬된 데이터를 보여주거나 서로 다른 기능을 제공한다 View Control
    17. 17. Content Area Content Area• 앱의 주 내용이 표시되는 곳
    18. 18. Split Action Bar Split Action Bar• 여러가지 기능을 하는 버튼들이 위치한 Bar 이다• Main Action Bar의 하단 또는 App의 하단에 위치해있다• 위 예시에서는 Main Bar에 포함되지 못한 중요한 기능 들을 하단 Split Bar에 위치하였다
    19. 19. Style
    20. 20. Devices & Displays
    21. 21. Devices & Displays안드로이드의 디바이스와 화면은 매우 다양하다 그러므로 이에 따른 다양한 대응이 필요하다
    22. 22. 1. 유연하게다양한 너비와 높이에 적용할 수 있도록 레이아웃을 늘이거나 줄일 수 있게 설계해야 한다
    23. 23. 1. 유연하게다양한 너비와 높이에 적용할 수 있도록 레이아웃을 늘이거나 줄일 수 있게 설계해야 한다
    24. 24. 1. 유연하게다양한 너비와 높이에 적용할 수 있도록 레이아웃을 늘이거나 줄일 수 있게 설계해야 한다
    25. 25. 1. 유연하게다양한 너비와 높이에 적용할 수 있도록 레이아웃을 늘이거나 줄일 수 있게 설계해야 한다
    26. 26. 1. 유연하게다양한 너비와 높이에 적용할 수 있도록 레이아웃을 늘이거나 줄일 수 있게 설계해야 한다
    27. 27. 1. 유연하게다양한 너비와 높이에 적용할 수 있도록 레이아웃을 늘이거나 줄일 수 있게 설계해야 한다
    28. 28. 1. 유연하게다양한 너비와 높이에 적용할 수 있도록 레이아웃을 늘이거나 줄일 수 있게 설계해야 한다
    29. 29. 2. 효과적으로큰 화면의 디바이스의 경우 여유공간의 이점을 사용해야 한다. 여러 요소가 들어간 화면을구성하면 화면 이동을 간편하게 하고 많은 내 용을 보여줄 수 있다
    30. 30. 3. 다양하게서로 다른 DPI(화면 밀집도)를 위한 리소스를제공하면 어떤 기기에서도 당신의 App은 훌륭 게 보일것이다 (MDPI를 Base로 정하여 작업한다)
    31. 31. Themes Holo Light with darkHolo Light Holo Dark action bars
    32. 32. Touch Feedback사용자에게 시각적인 피드백을 줌으로써 App이 사용자의 입력에 “반응한다”는것을 알려줄 수 있다
    33. 33. States 기본적인 색상 다른 색으로 채운다 다른 색으로 50% 채운다 기본적인 색상을 30% 채운다 Focused의 30%로 채운다
    34. 34. Communication 점점 흐려진다 =UI 구성요소들이 스와이프, 드래그와 같은 다양한 제스처에 반응하게 하면 사용자들은 어떤 동작을 하게될지 쉽게 예상할 수 있 다
    35. 35. Boundaries 스크롤 가능한 UI 구성요소에서 더이 상 스크롤 하지 못하는 부분에 도달 했을 때 그에 대한 피드백을 제공해 야 한다
    36. 36. Metrics and Grids 디바이스는 화면의 다양한 화면 크기뿐만 아니라다양한 DPI(화면 밀집도)를 가지고있다. 리소스 제작을 쉽게하기 위하여 Size Bucket과 Density Bucket으로 디바 이스를 구분한다.
    37. 37. DP (DIP)DP는 DPI의 다양성에 영향을 받지않는 측량 단위로 다음과 같이 계 산한다. dp = px * (160/density)
    38. 38. Size Buckets 안드로이드 디바이스는 600dp 미만은Handset, 600dp 이상은 Tablet 으로 정의한다
    39. 39. Density Buckets LDPI MDPI HDPI XHDPIDPI 120dpi 160dpi 240dpi 320dpi
    40. 40. 48dp Rhythm터치 가능한 UI 컴포넌트의 크기는 48dp 이상이어야 한다
    41. 41. Why 48dp? 48dp ≒ 9mm터치스크린에서 권장되는 터치 가능영역의 사이즈는 7mm ~ 10mm이다
    42. 42. Mind The Gaps각 UI 구성요소간의 거리는 8dp가 적당하다
    43. 43. Examples
    44. 44. Typography 구글은 볼드, 이탤릭 등을 지 원하는 폰트인 Roboto를 안드 로이드의 기본 폰트로 채택, 무료로 배포하고 있다. 삼성 제품 등 일부 안드로이드 디 바이스는 기본 폰트가 변경되 어있어 이점에 주의하여 디자 인해야 한다.
    45. 45. Default type colors안드로이드의 UI는 다음과 같은기본 폰트 색상 스타일을 가지 고 있다. Text Color Primary, Text Color Secondary 밝은 테마의 색상으로는Text Color Primary Inverse, Text Color Secondary Inverse
    46. 46. Iconography
    47. 47. Launcher디바이스에서 런처 아이콘의 사이즈는 48dp이며 구글 플레이의 아이 콘 사이즈는 512x512px이다
    48. 48. Style3D로 정면을 기준으로 살짝 위 에서 바라본 모양으로 디자인 한다
    49. 49. Action Bar안드로이드에서 기본적으로 제공하는 Action Bar Icon의 사이즈는 32x32dp 이다. 전체 사이즈는32x32dp이지만 실제 이미지 사이즈는 24x24dp이 다.
    50. 50. Style• 픽토그래픽으로 평평 하고, 너무 자세하지 않으며 부드러운 곡면 을 가지게 한다• 아이콘이 얇으면 45° 기울여 가득차 보이게 한다• 두께와 빈 공간은 2dp 이상이 되어야 한다
    51. 51. Colors색상코드 Enabled Disabled 60% 30%#333333 Opacity Opacity 80% 30%#FFFFFF Opacity Opacity
    52. 52. Notification Icons• 알림 아이콘의 사이 즈는 24x24dp이다• 아이콘의 색상은 흰 색으로한다
    53. 53. 9-Patch• 이미지의 크기가 늘어 나거나 줄어들 때 사 용• Stretchable Stretchable 영역과 Padding 영역을 지정하 여 이미지가 깨지지 Padding 않도록 한다• 영역 지정엔 1px의 선 으로 표현한다

    ×