android ui design patterns

Android UI Design Pat-ternsComputer Engineering 0892014 Park Soyoung

목차

• Icons Design– Launcher Icons– Menu Icons– Status Bar Icons– Tab Icons– Dialog Icons– List View Icons

• App Widget Design• Menu Design

Style

• Clean and contem-porary

• Simple and iconic• Tactile and tex-

tured• Forward-facing and

top-lit

Launcher Icons

Size and positioning

• High-density– Full Asset: 72 x 72 px– Icon: 60 x 60 px– Square Icon: 56 x 56 px

• Medium-density– Full Asset: 48 x 48 px– Icon: 40 x 40 px– Square Icon: 38 x 38 px

• Low-density– Full Asset: 36 x 36 px– Icon: 30 x 30 px– Square Icon: 28 x 28 px

Launcher Icons

Materials and colors

• 안드로이드에서 권장하는 기본 색상

Launcher Icons

• 안드로이드에서 제공하는 Materials

Do’s and Don’tsLauncher Icons

• 모던 , 최소화 , 매트 , 질감 , 앞을 보고 있는 단추 , 위에서 비추는 조명 , 제공된 색상 사용

• 앤티크 , 과하게 복잡한 것 , 광택 , 회전 , 잘림

Menu Icons

Size and positioning

• High-density– Full Asset: 72 x 72 px– Icon: 48 x 48 px– Square Icon: 44 x 44 px

• Medium-density– Full Asset: 48 x 48 px– Icon: 32 x 32 px– Square Icon: 30 x 30 px

• Low-density– Full Asset: 36 x 36 px– Icon: 24 x 24 px– Square Icon: 22 x 22 px

Color PaletteMenu Icons

• 검정• 회색 그라데이션• 흰색

• 메뉴 아이콘 역시 런쳐 아이콘과 마찬가지로

복잡하고 흐린 것은 안되며 , 제공된 색상 이외의 것을 사용하면 안 된다 .

Do’s and Don’tsMenu Icons

Status Bar Icons

• High-density– Full Asset: 24w x 38h px– Icon: 24w x 24h px

• Medium-density– Full Asset: 16w x 25 px– Icon: 16w x 16w px

• Low-density– Full Asset: 12w x 19h px– Icon: 12w x 12h px

Size and positioning

• 검정• 검정 그라데이션• 회색 그라데이션• 흰색

Status Bar Icons

Color Palette

• 상태 바 아이콘 역시 , 사이즈를 마음대로 바꿔서는 안되고 색상도 정해진 색상을 써야 합니다 .

Status Bar Icons

Do’s and Don’ts

Tab Icons

Size and positioning

• High-density– Full Asset: 48 x 48 px– Icon: 42 x 42 px

• Medium-density– Full Asset: 32 x 32 px– Icon: 28 x 28 px

• Low-density– Full Asset: 24 x 24 px– Icon:22 x 22 px

• 회색 그라데이션

Tab Icons

Color Palette

• 위에서 빛이 나거나 , 다른 색상을 쓰거나 , 크기를 임의로 줄일 경우는 안 되요 .

Tab Icons

Do’s and Don’ts

Low density screen Medium density screen High density screen

24 x 24 px 32 x 32 px 48 x 48 px

Dialog & List View Icons

Size and positioning

App Widget Design

• Standard Widget Sizes in Portrait Orien-tation                                                                                                                                                                

• Standard Widget Sizes in Landscape Orientation

App Widget Design

• Select a bounding box size for your widget.– 위젯에 대한 경계 상자 크기를 선택한다 .

• Select a matching frame.– 일치하는 프레임을 선택한다 .

• Apply standard shadow effect to your graphics.– 그래픽에 표준 그림자 효과를 적용합니다 .( 홈페이지 참고 )

• If your widget includes buttons, draw them in three states (default, pressed, and selected).– 만약에 버튼이 포함되어 있다면 , 세 가지 경우를 만드세요 .

App Widget Design

• Finish drawing your artwork and then scale and align it to fit.– 그림을 크기와 색 등을 맞게 맞추고 끝냅니다 .

• Save your widget with the correct graphics file settings.– 올바른 그래픽 파일을 설정하여 위젯을 저장합니다 .

App Widget Design

Standard Widget Sizes

Cells Pixels

4 x 1 320 x 100

3 x 3 240 x 300

2 x 2 160 x 200

App Widget Design

in Portrait Orientation

Cells Pixels

4 x 1 424 x 74

3 x 3 318 x 222

2 x 2 212 x 148

Standard Widget SizesApp Widget Design

in Landscape Orientation

Standard Widget FramesApp Widget Design

2 X 2 →

← 3 X 3

↓ 4 X 1

in Portrait Orientation

2 X 2 → ← 3 X 3

↓ 4 X 1

Standard Widget FramesApp Widget Design

• Place the most frequently used operations first.– 가장 자주 사용하는 맨 처음 둡니다 .

• Don't put commands only in a Context menu.– 콘텍스트 메뉴에 명령만을 넣지 마세요 .

• The first command in a Context menu should be the selection's most intuitive command.– 콘텍스트 메뉴에서 첫 명령은 선택할 때 가장 직관적인

명령이어야 합니다 .

• Selecting an item in the content should perform the most intuitive operation.– 콘텐츠 항목을 선택하면 가장 직관적인 작업을 수행합니다 .

Menu Design

• A Context menu should identify the selected item.– 콘텍스트 메뉴는 선택한 항목이 식별 가능해야만 한다 .

• Put only the most important commands fixed on the screen.– 화면에는 가장 중요한 명령 만을 고정시켜 넣어야 한다 .

• Use short names in the Options icon menu.– 옵션 아이콘 메뉴에는 짧은 이름을 써야 합니다 .

• If an activity has no Options menu, do not display a message.– 만약 액티비티가 옵션메뉴가 없다면 , 메시지가 보이지 않아도 된다 .

• Dim or hide menu items that are not available in the current context.– 현재 콘텍스트에서 사용하지 않는 메뉴는 희미하게 하거나 숨깁니다 .

Menu Design

Etc.

• 홈페이지를 살펴보면 아이콘을 만드는 방법 등 , 알면 좋은 정보가 더 있다 .( 그림자 효과 넣는 등 , 포토을 이용해서 하는 방법 등이 올라와 있다 .)

• 가서 한 번씩 살펴보세요 .

끝끝