Material design - 图标（二）

系统图标

系统图标表示常见操作，文件，设备和目录。

概念

系统图标设计简单，现代，友好，有时古怪。每个图标都缩小为最小形式，表达了基本特征。

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

---

网格和keyline形状

图标大小

系统图标显示为24 x 24 dp。创建用于以100％比例查看的图标，以获得完美的像素精度。

密集的布局
在桌面上，当鼠标和键盘是主要输入方法时，测量可以缩小到20dp。

---

布局

图标内容应保留在实时区域内，该区域是不太可能从视图中隐藏的图像区域（例如滚动时出现侧边栏时）。

如果需要额外的视觉重量，内容可以延伸到活动区域和修剪区域之间的填充（图形的完整大小）。图标的任何部分都不应延伸到修剪区域之外。

---

Keyline形状

图标网格和keyline

图标网格为图形元素的一致但灵活的定位建立了明确的规则。
Keyline形状是网格的基础。

通过使用这些核心形状作为指导，您可以跨系统图标保持一致的视觉比​​例。

基本形状

对于某些形状存在特定的keylines：圆形，正方形，矩形，正交和对角线。这些基本形状有助于统一Google系统图标并规范它们在图标网格上的位置。

---

几何

已经确定了特定keylines的预设标准：圆形，正方形，矩形，正交和对角线。这些通用和简单的元素已经开发出来，以统一Google系统图标并将它们的位置系统化到图标网格上。

---

清晰度（Pixel完美）

为避免扭曲图标，请将X和Y坐标设为整数，而不是小数，从而将图标“放在像素上”。

---

系统图标指标

组成

Stroke terminal

Counter area
Stroke
Counter stroke
Bounding area
①描边末端；②角；③反白区域；④描边；⑤反白边缘；⑥留白。

角

角半径默认为2dp。内角应为方形，而非圆形。对于2dp宽或更小的形状，笔划角不应该是圆形的。

描边

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

复杂的图标形状

如果系统图标需要复杂的细节，则可以进行细微的调整以提高其易读性。
这些调整称为光学校正。任何光学校正都应使用所有其他图标所基于的几何形式，而不会扭曲或扭曲这些形状。

空间

足够的空间应围绕系统图标，以便易读和触摸。24dp的图标可以使用48dp的触摸目标。

密集布局（桌面）

当鼠标和键盘是主要输入方法时，可以压缩测量值以适应更密集的布局。20dp的密集图标可以使用40dp的触摸目标。

1. 清理区
2. 放置

颜色

在轻的背景的图标

• 活动图标
  在浅色背景上具有聚焦状态的活动图标的标准不透明度为87％（＃000000）。积极与未聚焦状态是54％。

• 非活动图标
  在视觉层次结构中较低的非活动图标应具有38％的不透明度（＃000000）。
  
  在黑暗的背景的图标

• 活动图标
  在深色背景上具有聚焦状态的活动图标的标准不透明度为100％（#FFFFFF）。未聚焦状态的活跃是70％。

• 非活动图标
  在视觉层次结构中较低的非活动图标应具有50％的不透明度（#FFFFFF）。