Material Design 图标运用几何形状，直观地表达核心理念或主题。
产品图标是一个品牌产品、服务及工具的视觉表现。
产品图标是一个品牌产品、服务及工具的视觉表现。
尺寸
产品图标为 48dp；系统图标为 24dp
亮色背景上的图标
图标状态 | 不透明度 |
激活 + 聚焦 | 87% |
激活 + 未聚焦 | 54% |
未激活 | 38% |
暗色背景上的图标
图标状态 | 不透明度 |
激活 + 聚焦 | 100% |
激活 + 未聚焦 | 70% |
未激活 | 50% |
产品图标
产品图标是一个品牌产品、服务及工具的视觉表现。它们简洁、醒目、友好，传达着产品的核心理念与意图。虽然每个产品图标在视觉上各不相同，但同一品牌下的所有产品图标应在设计理念和执行层面保持统一。
请遵循以下指南，确保产品图标的色彩与核心元素能够准确体现您的品牌标识。
Material Design 图标易于用于 Web、Android 和 iOS 项目。
设计方法
产品图标的设计灵感源于真实材质的触感与物理特性。每个图标都如同纸张一般被裁剪、折叠和打光，并由简单的图形元素构成。材质质感坚实，折痕利落，边缘清晰。哑光表面通过微妙的高光和均匀的阴影与光线交互。
物理原型
光线研究
材质原型
颜色研究
产品图标网格
产品图标网格旨在促进图标一致性，并为图形元素的定位建立一套明确的规则。这种标准化造就了一个灵活而协调的体系。
网格
关键线
关键线形状
关键线形状是网格的基础。使用这些核心形状作为准则，可以在相关联的产品图标设计中保持一致的视觉比例。
正方形
高度：152dp
宽度：152dp
圆形
直径：176dp
纵向矩形
高度：176dp
宽度：128dp
横向矩形
高度：128dp
宽度：176dp
DP 单位网格
Android 要求产品图标大小为 48dp，边缘为 1dp。创建图标时，请保持 48 单位基准，然后放大 400% 至 192x192dp（此时边缘变为 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%
浅色边缘、深色边缘和阴影值
每种颜色在添加浅色边缘和深色边缘时反应不同。每种颜色的浅色边缘、深色边缘及阴影都需根据其底层颜色进行调整。为确保色彩和谐，请遵循适用于每种颜色的正确数值。
产品图标模式
受物理材质行为启发，简单的规范就能赋予图标表面质感和触感。材质与颜色的相互作用为许多独特的构图提供了可能。
颜色
着色元素与纸张表面齐平。
不要使用任何边缘或阴影来修饰着色元素。
推荐做法
不推荐做法
不要添加阴影。
图层
层叠的纸张元素通过边缘和阴影营造出深度。
请谨慎控制重叠表面的数量。过多重叠会使图标变得复杂，失去焦点。
推荐做法
不推荐做法
不要添加太多图层。
提升
将关键的材质元素提升到简单的背景轮廓之上，能将注意力集中在中心。
不要使用其他形状来裁剪已提升的材质元素。
推荐做法
不推荐做法
不要裁剪提升的元素。
折痕
带有折痕的材质元素在不损失其几何形态的前提下，制造出深度错觉。折痕应位于对称形状的中心。
不要使用多个折痕，或将折痕置于非中心位置。
推荐做法
不推荐做法
不要偏离中心位置。
折叠
折叠的材质元素是倾斜的，具有更大的维度。应避免使用点缀色，以免改变或曲解关键元素。
推荐做法
不推荐做法
部分重叠
部分重叠的材质元素创造出独特的轮廓。所有元素、边缘和阴影都限制在轮廓内部。
重叠不要超过两个元素。过多重叠会使图标变得复杂，失去焦点。
推荐做法
不推荐做法
手风琴式折叠
手风琴式折叠的材质元素通过连接折痕相接，用于增加单个材质元素的维度。
折叠不要超过两层。过多折叠会使图标变得复杂，失去焦点。
推荐做法
不推荐做法
不要使用三层手风琴式折叠。
扭曲
产品图标绝不应被扭曲或变形。元素应保持其几何形态，不应被倾斜、旋转、弯曲或扭曲。
不推荐做法
不要扭曲图标。
不推荐做法
人物图标
以下指南和示例说明了如何将人物图标融入您的界面。
构成
结构
对齐关键线
关键线形状
正方形
圆形
纵向矩形
横向矩形
纸张与颜色
纸张
颜色
手势
结构
构图
人物图标规范
推荐做法
使用简单的形状作为背景轮廓。
不推荐做法
不要使用复杂的形状作为背景轮廓。
推荐做法
使用直线和曲线边缘来平衡视觉效果。
不推荐做法
不要在手臂末端使用圆形，也不要裁剪手臂。
