绘制图标的过程，需要我们将语义转化为具有指代性、识别性和交互性的符号。本文首先带大家来了解下车载应用图标的设计原则，之后聊聊图标的绘制流程。

一、车载应用图标的设计原则

首先，车载应用图标，左边是汽车的，右边是手机的，车载图标有系统应用图标+第三方APP组成。

其次，车载应用图标的原则，不要设计的过于复杂，保证识别性，同时注意图标设计的五大统一。

图标的五大统一：

1、视觉大小统一

在绘制图标时，需借助图标网格线来帮助我们统一图标的视觉大小。

2、视觉语言统一

设计语言包括了线面类型、描边粗细、圆角大小、角度、负空间比例。

• 线面统一：

• 描边粗细统一：

• 圆角的统一：

• 角度的统一：

• 内外环统一：

• 复杂程度统一：

• 设计风格统一：

• 颜色统一：

最后，我们检查一下，所绘制的图标是否具备“品牌辨识度”？

在满足了图标的识别性与统一性后，为了能与其他图标区分开，我们需要从视觉上增加图标的独特性以及表现力。但图标的独特并不意味着要牺牲图标的表现隐喻，使得图标难易理解。品牌元素的使用，会使图标具备视觉独特性的同时增加整个界面的品牌辨识度。另一方面品牌传播需要不断对品牌特点进行重复使用才能让用户熟悉品牌调性，UI界面的tabber作为主要来区分不同产品层级及框架的存在，很多应用都选择在tabber的图标中着重品牌元素的使用。

二、图标的绘制流程

首先，我们来做个实操案例：

• 第一步，打开【PS】，新建256*256的画布，创建背景颜色，添加【圆角】。

• 第二步，制作开关的造型，浏览器找参考，调整位置和间距。

• 第三步，背板添加【渐变叠加】，里面的按钮图层双击添加【内阴影】，再添加【描边】，调整参数。

• 第四步，添加【内阴影】效果，调整颜色，调整【叠加模式】。

• 第五步，搜索黑胶唱片的素材，会有划痕质感，打开【PS】新建画布。

• 第六步，背景图标直接复制过来，调整渐变的颜色，中间添加圆形，制作胶片形状。

• 第七步，新建186*186的画布，添加圆形，【滤镜】-【杂色】-【添加杂色】，调整杂色的数量。

• 第八步，【滤镜】-【模糊】-【镜像模糊】，调整数量，做出划痕质感。

• 第九步，做好后复制粘贴到第一个文件中，圆形添加纯黑色图层，图层模式【颜色叠加】或者调整【不透明度】。

• 第十步，黑色图层双击，添加【渐变叠加】，对渐变颜色进行调整，调整【不透明度】。

• 第十一步，打开中间的圆形进行复制，调小一点，大一点的圆形调为纯黑，调整【不透明度】。

• 第十二步，中间添加小圆，调为黑色，添加【内阴影】，添加白色高光效果，整体添加【投影】，添加【浮雕】。

总之，在产品页面中，图标只是一个相对较小的设计元素，但是其重要性不可忽略，好的图标设计有助于在使用流程中从体验、美感等方面提升用户的好感度。