图标

设计方法

产品图标的设计灵感来自现实材料的触感和物理质感。每一个图标都可以像纸一样被裁剪、折叠和点亮，但都是由简单的图形元素组成的。材料的质地结实，具有干净的皱褶和清晰的边缘。哑光般的表面通过细微的高光和一致的阴影完成与光线的交互。

产品图标网格

产品图标网格被用来促进图标的一致性，以及为图形元素的定位建立一组清晰的规范。这种标准化的规范造就了一个灵活但有条理的系统。

关键线形状

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

DP 网格单位

Android 要求产品图标为 48dp，包含 1dp 的边缘。在创建图标的时候，保持 48dp 为基本单位，然后放大 400% 到 192 x 192dp（边缘变成 4dp）。

对原稿进行的任何缩放，都将按比例调整图像。通过保持单位比例不变，在缩小图像时可以保持锐利的边缘和正确的对齐方式。

几何形状

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

产品图标剖析

产品图标的剖析描述了组成产品图标的图形元素。在特定品牌的产品图标中，元素的一致性对于维持一个共享的视觉语言是至关重要的。熟悉这些元素，可以更容易的理解每个品牌的特征，以及它们之间的细微的差别。它还将帮助用户识别 logo 设计的基础结构。

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

产品图标标准

光线

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

浅色边缘和深色边缘

材料元素的顶部和底部边缘，提供深度和表面感。材料元素具有标准的 1dp 的厚度。所有边缘距离均从元素的内部边缘测量。

浅色色调的边缘突显所有元素的顶部边缘。左侧、右侧和底部边缘没有浅色色调。

深色色调的边缘使所有元素的底部边缘变暗。左侧、右侧和顶部边缘没有深色色调。

颜色

着色的元素和纸片的表面齐平。

不要使用任何边缘或阴影来装饰着色的元素。

图层

层状的纸片元素通过边框和阴影创造出深度。

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

提升

在简单的背景轮廓中，提升一个关键的材料元素时，需要将元素放置在背景轮廓的中心。

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

折痕

有折痕的材料元素会给人错觉，使其看起来有深度，但不会损失其几何形状。折痕应该显示在对称形状的中心。

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

折叠

折叠的材料元素是倾斜的，具有较大尺寸。避免在折叠材料中添加斑点色，以避免改变或扭曲关键元素。

部分重叠

部分重叠的材料元素创造了独特的轮廓。所有的元素、边缘、阴影都限制在轮廓内部。

不要重叠超过两个元素。太多重叠会使图标复杂化、失去焦点。

手风琴

手风琴折叠的材料元素由两个元素连接而成，用于增加单个材料元素的尺寸。

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

扭曲

产品图标不应扭曲或变形。元素应保持其几何样式，不应歪斜、旋转、翘起或弯曲。

构成

关键线形状

纸片 vs 颜色

手势

人物图标规范

设计原则

使用大胆的几何形状。

图标形状的对称性和一致性使图标更优质，同时保持了图标的简洁和大胆。

网格、比例和尺寸

以 DP 为单位的网格

系统图标以 24dp 的尺寸显示。创建图标时，以 100% 的比例来设计是非常重要的，那样可以确保像素级的精度。

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

图标网格

图标网格用于促进图标的一致性，并为图标元素的定位建立清晰的规范。这种标准化造就了一个灵活但一致的系统。

内容区域

图标内容应该保持在安全区域内。在安全区域内，图标有足够的显示空间，不会被视图截断（例如滚动时出现的侧边栏）。

裁剪区域会参考图形文件的最终尺寸。

如果需要增加额外的视觉权重，应该仅在安全区域和裁剪区域的间隙内扩展内容。不要让图标的任何一部分超出裁剪区域。

密集型布局

对于桌面端的密集型布局，图标可能会缩小到 20dp，使图标只含 2dp 的内边距。

关键线形状

关键线形状是网格的基础。通过使用这些核心形状作为准则，你可以在整个系统图标的设计中保持一致的视觉比例。

几何形状

预设的标准已经确定了一些明确的关键线：圆形、正方形、矩形和对角线。这种通用的小型面板和简单元素，被用来统一 Google 的系统图标，并系统化图标在网格上的位置。

拐角

一致的圆角半径是统一整个系统图标家族的关键。在图标的外形轮廓上使用 2dp 的圆角半径。不要把描边的拐角也做成圆角（宽度小于等于 2dp 的形状）。

拐角的内部应该是方形。不要把内部拐角也做成圆角。

笔画

一致的笔画粗细是统一整个系统图标家族的关键。对所有笔画都保持 2dp 的宽度，包括曲线、斜线、以及内部和外部的描边。

视觉修正

在极端情况下，需要进行细微的调整以保证图标的可读性。当出现不可避免的复杂细节时，需要对标准做一些调整。

如果需要进行视觉修正，应该使用基本的几何形态。不要倾斜或扭曲这些形态。

间隙

需要在图标周围留有足够的空间，以增加可读性和增加触摸范围。

当键盘和鼠标为主要输入方式时，可以压缩尺寸以适应更紧凑的布局。

最佳实践

保持一致性有助于用户理解图标。在不同的应用中都尽可能使用已有的系统图标。

人物肖像

人物图标分解

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

构成

全身

上半身

包含着的

肢体细节

人物图标规范

颜色

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

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

快捷操作图标

快捷操作的图标是圆形的。它包含一个标准的系统图标，或者至少一个头像。图标的内容应该保持在图标的裁剪区域（图形的整体区域）内。

尺寸

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

44x44dp 的安全区域周围必须有 2dp 的内边距

颜色
安全区域：使用颜色 Material Grey 100（#F5F5F5）填充

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

标准的快捷操作图标

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

尺寸

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

颜色
系统图标的颜色应该和应用的主色或应用的图标颜色保持一致（和圆形背景有足够的对比度）。

文件格式
标准的图标应该以 SVG 格式提供，这个格式使图标可以自由缩放。你也可以使用矢量图、位图或图层列表。

不要使用非矢量图形，因为它们有特定的尺寸，无法进行缩放。

单个头像

单个头像包含一张图片。该图片必须在 XXXHPDI 中创建。

尺寸

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

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

群组头像

群组头像在圆形背景中包含 2-4 张图片。这些图片必须在 XXXHPDI 中创建。

尺寸

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

颜色
安全区域：使用颜色 Material Grey 100（#F5F5F5）填充

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

OEM 遮罩

OEM 可以在不影响图标布局的情况下，在图标上添加自定义的遮罩。

规格：

• 72 x 72 dp 遮罩区域
• 凸形形状
• 圆形遮罩和方形遮罩

阴影

图标包含两类阴影：投射阴影和接触阴影。

投射阴影是从元素边缘延伸到前景边界的尖锐的 45º 阴影。

接触阴影是围绕着元素的柔和的阴影。

浅色边缘和深色边缘

为了提供深度感，刻画了 Material Design 元素的顶部和底部边缘。

浅色边缘突出显示元素的顶部边缘（左侧、右侧和底部不着色）。

深色边缘为元素添加了深色底部边缘（左侧、右侧和顶部不会有阴影）。