5. 图标

5.1 产品图标

产品图标是一个品牌和产品（包括它们的服务和工具）的视觉表现。

5.1.1 设计原则

产品图标是一个品牌和产品（包括它们的服务和工具）的视觉表现。图标以简约、大胆、友好的方式传达产品的核心理念和目标。尽管每个图标在视觉上都是不同的，但品牌的所有产品图标都应通过概念和执行方式加以统一。

这些准则是确保你的产品图标颜色和关键元素能够体现你的品牌个性的基础。

设计方法

材料的物理质感反映在Material图标的设计中。每个图标都像纸张一样被切割、折叠和照亮，但是是用简单的图形元素来表示。材料的材质坚固、折叠整齐、边缘清晰。材料通过微妙的高光和一致的阴影表现光照的效果。

5.1.2 网格和关键线形状

图标大小

创建图标时，放大为400%（192x192dp）进行视图和编辑，基准网格为4dp。通过保持该比例，对图标原件所做的任何更改都会按比例放大或缩小，当比例回到100%（48dp）时，可以保持清晰的边缘并正确对齐。

图标网格为图形元素的一致但灵活的定位建立了清晰的规则。

关键线形状

关键线形状以网格为基础。通过将这些核心形状用作基准，你可以在你的产品体系的图标中保持一致的视觉比例。

几何

这些关键线形状使用预设标准：圆形、正方形、矩形、正交线和对角线。它们统一了产品图标，并在网格上保持一致的位置。

5.2 系统图标

系统图标通常用来表示操作、文件、设备和目录。

 

5.2.1 设计原则

系统图标在设计上简约、现代、友好，有时也可以是新奇的。每一个图标都简化为极简形态，来表达基本特征。

图标形状是简单和几何化的。它们具有对称且一致的外观，即使在小尺寸下也可确保清晰度和可识别性。

5.2.2 网格和关键线形状

图标大小

系统图标显示为24x24dp。设计图标时以100%比例视图来实现像素完美对齐。

当图标应用在使用鼠标和键盘作为主要输入方式的桌面应用上面时，图标尺寸可以缩小到20dp。

布局

图标内容应保持在安全区域以内，该区域是不会在视图中被隐藏掉的图像区域。

如果需要额外的视觉重量，内容可能会扩展到安全区域和裁剪区域（图形的完整大小）之间的填充区域中。图标的任何部分都不应延伸到裁剪区域之外。

关键线形状

图标网格为图形元素的一致但灵活的定位建立了清晰的规则。

关键线形状是网格的基础。你可以通过将这些核心形状用作准则，来保证系统图标间的视觉比例的一致。

 

基本形状

存在针对某些形状的特定关键线：圆形、正方形、矩形、正交线和对角线。这些基本形状有助于统一Google系统图标并规范其在图标网格上的放置。

清晰度（像素完美对齐）

为了避免使图标失真，可以通过将X轴和Y轴坐标设置为整数来将图标定位在像素上。

5.2.3 系统图标指标

剖析

△

1. 描边终端

2. 圆角

3. 内部区域

4. 描边

5. 内部描边

6. 边界区域

圆角

圆角半径默认为2dp。内部圆角半径为0。对于宽度为2dp或更小的形状和描边的圆角半径也为0。

描边

系统图标使用一致的描边宽度2dp，包括曲线以及内部和外部描边。

复杂的图标形状

如果系统图标需要复杂的细节，可以进行细微调整以提高其清晰度，这些调整称为视觉修正。任何视觉修正都应使用所有其他图标所基于的几何形状，而不会使这些形状歪斜或扭曲。

空间

系统图标周围应留有足够的空间，以便于辨认和点击。24dp的图标可以使用48dp的点击热区。

△1. 留白  2. 放置效果

密集布局（桌面产品）

当使用鼠标和键盘作为主要输入设备时，可以缩小尺寸以适应更密集的布局。密度为20dp的图标可以使用40dp的点击热区。

△1. 留白  2. 放置效果

5.2.4 图标主题

可以自定义系统图标的三个属性：描边和填充、圆角半径、颜色，来创建自定义系统图标。通过调整这些属性，可以创建以下几种预设的自定义图标。

 

剪影图标

剪影图标可自定义描边和填充属性，以提供一种在内容密集的UI中看起来轻巧、干净的样式。

当系统图标未填充时，它们由其描边构成。较粗的描边使图标感觉更厚重，较细的描边使描边感觉更轻盈。

描边位置会影响图标的整体外观，具体取决于描边是放置在形状的内部、中间还是外部。在大多数情况下，最好使用内描边。

△

1. 标准图标

2. 内描边图标

3. 中间描边图标

4. 外描边图标

锐利图标和圆角图标

锐利图标圆角的半径为0dp，外观冰冷但是更具专业性；圆角图标使用大于0dp的圆角半径，外观看起来更具亲和力。

△推荐使用0dp到4dp之间的圆角半径。

双色图标

双色图标使用描边、填充和颜色的属性来增加维度。可以使用不同的品牌色使描边和填充颜色形成对比，并提高识别性。

5.3 动态图标

5.3.1 用法

动画反映了图标执行的动作，从而增加了修饰感和趣味性。

△每个图标的动画都与它们的视觉设计和动作保持一致。

5.3.2 过渡

过渡在两个视觉状态之间连接动态图标。

△过渡显示了两个图标之间的联系。

重点

动态图标过渡可以根据需要强调的级别来选择使用简单或复杂的动画。

• 不需要强调的图标使用简单的共享动作；

• 可以通过复杂的动作来强调作为App重要部分的图标。

△对不需要强调的图标使用共享动作。 渐隐渐现、缩放和旋转是在图标之间过渡的简单方法。

△细节丰富的动画容易吸引人们的注意，同时增加了动态图标的趣味性。

持续时间

图标动画越复杂，就需要越长的持续时间来避免仓促感。为了保持App的一致性，需要对具有相似复杂程度的图标使用相同的持续时间。大多数图标适合以下三组建议的持续时间：

△

1. 简单：100ms

2. 平均：200ms

3. 复杂：500ms

时差

图标集合可以使用时差来流畅地执行依次进入，以赋予动效渐进感。

△应用程序栏中的图标从左到右以时差的方式进入。

状态

图标动画可用于增强对状态变化的感知。

△图标的动画效果表明它们已被选中而更改了状态。

主题化

动画应该反映品牌的风格。

△这些图标动画的灵感来自品牌logo和Loading状态动画。

1. 图标动画

2. Logo动画

3. Loading动画