​图标设计如何快速过稿？来看腾讯设计师的私藏方法

最近遇到一个同学，说做了很多稿图标的方案最终还是没有确定下来，但眼看着产品马上就要上线了，该怎么办。经过一轮沟通，发现他陷入几个新手设计师在画图标比较容易犯的问题：

• 面对产品提$ n H t O p出的疑问，不知道如何拆解，仅停留在表面的理解，“美”or“丑”
• 思考的方案呈现不够系统，导致多次修改，也未被采纳
• 对于图f Q i L = X标多方案的设计输出缺乏方法，漫无目的的设计方案
• 思考不够发散，存在局限性，不敢大胆突破
• 过度纠结，都在做方案，做出了但方案都不过关

从以上这几个问题，我们进行深入思考，会发现其实这些只是表面上的问题, ; 7 # o O } `，实际上是在说什么呢？

• 美 or 丑：实际上是我们对于图形或图标的设计趋势是否了解，我们设计的图标设计是否[ m w ^ Y N T e符合现在; D I n l 1的趋势，我们阐述方案的时候是否足够的自信这个是现在流行的u @ O a ! `风格？
• 多次修改：这个实际上是W d S @ @ O =反馈我们呈现方案的功力或者能力，我们做的设计是否足够系统性，多套方案中是否有命中对方想要的点
• 漫无目的的设计：基于上述第 2 点的框架下，我们在输出图标的时候设计呈现的维度是否足够全面，从表意到图形美观度上是否有足够多的思考
• 局限性：因为日常看得少，所以在实际案例设计的U ] – 6 r v +时候也会受到局限，因此养成日常积累的习惯比临时思考会更好
• 过度纠结：这种表现是表明你已经陷入到了设计本身，而缺乏跳出来看看更多参考的勇气了，这时应该先停住，找找参考，帮G t : n 2 `助打开思考壁垒

基D J X q K于以上这个案例，分) t c ~ I f 9享下我在日常设计中常用的一些方法，& m /希望可以帮助遇到相同问题的小伙伴们进行一些答疑，从而帮助你们打破壁垒，高效成长。

下面发改分成 3 个部分来进行阐述：思考维度的锻炼；图形的设计方法；系统化方案呈现

思考维度的锻炼

当我们要设计一个图标的时候最容易入手的就是图标的表意，从表意延伸到图形的设计，然后再加以不同的设计手法（线、面、线面等等）。

1. 图标的+ s u 0 b 1 5 q表意

图标的表意方式，大概可以拆分为以下几种：具有普识性的图标、可进行表意延伸的图标、8 x } w l o M U ]通过组合的图! B 7 k = O + q 6标、抽象的需要关联的图标。

2. 普识型图标

即我们在现实生活中常见e D U且具有常识性性的图标，例如：删除、添加、放大、搜索、笔记本、手机、眼睛、礼物等等。这类的图标重点在于形体的打磨上{ | I 6需要多花一些时间，从不同的角度进行尝j 0 s V P 4 K S v试，比如以删除为例子，同样的造型但可以有不同的设计表现。

3. 表意延伸的图标

即一个事物可以被延伸为一个或者多个图形表现的图标，I s | 1 l : +例如：点赞、浏览、设置、收藏、评论、事件等等。例如点赞X X p $ u F-延伸为你很棒用大拇指来表达，游戏延伸为游戏手柄、设置-延伸为机械操作用3 . _ Z m $ %齿轮来表达，评论延伸为对话使用对话框来表达，浏览-延伸为用眼睛的图标表达。

除此之外延伸表意的图标可以有J 8 ~ !多种设计方式，例如以事件为案例。

• 方案 A：事件具有时间性，所以可以考虑用日历来置换；
• 方案 B：事件具有告知的行为，所以考虑用喇叭来突出这个行为；
• 方案 C：事件具有档案的意味，所以我们可以用表单的图形来做沿用。

4. 组合型图标

主要是指该类图标的表意需要通过 2 个以上的图形进行组合才能更加准确进行表现，例如：群、群聊、好友、添加联系人、情侣、转账、红包。

5. 创造类图标

特指认识中没有，因为产品需要被二次创` ~ H 6造出来的图标，一般在一些新生业务2 ) d s d z V R中会常出现，这类图标初期往往d Y M z L J O需要伴随文字一同出现P ) 2 l ) y J。例如：微信的朋l , g b 0友圈、视频号、小程序、手机系统的 Wi-Fi、蓝牙等类型等图标。

图标的# { _ b ]表现方法

常规的图标表现方法（线形、线面、面形、插图) ~ [ z、叠色p B . 8 m s 0 ` Q等等）我们基本都了解，但作为设计师更应该知道潮流趋势，| = s O } O q清楚现在流行什么类型的设计，这样才能让你作出更加出彩的设计。

这里分享几种目前最流5 w 8 w V K w s k行的图标设计类型：

1. 磨砂质感图标

磨砂质感图标作为 2020 年底最流行的图标，已经在不少 APP 中看e * { 2 = 9得了相关的设计，从设计方法上并不难，重点还是在于是否有需要和应用场景。

2. 插图+磨砂质感

图标使用小插图的方式进行绘制，然后再结合高斯模糊的视觉表现手法，整体让图标更具有层次感和通透感。

3. 3D 质感图标

3D 作为这 2 年最流行的设计趋势，自然也牵动着设计师的心。但 3D; v ? K ] Y 的打磨相对会比较耗费时间，不过仍然是值l c ]得一试的{ M g设计方式之一，目前在 APP 的设计中比较少见到应用，或许会成为D 8 t J P 3 2F z S 7 {024 x Q1 的趋势之一。

4. 3D 磨砂质感图标

基于 3D 与毛玻璃图标的结合，整体的表现结合了这 2 种风格的特点，既保留了毛玻璃图标的通透，同时也具有 3D 的空间感。

5. 流光溢彩的图标

算是属于渐变类型P Z 7 W Q的一种，但颜色和细节的跨度相比常规的渐变图标更加丰富，整体让人感觉具有流光的效果，更加具有未来感。不过从目前来说，更适合作为独立的应用 APP 设计，作为常规的图标设计+ P 7需要一定的接受度。

图标的设计方法

想要了解设计的方法之前，我们得了解有哪些类型的图标，具体大家可以查看我之前撰写过的文章，里X ; u面有详细的分析了图标的设计类型。除此5 u ~ @之外，这里还可以分享下我日常中设计图标使用的Z O | r方法。

这个专题也有超详细O – ` O U的分类和教程 →hta r . R r g (tps://www.uisdc.com/zt/icon-drawing-guide

1. 表意+基础形

基础形体使用普适性较高的图标造型，在图标的亮点或者点缀处通过表意关联进行创意设计，从而让图标获得新1 z N % o v I {的感受，但又具有较高的识别性。案例：例如我们以日历图标为案例，可P | S l k _ @以比较直观的使用日历的普识图形，然后通过日期的方式来进行强调赋予图标生命力，然后再叠加上颜色和质感 0 q h，并且增加一点小趣味的折角设计。

2. 关联延展

基于实际场景的认q c 4 S Q V s [识来进行图 a w Y j J i形关联延展，并且进行一定的美感升级及图形的优化，延展出最终的图标设计，这种方法可G – Z @ V以大大提高大家对于图标的识别度。案例：设计一个快速聊天表意的图标，聊天我们常规使w ) j F 0 & ) 3用气泡，快速我们可以关联为闪电，然后把气泡和闪电进行结合。

3. 组合升级创意

利用一些正负形的创意方法，使用 A、B 图形的进行有机融合或剪切，使其获得新的图标造型，让整体的图标感j z x i m A g受更具有创意点。案例：例如我们尝试画一个具有宇宙感受的游戏图标，可以通过手柄和星球的有机结合让整 c 4 b V | 3 E F体的图标带有游戏和星球的意思，整体提升了表达的创意。

系统化方案呈现

方案的呈现属于设计的一部分，虽然不能起到决定性的作用，但好的呈现效果往往可以L l c {帮助我们得到更好的印象分，这里分X Q k 3 C 5 d享一下我y e i s c在设计过程中尝试的一些方法。方案的大小或者输出的类型也决定着我们呈现方案的类型，下面根据不同的类型分享不同的呈现案例。

1. 纵横对比法

适用于需要大量尝试的时候，以穷举输出为典型案例，2 c ;我们可以用最基础的图形为中心点，结合图形的表意和图形风格进行纵横的发散性扩展，例如横向为表意、纵向为图形风格，中间部分属于交叉部分。

案例模版

2. 单个图标创意思考

对于一些标志类或重要的图标，我们需要阐述我们W } ) w K 0 P (的设计想法或者来源，这种呈现的方式就可以很直观且简洁的表现我们的思考。

案例模版

3. 整套输出

对于一整套的图标，我们需要在案例上呈现图形的^ E 7 g O G f o设计规则，包括但不限于有：圆角、角度、组合规范、斜度等等。除了呈现图形之外，请补充上颜色的应用规则、颜色的表意等等。

案例模版

总结

图标设计虽然是一个小内容但却很重/ % o / t z s v要，反映着着整个页面的精致度，在 UI 界面来说是除界面 M E 0 `排版之外最重要的一环，因此是很值得我们去研究的设计之一，建议在日常工作中多练习多看。

欢迎关注作者微信g : g公众– 1 = 5号：「ID设计站」