插图图标-图标类型和样式概述

应用图标，如搜狐、新浪、网易等网站的logo

功能图标，如各种音乐播放器的“开始”、“暂停”、“快进”图标；

根据设计风格分类可分为

剪影图标；

轻仿图标:在原有仿图标的基础上，减少了厚重的纹理，去除了投影、渐变，将纹理转化为扁平的图标；

轻纹理图标:渐变/投影/不透明等图标比较独特，细节较多；

准物化图标:有风格、有质感的有形彩色图标；

覆盖图标；

以文字为主体的图标，如支付宝、淘宝图标；

插画图标，通常是游戏应用，直接用游戏中的人物、道具或图片作为图标。

图标类型和样式总结本文来自Youyou.com，主要是因为近期工作中经常使用图标，但是设计给出的图标在页面上总是有点不协调，所以看到这篇文章就想收藏分享一下。

作者写的还是很详细的，喜欢的可以关注他。链接地址如下。

编者按:图标类型千变万化。其实上万个图标都是从线性、面状、线面结合三个方面，结合透明、渐变、色彩叠加、纹理、多维空间等表现形式来设计的。这篇文章将近6000字，一篇文章就能看懂所有的设计风格！

图标是UI设计中极其重要的一个环节。我们做的每一个界面设计，几乎都涉及到图标的表达。优秀的图标设计可以让界面表达更加精致有趣。

图标设计往往体现了设计师的基本功。所以，除了每天多画一些图来提高对图标造型的控制，我们还需要了解和学习图标设计的潮流类型，从而帮助我们提高设计中的效率。

出于自学的目的，我一般在浏览一些设计网站的时候会做相应的收集。因此，本文主要梳理了图标设计的“类型和风格”，以及我自己对每种图标类型的思考。

图标分类

设计网站上的图标可以说是五花八门，不同类型的图标有着独特的魅力。比如线状图标简单轻巧，区域图标厚重直接。当然，同类型的图标也有很多不同的表现形式。

所以根据我对图标的理解，大致可以分为三类:线状、面状、线面结合。通过组合三种基本类型的表达式，可以创建各种各样的表达式。

线性图标

使用浅色线条勾勒出的图标，整体感觉趋于精致、细致、犀利。不同的线条有不同的视觉感受，细线轻，直线硬朗，曲线柔和。

1.线性图标的基本分析和思想

厚度对比

粗细不同，图标的力度和重量也会不同。粗线图标在视觉关注度方面会更突出，但与细线图标相比也会显得厚重。细线图标精致、透气、美观。

但是在设计的时候，线条的粗细要根据整体UI风格来决定，而不是单纯的考虑图标的关注度，更需要从整体上考虑图标和界面的平衡。

灵活性对比

直角和圆角决定了外观的观感和风格的走向。从下图的对比可以看出，圆角越大，图形越倾向于可爱和柔和(如下右图所示)，圆角越小，则越直接、硬朗和阳刚(如下左图所示)。所以刚柔或中的数值完全取决于整体风格的前期调教。

复杂与简化的比较

除了轻巧简洁，图标的识别也是极其重要的。如下左图所示，“过于简洁”导致图标失去了应有的辨识度，变得模棱两可，而右下图的元素叠加则让图标略显复杂。在复杂与简单的平衡中，在不影响图标识别度的前提下，最大程度的提高图标的简单性。

特征识别度

除了简洁，我们还需要考虑图标的特性。比如下图的“评论”图标，当我把图标上的“三点”去掉后，图标还是有“对话/评论”的意思，但当我把下面的“箭头”去掉，保留“三点”时，就会有歧义，可以表示为“更多”，所以设计图标时要准确把握意思，避免歧义。

保持图标特有的美感。

比如下面的“心形”图标，下面左边的图片就是我们一般的图标，与圆圈结合后依然保持了原有的美感。但是，时不时的，我们会看到第三种设计。虽然整体造型保持了爱情，但为了“符合”整体风格，在审美上与原图形略有不同，这也是我们需要思考的重点。

组合比例

组合的比例会影响图标的精致程度，准确的“比例值”可以使整体造型趋于平衡，更具美感。如下例所示，尝试了两组不同尺度的效果，以图标的窄边作为“基准值”进行尝试。当内部形状为外部形状的1:2时(如下图2)，图标的整体视觉效果比较均衡；当大于1:2，接近4:3时，图标内部结构会显得过于饱满。但当小于1:2，接近4:1(下图3)时，会产生稀疏和紧凑的效果。(此处比例仅为案例要求，实际设计以最终视觉感受为准。)

2.线性类型扩展

基础理论，结合扩展应用，可以在generate中产生更多的创意。线性图标并不只有一种设计形式。通过以下案例，我们可以看到线条图标设计类型的多样性。

极简风格

整体风格极其简约，没有多余的线条，通过线条还原图形的本质。造型“简单”却有很强的辨识度，在视觉感知上轻松干净。

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

实际应用:Instagram，Airbnb，脸书，Twitter。

两颜色的

与“纯色图标”相比，更具表现力，细节更丰富，形式感更多样。结合颜色的叠加、对比和互补，增强了图标的层次感和丰富性。

同色系:同一冷色系、暖色系或同色系的表现。如下图案例所示，以深色为主色调，点缀亮色使图标变亮，使图标有一种凸显的感觉。

还有一种情况是亮色的主色调与深色相结合，整体图标效果还可以，但是没有将亮色运用到图标的关键特征上，使得图标第一眼的观感稍微减弱。

对比互补色:色彩跨度更大，层次更分明。如下例所示，红色和蓝色的对比比单色图标更有色彩，更有记忆点。

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

透明度变化

本质上是和上面一种的一种类型的设计。通过透明度的叠加和变化，增强图标的层次感和空间感，减少图标的压迫感。

实际案例:爱奇艺9宫图标

梯度分层叠加

渐变带出图标的质感，结合“深浅不同”或“饱和度不同”的变化，使图标更加细致，更有层次感。

黑白+品牌色

黑白为主色调，结合品牌色作为点缀色。与常规的黑白图标相比，不仅有变化，还兼顾了品牌色彩。

实际案例:大众点评攻略页面图标

线性渐变

结合渐变色，丰富了整个图标的视觉表达，增强了图标的视觉冲击力和设计感。案例结合黑白背景作为尝试。白色背景:粗线的视觉效果相对比细线更好，可以更清晰地表现渐变；黑色背景:细线的视觉效果比粗线更精致锐利。

实际案例:网易考拉、NAVER

一次成型

这类图标在视觉表达上具有较高的线性流畅性和设计感，重点在于整组图标“开启起点”的设置的一致性。比如“从左到右”或者“从右到左”形成一条完整连贯的线条，不一致的打开起点会影响整组图标的一致性，应用到页面上也会显得凌乱。

断点图标

和上一个差不多，但是没有一致性的要求。在线性图标的基础上，找一个缝隙打破“全包裹图标”的沉闷感，让图标具有渗透性和线条变化。缝隙的位置要尽量保持同一个方向和大小，控制开口的数量，避免图标的形状过于碎片化。

实践案例:腾讯体育，JD.COM。

区域图标

区域图标比线性图标更能表达图标的力度感和重量感，比线性图标更容易吸引用户的注意力。在识别方面，区域图标更依赖于外轮廓的清晰度，所以打磨外形是设计中最重要的，清晰的外轮廓有助于提高识别度。

1.区域图标的基本分析和思路

轮廓对比度

轮廓的不同会体现出不同的气质，如下图所示。一种气质比较直接硬朗，一种气质比较柔和可爱。平滑的形状可以使整个区域图标更加简洁规则。如下图所示，中间的图标在轮廓处理上断裂，整体轮廓造型缺乏连贯性。

中空对比

适当的镂空不仅可以补充图形的辨识度，还可以改善区域图标的设计细节。另外，要控制镂空部分占整体造型的比例。太小或太大都可能影响图标的平衡。如下图中右所示，镂空过小对图标的识别影响不大，不镂空的话透气性更少。

身体对比

形态差异也会有不同的视知觉。以“星”和“心”为例，单一形状的视觉感知比组合形状更直观，而组合形状的图标相对更精致，层次更多。日常设计中的经验是:图标形状越小越好，越简单越好，建议单体显得更好；如果图标的尺寸足够大，可以采用组合设计来补充图标的细节。

复杂与简化的比较

设计区域图标时，管理多余的细节也很重要。随着细节的增加，区块表面切割过多，会使整体图标变得过于碎片化(如下右所示)。保持设计简洁，提高图标的辨识度，补充关键功能细节(下图中的摄像头闪光灯)。

2.区域图标类型的扩展

表面图标在设计上也可以结合各种表情，提升图标的质感和创意，而不是简单的填充颜色。

单色表面+点缀色

整体外观使用统一的颜色，结合图标的属性感知，使用不同的颜色进行点缀，通过点缀颜色增强图标的视觉效果，做到既统一又有区别。

多色双色

通过对比色和相邻色的搭配，营造出整体的图标氛围，提升了图标的层次和丰富度，两种颜色的表达也增加了图形的趣味性。在日常app中很常见，简单易出结果。

微观纹理梯度

微弱的渐变增强了图标的质感。渐变的方向会影响整体图标的视觉效果，所以可以根据不同设计的需要进行调整。显示了以下情况:

实际案例:全民k歌

透明度/灰度变化

随着透明度/灰度的变化，原来的单色图标变得更有层次感和空间感，设计细节更丰富，降低了单色平面图标的厚度。

真实案例:企鹅FM我的页面

透明度变化+渐变

渐变设计提高了区域图标的质感，在色彩上有一定的丰富性。在渐变的基础上，区分组合类型的透明度，使图标具有层次感。

透明叠加图标+渐变背景

这种图标通常应用于UI界面中的列表或顶部条目。

实际案例:全民k歌页面。

颜色叠加渗透

图标透明叠加后，产生交错的负形，叠加第三表面。虽然整体设计保持扁平化，但增加了层次感和图标细节。

实际案例:百度网盘

梯度分层叠加

整体效果接近改变透明度的图标。通过深浅的渐变，在形状的交界处有明暗的对比，所以图标也有厚重感和层次感。

实际案例:NAVER，口袋生活

高斯模糊

这种图标在APP里基本见不到，比“透明度变化”或者“颜色叠加”更有层次感和空间感，图标也有很强的设计感。

线面结合

结合了线性和平坦性的优点，既保持了平面的重量感，又有线性的精致和细腻。所以在设计的时候，我们可以根据图标想要表达的具体感受来控制线面比例，不同的比例可以呈现不同的视觉感受。

1.线面组合图标的基本分析与构思

线面比

随着线面比的不同，图形呈现的张力也会有不同的感觉。根据中间填充物的图标形状，尝试了三种不同的比例。从下图可以看出，当填充与形状窄边的比例为1:3(左图)时，图标呈现向内的感觉；当填充到形状窄边的比例为1:2时，(中间)图标整体平衡；当填充与形状窄边的比例为2:3(大于1:2)(右图)时，整个身体有向外膨胀的趋势。

组合形式

可以用不同的组合绘制线条和表面。基于不同的组合形式可以设计出多种线和面图标，不同的组合形式会体现出不同的设计风格。所以在设计的时候，尽量多思考，找出适合自己的组合方式。

复杂与简化的比较

线与面的结合本身就是由两种形式组成的，所以在设计的时候更需要控制整体的造型。单一(线和面)的造型一定要保持高度的简洁，这样最终组合形成的图标才不会太复杂(左图)。如果形状本身过于复杂，会降低图标的辨识度和视觉美感。

2.线-面组合图标式扩展

线面结合的图标结合了线性和曲面的优点，在设计上也继承了两者的优点。设计方法也是基于以上两者的结合，所以可以结合更多的设计可能性。

黑白线+面部品牌色

接近“线性+品牌色”的做法，统一的线性色与品牌色重叠。

实际案例:好好活着，灵魂

线和面双色

在线和面的基础上，对线和面的颜色进行区别。具体方法接近线性或平面双色。

线面结合-阴阳

线面结合按50%的比例设计。根据上下、左右、居中等基本结构设计，整体图标的视觉效果跳跃而不落俗套。

线和面双色+位错

在双色图标的基础上，按照统一的“百分比”缩放线条和曲面，进行透视和位移设计。整体视觉效果是交错叠加，比普通双色线和面更丰富。

实际案例:闲鱼底部tab，面球底部tab。

线平面位错+梯度

在之前风格的基础上，逐渐设计出面或线的颜色，丰富了图标的质感和色彩。

线-面透明度变化

它的设计方式与“线-面透明度变化”相同。下图的案例中，“弱线强线”的第一识别度较弱，而“弱线强线”的形状识别度较高，更符合图标的表达。

实际案例:新浪微博、腾讯新闻。

基于三种基本的表达方式，可以开发出不同的设计形式。除了以上案例，还收集了一些其他的设计。

线-面组合C图

总体来说偏向于插画的感觉，细节和元素比较多，常见于一些app的空白页设计。

线面结合_卡通插画

整体感觉很可爱，卡通，二次元，这在一些二次元或者漫画类app中很常见。

面_渐变强纹理

光影质感整体风格会比较强烈，经常出现在一些活动或者小游戏的界面中。

面对c平面现实主义

整体感觉比较平淡，细节的丰富程度接近现实感知。

线条和表面+渐变插图

整体风格偏向于多彩的色彩风格，质感和细节都很丰富。

写实风格

3D纹理图标

因为C4D的制作成本比较高，目前在常规APP中很少见到。但3D作为主流的设计趋势，在时间和能力允许的情况下，还需要更多的尝试。

等距线-面组合

等距设计丰富了原有的线、面图标，有立体透视的感觉。

除了以上，我们还会在实际场景中发现一些特殊的图标设计。

更多脸书页面的列表图标

整体风格偏向插画风格+渐变纹理。因为更多的页面设计为纯列表，所以整个页面在图标设计上做了大胆的尝试，比常规的单色图标更吸引人。为了区分不同的服务，系统性质的功能图标用色调区分。

APPStore游戏和新应用界面中的类别列表图标

整体是扁平化的设计表达，图标的颜色还原了最基本的现实感知。

iOS系统中办公软件的起始页图标。

整体风格比较商务简约，具象的图形表达，略带渐变的质感。

QQ移动版中的扩展功能图标

整体风格倾向于轻写实+轻微渐变。每个图标都有丰富的细节，基于业务属性和品牌颜色区分色调，整体上统一又有区别。

40家自媒体商业素材网站视频+插画+图片+图标CreativeCommons(知识* * *享受)简称CC协议素材。如果创作者自愿放弃作品的部分权利，仍然会有限制，比如要求标注出处和作者姓名。看到CC协议请阅读说明。PD协议证明作品已经捐赠给了公有领域。

CC0协议是指创作者自愿放弃作品的所有权利，可以无条件使用，包括商业使用。(但不允许上传到其他素材网站，主张版权，或以非法方式使用。图像所涉及的内容仍可能涉及商标权、公共利益和隐私权。

人物、风景、动物等的照片。

/

萨沙·武贾西奇高清视频和图片(中文网)

/

高清艺术摄影图片(人们最常用)

/

视觉搜寻人物、风景、动物等的照片。

/

图片、插图、矢量、视频

/

免费欣赏美丽的风景、植物和动物。

/

Skuawk专业摄影师的作品

/

高清静物和风景图片

/

kaboompics建筑、静物等小清新高清图片。

/

经纬时尚流行摄影画廊

/

美食美食摄影高清图库

Freelyphotos配宗教高清图。

/

美学上凉爽的风景

/

自然风景，街道建筑

/

Ins风图片，静物

/

波拉尤图旅游高清图片

Lifeofpix风景，食物图片

/

美丽的风景视频

/

Fancycrave静物、建筑、复古风格

/

莫特斯托克有许多花和植物。

/

复古风格的图片

马格德莱纳精美文艺图片

设计师图片静物风景图片

/

各种邮票的图片

/

Imcreator人物、艺术、自然、矢量图标

纹理有大量的树木，石头，金属和其他材料的纹理贴图，可用于2D和3D贴图。

/

干图标各种图标图标材料

/

平面图标-设计日本可爱的插图风格图标

/

插图剪贴画

/

图标字体各种图标图标素材(中文网)

/

Flaticon是一个完整的图标。

/

图标忍者图标

覆盖各种高清视频资料。

/

Mixkit实拍高清视频素材

视频高清，4K视频

/

Videezy各种场景，宣传片

/

Undraw人物场景插图

图标8字符插图

Drawkit角色场景

/

404-插图网页插图