Study - Material Design 之 icon

图标

材料图标使用几何形状来直观地表达核心思想、特性或主题

亮色背景中的图标

图标状态	不透明度
** + 聚焦	87%
** + 未聚焦	54%
禁用	38%

暗色背景中的图标

图标状态	不透明度
** + 聚焦	100%
** + 未聚焦	70%
禁用	50%

产品图标

是一个品牌的产品、服务和工具的视觉表现。产品图标为 48dp

设计方法

产品图标的设计灵感来自现实材料的触感和物理质感。每一个图标都可以像纸一样被裁剪、折叠和点亮，但都是由简单的图形元素组成的。
产品图标网格

促进图标的一致性，以及为图形元素的定位建立一组清晰的规范
- 关键线
  
  关键线形状是网格的基础。使用这些核心形状作为准则，你可以在相关产品图标的设计中保持一致的视觉比例。
- 网格
  
  对原稿进行的任何缩放，都将按比例调整图像。通过保持单位比例不变，在缩小图像时可以保持锐利的边缘和正确的对齐方式。
  - 1:1单位网格
  - 4:1单位网格
- 几何形状
  
  预设的标准已经确定了一些明确的关键线：圆形、正方形、矩形、正交线和对角线。这种通用和简单的线框可以统一图标的样式，以及规范图标在网格上的位置。
产品图标标准
- 光线
  
  在材料环境中，虚拟的光线照亮了场景，并使物体投射出阴影。
  
  顶部的光投射在材料元素上产生接触阴影，并突显出顶部和底部边缘。
  
  有角度的光线增强了元素表面的质感。
- 阴影
  
  顶部的光线会在元素周围投射出柔和的阴影，同时照亮元素的顶部和左侧，因此阴影在底部和右侧会稍微重一些。
  
  阴影将始终处于图标的轮廓内。
- 浅色边缘和深色边缘
  
  材料元素的顶部和底部边缘，提供深度和表面感。
  
  浅色色调的边缘突显所有元素的顶部边缘。
  
  深色色调的边缘使所有元素的底部边缘变暗。
- 抛光
  
  抛光层是虚拟光线 45º 照射的结果，光照效果从左上角延伸到图标轮廓的外边缘。抛光始终在图标轮廓内部。
- 浅色边缘、深色边缘和阴影的数值
  
  不同颜色在添加浅色边缘和深色边缘时反应不同。为了确保颜色的和谐，请为每种颜色选择合适的数值。
产品图标模式

受物理材料行为的影响，通过简单的规范便可以让物体产生质感和触感。材料和颜色的相互作用，为许多独特的构成提供了可能。
- 颜色
  - 着色的元素和纸片的表面齐平。
  - 不要使用任何边缘或阴影来装饰着色的元素。
- 图层
  - 层状的纸片元素通过边框和阴影创造出深度。
  - 谨慎控制重叠表面的数量。太多的重叠会使图标复杂化、失去焦点。
- 提升
  - 在简单的背景轮廓中，提升一个关键的材料元素时，需要将元素放置在背景轮廓的中心。
  - 不要使用其他形状对提升的材料元素进行裁剪。
- 折痕
  - 有折痕的材料元素会给人错觉，使其看起来有深度，但不会损失其几何形状。折痕应该显示在对称形状的中心。
  - 不要使用多个折痕，也不要将折痕放在非中心位置。
- 折叠
  - 折叠的材料元素是倾斜的，具有较大尺寸。
  - 避免在折叠材料中添加斑点色，以避免改变或扭曲关键元素。
- 部分重叠
  - 部分重叠的材料元素创造了独特的轮廓。所有的元素、边缘、阴影都限制在轮廓内部。
  - 不要重叠超过两个元素。太多重叠会使图标复杂化、失去焦点。
- 手风琴
  - 手风琴折叠的材料元素由两个元素连接而成，用于增加单个材料元素的尺寸。
  - 不要折叠超过两层。太多的折叠会使图标复杂化、失去焦点。
- 扭曲
  - 产品图标不应扭曲或变形。元素应保持其几何样式，不应歪斜、旋转、翘起或弯曲。