图标太多分不清楚？可能是最全面的图标设计类型和风格总结！

编者按：图标类型千变化，实上变不离「线性、性、线结合」3个， 再结合 「透明度、渐变、颜色叠加、质感、多维空」等表设计而成。本文将近 6000 ，篇可以了解全部设计风格！

图标是 UI 设计中极为重要的一个环节，我们在做每个界面的设计几乎都会涉及到图标的表达，色的图标设计可以让界表更加精致、有趣。

图标的设计往往体现着设计师的基本功，因此除了日多画升对图标的把控外，我们更需要了解和习图标设计的趋势类，从而帮助我们在设计中的效率。

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

图标的类型划分

计网站上的图标可以说是多种多，不同类型的图标都有着独的魅力。例如，线性图标简洁轻量、面性图标厚重直，当然同一种类型的图标也有多不同的表现形式。

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

线性图标

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

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

粗细比

粗细不，图标力度和量感会有异。粗线图标，视觉关注力来说会更加突出，较于细线图标也会显粗壮、厚。细线图标，精致、透、秀美。

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

柔度比

与圆决定了形感知和风格走，如下图比看出，圆越大图形越趋于可爱柔美（如下右图），圆越小则越接、硬朗和阳刚（如下左图）。此刚或柔或值完全取决于早期于体风格定调。

繁简对比

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

特征的识别度

除了简洁程度，也需考虑图标该的特征。例如下图 「论」 图标的案例，当我把图标中的「三点」 去掉时，图标依旧具 「对话/论」 的表意，当我把下面的 「箭」 去掉保留 「三点」 时，则会出歧义，它可以被表意 「多」 的意思，因此设图标时需对于表意精准把握，避免歧义出。

保持图标的征美

如下面的 「心形」 图标，下左图是有普识性的图标，圆形组之后依然保持着有的形美。但不也会第三种计，整体外形虽然保持着爱心，但为了整体风格「一致」 行对外轮廓进行切割，图形在美上则稍有些出入，这也是需要思考的关键点。

组合例

组合的例会影响到图标的精致程，准确的 「例值」 整体的趋向平衡，更具有美感。如图案例尝试了两组同例的效果，这里图标窄边作为 「基准值」 进行尝试。当形为外形的 1 : 2 时（图2），图标的整体视觉效果较为平衡；当大于 1 : 2 并接 4 : 3 时，图标结构会显得过于饱满。而小于 1 : 2 并接 4 : 1 时（图3）则会产生稀疏紧凑的效果。（这里的例只是案例需要，实际设计最终的视觉感知为准）

2. 线性类型拓展

基础理论，结合延展应用，可以迸发出更多创意想法。线形图标也并有设计形态。过以下案例，可以看看线型图标设计类型多样性。

极简风格

体风格极为简约，没有多余线条，过线条原图形本质，形 「简单」 却具有很强识性，在视觉感知上轻松、干净。

极简风格图标在于图形把控，多笔可能显复杂，少笔可能影响识程度。以上图为例，图标组合元素保持在 2 个左右，体较为干净。

实际应：Instagram、Airbnb、Facebook、Twitter

双色

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

同色系：同为冷色系、暖色系或同一色系的表达形式。如图案例，暗色为色，亮色点缀亮，使得图标具有一种光亮的感觉。

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

对互补色：颜色跨更大，层次更分明。如图案例，红色与蓝色的撞色之后相单色的图标更彩和具有记忆点。

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

透明度变化

本质上与上为个类型设计，过透明度叠加和变化，提升图标层感和空感，降低图标压迫性。

实案例：爱奇艺9宫格图标

渐变次叠加

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

黑白+品牌色

黑白色作主色调，结合品牌色作点缀色。与常规的黑白图标相比，既产了变化，同时兼顾了品牌色的透出。

实际案例：众点攻略页面图标

线性渐变

结渐变的颜色，丰了整个图标的视觉表达，并提升了图标的视觉冲击力和计。案例结黑背景作为尝，底：粗线比细线的视觉效果相对较好，渐变也能较为清晰地被表达；黑底：细线比粗线的视觉效果显示得更加致和有锐度。

实际案例：网易考拉、NAVER

一笔成形

此类图标在视觉表达上具有较的线性流畅和设计感，注点在于整组图标的 「开口起始点」 设定上需保持一致。例如，「从左到右」或「从右到左」形成一体的连贯线条，开口起始点一致会影响整组图标的一致性，应在页面时会显得杂乱。

断图标

与上较为类似，没有连贯度要求。在线形图标基础上，寻找个缺口来打破 「全边图标」 沉闷感，使图标具有透性和线条变化。缺口位尽量保持统及大小，另需要控制开口个数避免过多导致图标形过于零碎。

实案例：腾讯体育、京东

面性图标

面图标比图标更能表达出图标的力量感和重量感，比图标更加容易吸引用户目光。在识别度上，面图标更加依赖外轮廓的清晰度，因此在设计时对外形的打磨是重中之重，清晰的外轮廓以帮助提高识别度。

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

轮廓对比

轮廓的差异会体现出不同的气质，如下图的左边和右边的别，一个气质较为直硬朗，另一个则较为柔美可爱。流畅的外形可以让面形图标的整体更加简洁、规整，如下图中间的图标在轮廓的理上则显得比较碎，整体外轮廓造型的贯度有所欠缺。

镂空对

适当的镂空除了补充了图形的识别之外，还升了面性图标的设计细节。另外需要控制好镂空分与整体的外形例，过小或过大都可影响图标的平衡感。如图的中间和右边，镂空过小对图标的辨识并没有多大作，没有镂空则了一些透气感。

形体比

形态上异也会具有不样视觉感知。以「」和「心」为案例，单独形体与组合后形体相比视觉感知更观些，而组合形图标相会精致些，多了些层。在日常设计经验是：越小图标形体应该越简单，此议单体出现较好；若图标尺寸足够大时可采用组合型设计，补充图标细节。

繁简对比

设计面图标时，对余细节的管理也很重要。随着细节的增加，块面切割，使得整图标变得零碎（下右图）。持简约的设计提高图标的识别度，在关键的特征细节上做补充（下中间图的相机闪光灯）。

2. 面性图标类型拓展

面性图标设时也可以结合各种不同的表达方式，提升图标的质感创意，非只简单的填充颜色。

单色面+点缀色

整体的外形使用统一的颜色，结合图标的属性感知使用不同的颜色行点缀，通过点缀色提亮了图标的视觉效果，达到既统一又具差异化。

多彩双色

通过对比色、邻近色的搭配来营造整体的图标氛围，提升了图标的层次和丰度，双色的表达也增添了图形的趣味性。在日常使用的 APP 中极为常见，简且容易出效果。

微质感渐变

微弱的渐变升了图标的质感。渐变的方向会影响整体图标的视觉效果，因此可根据同设计的需要进行调整。如图案例：

实际案例：全民K歌

透明度/灰度变化

透明度/灰度变化，让原来单色图标变更加具有层感和空感，设计细节更加丰富，降低了单色性图标厚感。

实案例：企鹅FM我页

透明度变化+渐变

渐变的设计提升面图标的质感，从颜上具有一定的富度。在渐变的基础上对组合型做透明度差异化，使得图标具有次感。

透明叠加的图标+渐变的背景

此类图标常常被应用 UI 界面中的列表或者顶部入口的置。

实际案例：全民K歌点歌页面

颜色叠加穿透

图标透叠加之后产生了交错的负形，叠加出第三个面。虽然整体计依然保持着扁化，但却多了一层次，并且增加了图标的细节。

实际案例：百度网盘

渐变层次叠

整体的效果与透明变的图标较为接，通过渐变的深浅变，使得形状的衔接处现了明暗对，因此图标具有了厚感和层次感。

实际案例：NAVER、掌上生

高模糊

此类图标基本没有在 APP 看到，与「透明度变化」或「颜色叠加」相比都更具层感和空感，时图标也具有较强设计感。

线面结合

结合和面的优点，既持面的重量感，同时具有的精致、细腻。因此在设计时以根据图标具想要表达的感对面比例进行把控，不同比例以呈现出不同的视感。

1. 线面结合图标的基础分析及想法

线面比例

线面比例的差异，图形呈现出来的张力也会有不同的受。基于中间填充的图标形尝了三种不同的比例，从下图中可以出，当填充外形窄边比为 1 : 3 （左图）图标呈现往内收的觉；填充外形窄边比为 1 : 2 （中间）图标整体较为衡；当填充外形窄边比为 2 : 3（大于1:2）（右图）整体有外扩趋势。

组合形式

线面可通过同的组合形式进行绘制。基于同的组合形态可设计多种多样的线面图标，同的组合形式会体现同的设计格，因此在设计时尽量多发散思考，寻适合你的组合方式。

繁简比

线结合本身由两形组合，此在设计时候更需要体造型进把控，单体（线和）造型必须保持较高简洁程度，这样最终组合形成图标才不会过于复杂（左图），若本身形态过于复杂，则会降低图标辨识度和视觉美观度。

2. 线面结合图标类型拓展

面结合的图标集合和面的优点，在设计方式上也继承两者的优点。设计方式也是基以上两种的结合，因此以结合出更设计的能。

黑白+面品牌

与「+品牌」的做法为接近，统一的颜叠加品牌的透出。

际案例：住、soul

线面色

基于线面的基础，线面的颜色差异。具体法与线性或面性的色接近。

线面结-阴阳

线和面的结按 50% 的比例进行计，依据上下、左右、居中等基础方式的结构化计，整体图标的视觉效果较为跳跃，非常规。

线面双色+错位

在双色图标的基础上，线和面按照统一的 「百分」 进行缩放，并进行透视和位移的设计，整体呈现来的是一种交错叠的视觉效果，相普通的线面双色更丰富。

实际案例：闲鱼tab、脸球tab

线位+渐变

基于上风格，或者线颜色进渐变设计，丰富了图标质感和颜色更加细腻。

面透明度变化

与「面透明度变化」的设计方式大致一样。下图案例，「弱强面」的一识别度弱，而「弱面强」 的外形识别度高，也更符合图标的表达。

际案例：新浪微博、腾新闻

基三种基础的类型表达，以拓展出种样的设计形式。除以上的案例之外，还收集一其他的设计。

面结合 – 插画

整比偏向插图的感，细节和元素，常见一 APP 的空白页设计。

线面结合 – 卡通插画

整体感觉比较可、卡通、二次元，常见于一些二次元或漫画类的 APP。

面性 – 渐变质

整体风格的光质会比较烈，常在一些活动运营或游戏的界面出现。

面性 – 扁平写实

整体感觉较扁平，细节的丰富与现实感知接。

线+渐变插画

体风格比较偏绚丽多颜色风格，质感和细节较为丰富。

写风

3D质图标

由于 C4D 的制作成本相对较高，目前较少在常规的 APP 中。但 3D 作为一个主流的计趋势，在间和能力允许的情况下需要多做这方面的尝。

等距的线面结合

等距的设计，原本线面的图标丰富了层次，并具有立体透视的感觉。

除了上这些之外，我们在实际场景中会发现一些较为特别的图标设计。

Facebook 更多页面的列表图标

整体格偏向插画+渐变质感。由于更多的页面为纯列表的设计，因此整个页面在图标的设计上做了很大胆的尝试，与规的单色图标相更具有吸引。为了区别同的务，系统性质的功图标做了色调的区分。

APP Store 游戏和新APP界下类列表图标

体为具象化扁平风格设计表，图标颜色原了最基本现实感知。

iOS 系统办类软件的始页面图标

整风比偏务简约，具象的图形表达+轻微的渐变质感。

QQ手机版中延展的功能图标

整体风格偏向轻写实+微弱渐变。每图标都具丰富的细节表达，色调方面基于业务属性结合品牌色行了区分，整体既统一又具差异化。

大众点评顶部入的图标

整体风格偏向写实+渐变+炫光，每个图标都有丰的细节表达。

旅法师营地

游戏、二次元类的 APP，因此在图标的设计上偏向细节较为丰富的插画格。

哔哩哔哩动漫

图标风格偏卡插画，选态与默认态设计较为巧妙。

总结

文的重点在透设计类型或者技法的，帮助我们在常设计中提升输出效率。图标虽为 UI 设计的基础，却有很深的学问，精致的图标更是以到点睛的用，提升界面的质感和氛围。

图标类远远不止本文所提到这些内容，是变不离其宗，都是「线性、性、线结合」 再结合 「透明度、渐变、颜色叠加、质感、多维空」等等表而设计出来。

我们除了需要掌握这些容之外，还需要升图标设计的，更需要日积月累的练习和思考，从量到质的变。

欢迎关注作者的公众号：「IDfor」