这是一个翻译系列，原文是谷歌18年所出的材料设计指南（文末有链接），强大的材料设计将带我们一起深入了解UI设计中的所有规范。每周会更新数篇，一共百余篇，欢迎关注哦。
系统图标用于表示常用操作、文件、设备和目录等。
目录
目录
设计原则网格和关键线形状系统图标规格颜色图标主题
设计原则
概念
系统图标的设计应简单、时尚、友好，有时也要带点趣味性。每个图标都精简到最小形式，表达出基本特征即可。
图标形状都是醒目的几何体。它们有对称和一致的外观，即使尺寸很小，也要保证可读性和清晰度。
网格和关键线形状
图标尺寸
系统图标的显示尺寸为24x24dp。创建100%比例查看的图标可获得完美像素精度。
密集型布局
在桌面端，当鼠标和键盘为主要的输入方式时，尺寸可以缩小到20dp。
布局
图标内容应该处于安全区域内，即不会被遮挡的地方（例如滚动时出现侧边栏）。
如需增加视觉权重，内容可以延伸到安全区域与裁剪区域（整个图像大小）之间的内边距。图标的任何部分都不应该延伸到剪裁区域之外。
关键线形状
图标网格和关键线
图标网格为图形元素的一致性和灵活定位建立了明确的规则。
关键线形状是网格的基础。通过使用这些核心形状作为准则，可以使系统图标在设计中都保持视觉比例上的一致。
基本形状
特定的关键线呈现出一些确定的形状：圆形、方形、矩形、正交线和对角线。这些基础形状有助于统一Google系统图标并规范它们在图标网格上的位置。
几何形状
预设标准已经确定了一些明确的关键线：圆形、方形、矩形、正交线和对角线。这些通用且简单的元素已经被用来统一Google的系统图标，并将图标在网格上的位置系统化。
清晰（完美像素）
为避免扭曲图标，通过将X轴和Y轴的坐标设置成整数（没有小数）使图标放置在“像素之上”。
系统图标规范
剖析
笔画末端拐角内部区域笔画内部笔画边界区域
拐角
圆角半径默认值为2dp。拐角的内部应该是方形而非圆形。对于宽度小于或等于2dp的形状，不要把描边的拐角也做成圆角。
笔画
系统图标使用一致的2dp笔画宽度，包括曲线、斜线，以及内部和外部的描边。
复杂的图标形状
如果系统图标需要复杂的细节，则可进行细微的调整以提高其可读性。这些调整称为视觉校正，任何视觉校正都应该使用基础的几何形态，不要倾斜或扭曲这些形状。
复杂的调整
回形针图标使用了原本2dp笔画区域中的1.5dp，以便在24 x 24 dp的空间内适应多个弯角。
空间
系统图标周围应保留足够的空间，以增加可读性和触控范围。尺寸为24dp的图标可使用尺寸为48dp的触控范围。
间隙区域放置方式
紧凑布局（桌面端）
当鼠标和键盘为主要输入方式时，可以压缩尺寸以适应更紧凑的布局。尺寸为20dp的密集图标使用尺寸为40dp的触控范围。
间隙区域放置方式
颜色
浅色背景上的图标
激活图标
聚焦状态下的激活图标在浅色背景上的标准不透明度是87%（#000000）。激活但未聚焦的状态是54%。
未激活图标
未激活图标在视觉层次中级别较低，它应具备的不透明度是38%（#000000 ）
深色背景上的图标
激活图标
聚焦状态下的激活图标在深色背景上的标准不透明度是100%（#FFFFFF）。激活但未聚焦的状态是70%。
未激活图标
未激活图标在视觉层次中级别较低，它应具备的不透明度是50%（#FFFFFF）
图标主题
为创建定制的系统图标，可以自定义系统图标的三个属性：笔画与填充、圆角半径以及颜色。
预设图标主题
通过调整这些属性可以创建以下四个预设定制图标集。
轮廓图标
轮廓图标可以自定义笔画和填充属性来营造轻盈干净的风格，以适用密集型界面。通过调整轮廓图标的笔画粗细能补足或平衡排版权重。
笔画和填充
当系统图标未被填充时，它们由其笔画来定义。较粗的笔画增加了重量和块状感，也使填充的图标感觉更沉重。较细的笔画意味着轻盈，给未填充图标带来了一种轻松明快的感觉。
笔画对齐
笔画位置（形状的内部、中间或外部）影响图标的整体外观。大多情况下，笔画最好与形状内部对齐。
标准材料图标笔画内部对齐笔画中间对齐笔画外部对齐
这些线性图标的轻笔画沿用了应用品牌的细线风格。
品牌logo线性图标app中的线性图标
尖角和圆角图标
尖角图标
尖角图标通过直边来显示角，清爽的样式即使在较小的比例下也能保持清晰可读。
圆角图标
圆角图标使用圆角半径，能很好地匹配以较重排版、曲线logo或圆形元素为表现风格的品牌。
圆角半径
图标的圆角半径由弯曲的外部拐角组成。图标可以较大或较小的圆角半径作为特征。
推荐圆角半径值在0dp和4dp之间。
圆角半径为0dp的尖角图标与app的矩形设计细节相呼应。
品牌logo尖角图标app中的尖角图标
这个app使用了圆角按钮和线性logo。
品牌logo圆角图标app中的圆角图标
双色图标
双色图标增加了一个维度，它使用了笔画、填充和颜色等属性。对比笔画与填充色使多品牌色得以使用，也提高了可读性。
双色图标能对一个图标的笔画和填充使用不同的颜色。可以调整填充的透明度来提高清晰度和匹配品牌。
浅色背景深色背景笔画87%纯色100%纯色
图标笔画的不透明度必须是浅色背景上使用87%和深色背景上使用100%。填充色可以根据背景色调来改变。
这个电子邮件app中使用了双色品牌元素，例如logo。
品牌logo双色图标app中的双色图标
原文地址：Material Design
译者：招财鱼
