图标类型千变万化，实际上万变不离「线性、面性、线面结合」3个方面， 再结合 「透明度、渐变、颜色叠加、质感、多维空间」等表达方式设计而成。

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

粗细对比

粗线图标，视觉关注力来说会更加突出，但也会显得粗壮、厚重。细线的图标，精致、透气、秀美。但在设计时需要依据 「整体的 UI 风格」 来决定线的粗细，更需要考虑图标与界面整体的平衡感。

柔度对比

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

繁简对比

除了轻量化和简洁之外，图标的识别性也是极为重要。在繁与简的平衡中，应该保持在不影响图标识别度的情况下，最大限度的提升图标的简洁程度。

特征的识别度

设计时需要考虑图标该有的特征，需要对于表意做精准把握，避免歧义出现。
image.jpeg

组合型比例

组合型的比例会影响到图标的精致程度，准确的 「比例值」 能让整体的造型趋向平衡，更具有美感。image.jpeg

2. 线性类型拓展

基础的理论，结合延展的应用，可以迸发出更多的创意想法。线形图标也并非只有一种设计形态。

极简风格

整体风格极为简约，没有多余的线条，通过线条还原图形的本质，外形 「简单」 却具有很强的识别性，在视觉感知上轻松、干净。
极简的风格图标在于对图形的把控，多一笔可能显得复杂，少一笔可能影响识别程度。以上图为例，图标的组合元素保持在 2 个左右，整体较为干净。
实际应用：Instagram、Airbnb、Facebook、Twitter
image.jpeg

双色

相较于 「纯色的图标」 更具表现力，细节上也会更加丰富，形态感知上多了一层变化。结合颜色的叠加、对比、互补提升了图标的层次感和丰富度。
同色系：同为冷色系、暖色系或同一色系的表达形式。
对比互补色：颜色跨度更大，层次更加分明。
实际案例：腾讯动漫-我的页面
image.jpeg

透明度变化

本质上与双色为一个类型的设计，通过透明度的叠加和变化，提升图标的层次感和空间感，降低图标的压迫性。
实际案例：爱奇艺9宫格图标
image.jpeg

渐变层次叠加

渐变带出了图标的质感，结合「不同深度」或「不同饱和度」的变化，让图标更具有细节和层次。
image.jpeg
实际案例：大众点评攻略页面图标
image.jpeg

线性渐变

结合渐变的颜色，丰富了整个图标的视觉表达，并提升了图标的视觉冲击力和设计感。
实际案例：网易考拉、NAVER
image.jpeg

一笔成形

此类图标在视觉表达上具有较高的线性流畅度和设计感，关注点在于整组图标的 「开口起始点」 设定上需保持一致。例如，「从左到右」或「从右到左」形成一体化的连贯线条，开口起始点不一致会影响整组图标的一致性，应用在页面时也会显得杂乱。
image.jpeg

断点图标

与上一种较为类似，但没有连贯度的要求。在线形图标基础上面，寻找一个缺口来打破 「全包边图标」 的沉闷感，使得图标具有透气性和线条的变化。缺口的位置尽量保持统一的方向及大小，另外需要控制开口个数避免过多导致图标外形过于零碎。
实际案例：腾讯体育、京东
image.jpeg