티스토리 뷰
Widget Design Guidelines
위젯은 Android 1.5에서 소개된 특징이다. 위젯은 애플리케이션의 가장 중요하거나, 한눈에 필요한 정보를 사용자의 홈 스크린에 보여준다. 기본적인 안드로이드 시스템 이미지는 여러 샘픔의 위젯을 포함하고 있다.
Widgets are a feature introduced in Android 1.5. A widget displays an application's most important or timely information at a glance, on a user's Home screen. The standard Android system image includes several examples of widgets, including widgets for Analog Clock, Music, and other applications.
사용자는 자신들의 원하는 위젯을 선택해서 홈 스크린에 표시한다. 위젯은 홈 스크림의 빈 영역에서 touching & holding 하고 메뉴에서 선택한다.
Users pick the widgets they want to display on their Home screens by touching & holding an empty area of the Home screen, selecting Widgets from the menu, and then selecting the widget they want.
이 문서는 위젯을 그래픽상으로 다른 위젯과 어울리도록 디자인하는 방법을 설명한다. 또한 위젯 아트워크 기준과 몇몇 그래픽 팁과 트릭을 설명한다.
This document describes how to design a widget so it fits graphically with other widgets and with the other elements of the Android Home screen. It also describes some standards for widget artwork and some widget graphics tips and tricks from the Android team.
Standard widget anatomy
전형적인 안드로이드 위젯은 세개의 주요 컴포넌트를 가지고 있다. 바운딩 박스, 프레임, 윈도우의 그래픽 조절과 다른 엘리먼트이다. 잘 디자인된 위젯은 바운딩 박스의 가장자리와 프레임 사이, 프레임의 가장자리와 위젯 컨트롤 사이에 약간의 패딩을 남긴다. 위젯은 시각적으로 홈 스크린에 있는 다른 위젯들과 어울리도록 디자인 한다. 또한 표준 그림자 효과를 사용한다. 이런 상세내역이 모두 이 문서에 설명되어 있다.
Typical Android widgets have three main components: A bounding box, a frame, and the widget's graphical controls and other elements. Well-designed widgets leave some padding between the edges of the bounding box and the frame, and between the inner edges of the frame and the widget's controls. Widgets designed to fit visually with other widgets on the Home screen take cues from the other elements on the Home screen for alignment; they also use standard shading effects. All of these details are described in this document.
Standard Widget Sizes in Portrait Orientation
Standard Widget Sizes in Landscape Orientation
Designing a widget
위젯의 바운딩 박스 크기 선택하기
가장 효과있는 위젯은 위젯의 가장 유용하고 적절한 데이타를 최소한의 사이즈 안에서 표현하는 것이다, 사용자는 위젯의 유용성을 따져보고, 홈 스크린 크기 대비 위젯의 크기를 재보기 때문에 작을 수록 좋다.
모든 위젯은 지원되는 사이즈 6개 중의 하나인 바운딩 박스안에 들어맞아야 한다. 또한 가로모드 세로모드에도 맞아서 사용자의 스크린 방향이 바뀌어도 보기 좋아야 한다.
표준 위젯 크기는 여섯개의 위젯 사이즈 바운딩 면적으로 묘사되어 있다. (3개는 세로, 3개는 가로 모드)
적당한 프레임을 선택한다.
표준 위젯 프레임은 여섯개의 위젯 사이즈에 대한 표준 프레임이다. 이 문서에서 복사해서 사용한다. 이 프레임을 위젯에 사용해야만 하는 것은 아니지만, 다른 위젯들과의 조화를 위해 사용하는 것이 좋다.
표준 그림자 효과를 그래픽에 적용한다.
다시 한번, 이 효과를 사용할 필요는 없지만 Standard widget shadows 은 표준 위젯을 사용하는 포토샵 세팅을 나타낸다.
버튼을 포함한 위젯이라면 세가지 상태(초기, 누름, 선택)을 나타낸다.
작업을 마치고 스케일하고 적절하게 정렬한다.
올바른 그래픽 파일 세팅으로 위젯을 저장한다.
Select a bounding box size for your widget.
The most effective widgets display your application's most useful or timely data in the smallest widget size. Users will weigh the usefulness or your widget against the portion of the Home screen it covers, so the smaller the better. All widgets must fit within the bounding box of one of the six supported widget sizes, or better yet, within a pair of portrait and landscape orientation sizes, so your widget looks good when the user switches screen orientations. Standard widget sizes illustrates the bounding dimensions of the six widget sizes (three in portrait and three in landscape orientation).
Select a matching frame.
Standard widget frames illustrates the standard frames for the six widget sizes, with links so you can download copies for your own use. You don't have to use these frames for your widget, but if you do, your widgets are more likely to fit visually with other widgets.
Apply standard shadow effect to your graphics.
Again, you don't have to use this effect, but Standard widget shadows shows the Photoshop settings used for standard widgets.
If your widget includes buttons, draw them in three states (default, pressed, and selected).
You can download a Photoshop file that contains the three states of the Play button, taken from the Music widget, to analyze the Photoshop settings used for the three standard button effects.
Finish drawing your artwork and then scale and align it to fit.
Widget alignment tips and tricks describes some techniques for aligning your widget's graphics inside the standard frames, along with a few other widget graphics tricks.
ve your widget with the correct graphics file settings.
Windows graphics file format describes the correct settings for your widget graphics files.
In portrait orientation
| Cells | Pixels |
|---|---|
| 4 x 1 | 320 x 100 |
| 3 x 3 | 240 x 300 |
| 2 x 2 | 160 x 200 |
In landscape orientation
Cells Pixels 4 x 1
424 x 74
3 x 3
318 x 222
2 x 2
212 x 148