样式 图标

图标

材料图标使用几何形状来直观的表达核心理念、能力和主题。

产品图标是品牌的产品、服务和工具的视觉表现。

系统图标相当于是命令、文件、设备、目录或一般操作。

尺寸

产品图标是 48dp,包含 1dp 的窄边
系统图标是 24dp

不透明度

图标

背景色

54%

激活的图标

亮色

26%

未激活的图标

亮色

100%

激活的图标

暗色

30%

未激活的图标

暗色

产品图标 展开或收起内容 当内容收起时,箭头向下,当内容展开时,箭头向上。

产品图标是品牌的产品、服务和工具的视觉表现。简洁、鲜明、友好的向用户传达了产品的核心理念和目标。虽然每个产品图标在视觉上不同,但是特定品牌的产品图标应通过理念和实践来统一。

参照下文的指导规范,来确保产品图标的颜色和核心元素可以反映出你的品牌标示。

设计方法

产品图标的设计灵感源于现实材料的触觉和质感。每个图标都由简单的图形元素构成,像是一张被光照着的纸,经过了裁剪和折叠。材料的质地非常结实,折叠的痕迹清晰可见,边缘也十分明确。哑光的表面在光线的照射下映射出细微的高光和一致的阴影。

实体原型

光线研究

材料原型

色彩研究

产品图标的网格

产品图标的网格用来促进图标的一致性,以及为图形元素的定位建立规范。标准化的规范得以创建一个灵活且一致的系统。

网格

关键线

关键形状

关键形状是网格的基础。使用这些核心形状作为参考线,你可以在产品图标的设计中保持一致的视觉比例。

正方形

高:152dp
宽:152dp

圆形

直径:176dp

纵向矩形

高:176dp
宽:128dp

水平矩形

高:128dp
宽:176dp

DP 网格单位

Android 要求产品的尺寸为 48dp,包含 1dp 的边缘。在创建的图标的时候保持以 48dp 为基本单位,然后放大 400% 到 192 x 192 dp(边缘为 4dp)。

任何改动都要按比例进行。这样可以在缩小图标的时候,可以矫正对齐并保证边缘锐利。

1:1 单位网格

4:1 单位网格

几何形状

预设的标准确保了一些具体的关键线:圆形、正方形、矩形、正交线以及对角线。这种通用和简单的线框可以统一图标的样式,以及规范图标在网格上的位置。

产品图标分解

产品图标的分解图说明了产品图标的构成元素。在特定的品牌图标上,元素的一致性对于维持的品牌视觉语言至关重要。熟悉这些元素,可以让用户更容易理解每个品牌的个性,以及其中的细微差别。它还将教育用户识别品牌的基本形状。

1. 抛光
2. 材料背景
3. 材料前景
4. 颜色
5. 阴影

组件

组件是相互垂直叠加的,并且永远保持垂直视角。

结构透视

图标设计中组件分解后的透视图例

材料背景

处于最底层的材料元素

材料前景

浮起的材料元素,会在材料背景上投射出阴影。

斑点色

应用于元素中一小部分的颜色。

填充色

应用于整个元素的颜色,边到边。

浅色遮罩的边缘

材料元素的顶部边缘。混合了白色之后,形成了比原有颜色更浅的亮边。

暗色遮罩的边缘

材料元素的底部边缘。混了暗色之后,形成了比原有颜色更深的暗边。

接触阴影

浮起的材料元素周围的柔和阴影。

抛光

所有元素上方的一层柔和的浅色,从左上角淡入,右下角淡出,照亮了整个表面。

产品图标的标准

光线

在材料环境中,虚拟的光照场景允许物体投射出阴影。顶部的光线照射在材料元素上,产生接触阴影,并且突出了顶部和底部边缘。有角度的光线则增强了元素表面的质感。

顶部光线

45º 光线

阴影

对于产品图标来说,顶部的光线会在元素周围形成阴影,同时照亮元素的顶部和左侧。阴影会稍微侧重在底部和右侧,并且不会超出背景。

阴影指标

模式:正常
不透明度:20%
X 偏移:0dp
Y 偏移:4dp
模糊半径:4dp
颜色:参考浅色遮罩、暗色遮罩以及阴影的数值。

浅色遮罩和暗色遮罩的边缘

透过材料元素的顶部和底部边缘,用户能够感知到材料的厚度和表面。材料元素的标准厚度为 1dp。所有的边缘距离都是从元素内部开始测量。

浅色遮罩会照亮所有元素的顶部边缘。左侧、右侧以及底部是没有浅色遮罩的。

暗色遮罩会出现在所有元素的底部。左侧、右侧和顶部是没有暗色遮罩的。

浅色遮罩的边缘

高度:1dp
不透明度:20%
颜色:白色(#FFFFFF)

暗色遮罩的边缘

高度:1dp
不透明度:20%
颜色:参考浅色、暗色以及阴影的数值。

抛光

抛光是虚拟光线以 45º 的照射效果。光照效果沿着图标的轮廓从左上角开始延伸。抛光一直在图标的轮廓内部。

渐变指标

模式:迳向渐变
角度:45º
颜色:白色(#FFFFFF)
中点位置:33%

滑块 1
不透明度:10%
位置:0%

滑块 2
不透明度:0%
位置:100%

浅色遮罩、暗色遮罩以及阴影的数值

不同的颜色所对应的浅色遮罩和暗色遮罩都不相同。每种颜色的浅色遮罩、暗色遮罩以及阴影,都需要根据其背后的颜色进行调整。为不同的颜色选择合适的数值,以确保颜色的和谐。

产品图标模式

根据实体物质的特性,通过简单的规范便可以让物体产生质感和触感。材料和颜色的相互作用,为许多独特的构成提供了可能。

颜色

颜色元素与纸片的表面持平。

不要使用边框或阴影为颜色元素增添装饰。

图层

分层的纸片元素会营造出深度,拥有边框和阴影。

谨慎的控制相互重叠的表面数量。太多的重叠会使图标复杂化,失去焦点。

升高

在简单的背景轮廓中,为了提升关键元素的注意力,应当将其放置在中心位置。

不用使用其他形状对提升的元素进行裁剪。

折痕

有折痕的材料元素在不丢失其几何形状的前提下,拥有一个假象的深度。折痕应当显示在对称的形状中心。

不要使用多个折痕,也不要将折痕放在非中心的位置。

折叠

被折叠的元素是倾斜的且立体的。避免在折叠元素在添加斑点色,也不要改变和扭曲关键元素。

部分重叠

部分重叠的元素构成了独特的轮廓。所有的元素、边缘以及阴影都被局限在轮廓内部。

不要超过两层的重叠。太多的重叠会使图标复杂化,失去焦点。

手风琴

手风琴折叠的元素由两个元素相连而成,用来增加单个元素的尺寸。

不要折叠超过两层。太多的折叠会是图标复杂化,失去焦点。

扭曲

产品图标不应当被扭曲或变形。元素应当遵守他们的几何形状,不应当被倾斜、旋转、拱形、扭曲或是弯曲。

人物肖像

下文中的指南和实例都是将人物肖像加入 UI 的最佳实践。

构成

结构

对齐关键线

关键形状

正方形

圆形

纵向矩形

横向矩形

纸片 vs 颜色

纸片

颜色

手势

结构

成品

人物图标规范

使用简单的背景轮廓。

不要使用复杂的背景轮廓。

永远使用正确且一致的人物构成。

不要使用不正确的人物构成或是添加复杂的细节。

使用直线和曲线边缘来平衡视觉效果。

不要在手臂的结尾使用圆形,也不要裁剪手臂。

系统图标 展开或收起内容 当内容收起时,箭头向下,当内容展开时,箭头向上。

系统图标(或者是 UI 图标)代表着一个任务、文件、设备或是目录。系统图标也同样用来表示常规的操作,例如删除、打印或保存。

系统图标的设计表现的很简洁、现代、友好,有时候也会有点趣味。图标在能表现出其本意的前提下应当尽可能的精简。保证在最小尺寸下的可读性和清晰度。

设计原则

使用大胆的几何形状。

保持图标简洁大胆的同时,对称性和一致性则让图标的质量更进一步。

简洁

直观

可操作的

一致的

网格、比例和尺寸

以 DP 为单位的网格

系统图标会以 24dp 的尺寸显示。因此使用 100% 的比例来设计就变得非常重要,这样可以确保像素级的精确。

在鼠标键盘为主要输入方式时,尺寸可以被压缩以适应紧凑型的布局。在桌面的紧凑型布局中,图标的尺寸可以被缩小到 20dp。

100% 比例

20dp 的紧凑型网格,100% 比例

800% 比例

20dp 的紧凑型网格, 800% 比例

图标网格

图标网格用来促进图标的一致性,以及为图形元素的定位建立规范。标准的使用得以创建一个灵活且一致的系统。

网格

关键线

内容区域

图标的内容应当保持在一个安全区域。安全区域能够保证图像被完整的显示,而不会被视图切割(比如滚动时出现的滚动条会遮挡内容)。

裁剪区域会参考图形文件的最终尺寸。(*去除透明区域后的尺寸,译者注)

如果需要增加额外的视觉权重,应当仅在裁剪区域和安全区域之间的空隙中增加。不要让图标的任何部分超出裁剪区域。

紧凑型布局

对于桌面的紧凑型布局,图标的内边距可能会被缩小 2dp,整体尺寸变为 20dp。

安全区域

图标内容被限制在 20dp x 20dp 的安全区域中,周围有 4dp 的留白。

紧凑型安全区域

图标内容被限制在 16dp x 16dp 的安全区域中,周围有 2dp 的留白。

内边距

4dp(*原文为 4px,应该是笔误,译者注)的留白构成了内边距,围绕着 20dp x 20dp 的安全区域。

紧凑型内边距

2dp 的内边距围绕着安全区域。

关键形状

关键形状是网格的基础。使用这些核心形状作为参考线,你可以在系统图标的设计中保持一致的视觉比例。

正方形

高度:18dp
宽度:18dp

圆形

直径:20dp

纵向矩形

高度:20dp
宽度:16dp

横向矩形

高度:16dp
宽度:20dp

几何形状

预设的标准确保了一些具体的关键线:圆形、正方形、矩形、垂线以及对角线。这种通用和简单元素的小型面板被用来统一系统图标,以及系统化图标在网格上的位置。

结构

成品

系统图标分解

1. 笔划末端
2. 拐角
3. 内部区域
4. 笔划
5. 内部笔划
6. 边界区域

拐角

一致的圆角对于统一系统图标家族至关重要。2dp 的圆角通常用在图标的外形轮廓上。不要把描边的拐角处也做成圆角(宽度小于等于 2dp 的形状)。

拐角的内部应当是直角。不要把内部拐角也做成圆角。

2dp 圆角的外部拐角

内部拐角

笔划

一致的笔划大小对于统一系统图标家族至关重要。任何情况下都应使用宽度为 2dp 的描边,无论是曲线还是斜线描边,内部还是外部描边。

一致性

曲线和斜线

笔划末端

内部笔划

视觉修正

在某些极端情况下,出于清晰度需要对图标进行微调。当图标中出现不和避免的复杂细节时,就需要对图标进行微调。

如果必须要进行视觉修正,应当使用基本的几何形态。不要倾斜或是扭曲这些形态。

复杂

在 24 x 24dp 图标中,回形针图标仅仅使用了原本 2dp 的笔划区域中的 1.5dp,以此来适配多个弯角。

缩小

在 24 x 24dp 图标中,音量图标使用了 1.5dp 的笔划来暗示喇叭发出的声波。

间隙

在图标周围保留足够的空间来增强可读性和触控范围。

在以鼠标和键盘为主要的输入方式的设备中,间隙尺寸需要顾及紧凑型的页面布局。

间隙区域

图标:24dp
触控区域:48dp

紧凑型图标的间隙区域

图标:20dp
触控区域:40dp

摆放

最佳范例

一致性能够帮助用户理解图标的寓意。在不同的应用的设计中都尽可能使用已有的系统图标。

使用一致的笔划粗细和直角的笔划末端。

不要使用不一致的笔划粗细和圆角笔划末端。

显示图标的正前方,让其显得很稳固。

不要倾斜、旋转,或者让图标看起来很立体。

简化图标以提高清晰度和可读性。

不要过度拟物化。避免使图标复杂化。

图标要生动明显。

不要使用柔和、纤细的笔划。

使用一致的几何形状。

不要使用过于松散的形状。

图标的位置应当与像素对齐 —— 也就是 X 和 Y 坐标的值都应当为整数,不应该出现小数。

图标整体应当是等宽高的(比如 24 x 24),避免图标变形。

不要在图标的坐标中出现小数。

不要把图标的宽高变的不一致。

人物标示

人物图标分解

1. 头部
2. 颈部
3. 上半身
4. 手臂
5. 腿部

全身

上半身

构成

全身示例

上半身示例

有边框的示例

肢体细节示例

全身

全身示例

视觉对齐

上半身

上半身示例

视觉对齐

容器

有边框的示例

肢体细节

肢体细节示例

人物图标规范

使用一致的笔划粗细以及在手臂/腿部末端使用直角。

不要使用不一致的笔划粗细和圆角的手臂/腿部末端。

为了清晰起见,请对齐元素以简化轮廓。

不要对手臂/腿部进行细微的裁剪。

元素需要被包围的时候,应当把整个元素都嵌入容器内。

不要使用元素来破坏容器的边界。

当人物可以增强图标的理解度,请在图标中加入人物。

如果人物会增加图标的复杂度,则不要添加。

使用最简单的形状来表示人物的情绪。

不要把人物情绪应用在一个没有生命的物体中。

颜色

在亮色背景中,被激活的图标的标准不透明度是 54%(#000000)。未激活的图标的视觉权重较低,不透明度为 26%(#000000)。

在暗色背景中,被激活的图标的标准不透明度是 100%(#FFFFFF)。未激活的图标的视觉权重较低,不透明度为 30%(#FFFFFF)。

应用的快捷操作图标 展开或收起内容 当内容收起时,箭头向下,当内容展开时,箭头向上。

应用的快捷操作可以让用户很轻松的访问应用中某个功能(数量上限为 4 个)。每个功能都可以被放置在桌面上。

快捷操作的显示取决于你的应用图标在桌面上的位置。比如当图标在桌面的左侧时,快捷方式就会从其他有足够空间的地方显示出来。

以下的指南将会帮助你创建应用的快捷操作,包括标准图标的、单个头像的以及群组头像的。

每次最多显示 4 个快捷操作。你可以调整快捷操作的顺序。

快捷操作图标

快捷操作的图标是圆形的,其中包含了一个标准的系统图标,或者至少一个头像。图标的内容应当保持在图标的裁剪区域(图形的整体区域)内。

尺寸

  • 安全区域:44dp 的圆形
  • 整体区域:48dp 的圆形

44x44dp 的安全区域周围必需有 2dp 的边距。

颜色
安全区域:使用颜色 Material Grey 100 (#F5F5F5) 填充

阴影
快捷操作图标没有阴影

安全区域

图标的全部内容都应当保持在 44dp 的安全区域内,背景使用颜色 Material Grey 100 (#F5F5F5) 来填充。

整体区域

安全区域的周围必须有 2dp 的边距,把整个图标的尺寸保持在 48dp。

标准的快捷操作图标

标准的快捷操作图标就是把一个材料的系统图标放置在安全区域的中心。

尺寸

  • 安全区域:44dp 的圆形
  • 整体区域:48dp 的圆形
  • 系统图标:24dp

颜色
系统图标的颜色应当和应用的主体色或者应用图标的颜色保持一致(确保和圆形背景有充足的对比度)。

文件格式
标准的图标应当提供 SVG 格式,确保文件可以自由的缩放。你也可以使用矢量图、位图或图层列表

如果没有合适尺寸来适配标准图标,请不要使用非矢量的图形。

系统图标尺寸

系统图标应当是等宽高的:24 x 24dp。

放置在安全区域

24dp 的图标应当水平和垂直居中于安全区域。

图标的颜色需要与 Material Grey 100 的背景有充足的对比。

不要使用在灰色背景上没有充足对比度的颜色。

单个头像

单个头像中包含一张图片。该图片必须是 XXXHPDI 的。

尺寸

  • 安全区域:44dp 的圆形
  • 头像区域:44dp 的圆形
  • 整体区域:48dp 的圆形

文件格式
任何时候都使用 PNG 格式的图片。

圆形的安全区域 & 头像区域

头像图片必需完全填充安全区域,并且图片应当是 XXXHPDI 的。

整体区域

安全区域的周围必须有 2dp 的边距,把整个图标的尺寸保持在 48dp。

群组头像

群组头像中包含 2-4 张图片。所有的图片都应当是 XXXHPDI 的。

尺寸

  • 安全区域:44dp 的圆形
  • 头像区域:30dp
  • 整体区域:48dp

颜色
安全区域:使用颜色 Material Grey 100 (#F5F5F5) 填充

文件格式
任何时候都使用 PNG 格式的图片。

圆形的安全区域

安全区域的背景色为 Material Grey 100 (#F5F5F5) 。

头像区域

全部头像都应当适配 30 x 30dp 的区域,并且水平和垂直居中的放置在安全区域内。

整体区域

安全区域的周围必须有 2dp 的边距,把整个图标的尺寸保持在 48dp。