线性图标原创笔记-上

随着扁平化设计风格的逐步流行和沉淀，线性图标的风格也开始丰富了。现在你会在很多的地方发现它的身影，从传统的网页界面、导航栏，到功能性的列表界面，它无处不在。

同时，线性图标的形态也是多样的。从简约而小巧的图标，到复杂大胆的响应式的版本，线性图标为设计师提供了从直观简单到繁复华丽的全方位的解决方案，可以说它们是丰富多态设计美学的重要呈现形式。线性图标还是界面信息传达和用户体验优化的重要组成部分，其细腻而自然的设计、强大的个性化空间，开始成为界面从普通走上卓越的必备品。

首先我们来了解下线性图标的类别，从不同的类别中进行对比和总结，并为自己创作图标寻找灵感。

极简风格

整体风格极为简约，没有多余的线条，通过线条表现图形，外形简单却具有很强的识别性，在视觉感知上清楚、明了。

双色风格

相较于单色图标更具表现力，细节上也会更加丰富，形态感知上多了一层变化。结合颜色的叠加、对比、互补提升了图标的层次感和丰富度。

同色系：同为冷色系、暖色系或同一色系的表达形式。如下图案例，以暗色为主色，亮色点缀提亮，使得图标具有一种高光提亮的感觉。

另一组案例是亮色主色结合暗色，整体图标效果还算可以，但较亮的颜色没有应用在图标的关键特征上，使得图标第一眼的感知稍有减弱。

对比互补色：颜色跨度更大，层次更加分明。如下图案例，红色与蓝色的撞色之后相比单色的图标更加出彩并且具有记忆点。

透明度变化

本质上与上面一种为一个类型的设计，通过透明度的叠加和变化，提升图标的层次感和空间感，降低图标的压迫性。

渐变层次叠加

渐变带出了图标的质感，结合「不同深度」或「不同饱和度」的变化，让图标更具有细节和层次。

黑白+品牌色

黑白色作为主色调，结合品牌色作为点缀色。与常规的黑白图标相比，既产生了变化，同时兼顾了品牌色的使用。

线性渐变

结合渐变的颜色，丰富了整个图标的视觉表达，并提升了图标的视觉冲击力和设计感。案例结合黑白背景作为尝试，白底：粗线比细线的视觉效果相对较好，渐变也能较为清晰地被表达；黑底：细线比粗线的视觉效果显示得更加精致和具有锐度感。

断点图标

在线形图标基础上，寻找一个缺口来打破全包围图标的沉闷感，使得图标具有透气性和线条的变化。缺口的位置尽量保持统一的方向及大小，另外需要控制开口个数避免过多导致图标形状过于零碎。

说完这么多图标类型，我们在选择时也可以选择其中一种，或几种混合，但要注意确定其设计风格后，要保持图标设计的一致性。

通过对线性图标类型的总结，小编最终决定选择断点图标作为图标设计风格，颜色使用双色。具体操作及颜色选择我们在下期文章中继续分享。