【干货】图标设计类型和风格总结

版权申明：本文出自“杨沐晨曦”原创，感谢“杨沐晨曦”的原创文章分享！

图标是 UI 设计中极为重要的一个环节，我们在做每个界面的设计几乎都会涉及到图标的表达，出色的图标设计可以让界面表达更加精致、有趣。图标的设计往往也体现着设计师的基本功，因此除了日常多画提升对图标造型的把控力外，我们也更需要了解和学习图标设计的趋势类型，从而帮助我们提高在设计中的效率。

基于自我学习的目的，平时在浏览一些设计网站时也会做相对应的收集。因此本文主要对于图标设计的 「类型、风格」 进行了整理，以及自己对于每种图标类型的思考。

图标的类型划分

设计网站上的图标可以说是多种多样，不同类型的图标都有着独特的魅力。例如，线性图标简洁轻量、面性图标厚重直接，当然同一种类型的图标也具有很多不同的表现形式。

因此基于本人对图标的理解，大致划分为三类：线性、面性、线面结合。结合三种基础类型的表达方式可以创造出各式各样的表现形式。

FEVTE编注：更多平面设计理论学习请访问飞特网平面设计理论知识栏目，地址：https://www.fevte.com/plan/shejililun/

线性图标

使用轻量的线条勾勒的图标，整体感受也趋向于精致、细致而具有锐度感。不同的线条表现具有不同的视觉感受，细线轻量、直线硬朗、曲线柔美。

1. 线型图标基础分析及想法

粗细对比

粗细不同，图标的力度和重量感就会有差异。粗线的图标，视觉关注力来说会更加突出，但较于细线的图标也会显得粗壮、厚重。细线的图标，精致、透气、秀美。

但在设计时需要依据 「整体的 UI 风格」 来决定线的粗细，而并非单纯的考虑图标的关注度，反而更需要考虑图标与界面整体的平衡感。

柔度对比

直角与圆角决定了外形的感知和风格的走向，如下图对比中看出，圆角越大图形越趋向于可爱柔美（如下右图），圆角越小则越直接、硬朗和阳刚（如下左图）。因此刚或柔或中间值完全取决于早期对于整体风格的定调。

繁简对比

除了轻量化和简洁之外，图标的识别性也是极为重要。如下左图，「过度简洁」 导致图标失去该有的识别度而出现歧义，而下右图的元素叠加使得图标稍显复杂。在繁与简的平衡中，应该保持在不影响图标识别度的情况下，最大限度的提升图标的简洁程度。

特征的识别度

除了简洁程度，也需要考虑图标该有的特征。例如下图 「评论」 图标的案例，当我把图标中的「三个点」 去掉时，图标依旧具有 「对话/评论」 的表意，而当我把下面的 「箭头」 去掉保留 「三个点」 时，则会出现歧义，它可以被表意为 「更多」 的意思，因此在设计图标时需要对于表意做精准把握，避免歧义出现。

保持图标的特征美感

如下面的 「心形」 图标，下左图是我们具有普识性的图标，与圆形组合之后依然保持着原有的形态美感。但我们不时也会看到第三种设计，整体外形虽然保持着爱心，但为了与整体风格「一致」 强行对外轮廓进行切割，与原图形在美感上则稍微有些出入，这也是我们需要思考的关键点。

组合型比例

组合型的比例会影响到图标的精致程度，准确的 「比例值」 能让整体的造型趋向平衡，更具有美感。如下图案例尝试了两组不同比例的效果，这里以图标窄边作为 「基准值」 进行尝试。当内形为外形的 1 : 2 时（下图2），图标的整体视觉效果较为平衡；当大于 1 : 2 并接近 4 : 3 时，图标内部结构会显得过于饱满。而小于 1 : 2 并接近 4 : 1 时（下图3）则会产生稀疏不紧凑的效果。（这里的比例只是案例需要，实际设计以最终的视觉感知为准）

2. 线性类型拓展

基础的理论，结合延展的应用，可以迸发出更多的创意想法。线形图标也并非只有一种设计形态。通过以下案例，可以看看线型图标设计类型的多样性。

极简风格

整体风格极为简约，没有多余的线条，通过线条还原图形的本质，外形 「简单」 却具有很强的识别性，在视觉感知上轻松、干净。

极简的风格图标在于对图形的把控，多一笔可能显得复杂，少一笔可能影响识别程度。以上图为例，图标的组合元素保持在 2 个左右，整体较为干净。

实际应用：Instagram、Airbnb、Facebook、Twitte

双色

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

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

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

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

实际案例：腾讯动漫我的页面

透明度变化