8.2 系统图标

系统图标

系统图标用于表示常用操作、文件、设备和目录等。

目录

设计原则

网格和关键线形状

系统图标规格

图标主题

设计原则

概念

系统图标的设计应简单、时尚、友好，有时也要带点趣味性。每个图标都精简到最小形式，表达出基本特征即可。

图标形状都是醒目的几何体。它们有对称和一致的外观，即使尺寸很小，也要保证可读性和清晰度。

正确示例（绿色）

使图标形象和醒目。

错误示例（红色）

不要使用精细、单薄的线条。

正确示例

使用几何一致的形状。

错误示例

不要使用手势或随意的有机体形状。

网格和关键线形状

图标尺寸

系统图标的显示尺寸为24x24dp。创建100%比例查看的图标可获得完美像素精度。

100%比例

1000%比例

密集型布局

在桌面端，当鼠标和键盘为主要的输入方式时，尺寸可以缩小到20dp。

100%比例

1000%比例

布局

图标内容应该处于安全区域内，即不会被遮挡的地方（例如滚动时出现侧边栏）。

如需增加视觉权重，内容可以延伸到安全区域与裁剪区域（整个图像大小）之间的内边距。图标的任何部分都不应该延伸到剪裁区域之外。

1. 安全区域

图标内容限制在20dp x 20dp的安全区域内，周边有2dp的内边距。

2. 内边距

在20dp x 20dp安全区域周边的2dp空白空间形成了内边距。

3. 密集型安全区域

图标内容限制在16dp x 16dp 的安全区域内，周边有2dp的内边距。

4. 密集型内边距

2dp内边距围绕着安全区域

关键线形状

图标网格和关键线

图标网格为图形元素的一致性和灵活定位建立了明确的规则。

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

基本形状

特定的关键线呈现出一些确定的形状：圆形、方形、矩形、正交线和对角线。这些基础形状有助于统一Google系统图标并规范它们在图标网格上的位置。

1. 网格

2. 关键线

3. 方形

高度：18dp

宽度：18dp

4. 圆形

直径：20dp

5. 纵向矩形

高度：20dp

宽度：20dp

6. 横向矩形

高度：16dp

宽度：20dp

几何形状

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

清晰（完美像素）

为避免扭曲图标，通过将X轴和Y轴的坐标设置成整数（没有小数）使图标放置在“像素之上”。

正确示例

图标放置在“像素之上”

错误示例

不要将图标放置在非“像素之上”的坐标上。

系统图标规范

剖析

1. 笔画末端

2. 拐角

3. 内部区域

4. 笔画

5. 内部笔画

6. 边界区域

拐角

圆角半径默认值为2dp。拐角的内部应该是方形而非圆形。对于宽度小于或等于2dp的形状，不要把描边的拐角也做成圆角。

1. 2dp圆角半径的外部拐角

2. 内部拐角

笔画

系统图标使用一致的2dp笔画宽度，包括曲线、斜线，以及内部和外部的描边。

1. 2dp笔画

2. 一致性

3. 笔画末端

4. 内部笔画

正确示例

使用一致的笔画粗细和方形的笔画末端。

错误示例

不要使用不一致的笔画粗细和圆形的笔画末端。

复杂的图标形状

如果系统图标需要复杂的细节，则可进行细微的调整以提高其可读性。这些调整称为视觉校正，任何视觉校正都应该使用基础的几何形态，不要倾斜或扭曲这些形状。

复杂的调整

回形针图标使用了原本2dp笔画区域中的1.5dp，以便在24 x 24 dp的空间内适应多个弯角。

缩小比例

这个图标在24 x 24 dp的空间内使用1.5dp笔画来显示波形。

正确示例

使图标面向前方。

错误示例

不要倾斜、旋转或使图标看起来很立体。

正确示例

简化图标以提高清晰度和可读性。

错误示例

不要过度拟物化，避免复杂的图标。

空间

系统图标周围应保留足够的空间，以增加可读性和触控范围。尺寸为24dp的图标可使用尺寸为48dp的触控范围。

1. 间隙区域

2. 放置方式

密集布局（桌面端）

当鼠标和键盘为主要输入方式时，可以压缩尺寸以适应更紧凑的布局。尺寸为20dp的密集图标使用尺寸为40dp的触控范围。

1. 间隙区域

2. 放置方式

颜色

浅色背景上的图标

激活图标

聚焦状态下的激活图标在浅色背景上的标准不透明度是87%（#000000）。激活但未聚焦的状态是54%。

未激活图标

未激活图标在视觉层次中级别较低，它应具备的不透明度是38%（#000000 ）

深色背景上的图标

激活图标

聚焦状态下的激活图标在深色背景上的标准不透明度是100%（#FFFFFF）。激活但未聚焦的状态是70%。

未激活图标

未激活图标在视觉层次中级别较低，它应具备的不透明度是50%（#FFFFFF）

图标主题

为创建定制的系统图标，可以自定义系统图标的三个属性：笔画与填充、圆角半径以及颜色。

预设图标主题

通过调整这些属性可以创建以下四个预设定制图标集。

轮廓图标

轮廓图标可以自定义笔画和填充属性来营造轻盈干净的风格，以适用密集型界面。通过调整轮廓图标的笔画粗细能补足或平衡排版权重。

笔画和填充

当系统图标未被填充时，它们由其笔画来定义。较粗的笔画增加了重量和块状感，也使填充的图标感觉更沉重。较细的笔画意味着轻盈，给未填充图标带来了一种轻松明快的感觉。

1. 未填充图标

2. 填充图标

3. 为保持可读性，推荐笔画粗细为2dp。

4. 在多种的图标尺寸和应用程序中，2dp粗细的轮廓图标可保持可读性。

笔画对齐

笔画位置（形状的内部、中间或外部）影响图标的整体外观。大多情况下，笔画最好与形状内部对齐。

1. 标准材料图标

2. 笔画内部对齐

3. 笔画中间对齐

4. 笔画外部对齐

1. 将笔画与形状内部对齐可生成具有一致笔画粗细的清晰图标。

2. 为了达到最佳的可读性和识别性，在某些情况下应保留标准的材料图标样式，例如人体图标或专用图标。

谨慎使用（橙色）

大多数情况下的笔画最好与形状内部对齐。但也有时候，将笔画与形状的中间或外部对齐更适用于图标。

正确示例（绿色）

当自定义图标的笔画和对齐方式时，可根据你的设计和品牌来适当调整形状。

这些线性图标的轻笔画沿用了应用品牌的细线风格。

1. 品牌logo

2. 线性图标

3. 应用程序中的线性图标

尖角和圆角图标

尖角图标

尖角图标通过直边来显示角，清爽的样式即使在较小的比例下也能保持清晰可读。

圆角图标

圆角图标使用圆角半径，能很好地匹配以较重排版、曲线logo或圆形元素为表现风格的品牌。

圆角半径

图标的圆角半径由弯曲的外部拐角组成。图标可以较大或较小的圆角半径作为特征。

推荐圆角半径值在0dp和4dp之间。

1. 如果笔画粗细是2dp或更小，则圆角半径只能是1dp。

2. 调整图标的内部拐角和内部区域来匹配圆角半径。

正确示例

自定义圆角半径，使之在表现产品风格时能保持清晰可读。

谨慎使用

如果会导致降低图标的可读性，则不要将内部拐角圆角化。

圆角半径为0dp的尖角图标与应用程序的矩形设计细节相呼应。

1. 品牌logo

2. 尖角图标

3. 应用程序中的尖角图标

这个应用程序使用了圆角按钮和线性logo。

1. 品牌logo

2. 圆角图标

3. 应用程序中的圆角图标

双色图标

双色图标增加了一个维度，它使用了笔画、填充和颜色等属性。对比笔画与填充色使多品牌色得以使用，也提高了可读性。

推荐双色图标的笔画粗细为2dp。

1. 笔画

2. 透明填充

透明度应只使用在双色图标中的填充内。

双色图标能对一个图标的笔画和填充使用不同的颜色。可以调整填充的透明度来提高清晰度和匹配品牌。

图标笔画的不透明度必须是浅色背景上使用87%和深色背景上使用100%。填充色可以根据背景色调来改变。

这个电子邮件应用程序中使用了双色品牌元素，例如logo。

1. 品牌logo

2. 双色图标

3. 应用程序中的双色图标

*原文作者为谷歌设计团队，本文为个人翻译作品，仅供学习参考