SlideShare ist ein Scribd-Unternehmen logo
1 von 53
Downloaden Sie, um offline zu lesen
Android Design
Guideline Overview
UI Overview
Home, All Apps, and Recents
Home Screen
•   안드로이드의 홈화면

•   사용자들이 커스터마이즈 할 수 있는
    공간

•   앱 단축아이콘, 위젯, 폴더 등이 위치
    해있다

•   자주사용하는 아이콘을 하단에 지정
    할수 있다
All Apps Screen

•   Android에 설치되어있는 모든 앱과
    위젯을 보여주는 화면

•   사용자는 앱과 위젯의 위치를 임의로
    변경할 수 있다.
Recents Screen

•   최근 사용한 앱을 보여주는 화면

•   앱간의 이동을 용이하게 하는 기능을
    제공한다

•   탭하여 앱으로 이동할 수 있고 스와이
    프하여 제거할 수 있다
System Bars
Status Bar
•   현재 알림이 좌측에 표시되고 배터리, 신호감도, 시간
    등이 우측에 표시된다

•   아래로 드래그하여 자세한 알림 내용을 볼 수 있다



                        Status Bar
Navigation Bar

                          Navigation Bar




•   하드웨어 버튼들을 대체하는 버튼들을 표시하는 바

•   Android 4.0에서 추가되었다

•   하드웨어 버튼이 없는 휴대폰에서 표시된다
Combined Bar
                                        Combined Bar




•   태블릿에선 Status Bar와 Navigation Bar가 하나로 합쳐
    져 하단에 표시된다
Notifications
•   Notification은 유저가 어디에서
    나 확인할 수 있는 짧은 메시지
    이다

•   주로 업데이트, 알림, 중요한 정
    보를 표시한다

•   Status Bar를 아래로 드래그하여
    Notification Drawer를 열 수 있으
    며 Notification을 터치하면 연관
    된 앱을 실행한다
Notifications
•   Notification은 연관된 자세
    한 내용을 포함할 수 있다.

•   일반적으로 한줄의 제목과
    한줄의 메시지를 포함한다

•   제목과 메시지를 포함하여
    총 두줄의 레이아웃을 권
    장한다

•   필요시 세번째 줄을 추가
    할 수 있다
Common App UI
Main Action Bar
•   앱의 가장 기초가되는 Bar

•   앱의 네비게이팅(이동경로)과 화면의 계층을 관리한다

•   가장 중요한 기능들을 표시한다


                      Main Action Bar
View Control
•   사용자가 앱이 제공하는 여러가지 화면에 접근할 수
    있도록 한다

•   각 화면은 대체적으로 각각 다르게 정렬된 데이터를
    보여주거나 서로 다른 기능을 제공한다




               View Control
View Control
•   사용자가 앱이 제공하는 여러가지 화면에 접근할 수
    있도록 한다

•   각 화면은 대체적으로 각각 다르게 정렬된 데이터를
    보여주거나 서로 다른 기능을 제공한다




               View Control
Content Area


                       Content Area




•   앱의 주 내용이 표시되는 곳
Split Action Bar
                           Split Action Bar




•   여러가지 기능을 하는 버튼들이 위치한 Bar 이다

•   Main Action Bar의 하단 또는 App의 하단에 위치해있다

•   위 예시에서는 Main Bar에 포함되지 못한 중요한 기능
    들을 하단 Split Bar에 위치하였다
Style
Devices & Displays
Devices & Displays

안드로이드의 디바이스와 화면은 매우 다양하다
 그러므로 이에 따른 다양한 대응이 필요하다
1. 유연하게


다양한 너비와 높이에 적용할 수 있도록 레이
아웃을 늘이거나 줄일 수 있게 설계해야 한다
1. 유연하게


다양한 너비와 높이에 적용할 수 있도록 레이
아웃을 늘이거나 줄일 수 있게 설계해야 한다
1. 유연하게


다양한 너비와 높이에 적용할 수 있도록 레이
아웃을 늘이거나 줄일 수 있게 설계해야 한다
1. 유연하게


다양한 너비와 높이에 적용할 수 있도록 레이
아웃을 늘이거나 줄일 수 있게 설계해야 한다
1. 유연하게


다양한 너비와 높이에 적용할 수 있도록 레이
아웃을 늘이거나 줄일 수 있게 설계해야 한다
1. 유연하게


다양한 너비와 높이에 적용할 수 있도록 레이
아웃을 늘이거나 줄일 수 있게 설계해야 한다
1. 유연하게


다양한 너비와 높이에 적용할 수 있도록 레이
아웃을 늘이거나 줄일 수 있게 설계해야 한다
2. 효과적으로



큰 화면의 디바이스의 경우 여유공간의 이점
을 사용해야 한다. 여러 요소가 들어간 화면을
구성하면 화면 이동을 간편하게 하고 많은 내
       용을 보여줄 수 있다
3. 다양하게


서로 다른 DPI(화면 밀집도)를 위한 리소스를
제공하면 어떤 기기에서도 당신의 App은 훌륭
           게 보일것이다
   (MDPI를 Base로 정하여 작업한다)
Themes
                         Holo Light with dark
Holo Light   Holo Dark
                             action bars
Touch Feedback




사용자에게 시각적인 피드백을 줌으로써 App이 사
용자의 입력에 “반응한다”는것을 알려줄 수 있다
States
  기본적인 색상


  다른 색으로 채운다


  다른 색으로 50% 채운다


  기본적인 색상을 30% 채운다


  Focused의 30%로 채운다
Communication
                     점점 흐려진다
                         =




UI 구성요소들이 스와이프, 드래
그와 같은 다양한 제스처에 반응
하게 하면 사용자들은 어떤 동작
을 하게될지 쉽게 예상할 수 있
        다
Boundaries

  스크롤 가능한 UI 구성요소에서 더이
  상 스크롤 하지 못하는 부분에 도달
  했을 때 그에 대한 피드백을 제공해
          야 한다
Metrics and Grids

 디바이스는 화면의 다양한 화면 크기뿐만 아니라
다양한 DPI(화면 밀집도)를 가지고있다. 리소스 제작을 쉽게
하기 위하여 Size Bucket과 Density Bucket으로 디바
               이스를 구분한다.
DP     (DIP)




DP는 DPI의 다양성에 영향을 받지
않는 측량 단위로 다음과 같이 계
          산한다.
   dp = px * (160/density)
Size Buckets



  안드로이드 디바이스는 600dp 미만은
Handset, 600dp 이상은 Tablet 으로 정의한다
Density Buckets

      LDPI     MDPI     HDPI     XHDPI


DPI   120dpi   160dpi   240dpi   320dpi
48dp Rhythm




터치 가능한 UI 컴포넌트의 크기는 48dp 이상이어야 한다
Why 48dp?

    48dp ≒ 9mm
터치스크린에서 권장되는 터치 가능
영역의 사이즈는 7mm ~ 10mm이다
Mind The Gaps




각 UI 구성요소간의 거리는 8dp가 적당하다
Examples
Typography
    구글은 볼드, 이탤릭 등을 지
    원하는 폰트인 Roboto를 안드
    로이드의 기본 폰트로 채택,
    무료로 배포하고 있다. 삼성
    제품 등 일부 안드로이드 디
    바이스는 기본 폰트가 변경되
    어있어 이점에 주의하여 디자
    인해야 한다.
Default type colors
안드로이드의 UI는 다음과 같은
기본 폰트 색상 스타일을 가지
            고 있다.
 Text Color Primary, Text Color
           Secondary
   밝은 테마의 색상으로는
Text Color Primary Inverse, Text
    Color Secondary Inverse
Iconography
Launcher



디바이스에서 런처 아이콘의 사이
즈는 48dp이며 구글 플레이의 아이
  콘 사이즈는 512x512px이다
Style



3D로 정면을 기준으로 살짝 위
 에서 바라본 모양으로 디자인
        한다
Action Bar




안드로이드에서 기본적으로 제공하는 Action Bar
 Icon의 사이즈는 32x32dp 이다. 전체 사이즈는
32x32dp이지만 실제 이미지 사이즈는 24x24dp이
                다.
Style
•   픽토그래픽으로 평평
    하고, 너무 자세하지
    않으며 부드러운 곡면
    을 가지게 한다

•   아이콘이 얇으면 45°
    기울여 가득차 보이게
    한다

•   두께와 빈 공간은 2dp
    이상이 되어야 한다
Colors

색상코드 Enabled      Disabled
         60%       30%
#333333
        Opacity   Opacity
         80%       30%
#FFFFFF
        Opacity   Opacity
Notification Icons

• 알림 아이콘의 사이
 즈는 24x24dp이다

• 아이콘의 색상은 흰
 색으로한다
9-Patch
•   이미지의 크기가 늘어
    나거나 줄어들 때 사
    용

•
                      Stretchable
    Stretchable 영역과
    Padding 영역을 지정하
    여 이미지가 깨지지               Padding

    않도록 한다

•   영역 지정엔 1px의 선
    으로 표현한다

Weitere ähnliche Inhalte

Ähnlich wie Android design guideline overview

2013 10 guide_to_mobile_appui_20131028
2013 10 guide_to_mobile_appui_201310282013 10 guide_to_mobile_appui_20131028
2013 10 guide_to_mobile_appui_20131028Yun Jin Kim
 
iOS Human Interface Guidlines #3_SYS4U
iOS Human Interface Guidlines #3_SYS4UiOS Human Interface Guidlines #3_SYS4U
iOS Human Interface Guidlines #3_SYS4Usys4u
 
Windows8 Modern UI Style Summary
Windows8 Modern UI Style SummaryWindows8 Modern UI Style Summary
Windows8 Modern UI Style SummaryJack M Rhee
 
[2016널리세미나] 모바일 접근성 지침 Ato z 20160405
[2016널리세미나] 모바일 접근성 지침 Ato z 20160405[2016널리세미나] 모바일 접근성 지침 Ato z 20160405
[2016널리세미나] 모바일 접근성 지침 Ato z 20160405Nts Nuli
 
iOS Human Interface Guidlines #13_SYS4U
iOS Human Interface Guidlines #13_SYS4UiOS Human Interface Guidlines #13_SYS4U
iOS Human Interface Guidlines #13_SYS4Usys4u
 
Innovative Communicator
Innovative CommunicatorInnovative Communicator
Innovative CommunicatorSeongsoek Shin
 
허니컴 태블릿 디자인
허니컴 태블릿 디자인허니컴 태블릿 디자인
허니컴 태블릿 디자인Sang-min Lee
 
2011년 UX 분석과 2012년 UX 통찰
2011년 UX 분석과 2012년 UX 통찰2011년 UX 분석과 2012년 UX 통찰
2011년 UX 분석과 2012년 UX 통찰Billy Choi
 
스마트폰기초 2015
스마트폰기초 2015스마트폰기초 2015
스마트폰기초 2015Taekyoung Kim
 
지니빌더 솔루션 상품제안서
지니빌더 솔루션 상품제안서지니빌더 솔루션 상품제안서
지니빌더 솔루션 상품제안서crossys
 
Flutter로 글로벌앱 출시를 위한 꿀팁 - Droidknights2020
Flutter로 글로벌앱 출시를 위한 꿀팁 - Droidknights2020Flutter로 글로벌앱 출시를 위한 꿀팁 - Droidknights2020
Flutter로 글로벌앱 출시를 위한 꿀팁 - Droidknights2020Bansook Nam
 
2016276_심윤서.pdf
2016276_심윤서.pdf2016276_심윤서.pdf
2016276_심윤서.pdfssuser956a25
 
다양한 모바일에서의 호환성 보장과 사이즈 지원 방법
다양한 모바일에서의 호환성 보장과 사이즈 지원 방법다양한 모바일에서의 호환성 보장과 사이즈 지원 방법
다양한 모바일에서의 호환성 보장과 사이즈 지원 방법mosaicnet
 
질병관리본부 특강 - 모바일 “고해상도 디스플레이” 시대를 준비하다
질병관리본부 특강 - 모바일 “고해상도 디스플레이”  시대를 준비하다질병관리본부 특강 - 모바일 “고해상도 디스플레이”  시대를 준비하다
질병관리본부 특강 - 모바일 “고해상도 디스플레이” 시대를 준비하다yamoo9
 
Ux 한글번역 멘플
Ux 한글번역 멘플Ux 한글번역 멘플
Ux 한글번역 멘플이창훈
 
삼성 싱가폴법인 삼성허브어플_제안서_v0.9_견적별도_12.12.12
삼성 싱가폴법인 삼성허브어플_제안서_v0.9_견적별도_12.12.12삼성 싱가폴법인 삼성허브어플_제안서_v0.9_견적별도_12.12.12
삼성 싱가폴법인 삼성허브어플_제안서_v0.9_견적별도_12.12.12지환 윤
 
1811755_신혜경_교재발표.pdf
1811755_신혜경_교재발표.pdf1811755_신혜경_교재발표.pdf
1811755_신혜경_교재발표.pdfssuser4ea7d7
 
모바일 스크린 디자인하기 (@WebWorldConference, 2013.11)
모바일 스크린 디자인하기 (@WebWorldConference, 2013.11)모바일 스크린 디자인하기 (@WebWorldConference, 2013.11)
모바일 스크린 디자인하기 (@WebWorldConference, 2013.11)keesung kim
 
Adapting UI to different screens
Adapting UI to different screensAdapting UI to different screens
Adapting UI to different screens영철 권
 

Ähnlich wie Android design guideline overview (20)

2013 10 guide_to_mobile_appui_20131028
2013 10 guide_to_mobile_appui_201310282013 10 guide_to_mobile_appui_20131028
2013 10 guide_to_mobile_appui_20131028
 
iOS Human Interface Guidlines #3_SYS4U
iOS Human Interface Guidlines #3_SYS4UiOS Human Interface Guidlines #3_SYS4U
iOS Human Interface Guidlines #3_SYS4U
 
Windows8 Modern UI Style Summary
Windows8 Modern UI Style SummaryWindows8 Modern UI Style Summary
Windows8 Modern UI Style Summary
 
[2016널리세미나] 모바일 접근성 지침 Ato z 20160405
[2016널리세미나] 모바일 접근성 지침 Ato z 20160405[2016널리세미나] 모바일 접근성 지침 Ato z 20160405
[2016널리세미나] 모바일 접근성 지침 Ato z 20160405
 
iOS Human Interface Guidlines #13_SYS4U
iOS Human Interface Guidlines #13_SYS4UiOS Human Interface Guidlines #13_SYS4U
iOS Human Interface Guidlines #13_SYS4U
 
Innovative Communicator
Innovative CommunicatorInnovative Communicator
Innovative Communicator
 
허니컴 태블릿 디자인
허니컴 태블릿 디자인허니컴 태블릿 디자인
허니컴 태블릿 디자인
 
2011년 UX 분석과 2012년 UX 통찰
2011년 UX 분석과 2012년 UX 통찰2011년 UX 분석과 2012년 UX 통찰
2011년 UX 분석과 2012년 UX 통찰
 
스마트폰기초 2015
스마트폰기초 2015스마트폰기초 2015
스마트폰기초 2015
 
지니빌더 솔루션 상품제안서
지니빌더 솔루션 상품제안서지니빌더 솔루션 상품제안서
지니빌더 솔루션 상품제안서
 
Flutter로 글로벌앱 출시를 위한 꿀팁 - Droidknights2020
Flutter로 글로벌앱 출시를 위한 꿀팁 - Droidknights2020Flutter로 글로벌앱 출시를 위한 꿀팁 - Droidknights2020
Flutter로 글로벌앱 출시를 위한 꿀팁 - Droidknights2020
 
2016276_심윤서.pdf
2016276_심윤서.pdf2016276_심윤서.pdf
2016276_심윤서.pdf
 
다양한 모바일에서의 호환성 보장과 사이즈 지원 방법
다양한 모바일에서의 호환성 보장과 사이즈 지원 방법다양한 모바일에서의 호환성 보장과 사이즈 지원 방법
다양한 모바일에서의 호환성 보장과 사이즈 지원 방법
 
질병관리본부 특강 - 모바일 “고해상도 디스플레이” 시대를 준비하다
질병관리본부 특강 - 모바일 “고해상도 디스플레이”  시대를 준비하다질병관리본부 특강 - 모바일 “고해상도 디스플레이”  시대를 준비하다
질병관리본부 특강 - 모바일 “고해상도 디스플레이” 시대를 준비하다
 
Ux 한글번역 멘플
Ux 한글번역 멘플Ux 한글번역 멘플
Ux 한글번역 멘플
 
삼성 싱가폴법인 삼성허브어플_제안서_v0.9_견적별도_12.12.12
삼성 싱가폴법인 삼성허브어플_제안서_v0.9_견적별도_12.12.12삼성 싱가폴법인 삼성허브어플_제안서_v0.9_견적별도_12.12.12
삼성 싱가폴법인 삼성허브어플_제안서_v0.9_견적별도_12.12.12
 
1811755_신혜경_교재발표.pdf
1811755_신혜경_교재발표.pdf1811755_신혜경_교재발표.pdf
1811755_신혜경_교재발표.pdf
 
모바일 스크린 디자인하기 (@WebWorldConference, 2013.11)
모바일 스크린 디자인하기 (@WebWorldConference, 2013.11)모바일 스크린 디자인하기 (@WebWorldConference, 2013.11)
모바일 스크린 디자인하기 (@WebWorldConference, 2013.11)
 
UX Case Study
UX Case StudyUX Case Study
UX Case Study
 
Adapting UI to different screens
Adapting UI to different screensAdapting UI to different screens
Adapting UI to different screens
 

Android design guideline overview

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

Hinweis der Redaktion

  1. \n
  2. \n
  3. \n
  4. \n
  5. \n
  6. \n
  7. \n
  8. \n
  9. \n
  10. \n
  11. \n
  12. \n
  13. \n
  14. \n
  15. \n
  16. \n
  17. \n
  18. \n
  19. \n
  20. \n
  21. \n
  22. \n
  23. \n
  24. \n
  25. \n
  26. \n
  27. \n
  28. \n
  29. \n
  30. \n
  31. \n
  32. \n
  33. \n
  34. \n
  35. \n
  36. \n
  37. \n
  38. \n
  39. \n
  40. \n
  41. \n
  42. \n
  43. \n
  44. \n
  45. \n
  46. \n
  47. \n
  48. \n
  49. \n
  50. \n
  51. \n