8.1 产品图标

产品图标

产品图标是品牌产品、服务以及工具的视觉表现。

目录

设计原则

网格和关键线形状

规格

图标处理

设计原则

品牌表现

产品图标是品牌和产品（包括其服务和工具）的视觉表现。它们以简单、醒目和友好的方式传达了产品的核心理念和目标。虽然每个图标在视觉上有所不同，但特定品牌的所有产品图标应通过概念和表现来统一。

这些规范是确保通过产品图标颜色和关键元素来表现品牌特质的起点。

设计方法

Material的触感和物理质感反映在Material图标设计之中。每个图标都可像纸张一样被剪切、折叠和照亮，只是一般都由简单图形元素来表现。Material材质坚实，具有干净的折痕和清晰的边缘。表面通过细微的高光和一致的阴影来反映与光线的交互。

1. 物理原型

2. 光线研究

3. 材料原型

4. 颜色研究

网格和关键线形状

图标尺寸

创建一个图标时，以400%（192 x 192 dp）来查看和编辑，其边缘单位尺寸也将变为4dp。为保持这个比例，原始的任何变化都将按比例放大或缩小，这样当恢复到100%（48dp）时就还能保持锐利的边缘和恰当的对齐方式。

1:1 单位网格

4:1 单位网格

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

1. 网格

2. 关键线

关键线形状

关键线形状的基础是网格。通过使用这些关键形状作为基线，可以使你的产品图标在视觉比例上都保持一致。

1. 方形

高度：152dp

宽度：152dp

2. 圆形

直径：176dp

3. 纵向矩形

高度：176dp

宽度：128dp

4. 横向矩形

高度：128dp

宽度：176dp

几何结构

这些关键线形状使用预设标准：圆形、方形、矩形、正交线和对角线。它们统一了产品图标规格，并使其在网格中的位置保持一致。

规格

剖析

为了共享视觉语言，组成产品图标的图像元素在所有的品牌图标中应该保持一致，特别是logo，应具备帮助品牌元素建立熟悉度的特征。

产品图标的基本结构将每个元素置于其上一个的前面，因此每个logo都是自下而上设计。

1. 抛光

2. 材料背景

3. 材料前景

4. 颜色

5. 阴影

1. 材料背景

材料的最底层

2. 材料前景

材料中某层在背景上投射了一个阴影

3. 斑点色

应用在元素上的一小部分颜色

4. 填充色

应用在整个元素上的颜色，从一个边缘延伸另一个边缘

5. 浅色边缘

材料元素的顶部边缘着有浅色（较原始颜色浅）

6. 深色边缘

材料元素的底部边缘带有阴影（较原始颜色深）

7. 接触阴影

前景边缘柔和的阴影

8. 抛光

表面光是在所有图标元素前的柔和色调，从左上角到右下角渐隐

光线

在Material Design环境中，虚拟的光线照亮了场景并使元素投射出阴影。灯光在元素顶部投射，照出的阴影突出了图标顶部和底部的边缘。有角度的光线增强了元素间的立体感。

1. 顶部

2. 45°角

阴影

接触阴影

接触阴影是上方虚拟光线投射的结果。元素的顶部和左侧围绕着柔和的阴影，而在其底部和右侧会稍微加重。阴影始终包含在图标的背景轮廓内。

投影指标

模式：正常

不透明度：20%

X 轴偏移：4dp

Y 轴偏移：4dp

模糊距离：4dp

颜色：参考浅色边缘、深色边缘和阴影的数值

浅色边缘和深色边缘

材料元素顶部和底部边缘表现出了深度感，通过浅色边缘和深色边缘加以强调：

• 浅色色调突显了元素顶部边缘（左侧、右侧和底部边缘没有浅色色调）

• 深色色调使元素底部边缘变得更暗（左侧、右侧和顶部边缘没有深色色调）

1. 浅色边缘

高度：1dp

不透明度：20%

颜色：白色（#FFFFFF）

2. 深色边缘

高度：1dp

不透明度：20%

颜色：参考浅色边缘、深色边缘和阴影的数值

抛光

抛光层表现了一个Material Design 45°虚拟光源产生的效果。它从图标轮廓的左上角延伸到外边缘。

抛光效果图层

渐变指标

类型：径向

角度：45°

颜色：白色（#FFFFFF）

中点位置：33%

滑块1

不透明度：10%

位置：0%

滑块2

不透明度：0%

位置：100%

*请注意本文中的概述值参考于Adobe Illustration。

图标处理

颜色

材料元素具有触感表面。当与颜色结合时，这些表面可以产生许多独特的组合。

颜色与元素表面齐平。因为颜色本身没有深度，所以它不包含边缘或阴影。

正确示例（绿色）

错误示例（红色）

图层

当材料元素分层时，每一层所投射的阴影产生了深度。应限制所叠加的表面层数，太多的图层将导致图标过于复杂。

正确示例（绿色）

错误示例（红色）

不要添加太多的图层。

折痕

图标折痕通过将表面对半分创造出错觉深度。折痕应居中放置在对称的形状上。

正确示例

错误示例

不要使用多个折痕或者将其放在中心位置之外

折叠

当以多个角度折叠时，材料元素将拥有更高的维度。

正确示例

错误示例

不要在折叠元素上使用斑点色，避免改变或歪曲关键元素。

部分重叠

当材料元素部分重叠时，它会创造出独特的轮廓。所有的元素、边缘和阴影都应限制在轮廓内。

正确示例

错误示例

不要部分重叠超过两个元素，避免图标过于复杂。

               

手风琴

手风琴折叠使用连接叠层将两个材料元素结合，从而为元素增加了维度。

正确示例

错误示例

不要超过两个手风琴折叠，太多会使图标复杂化，并且不能提供清晰的焦点。

扭曲

元素应该保持其几何样式，不应歪斜、旋转、翘起或弯曲。

错误示例

不要扭曲或变形产品图标。

错误示例

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