恭喜你成为UI中国推荐设计师（详情）

查看全部热门榜单

全部

常用搜索：作品集 AE ui设计 aigc icon logo app

您的意见是我们 UI 中国进步的动力！

点击立即反馈按钮，发表您的意见！

立即反馈

QQ群反馈

您也可以加入UI中国官方反馈群进行反馈！

群号：302892100

备注：反馈问题后@管理员能让我们及时了解您的意见

提交需求

赛事与广告咨询合作，请填写需求表单，我们会在第一时间与您联系！

0/20

0/200

设计大赛

设计大赛
发布广告
发布招聘
其它需求

取消发送需求

提交完成
感谢您对UI中国的支持和信赖！

我知道了

编辑推荐

图标改版不会做？我沉淀了一份大厂图标设计宝典送给你

0.0°

2022-07-13 原创文章 教程举报 2225 60 32 1

设计芝士KING 关注

简介：通过沉淀复盘+大厂图标设计流程，精炼沉淀出图标设计方法论，不仅能有方向性的高质量刻意练习，还能在你的工作中带来实质性帮助

三维图标设计宝典

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

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

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

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

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

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

一前期构思

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 等，千万不要出现像图中的粗细不一致的情况。