线性图标设计方法

很多设计师认为线性图标不重要，设计前在花瓣、iconfont、P站一通搜，然后找到几个看起来合适的改一改就拿去用，这种方式虽然不错，但是产品设计完成后平平无奇，甚至和其他产品“撞脸”。

本文从小白到超神共分为四个部分：

1.基础构成

2.产品属性

3.统一规范

4.品牌基因

一.基础构成

1：思考文案是否有可以直接表达的方式。

例：“信用卡”“购物车”“订单”此类在现实生活中有已存在的物品，我们就可以找到图片，直接进行简化制作。

但是不能看到什么画什么，导致在制作图标的时候没有重点的勾勒，作为图标，主观美化和简约也是很重要的。

2：文案拆分再组合

例：“发现新鲜”“学习计划”“推荐有礼”此类生活中没有对应的物品的，我们可以将关键词拆分。

推荐有礼=推荐+礼品

推荐：人给人推荐

礼品：礼盒、礼袋

推荐（以人为主的推荐—得到人物图标）

礼品（生活中的礼品—得到礼盒或礼品袋）

将其结合

二：产品属性

“图标的情绪”

为什么只看脸就能准确地区分儿童与成人呢？因为儿童的面部圆润，五官紧凑，而成人的面部轮廓比较硬朗，五官相对较宽松，在图标的绘制上也是同样的道理。

同一个表达形式，不同的描边粗细和圆角大小往往能使图标传达出不同的情绪。

以下是同一组图标，改变其描边粗细和圆角大小后体现出的不同面貌。

风格:通用

描边：中     圆角：中

风格:卡通、儿童、有趣

描边：粗     圆角：大

风格:高端、商务、金融

描边：细     圆角：小

风格:可爱、年轻、女性

描边：中     圆角：大

风格:潮流、年轻、个性

描边：粗     圆角：小

三：统一规范

• 图标的基本形状
• 描边粗细
• 圆角数值
• 内外环比例
• “破形”统一

1.图标的基本形状统一

• 大多数人可以很轻松地将物品概括成线条并将其绘制成图标，但是如果没有规范地绘制，就会导致一组图标高矮胖瘦参差不齐，视觉上看起来很乱。

• APP的图标大致分为圆形、正方形、竖长的矩形、横长的矩形；

• 在绘制图标前，要先确定基本的几何形，尽量让图标保持一种形状。

• 但是产品中图标的功能性通常不由UI设计师来决定，我们会面临不同图标的基础属性和功能性相差较大，无法将所有图标统一成一种几何形的情况，这个时候我们就要通过统一视觉大小，将不同的几何形保持视觉比例一致；

• 可以借助“图标盒子”作为约束，帮助我们更好地统一图标的视觉大小。

• 使用图标盒子时不用严格按照几何形约束，可以适当的调整下距离。（可以留言图标盒子或者私信我获取哟～）

• 

2.描边粗细统一

这个比较好理解，就是将图标的描边数值统一。

但是实际操作时可能偶尔会面临图标的内部留白面积较小或者较大，这时如果一个图标的所有描边都统一粗细的话，就会导致图标视觉上过于拥挤或者宽松，我们可以灵活的调整内外环图形的描边粗细，以达到视觉效果舒服。

3.圆角数值统一

这个也比较好理解，只需保持图标中的圆角数值统一就可以了。但是有的设计师在设计一个图标时，所有的图标都严格按照统一的数值来进行设计，从而忽略了最重要的视觉效果。

一个图标的外轮廓与内部的图形大小是不一致的，如果我们强行保持所有圆角数值统一，内部10px的圆角和外部10px的圆角效果是大相径庭的，根据具体的视觉效果主观地调整圆角数值，才是正确的做法。

4.内外环比例统一

我们从整体看局部，图标外轮廓的几何形状统一后，再来看每一个图标内部的大小是否统一。

虽然没有大毛病，但是看起来却有点乱

我们将图标的内环大小统一后，图标整体看起来就有序多了

5.“破形”统一

在设计图标的时候，为了表现出丰富、时尚、不安分等情绪，我们常常采用破形的做法来设计图标

但是破形也不能随便地“破”，在处理破形时，要保持1.位置、2.角度、3.破形的大小统一。

1.位置：尽量所有的破形的位置都在相对的位置

2.角度：尽量破形的角度保持一致

3.破形的大小：尽量保持被破掉的大小一致

如果设计一组图标时要采用破形的手法，但是有些图标发现破形后不美观，那就用左右或上下两个元素之间的留白来代替某一个元素的破形，但是两元素的间距尽量和破形的大小保持一致，还是那句话，保持视觉效果统一。

四：品牌基因

在设计图标时，找到logo、IP形象等具有品牌标识的图形，提炼其特征，然后融入到图标设计中。

最后：

图标盒子在下方的压缩包里，可自行下载哟~

如果你看完后有收获，不要忘记点赞哟～您的支持是我更新的最大动力！！

Powered by Froala Editor