如果您想订阅本博客内容，每天自动发到您的邮箱中， 请点这里

那关于loading动画相关知识，我觉得对于设计师来说是有必要去了解的，所以我找到了这篇优秀文章，让大家能够深入了解loading动画，透过现象看本质，学以致用。

图片来源：Domaso

没有人喜欢等待

在用户心目中，优秀的应用、工具、网站都应该是制作精良且能快速响应他们需求的产品。

举一个真实的例子：最近我们新发布了一个用户评价的应用，第一个版本并不完美，loading延迟在2-3秒。

你猜怎么着？

很多人认为这3秒是一个故障。在实际开发中，你可能要面对龟速的网络，没有优化的代码，操作时间长或数据处理太多等问题。因此，App的运行速度可能没有用户预期中的那么快。虽然早期用户可能会给你的产品第二次机会，但绝大多数人会立即退出它。

除非你的产品界面对用户的行为提供了明确的即时反馈。刚才发生了什么？是操作错误还是在等待服务器的请求？用户需要等待多长时间才能正常使用这个工具或网站？用户为什么要等待呢?

让我们一起深入了解Loading动画：

1、loading动画的历史由来

2、优秀loading动画所具备的特征

3、细节可以做出精彩

4、简单处理还是精心制作

loading动画的历史由来

对于这种类型的反馈，设计师会使用进度条、loading示意图、预loading、或旋转器。它们向用户解释什么时间发生了什么或正在loading的过程，以减少用户的心理焦虑。

你觉得设计师是从什么时候开始考虑加上这种反馈的？

我很惊讶的看到关于Nielsen Norman的一篇文章，提到响应时间和loading动画是在1993年（参考1985年的资料）：

如果计算机无法提供快速响应，则应该以百分比的形式向用户提供持续反馈。【Myers 1985 论文，“计算机-人机界面百分比进度指标的重要性”】

显示进度的三个主要优点：向用户保证系统没有崩溃且正在处理他们的问题；告诉用户还需要等待多久时间，让用户能腾出时间来做其他的事而不只是干等；甚至可以向用户提供一些可以阅读和查看的内容，减少等待的焦虑。— Jakob Nielsen, on January 1, 1993

自从Web 1.0以来，几乎每个网站都有loading状态，用户可以注意到当页面内容正在loading时，这些Loading动画活跃的身影。

在2007年的时候，网站的Loading形式大概是下面这张图上的样子：

2007年时的Loading

在那个年代，你可以找到像Firewoks(2007)、Flash (2008) 或者Loading GIF Generator （2009）这样的工具来做这些 loading动画。

到了2010年，随着CSS3的迅猛发展，出现了很多教程教大家如何做CSS3动画，也能找到大量的loading 动画预设包。设计师也可以在Ps cs5中做这种loading动画，这个在10年前是非常流行的。

在那时，Loading动画更像是web的专属问题，因为页面loading确实是一个问题。在2010年的时候，很多Flash网页都做了一些很有创意的loading动画：

30个创意Flash loading案例（https://web3mantra.com/2010/09/08/30-creative-flash-preloaders-examples/）

渐渐地，设计师们开始不满足于简单的进度条和旋转Loading，到2014年-2016年的时候，变得更加关注这块的设计。所以，你能发现更多关于loading教程，免费的Loading设计资源，插件和开源项目。

2016年出现的Material Design loading(http://www.qooqee.com/news/muse-preloader-widget-tips)

设计趋势和方法已经发生了变化，但向用户提供有效反馈的原则依然需要遵循。

优秀loading动画所具备的特征

在一个完美的世界里，loading动画应该：

尽可能少的显示给用户

如果你的工具或网站工作的足够快，那就是非常完美的。或者至少要使得它们的速度符合用户的预期，显示好看的loading动画只是一个缓兵之计，等待太久了一样会惹恼用户。所以，首先应该是解决内容的loading问题。

给出具体时间

它可以是一条简单的文本信息，告知大致的等待时间，也可以是可视化的图形来表示。总共上传了多少文件？更新需要多少分钟？已经进行到了什么阶段？这些体验上的设计细节都可以给用户预期并减少焦虑。

宇航员数据loadingby Cream M.

告诉用户为什么需要等待

一些应用的loading过程，通常让用户不大容易理解。一个好的Loading动画，应该要告知用户等待的原因以及等待的背后软件正在做什么：

文件获取动画 by Vinoth

让我们说回我的案例，那个反馈工具软件。当我们的等待时间超过1秒时，我们决定给这段等待时间增加一段解释。动画说明应用目前正在处理截图资源，这清晰的表明，我们的工具没有崩溃，它只是正在处理请求：

好的loading动画

让等待的过程不那么让人无聊

可以放一个有趣的动画来吸引人，让用户的眼睛始终保持忙碌。

动画来源：Alex Kunchevsky

减少用户等待时间的心理感知

这与上面提到的一点非常相关，如果你在等待的过程中发现了一些能够吸引用户注意力的东西，那么感觉上时间就会过得更快。它可以是一个引人注目的色彩搭配，有趣的想法，或者是一个什么特别的东西。

蛋糕loading by Pierre Kleinhouse

透传公司品牌形象

如果用户在用你的应用或者网站时会有一段等待时间，为什么不机智的利用好这段时间呢？我不建议仅仅只是为了做loading而做一个loading动画或者去在动画里使用一些心理学技巧。我觉得最好是将品牌的声音融入整个Loading动画中，让它成为一个非常重要的设计细节：

BCG的车票应用动画 by Antonin

细节可以做出精彩

虽然有些人可能会认为Loading只是一个很小的UI细节，但它其实也有许多类型和变化。一般来说，我把loading动画分为几类，进度条，无限循环的loading图和骨架图。

进度条

当可以明确loading时间时使用，进度条可以通过数字或视觉化的形式来表现。

有数字进度的，有时也称为百分比指示符。他们可以简单直接，也可以很有创意，需要对你的用户业务表达更有效：

一个app loading页 by Nguyen Tran

你也可以找到有趣的进度条和循环动画结合的loading图。

Loading动画by Dragonlady

进度条背后的主要思想是显示一个操作将花费多长时间以及目前所处的状态。根据UI需求的不同，进度条也可以是线性的，没有百分比的形式。

想想Gmail，它没有显示进度百分比，但是用户同样可以感觉到加载的进度。下面是两个简单而又创意的例子：

Gamil loading和一个创意loading动画 by  Allen Zhang

无限loading动画

当loading的时间是未知的时候来使用，它可以是默认的旋转图，也可以是一些创意动画，显示应用正在做一些事情。

计算loading图标 by Hoang Nguyen

创意性loading动画一样可以与业务紧密相关，并帮助支持品牌发声。请思考下那些应用会使用这种loading动画？

LittlePin Spinner by Daniel Sofinet

无限循环动画要求用户在上传或执行某些操作时等待，但不要求具体需要多久时间，它们可能会非常简单或非常有创意。

Loading cat by domaso. So cute!

Infinity by Eszter Balogh. 看起来非常有趣，但是你并不想他们永远不停下来。

如你所见，如今的loading动画不仅仅只是一个系统状态的UI元素。

骨架动画

骨架动画展示了loading页面的变化过程，你可以把它理解为开始是一些页面占位图，逐步加载上一些可见的图片，文本和其他内容。

这个词最早出现在Luke Wroblewski 的文章中，Luke建议使用骨架动画来获得更好的loading体验。这个想法得到了其他设计师的支持，并在Facebook、Linkedln、YouTube, Google Drive 等用户界面中得到了应用。

举个栗子，如果你使用的是网页设计工具Figma，你会在页面顶部看到一个进度条，同时还在逐步loadingUI：首先你会看到占位符，然后才是可用数据：

Figma UI

简单处理还是精心制作

除了这篇文章中所展示的一些优秀案例和Dribbble上的设计概念，在目前大多数应用中，你可能能看到还是一个默认的Loading。

有一段时间，简单的Loading被大众所推崇，因为他们对于性能的影响最小（尤其是对于web）。使用默认的或开源的loading要容易的多，不需要设计师和开发花心思来设计和实现它。

如果你正在开发MVP或者项目的第一个版本，那么使用简单的或者开源的loading动画更符合逻辑。在这个阶段，即使把loading动画做的再怎么有创意，也并不会对你的产品有多么大的帮助，如果它不能解决真正的需求。

一些简单的loading动画案例

有趣的是，在2016-2019年，我们可以看到非常多精心的loading动画。注重细节，日益成熟的设计公司，更好的科技环境，更方便的设计工具，这些都使得loading动画变得更加富有创造性。如果你浏览Dribbble，能找到非常多超赞的Loading动画，所以这也成了展现自己设计能力的一种方式。

蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 、平面设计服务。

如果您想订阅本博客内容，每天自动发到您的邮箱中， 请点这里

蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计

如果您想订阅本博客内容，每天自动发到您的邮箱中， 请点这里

我们每天都在设计图标，并且保持这样的状态超过15年。身为设计师，想必你已经阅读过很多关于图标设计的文章，但是今天的文章不一样，今天我们的文章不会花费很长时间来单独介绍某一个图标的设计，而是设计任何一套图标应当遵循的基本流程，以及一定要注意的8个关键的注意事项，你可以将这些东西带入到一些现成的案例当中去验证。

蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 、平面设计服务。

超实用！UI设计图标欣赏，绝对激发你的灵感

我是你们的学霸姐 2017-08-17 20:13:23

如果您想订阅本博客内容，每天自动发到您的邮箱中， 请点这里

UI设计中的布尔运算由浅及深，深入解析，图标瞬间高大上！

UI设计栈 2018-03-26 19:24:14

如果您想订阅本博客内容，每天自动发到您的邮箱中， 请点这里

一、图标的定义

1. 什么是图标

图标是具有明确指代含义的计算机图形。从功能分类角度分为启动图标、应用图标、功能图标。

2. 什么是功能图标

功能图标是具有指代意义且具有功能标识的图形，它不仅是一种图形，更是一种标识，它具有高度浓缩并快捷传达信息、便于记忆的特性。

二、图标的种类

• 具象图标：保持事物本来固有形态进行优化设计。如汽车，轮船，飞机，车票……
• 抽象图标：不是一个具体的事物，更趋于概念化。如个人中心，空间，模式，最近等。

三、图标的风格

1. 面性图标

面性图标是由一根封闭的线造成了面，面性图标同样具有大小、形状、色彩、肌理等造型元素。直面图标具有稳重、刚毅的男性化特征；曲面具有动态、柔和的女性化特征。

不透明度图标

不透明度图标是通过调节图标的部分面性结构来增加层次感，从配色角度属于同色系。

△ NO-921

光影图标

三大面五大调，通过调节面的反光和阴影来增加面性图标的纹理。在扁平时代的今天保留着微拟物风。

多彩色图标

多彩色给人很酷炫的感觉，从明度角度还是要提取深浅的颜色来代表图标的黑白灰。

△ Kyle Anthony Miller

2. 线性图标

线性图标是通过粗细一致的线条绘制，高度概括出来的图标，既能让人赏心悦目，又给用户带来创造和应用的乐趣。

圆角图标

圆角图标给人以亲和力，也有柔软，软弱的一面。在图标设计越来越精美的今天，圆角图标的应用行业已经越来越广泛。比如女性，母婴，儿童，旅游……

△ Stephen Andrew Murrill

直角图标

直角图标给人以锐利，坚强，果断，不拖泥带水的一面。让人眼前一亮的是魅族系统Flyme6 里面的图标它就是用的直角，给人明快干净的感觉。真正更好的诠释它内在含义的非京东金融里的图标了 ，投资理财的时候需要人们果断作出判断。理财有风险，投资需谨慎。直角的感觉让人当机立断，不拖泥带水，快买快出。如果用圆角就感觉柔一点，感觉做事优柔寡断。所以一下子在金融领域被做成了标杆式的功能图标。

断点图标

断点图标是点线面演化的一种产物。在最开始UI兴起的时候，设计师们不满足于单线条的功能图标，通过点线面增加形式感。最早新浪体育运用到这一风格，算是还是很不错的一种风格。很遗憾只留在了我的记忆力，网上并没有找到之前的设计。

△ Catalin Mihut

高光式图标

高光式图标是传统绘画的产物，我们在传统绘画的时候往往最后一笔都是添加高光，起到画龙点睛的效果。高光式的功能图标采用里细外粗的规律，和断点式功能图标差不多一个年代的产物。在不断扁平不断简洁的今天，也不会感觉那最后一笔也是多余的。

△ Udisk6353

不透明度图标

不透明度图标是调节图标的部分结构的不透明度来增加图标的层次。色彩上面跟双色图标是一样的，只不过从配色角度属于同色系的范畴。

△ Laura Reen

双色图标

双色图标在实际应用中非常广泛，也是很百搭的那种。一种可以有彩色跟无彩色结合，有彩色的颜色可以是企业色，可以是代表行业或者产品的颜色跟无彩色黑色相结合。一种是主体色跟点缀色组合而成的双色，但使用时要考虑到当前界面中的配色不宜过多，多了就容易花。

△ stay

线面结合图标

线面结合图标也是一种很出彩的风格，线是高度概括的图标，这时候面更多的是充当装饰点缀的作用。面的表现方式也有很多种，可以是单色的，渐变色的，也可以像 MBE风格那样提取主体结构形成的面，也可以提取图标里面有闭合路径所形成的面。这种风格应用也非常广泛。

△ Ted Kulakevich

△ Prakhar Neel Sharma

结构图标

结构图标算比较有争议性的图标，结构图标是我们学绘画的时候老师要我们起形，要开始绘画结构，对基础的三大面五大调有很好的理解。现在结构图标正好相反，比如对于一个具像图标，我们要分析出它的每一笔每一画，看清每一个结构，然后用固定的形式来表现出来。固定的形式可以像优酷图标的相交结构点，可以像上海玛娜花园一笔一个颜色，等等。

一笔画图标

一笔画图标是难度系数比较高的一种风格，也是我非常喜欢的一种风格，当才开始流行断点图标的时候，锤子设计师欧阳念念就提出了一笔画图标的概念，当时也是有争议的一种图标。当网易云音乐也出了这种图标后就更具有说服力。一般也很难驾驭，也基本都能做出来，但是视觉上看上去很舒服还是要有深厚的功底。

logo类图标

logo 类图标跟一笔画算是同等级别难度的，需要图标足够精致到可以直接拿来当应用图标，乃至于 logo。这种在app中屈指可数。最为经典的就当属网易云音乐的 logo 了，其实它也属于一笔画图标，同时又用做了 logo，它的含金量可想而知。

情感化图标

情感化图标是提取人的五官跟图标相结合具有拟人化的图标，这种拟人化的场景模仿人在真实场景的应用。QQ 的底部图标通过五官方向大小移动变化很好的表现出当前场景。QQ 开了先河，相信后续会有很多情感化图标出现，会有它的一席之地。

3. 如何转换线性图标与面性图标？

线性的闭合路径的图形变面性图标，闭合路径里面的线条反白，重要的关联结构线反白，让面性图标透气；线性的不闭合路径的图形变面性图标，应适当的增加线的粗度来达到视觉上的平衡。

△ Jory Raphael

△ Sebo

4. 如何去创造新的图标风格

绘画结构＋点线面＋色彩，绘画结构可以清晰的分析出事物的主体结构，勾勒出主体轮廓，对创造新的图标风格有很大帮助。绘画结构选的角度是人很熟知的角度，比如正面，尽量不要选择带有透视角度进行设计。点线面是设计的基础，通过从点线面角度去构思会获得更多的灵感。色彩方面可以是企业色、行业色、主题色、点缀色等等。（图design by Ted-Kulakevich and Graphéine ）

四、图标的特性

1. 统一性

大小的统一

在网页设计中图标的主流尺寸有16×16、24×24、32×3、48×48、 64×64、96×96、128×128、256×256、512×512。在移动端iOS规范中在2倍图下最适合人点击的区域大小为48*48px，iOS功能图标其他尺寸为48加或减4的倍数；安卓android 功能图标其他尺寸为48加或减8的倍数。为什么 iOS 是4的倍数，一个数除以2倍图在乘以3倍图要是偶数最小的数为4；为什么安卓android 是8的倍数，安卓开发中最小的单位是1dp,1dp=2px，同时也要满足一个数除以2倍图在乘以3倍图要是偶数最小的数为4，所以安卓要是8的倍数。在很多带有色块的图标，不仅要保证色块44*44pt的大小统一，也要保证里面色块里面的功能图标的大小统一。

风格的统一

风格上面已经归纳的很全了，直角图标和圆角图标基础上可以添加一个其他风格，如双色风格；但是剩余的其他风格最好就不要两两相加，不然就会给用户感觉很容易乱，也不够简洁，主次不明。

规范的统一

视觉的规范

为什么我们再同样的大小区域去绘制正方形、圆形、三角形，虽然符合了大小统一的特性，但是从视觉上还是不能看上去很均衡？这就需要我们规范化的去绘制图标，安卓android 规范里给出了图标的绘制方法。

圆角的规范

2. 简洁性

简洁性不单单体验在图标的简洁，还要体现在从创意到实际落地的简洁。在使用软件 ai 或者 sketch 的时候绘制基础图形不要出现小数点和基数，多用偶数。

3. 层次明确

图标具有可点击性和标识性。可点击性就会有点击前、点击时、点击后三种状态，主流底部标签栏会在点击前使用线性图标，点击时和点击后使用面性图标；也有使用颜色来区分。

4. 延展性

图标的延展性之前在图标的风格也讲到，好的图标可以直接当应用图标或者 logo 来使用。同时好的图标还可以通过点线面动效变化做下拉加载动画。

五、如何学会合理的设计功能图标？

1. 头脑风暴

头脑风暴看似一个不知道怎么解释的词，简单的说就是多动脑子，越用越活。头脑风暴不单单是这里用到，是所有设计师做设计之前必备工作。头脑风暴完你会觉得你的设计思路会很宽，然后就是要合理的分析每个的可行度，完成的工作量，自己当前设计的水平是否可以有效完成。其实很多设计师能有效的搜索到自己想要的东西也算是头脑风暴的一种，虽然你不会想出很多点子但还是很明确的知道自己想要什么，一定注意不要直接拿来主义，还是要通过平时的练习掌握更多的风格。为以后头脑风暴想出的很多点子能很好的实践出来。比如以旅游为主体进行头脑风暴，这个就能想到很多很多。

2. 搜集资料

搜集资料的时候要很好的提取关键词，直接从 iconutopia、iconfont、iconfinder、iconmonstr 搜索获取灵感。具象的事物可以看看该事物好的品牌公司的产品，品牌公司的工业设计相对较好，对后面提取元素也会有很大的帮助。也可以通过提取好的关键词，翻译成英文，再到国外的网站追波、be搜上一搜看看。搜索到的素材和元素一定要再设计，不能拿来直接用。

3. 提取元素

提取元素又归结到绘画结构中去了，绘画好的看到具象事物，心里默默打开一个灯，三大面五大调，光影关系都有了。不是很理解的还是多练习吧。具象图标就是提取主要轮廓线，保留可要可不要的元素，到最后的时候做统一删减；抽象图标有时候确实没有一点的思路的时候可以在就 iconutopia、iconfont、iconfinder、iconmonstr 找找，找到了合适的还要进行 redesign。有想法后选择一种图标风格这样的绘制效率会很快。

4. 规范化

上面元素提取好后，需要开始选择一种图标风格进行绘制。开始绘制的时候不要过于追求图标的风格，还是要从图标本身出发快速的绘制好。等全部绘制好了突然想换一种图标风格也是很快的，水到渠成。可能刚开始很难在规范化的框框里直接就提取元素开始绘制，那就只能先绘制要你想要创意的元素图标，全部画好后在统一的规范里面再绘制一遍。规划化的目的就是让图标统一，任何两个图标拿出来从视觉大小、风格都是一个统一的整体。

5. 加减法

一套图标绘制好了之后还是在放在一起看一下整理的感觉，最后通过加减法适当的修修补补，对于视觉上看上去过于繁琐的图标要保留大轮廓的同时减少结构达到视觉平衡；对于确实很简单但有没办法添加任何的东西元素来增加的为它做加法的时候是否可以放大，来增加它的视觉丰满感。

图标是界面设计中最重要的元素之一，也是我们 UI设计师必备的技能，日常工作中我们经常会接到含有图标设计、优化的需求。但到底什么样的图标才算是优秀的？也许很多设计师并没有太完整的评判体系，只是凭感觉，这样就会造成输出效果不稳定、耗时太长等不良的后果。

所以借着这次机会我梳理了一套图标设计自检的评判体系，一共五个维度，大纲如下：

• 识别
• 性格
• 品牌
• 饱满
• 细节

一、识别

评判事物的价值在于它的用途是什么。

图标的用途是帮助用户理解信息，所以「识别性」就是图标最重要、最底层的价值，如果你设计一个图标，用户看不懂，即使视觉再美观，也是无根之木，没有任何价值可言。

识别性可以分为两个方面，一是含义识别，二是视觉识别。

先说含义识别，简单来说就是你的图标能不能被理解，当然并不是设计师自己能理解就可以了，而是需要用户来决定。这里和大家分享一个我判断图标是否易识别的方法——内部用户调研法，说白了就是随机问一些团队内部人员，最好多问几种岗位，这样得来的结果更加可靠，案例如下。

我在改版「话题」这个图标的时候，想到了微博的「#」，于是把「#」和气泡框结合到了一起，如下图：

这时我找来10个内部人员进行测试，只有3个能看懂图标的意思（这3个人都是平时经常玩微博的），在这样的数据之下，不用犹豫，这个方案一定是不可取的。

在进行调研时，最少要保证80%的人能看懂，才证明你的方案是可行的。

再来说视觉识别，顾名思义这一点已经与图标含义无关，而是视觉层面的问题，例如大小、底色等等阻碍用户识别的因素。

这里引入一个国外的测试结果，是我在一位前辈的文章中看到的，测验包括一组四种样式的图标：白底黑色实心图标，白底黑色空心图标，黑底白色实心图标，黑底白色空心图标，经过10天的时间，1260名参与者总共完成了超过25000次图标的认知测试。将得出的数据分成四组进行双向方差分析，在相同的统计条件下，选择黑底白色空心图标要比其他三种组合的时间慢0.17秒，也就是说这种图标的信息表达能力会少弱，如下图：

所以在这样的理论与数据的支撑下，我对部分图标进行了如下改版：

有底色的图标全部从线性改成面性，如改不成面性（例如时钟）需要适当加粗描边，目的就是提高视觉识别性。

切记，识别性是图标最重要的价值，尤其是在没有文字说明的情况下，一定不要让用户产生困惑，不然你就是在消耗用户体验，而不是给用户体验赋能！

二、性格

试想如果一个人没有性格，那这个人就是没有灵魂的，图标也一样，没有性格即没有灵魂。

那如何打造属于自己的性格呢，我们需要从用户和品牌出发，例如腾讯动漫的用户都是动漫、cosplay爱好者，给人一种又萌又可爱的感觉，所以我们需要让图标尽量圆润一些：

像上图2号图标一样，增大圆角，使图标看起来更加圆润可爱。

基于这样的用户人群，我们还将原有一些单色图标，改成下面这样的彩色图标：

目的就是让图标可爱活泼的性格更加明显。

三、品牌

品牌性是我们经常提到的纬度，常用的提取品牌的基因也有很多，颜色、图形、吉祥物等等，这里举两个例子，一个是具象的品牌基因——吉祥物：

我们有自己的品牌吉祥物——黑子，所以在图标设计时可以将其运用起来，如下图就是结合黑子形象设计出来的「逗币」图标：

再举个比较抽象的例子，从 logo 当中提取品牌基因。

由于 logo 的字体笔画比较粗，整体给人一种厚重饱满的感觉：

因此我们可以在品牌logo 中提取「粗胖饱满」的品牌基因，在这样的背景下就不用再纠结图标使用2px描边还是3px的描边了：

我们可以很确定的使用3px描边，因为它既符合品牌基因又符合用户性格（肥胖圆润显得可爱）。

四、饱满

很多时候我们做出来的图标不够精致，其中一个很大的原因就是不够饱满。

如何判断图标是否饱满呢？我常用的衡量方法就是在图标上面加一个矩形，看图标的正形的面积是否还可以增加。

例如下图，蓝色是正形，红色是负形：

很明显蓝色的正形面积是可以增加的，例如：

这就是在增加图标的饱满度，我也是按照这个思路来改版图标饱满度的。

举个真实的例子，我们原版的续看图标是上下结构，而上面部分的图形太窄，导致左上角、右上角的空白太多（也就是绿色部分太多），没有撑满矩形，如下图：

于是我对图标的结构进行了调整，尽可能的减少绿色部分，最后达到了下图这样的效果：

最后提醒大家，对于图标的饱满度，还需要结合整套图标的视觉效果来进行调试，虽然上面这个方法可以解决大部分图标的饱满问题，但还是要具体场景具体分析，切记，我们的目标是让整套图标看起来和谐、统一、精致！

五、细节

细节也包含很多方面，例如：

1. 角度是否一致或者遵循某种规律

我们定制的角度规范是30度的倍数，这样可以很大程度的提高图标统一性。

2. 描边末端的细节处理

下图就是一个错误的例子，一个描边末端是直角，一个又是圆角：

我们在处理这样的细节时，一定要保证统一性。

3. 像素对齐问题

大家会觉得只要把一个尺寸的图标做好像素对齐，导出其他倍数的图标就是ok的，其实这样的想法是不对的，因为在导出0.5或1.5倍数关系的时候，像素很容易再次产生不对齐的情况。

举个例子，我们做图标是以2倍图为基础，然后统一导出3倍图，那这时候3倍图就是2倍图的1.5倍，导出的时候就发生了下面这样的情况：

虽然2倍图是像素对齐的，但3倍图却没有对齐，如果设计师没有仔细检查切图，就会发生线上图标发虚的情况，所以我们在输出切图时，一定要仔细核查，发现错误及时调整，免得造成不良影响。

除了以上这些，还有视觉大小、圆角、描边粗细是否统一的细节，当然，这些都比较容易理解，就不一一举例说明了，大家在做图标设计的时候一定要多多注意。

总结

本次梳理的五纬自检法可以用在图标设计的自我检查、改版优化等多个方面，或许它并不全面，但一定具有参考价值，希望能给大家带来启发和灵感，我们也会更加努力，争取做出更好的作品和教程与在设计道路上的你们分享交流。

介绍一下如何在PS里更好的体现图标的质感，个人觉得，这个教程对于UI学习者来说是非常受用的，特别是UI设计的新手学习者。好了，喜欢的朋友记得给我好评！