最新消息:网站改版咯

怎么设计图标

移动App Yovae 2076浏览

通过UI为你的产品建立统一的外观和使用感受会增加产品的价值。对于用户来说,使图形风格流线型化会使UI看起来更加专业。

这份文档会向你展示如何建立多种应用图标使其符合Android UI团队设计的UI风格。遵循这份指南将会帮助你建立完善统一的用户体验。

为了更快的开始建立图标,你可以下载Android图标模板包。获得更多信息请查看《Android风格模板包的使用》。

运行图标(Launcher icon)

运行图标是你的应用在Android设备首屏上(Home screen)显示的图标。它是个简化的3D图标,有着固定的参数。具体的参数见Figure 1.

结构

运行图标的底部可以朝上或者超前。

大多数运行图标的表面用运行图标颜色版建立。为了突出,可以使用一种或更多明亮的强调色来高亮特定的元素。

所有运行图标必须有圆角,以使他们看起来更加友好和简单——见Figure 2.

所有的维度都是基于在250×250px范围的矢量图形的画板中,比如Adobe Illustrator中的图标都在边界内。

最终的设计必须符合比例缩小而且导出为48×48的透明PNG文件,可以使用Adobe Photoshop。

运行图标的模板可以在AI和PS中编辑。

 

A view oflauncher icon corners and perspective angles

 

光,效果,阴影(Light, effects, and shadows)

运行图标是使用光,阴影定义的简化的3D图标。光源被轻微地定为在图标前方的左侧,因此阴影延伸到右侧和背部。

A view oflight, effects, and shadows for launcher icons.

Figure 3. Light, effects, and shadows for launcher icons.

1. 边缘高亮: 白色
2. 图标阴影: black | 20px blur光晕
50% opacity透明 | angle 67°
3. 前部: 使用颜色板中的明亮渐变
4. 阴影细节: black | 10px blur
75% opacity
5. 侧面: 使用颜色板的中度渐变

 

运行图标调色板

Color palette, white White
r 0 | g 0 | b 0
用于高亮边缘.
Color palette, light gradient Light gradient
1:  r 0 | g 0 | b 0
2:  r 217 | g 217 | b 217
用在图标前(光)部.
Color palette, medium gradien Medium gradient
1:  r 190 | g 190 | b 190
2:  r 115 | g 115 | b 115
用于侧面 (阴影部分) part of the icon.
Color palette, dark gradient Dark gradient
1:  r 100 | g 100 | b 100
2:  r 25 | g 25 | b 25
用于细节和阴影部分.
Color palette, black Black
r 255 | g 255 | b 255
用在底部阴影处.

步骤

  1. 用AI建立基本形状,使用运行图标结构中描述的角度。形状和效果必须在250×250的画板之内.
  2. 通过挤压形状使其增加深度并且参考前面的描述建立图形的圆角.
  3. 增加细节和颜色。如果有轻微光源被布置在图标的左前方,应该使用渐变.
  4. 建立阴影应该使用合适的角度和光晕效果.
  5. 把icon导入Adobe Photoshop,然后缩放使其符合48×48px,在一个透明背景中.
  6. 导出图标为48×48px的透明Png文档.

菜单图标通常被布置为向用户展示的弹出菜单,当用户点击menu按钮的时候。他们在平面参数基础上设计 。菜单中的元素不必是可视化的3D效果或者带有参数。

结构 Structure

  • 为保持一致性,所有菜单图标必须使用同一主色版和同一效果。更多信息详见菜单图标调色板。
  • 菜单图标需包含圆角,但只当逻辑符合时。比如Figure 3中,逻辑上圆角的部分是顶部,而不是模型的其他地方。
  • 这一页所有的维度都限定在48×48px画板大小和6px 安全框。
  • 只在必要的前体下,光、阴影效果处描述的菜单图标效果(外部发光)可超出6px的安全框。基本图形必须始终在安全框之内。
  • 最终成品必须导出为透明PNG文件。
  • 建立菜单图标的模板可以在PS中编辑。
A view of menuicon structure.

Figure 4. 菜单图标的安全框、圆角。Icon size is 48×48.

 

菜单图标是平面的。下面展示的细微凹陷和其他效果用于创建深度。

A view of light, effects, and shadows for launcher icons.

Figure 5. Light, effects, and shadows for launcher icons.

1. 前部Frontpart: Use fill gradient fromprimary color palette
2. 内阴影Innershadow: black | 20 % opacity
angle 90° | distance 2px
size 2px
3. 外部发光Outerglow: white | 55% opacity
spread 10% | size 3px
5. 内部斜角Innerbevel: depth 1% | directiondown size 0px
angle 90° | altitude 10°
highlight white 70%opacity
shadow black 25% opacity
Color palette, white White
r 0 | g 0 | b 0
Used for outer glow and bevel highlight.
Color palette, medium gradient Fill gradient
1:  r 163 | g 163 | b 163
2:  r 120 | g 120 | b 120
Used as color fill.
Color palette, black Black
r 255 | g 255 | b 255
Used for inner shadow and bevel shadow.
  1. 用AI建立基本形状.
  2. 用PS导入形状,并且缩放到48×48px,透明背景。注意安全框。
  3. 增加在Figure 5 中的效果。
  4. 导出48×48的PNG透明图。

状态栏图标 Status bar icon

Status bar icons are used to represent notifications from your application in the status bar. Graphically, they are very similar to menu icons, but are smaller and higher in contrast.状态栏图标用于显示应用的通知。从图形上看,他们和菜单图标很相似,但是比他们更小、更高。

结构 Structure

  • Rounded corners must always be applied to the base shape and to the details of a status bar icon shown Figure 7.圆角必须用于基本形状并且状态栏图标的细节参考Figure 7.
  • All dimensions specified are based on a 25×25 pixel artboard size with a 2 pixel safeframe. 所有的维度基于25×25px画板,2px安全框。
  • Status bar icons can overlap the safeframe to the left and right when necessary, but must not overlap the safeframe at the top and bottom. 必要时状态栏图标可以超出安全框的左侧和右侧,但是不能超出顶部和底部。
  • Final art must be exported as a transparent PNG file.所有成品必须导出透明PNG图。
  • Templates for creating status bar icons using Adobe Photoshop are available in the Icon Templates Pack.    创建状态栏图标的模板可以在PS中编辑。
A view ofstatus bar icon structure.

Figure 6. Safeframe and corner-rounding for status bar icons. Icon size is 25×25.状态栏图标的安全框和圆角。

光、效果、阴影 Light, effects, and shadows

状态栏图标轻微凹陷,相对较高,在正面成图以提升较小范围的清晰度。Status bar icons are slightly debossed, high in contrast, and pictured face-on to enhance clarity at small sizes.

A view oflight, effects, and shadows for launcher icons.

Figure 7. Light, effects, and shadows for launcher icons.

1. Frontpart: 用调色板的fill渐变。
2. Innerbevel: 深度depth 100% | directiondown方向 向下
size 0px | angle 90° |
altitude 30°
高亮 白色 75%透明
阴影 黑色 75% 透明
3. l细节: 白色
4. Disableddetail: grey gradient from palette
+ inner bevel: smooth | depth1% | direction down | size 0px |angle 117° |
altitude 42° | highlight white70% | no shadow

手机功能中只有状态栏图标为纯色;并且所有状态栏图标应该使用单色。

Color palette, white White
r 0 | g 0 | b 0
Used for details within the icons and bevelhighlight.
Color palette, grey gradient Grey gradient
1:  r 169 | g 169 | b 169
2:  r 126 | g 126 | b 126
Used for disabled details within the icon.
Color palette, fill gradient Fill gradient
1:  1 r 105 | g 105 | b 105
2:  r 10 | g 10 | b 10
Used as color fill.
Color palette, black Black
r 255 | g 255 | b 255
Used for bevel shadow.
  1. PS中建立25×25像素图像,透明背景。注意安全框,保持上下有2像素的空间。
  2. Add rounded corners as specified in Figure 6.
  3. Add light, effects, and shadows as specified in Figure 7.
  4. Export the icon at 25×25 as a PNG file with transparency enabled.

标签图标 Tab icon

Tab icons are graphical elements used to represent individual tabs in a multi-tab interface. Each tab icon has two states: unselected and selected. 标签图标用于表示多任务界面中的单个界面。每个标签图标有两个状态:选中、未选中。

Structure

  • Unselected tab icons have the same fill gradient and effects as menu icons, but with no outer glow.未选中的标签icon与菜单icon有相同的fill渐变,但是没有外部发光。
  • Selected tab icons look just like unselected tab icons, but with a fainter inner shadow, and have the same front part gradient as dialog icons.选中的标签icon看起来像为选中的,但是有黯淡的内部阴影,而且有和对话icon相同的前部渐变。
  • Tab icons have a 1 px safeframe which should only be overlapped for the edge of the anti-alias of a round shape.标签icon有1像素的安全框,只能在圆形抗锯齿的边缘处叠加。
  • All dimensions specified on this page are based on a 32×32 px artboard size. Keep 1 px of padding around the bounding box inside the Photoshop template.此页所有的维度限定在32×32像素。内部图形与边缘留有1像素的空间。
  • Final art must be exported as a 32×32 px transparent PNG file.最终需到处32×32的透明png。
  • Templates for creating tab icons in Adobe Photoshop are available in the Icon Templates Pack.建立标签icon的模板在PS模板包中。
A view ofunselected tab icon structure.

Figure 8. Safeframe and fill gradient for unselected tab icons. Icon size is 32×32.未选中标签icon的安全框和fill渐变。

A view ofselected tab icon structure.

Figure 9. Safeframe and fill gradient for tab icons in selected state. Icon size is 32×32.选中标签的安全框和fill渐变。

Unselected tab icon未选中标签

Light, effects, and shadows

Unselected tab icons look just like the selected tab icons, but with a fainter inner shadow, and the same front part gradient as the dialog icons.未选中标签和选中标签差不多,但是有稍黯的内部阴影,而且有与对话标签相同的前部渐变。

A viewof light, effects, and shadows for unselected tab icons.

Figure 10. Light, effects, and shadows for unselected tab icons.

1. Frontpart: 渐变覆盖gradient overlay |angle 90°
bottom color: r 223 | g 223 | b223
top color: r 249 | g 249 | b 249
bottom color location: 0%
top color location: 75%
2. Innershadow: black | 10 % opacity | angle 90°distance 2px | size 2px
3. Innerbevel: depth 1% | direction down |size 0px | angle 90° | altitude10°
highlight white 70% opacity
shadow black 25% opacity
  1. Create the basic shapes using a tool like Adobe Illustrator.建立基本图形。
  2. Import the shape to a tool like Adobe Photoshop and scale to fit an image of 32×32 px on a transparent background.导入图形,并缩小使其符合32×32像素,透明背景。
  3. Add the effects seen in Figure 10 for the unselected state filter. 为未选中状态增加Figure 10中的效果。
  4. Export the icon at 32×32 as a PNG file with transparency enabled.导出32×32的png透明图。

Selected tab icon 选中标签

The selected tab icons have the same fill gradient and effects as the menu icon, but with no outer glow.选中标签和menu icon有相同的fill渐变和效果,但是没有外部发光。

A view oflight, effects, and shadows for selected=

Figure 11. Light, effects, and shadows for selected tab icons.

1. Frontpart: Use fill gradient from colorpalette.
2. Innershadow: black | 20% opacity |
angle 90° | distance 2px |
size 2px
3. Innerbevel: depth 1% | direction down |size 0px | angle 90° |
altitude 10°
highlight white 70% opacity
shadow black 25% opacity
Color palette, fill gradient Fill gradient
1:  r 163 | g 163 | b 163
2:  r 120 | g 120 | b 120
Used as color fill on unselected tab icons.
  1. Create the basic shape using a tool like Adobe Illustrator.
  2. Import the shape into a tool like Adobe Photoshop and scale to fit a 32×32 px artboard witha transparent background.
  3. Add the effects seen in Figure 11 for the selected state filter.
  4. Export the icon at 32×32 as a PNG file with transparency enabled.

对话框图标 Dialog icon

Dialog icons are shown in pop-up dialog boxes that prompt the user for interaction. They use a light gradient and inner shadow in order to stand out against a dark background. 对话框icon在弹出框中出现,这个通常用来鼓励用户互动。它使用亮渐变和内部阴影使其与暗色的背景产生明显区隔。

Structure 结构

  • Dialog icons have a 1 pixel safeframe. The base shape must fit within the safeframe, but the anti-alias of a round shape can overlap the safeframe. 对话框图标有1像素的安全框。基本图形必须在安全框内。但是圆形的反锯齿可以与安全框重叠。
  • All dimensions specified on this page are based on a 32×32 pixel artboard size in Adobe Photoshop. Keep 1 pixel of padding around the bounding box inside the Photoshop template.所有维度必须基于32×32像素的画板中。在模板的边框留有1像素的空间。
  • Final art must be exported as a transparent PNG file.
  • Templates for creating dialog icons in Adobe Photoshop are available in the Icon Templates Pack.相关模板在模板包中。
A view of dialogicon structure.

Figure 12. Safeframe and fill gradient for dialogicons. Icon size is 32×32. 对话icon的安全框和fill渐变。

Light, effects, and shadows

Dialog icons are flat and pictured face-on. In order to stand out against a dark background, they are built up using a light gradient and inner shadow. 对话icon是扁平和画面朝上的。为了与背景区分开,他们使用了明亮的渐变和内部阴影。

A view of light,effects, and shadows for dialog icons.

Figure 13. Light, effects, and shadows for dialog icons.

1. Front part: gradient overlay | angle 90°
bottom: r 223 | g 223 | b 223
top: r 249 | g 249 | b 249
bottom color location: 0%
top color location: 75%
2. Innershadow: black | 25% opacity |
angle -90° | distance 1px |size 0px
  1. Create the basic shapes using a tool like Adobe Illustrator.
  2. Import the shape into a tool like Adobe Photoshop and scale to fit an image of 32×32 px on a transparent background.
  3. Add the effects seen in Figure 13 for the proper filter.
  4. Export the icon at 32×32 as a PNG file with transparency enabled.

List view icon 查看列表图标

List view icons look a lot like dialog icons, but they use an inner shadow effect where the light source is above the object. They are also designed to be used only in a list view. Examples include the Android Market application home screen and the driving directions screen in the Maps application. 查看列表icon看起来和对话icon非常相似,但是他们只当光源在物件上不时使用内部阴影效果。他们只在查看菜单中使用。相关的例子可以看android market、应用首页、maps中的驾车导航屏幕。

Structure

  • A list view icon normally has a 1 px safeframe, but it is OK to use the safeframe area for the edge of the anti-alias of a round shape. 所有的查看列表icon通常有1像素的安全框,但是把安全框用在圆形反锯齿的边缘也是可以的。
  • All dimensions specified are based on a 32×32 pixel artboard size in Photoshop. Keep 1 pixel of padding around the bounding box inside the template. 模板的边框处留有1像素的空间。
  • Final art must be exported as a transparent PNG file.
  • Templates for creating list view icons in Adobe Photoshop are available in the Icon Templates Pack.
A view of listview icon structure.

Figure 14. Safeframe and fill gradient for list view icons. Icon size is 32×32.

Light, effects, and shadows

List view icons are flat and pictured face-on with an inner shadow. Built up by a light gradient and inner shadow, they stand out well on a dark background.

A viewof light, effects, and shadows for list view icons.

Figure 15. Light, effects, and shadows for list view icons.

1. Inner shadow: black | 57 % opacity| angle 120° | blendmode normal |distance 1px | size1px
2. Background: black | standardsystem color
These icons aredisplayed in listviews only.
Note: The list viewicon sits on 32×32 pxartboard inPhotoshop, without asafeframe.
  1. Add the effects seen in Figure 15 for the proper filter.
  2. Export the icon at 32×32 as a PNG file with transparency enabled.
  3. Create the basic shapes using a tool like Adobe Illustrator.
  4. Import the shape into a tool like Adobe Photoshop and scale to fit an image of 32×32 px on a transparent background.

共同指南 General guidelines

Below are some “do and don’t” guidelines to consider when creating icons for your application. By following the guidelines, you can ensure that your icons will work well with other parts of the Android platform UI and will meet the expectations of your application’s users. 下面是当创建应用图标时的一些“做和不做”的指导意见。遵循这些指导意见,你可以确定你的icon可以和其他的android平台UI工作良好,并且会符合用户对应用体验的期待。

Do…

  • Use a normal perspective. The depth of an object should be realistic. 使用一个普通的perspective。物体的深度应该是真实的。
  • Keep it simple! By overdoing an icon, it loses it purpose and readability. 保持简洁!使图标复杂化会使它丧失它的目的和可读性。
  • Use colors only when necessary. Mind that thebase of a launcher icon should be grey and feel solid. 仅当必要时使用颜色。 注意运行图标的地步应该是灰色而且感觉上是固体。
  • Use the correct angles for the specific icon types. 对特定的图标使用正确的角度。

Don’t…

  • Use open elements like text alone as icons. Instead place those elements on a base shape. 不要使用开放的元素,比如只有文本。而是要把这些元素放在基本图形之上。
  • Use colors for your status bar notifications. Those are reserved for specific phone-only functions. 不要对状态栏通知着色。那些图标只适用电话特有功能。
Side-by-side examplesof good/bad icon design.

使用Android 图标模板包 Using the Android Icon Templates Pack

The Android Icon Templates Pack is a collection of template designs, filters, and settings that make iteasier for you to create icons that conform to the general specifications given in this document. We recommend downloading the template pack archive before you get started with your icon design.

The icon templates are provided in Adobe Photoshop and Adobe Illustrator file formats, which preserves the layers and design treatments we used when creating the standard icons for the Android platform. You can load the template files into any compatible image-editing program, although your abilityto work directly with the layers and treatments may vary based on the program you are using.

You can obtain the Icon Templates Pack archive using the link below:

Download the Icon Templates Pack »

图标附件 Icon appendix

 

标准运行图标 Standard launcher icons

Shown below are examples of launcher icons used by Android applications. The icons are provided for your reference only — please do not reuse these icons in your applications. 以下立决的图标是android应用中的运行图标。这些图标仅供参考——请不要在你的应用中使用这些图标。

Android asset

AlarmClock
Android asset

Browser
Android asset

Calculator
Android asset

Calendar
Android asset

Camcorder
Android asset

Camera
Android asset

Contacts
Android asset

Dialer
Android asset

Email
Android asset

Gallery
Android asset

Genericapplication
Android asset

Gmail
Android asset

GoogleTalk
Android asset

IM
Android asset

Maps
Android asset

Market
Android asset

Messaging
Android asset

Music
Android asset

Settings
Android asset

VoiceDialer
Android asset

VoiceSearch
Android asset

YouTube

Shown below are standard menu icons that are included in the Android platform (as of Android 1.5). You can reference any of these icon resources from your application as needed, but make sure that the action you assign to the icon is consistent with that listed. Note that this is not a complete list of icons and that the actual appearance of standard icons may change across platform versions.

To reference one of the icons from your code, use android.R.drawable.. For example, you can call a menu item’s setIcon() method and pass the resource name:

.setIcon(android.R.drawable.ic_menu_more);.

You could reference the same icon from a layout file using android:icon=”@android:drawable/ic_menu_more”>.

To determine the resource ID for an icon listed below, hover over the icon or simply look at image filenames, which use the format “.png”.

Android asset

Add
Android asset

Call
Android asset

Camera
Android asset

Clear /Close /Cancel/Discard
Android asset

Compass
Android asset

Delete
Android asset

Directions
Android asset

Edit
Android asset

Gallery
Android asset

Help
Android asset

Info /details
Android asset

Mapmode
Android asset

MyLocation
Android asset

More
Android asset

Preferences
Android asset

Rotate
Android asset

Save
Android asset

Send
Android asset

Search
Android asset

Share
Android asset

Upload
Android asset

View
Android asset

Zoom

标准状态栏图标 Standard status bar icons

下面是Android平台的标准状态栏图标(1.5版Android)。你可以使用如下图标,但要确保图标的含义与标准意义一致。需要注意的是下面不是完整的图标列表,而且随着系统版本的升级,图标也会发生变化。Shown below are standard status bar icons included in the Android platform (as of Android 1.5). You can reference any of these icon resources from your application as needed, but make sure that themeaning of the icon is consistent with the standard meaning listed. Note that this is not a complete listof icons and that the actual appearance of standard icons may change across platform versions.

参考任何图标使用代码:android.R.drawable.. For example, you can construct a simple notification that references one of the icons like this:

new Notification(R.drawable.stat_notify_calendar, “sample text”, System.currentTimeMillis());

任何资源的图标ID被列在下面,也可以查看文件名来确定。To determine the resource ID for an icon listed below, hover over the icon or simply look at the image filename, which use the format “.png”.

Android asset

Bluetooth
Android asset

Email
Android asset

IM
Android asset

Voicemail
Android asset

Warning
Android asset

Call
Android asset

Callforward
Android asset

Call onhold
Android asset

Missedcall

转载请注明:Yovae Studio » 怎么设计图标