三维图标设计宝典

最具深度图标设计完全指南为大家带来第七篇--三维图标设计宝典，同时也是本系列的完结篇，撒花~

在经过前六篇文章对于图标知识的构建，填充之后我们进入到最终环节，同时也是最为重要的内化阶段

也就是你需要持续不断的对图标进行刻意练习，具体的练习方式可以根据自己的实际情况去选择临摹，半原创，原创。

在你正式开始刻意练习之前，一定会有这样或那样的担忧和困惑，不知道如何下手。没关系，我将教给你一个图标设计的方法论--三维图标设计宝典

这个图标设计宝典是集我多年图标设计经验的沉淀复盘+大厂的图标设计流程，精炼沉淀出的图标设计方法论，不仅能够有方向性的高质量刻意练习，还能在你的工作中带来实质性的帮助

有了这个图标设计方法论，以后在工作中涉及到图标改版设计的需求时你完全可以直接拿来用，一步一步的推导出你的最终方案，在设计提案时也完全不用担心各方的质疑的，直接把这套三维图标设计宝典给搬出来，按照这个思路去讲解你的计方案，绝对会大幅提升你的设计过稿率

一 前期构思

1.分析竞品

这里以飞猪为例，假如现在要对飞猪的这一组金刚区图片进行设计优化改版，你应该怎么去做呢？

上来就直接按照自己天马行空的想法直接开始撸图？或是上来直接打开Pinterest或dribbble开始抄？

不，首先要分析竞品，这里我们选取飞猪的竞品之一马蜂窝，当然在实际的工作中，你可以选择3个及以上数量的竞品去展开分析会得到更多的信息，这里我们先重点拿一个竞品去分析

分析的模块具体有：竞品，图标，类型，配色，风格调性，解构，核心辨识度。下面展开来看

竞品

马蜂窝

图标

类型

面性-扁平图标

配色

纯色

颜色：红，黄，蓝

饱和度：适中

亮度：高

风格调性

品质 活力 青春 清爽 轻松 通透

解构

圆角：大圆角，

多形组合关系：均有两个单形组成的具有多形组合关系的图标

形与形的关系：覆盖 透叠

图标底部造型有马蜂窝的品牌符号融入

核心辨识点

攻略--书本/杂志

游记--笔记本？笔？（表达含义较为模糊）；

订酒店--高楼

机票--飞机/火车头

必游榜--徽章

自驾--汽车？（汽车图形抽象后有些含义模糊，不太像汽车）

2.解构本品

产品

飞猪

图标

类型

面性-扁平图标

配色

渐变

颜色：青，绿，粉紫，紫，浅蓝

饱和度：适中

亮度：高

风格调性

轻松 通透

解构

圆角：大圆角

形与形的关系：分离 联合

规定形：圆形；反白；质感：微投影

图标造型未有品牌符号融入

核心辨识点

攻略--路标/指示牌

景点--山峰/太阳

酒店--高楼

问答--问号/聊天气泡

机票--飞机

现存问题

1.品牌感缺失

2.图标造型表现较为平庸，和竞品相比缺少亮点

3.颜色，质感，调性不符合飞猪品质 活力 青春 的风格调性

3.关键词脑暴

分析完竞品和本品之后，我们逐渐锁定的本次改版的核心关键词--品质 活力 青春

原始关键词（抽象）--脑暴衍生词（具象）

品质--品牌感；质感纹理

活力--大圆角；多彩；高亮度；高饱和

清爽--通透感；玻璃；水晶

4.产出情绪版

根据衍生出的脑暴关键词我们可以找到一下图片并汇集成一个情绪版，这个情绪版会对接下来的绘制图标起到关键的引导作用

5.明确设计方向

在经过了竞品分析，结构本品，关键词脑暴和产出情绪版后，我们综合以上信息就可以进一步的推导明确接下来绘制图标的设计方向了

1.将品牌感融入进图标中

2.打破平庸的图标造型，拉齐甚至超越与竞品的图标质量，亮点

3.设计符合飞猪品质 ，活力， 清爽 的图标风格调性

4.尝试毛玻璃风格调性的图标设计

二 绘制图标

1.具象功能

绘制图标的第一步是根据这个图标的词汇去具象化，也就是找到对应的事物形象，这样做的好处是能够把握住该图标的核心辨识点，不会因为你天马行空的想象导致最终设计出来的图标用户根本不认识是什么，那就非常失败了

然后根据不同类型的词汇，可以分为实物词汇和抽象词汇

那什么是实物词汇？就是根据图标语意所想表达的功能，找到与之对应的实物形象

抽象词汇：就需要我们发散思维，找与之相近含义的事物。比如“问答”，“问答”是没有实物的，但是我们可以通过“问答”这个词去发散延伸出：疑问、问题、解答等，继续根据这些词延展：问号、文字气泡，笔记本等等，这样就找到了与之对应的实物形象

这里我们以“酒店”为例展开讲解

“酒店”一词很明显属于实物词汇，我们可以很轻松的找到酒店所对应的实物形象，有很多，比如：高楼大厦；房屋；酒店门牌；酒店招牌；床。之后在图片网站找到与这些词相对应的实物形象图片

2.简化结构

第二步--简化结构，那具体如何将实物形象进行简化呢

1.将实物形象具象化，几何化

2.删除无用细节，化繁为简

3.提取他们的主要特征，保证简化后图形的辨识度

下面展开来讲，这里接着“酒店”这个图标去讲，我们将找到的多张表示酒店的实物形象图放在一张图上，可以很明显的发现图中的矩形出现的频率和所占图片的面积是最多的

然后将这些实物形象进行简化，具象化，几何化；删除无用细节，化繁为简，提取他们的主要特征，保证简化后图形的辨识度。最终就得到了类似于酒店楼房剪影的极简图形

3.确定基本形

最终我们确定了“矩形”作为“酒店”这一图标的基本形

4.类型

图标类型的选择上依然沿用原本的面性图标类型

5.配色

配色上参考情绪版和脑爆出的衍生关键词选择黄，绿，蓝，紫，红为基础颜色，再融入渐变色，能够更好的打造符合飞猪品质 ，活力， 清爽 的图标风格调性

6.品牌差异化

当前APP的图标同质化严重，那如何才能形成自己的图标风格，拉开与竞品的差异感，用户一看到这个图标就知道是哪个APP呢？

答案就是要将品牌感融入进图标中，怎么融入？将品牌图形进行轮廓化，抽象化，形成一个品牌符号，这个符号要足够简单，比如圆形，矩形，三角形等，切忌复杂化，因为复杂化就意味着辨识度的不断降低，就达不到我们想要的目的了

同样以飞猪为例，这里直接拿飞猪官方品牌设计团队提炼出的品牌超级符号为原型---一个倾斜的矩形，将其融入在图标的设计中

7.细节纹理

大圆角；毛玻璃质感；光影；形与形的关系：覆盖 透叠

8.绘制过程详解

在不断的分析，拆解，推导后，这里依旧以“酒店”为例，展示详细的绘制过程，供大家学习参考

(1)基本形--矩形

(2)酒店具象化

(3)融入飞猪品牌超级符号

(4)加两条横杠，使其更有楼房的特点

(5)填充轻渐变蓝色；右侧做毛玻璃质感处理；圆角及其余细节处理

(6).此时发现左右两个叠加的图形整体来看有些分离感，不够和谐统一；因此在兼顾品牌符号的同时调整圆角大小，让左右两个模块成左右斜对角对称；

这样整体来看两者联系更为紧密，和谐，统一；两个横杠用纯白色在整个图标中有些过分凸显；因此通过渐变蓝色的方式使其融入整体的同时不失辨识度

(7)到这里呢其实已经可以算完成了这个图标的设计，但是能不能进一步优化呢？当然可以。在左侧增加一个白色渐变和光影曲线，进一步增强通透，清爽的风格调性

(8)再增加亿点点细节—左侧双色描边；最终一个融入了飞猪品牌符号的具有品质 ，活力， 清爽风格调性的具有良好辨识度的图标就大功告成了

9.最终展示

三 走查图标

在经过了第一步的前期构思，第二步的绘制图标，我们终于把图标画出来了，这时可能很多小伙伴就以为这已经圆满完成了工作，其实不然，千万不要忘记第三步，同时也是非常重要的一步--走查图标

走查图标在之前的文章中已经详细讲解过了，这里就简单说一下，想了解更多的小伙伴可以点击去阅读上篇文章哦 (图标总是画不好？一篇带你学透图标)

1.辨识度

(1)绘制的图标形状是否能够很直接的表达出该图形所想表达的意思，也就是说一个图标的形状能否像文字一样能够快速让用户理解含义至关重要，千万不要模棱两可，这点也很重要，此时图标的美感度要放在第二位

(2)具有明确的辨识点

这里依然拿“酒店”图标来讲解，酒店图标的绘制过程就是用酒店最具代表性的高楼图片具象化，抽象化而来的，从源头上就有明确的辨识点，能够清晰直接的表达出该图形所想表达的意思

2.统一性

类型统一

类型统一，就是你在绘制前就要设定好自己画的这一系列图标是什么风格的？是单色线性？多色面性？还是线面结合？锁定好一个风格后再去着手绘制，这样不至于彻底放飞自我，一会画个单色线性的，一会又画个单色面性的。

本次优化的飞猪金刚区图标在第二步的绘制图标阶段就已经确定了渐变面性的图标风格，因此整套图标都是沿用这一风格，保证了类型统一

风格统一

可能有小伙伴会说，图标的类型统一不就是风格统一了吗？其实不然，类型统一是大的风格统一，再细分可以分为粗细，圆角，断点，颜色，质感，投影，形与形的关系等等这些细节，它们都是构成一个图标不同风格调性的关键一环。

本次优化的这一组五个图标在圆角，颜色渐变幅度，质感（毛玻璃），投影，形与形的关系（覆盖，透叠）等细节上均保持一致

体量感统一

由于我们视觉感官的作用导致在我们的眼里，同样尺寸下的正方形要比圆形和三角形都要大，所以在我们绘制图标的时候要注意保持视觉大小的统一，也就是体量感的统一，而不要去追求数据大小的统一，毕竟最终用户看到的是他感觉到的大小而非数据大小。

根据视觉感受我们来检查一下这组图标，看下是否能够体量感统一

可以发现这五个图标整体都比较饱满，体量感差别不大，均能保持统一

角度统一

所谓角度统一就是图标要整体保持呈现出来的角度统一，如果是斜 45 度，那么这一组图标都要保持斜 45 度。

可以发现图中第一和第五个图标的角度为正负45度，其余为正90度，从严格的角度统一的规则来看这组图标确实存在不统一之处，但在之前的文章也说了千万不要被规则限制死，规则是基础，在符合一致规则的基础之上做一些合理的创新会使得你的设计更有亮点，这里之所以把第一和第五个图标做了异于其余几个图标的原因在于我想让首尾两个图标引导用户的视线 ，使其聚焦在这一组图标上

粗细统一

一组图标中要保持描边粗细的统一，比如粗细都是 3px，或者都是4px 等，千万不要出现像图中的粗细不一致的情况。

粗细统一多用于线性图标，本组图标中有两个出现了线性元素，因此也可以检查一下他们的粗细是否统一，可以看出红色区域标注出的粗细是一致的

圆角统一

圆角统一的逻辑其实和描边粗细统一是一致的，一组图标中要设置一个统一的圆角度数，例如是 8，那么都要是 8.

3.美感度

图标除了满足表意性的基础功能之外，作为设计师的我们要对图标美感负责，那一个图标怎么去评判好不好看呢？评判的标准是什么呢？

我认为一个基础的判断标准就是在视觉感受上是否饱满和灵动感。怎么来理解饱满感和灵动感呢？

饱满感相对好理解，就是在一个图标盒子内，你所绘制图标的占比面积是否足够大，千万不要画的过细或占比过小，这样在视觉上就会让用户觉得单薄，不舒服

上图中右侧图标整体呈细长状，可以很明显的发现其在图标盒子内占比不饱满，反观左图呈现出的饱满感，两者高下立判

灵动感简单来说就是要让你绘制的图标看起来不是那么呆板，缺乏变化感，这种感觉对于初学者来说不是很好把握，没关系多练习多看优秀作品你就能有这种感觉了

上图中虽然都是表达出酒店的图标含义，但是做题看起来十分呆板，方方正正，缺少变化感，右图简化了线条的同时做了线条角度的变化，相比之下比左侧灵动很多

4.差异化

目前的APP同质化现象严重，下图是两个知名长视频APP的首页，如果我们去掉颜色同时去掉页面中的logo，不告诉你这是哪个 App，可能你也难以区分这些 App，图标也存在同样的问题

那如何能够避免这种情况，给每一个 App图标融入独属于自己 App 的印记呢？这就涉及到一个 App 的品牌基因了

如何从一个品牌中提取出一个品牌符号，这个符号要足够简约，通用性要强，比如圆形，三角形等简单的几何图形，也就是基本形。不能为了差异化而差异化，设计出一些相对复杂的图形

因此我们需要根据基本形提取的符号才能代表一个 App 的独特基因属性，打造差异化。

同样以飞猪为例，这里直接拿飞猪官方品牌设计团队提炼出的品牌超级符号为原型---一个倾斜的矩形，将其融入在本次图标的设计中，强化了图标的品牌属性的同时增强了差异化

四 本文回顾

在经过前六篇文章对于图标知识的构建，填充之后我们进入到最终环节，同时也是最为重要的内化阶段

本文中详细讲解了图标的改版设计如何做，教给你一个图标设计的方法论--三维图标设计宝典

这个图标设计宝典是集我多年图标设计经验的沉淀复盘+大厂的图标设计流程，精炼沉淀出的图标设计方法论，不仅能够有方向性的高质量刻意练习，还能在你的工作中带来实质性的帮助

最后回顾一下三维图标设计宝典的脑图吧

如果你有什么疑问，或工作中的困惑，设计中的问题都可以加我微信跟我交流哈，跟我一起倍速成长吧

微信：shejizhishi001

公众号：设计芝士KING