如何打造视觉平衡：正确的尺寸+视觉对齐+完美的圆角修饰。
我们的眼睛很奇怪，经常误导我们。但如果你知道人类视觉的特殊性，就可以构建更好的设计。
20 世纪 20 年代，格式塔的视觉感知理论得到了发展。它解释了我们的眼睛如何处理不同的图像以及我们的大脑如何解释它们。你可能已经听说过诸如亲近原则或共同命运规则之类的话题，本文引用了格式塔理论的一些观点，重点介绍了实践方面而不是学术研究上的问题。在底部有关于这个主题的相关推荐列表，有兴趣的话可以浏览。
400 px 的正方形和 400 px 的圆哪一个更大？从几何角度来说，它们的宽和高是相等的。但看看下面的图片，我们的眼睛立刻发现正方形大于圆。
下图是带有标注的：
让我们再看一张正方形和圆的图。就视觉重量而言，它们相同吗？
至少很难立即指出哪一个比较重，不足为奇，因为我增加了圆的直径。
我重叠了第一个和第二个示例中的形状。左图，400 px 正方形的面积大于 400 px 圆的面积。这就是为什么我们在视觉上看到它更大的原因。右边，圆和正方形是平衡的，基本上它们的面积也相似，但是宽和高不同。
我们可以看到菱形、三角形具有同样效果。为了在视觉上与正方形保持平衡，它们应该更宽和更高，以使得它们的面积相似。基于面积的方法非常适合最简单的形状。
在 icon 中怎么使用呢？
当你创建一组图标时，重要的是要使它们保持平衡，以使图标不会显得太突出或太小。如果我们直接把图标放在正方形内，那么越像正方形的图标看起来就越大。
我建议补偿不同形状图标的重量，允许视觉上较小的图标悬挂在正方形外，并在视觉上较重的图标和正方形之间留出一些距离。
下面是一组修改过的图标：
现在了解了，为什么一个图标区域总是比图标主体大，只是为了让非正方形图标适合它并且看起来不小于正方形图标。
检查视觉平衡最简单的测试是模糊设计。如果你的图标变成相似的斑点，则它们具有形同的视觉权重。
例如，Facebook 和 Instagram 的图标是方形的，而 Twitter 的图标则是鸟的轮廓，Pinterest 则是一个环绕的「P」。这就是为什么 Twitter 和 Pinterest 的图标要大一点，以便于它们与 Facebook 和 Instagram 图标保持平衡。
视觉平衡的另一个例子是将文本框与圆形按钮放在一起。如果按钮的直径等于文本框的高度，那么按钮会显得更小。当你把它放大一点，整个结构就会变得更加平衡。
但如果你改变按钮的样式，就不需要放大了。在下图中，按钮和文本框的高度是 80 px，但是右边的按钮视觉上看起来并没有很弱，因为它是黑色的。
Tips：
视觉对齐是视觉平衡主题的延续。看下图：它们看起来一样长吗？
以 px 为单位，答案是肯定的。但是，第一眼看上去，第一条要比第二条长一些。
现在看下图，有什么变化吗？
我对第二条矩形应用了视觉补偿。允许尖峰值超过上条矩形长度的 20 px，是补偿峰值之间的间隙并使两个形状在视觉上相等。
还有一些特殊图形的例子：
所以，如果你设计一张带有折叠条纹和文字的海报，或者商品图角标设计时，请注意使它们达到视觉平衡。锐利的边缘应该超出形状的其他部分。
文本和有背景的段落怎么对齐？这取决于背景的视觉密度。如果它很轻，你可以将突出显示的段落与文本的其余部分对齐。
由于背景较浅，因此不会中断正常的文本流。
对于深色背景，可以使用不同的方法。在图片上，黑色背景与文本的其余部分对齐，而其中的白色文本以缩进方式放置。
与浅色背景的情况不同，黑色背景具有较大的视觉重量，如果目标是无缝浏览段落，则最好按照以下所示的方式对齐。
相同的原理同样适用于按钮和输入字段。当然这只是基于人类视觉感知的设计。
左侧输入字段的浅色背景可以超出输入标签和输入文本的范围。「发送」按钮的与输入背景的右对齐，因为该按钮较暗且从视觉角度看较重。
在右侧，输入具有实线边框，当用户输入的框内有凹痕时，我将其与标签对齐。「发送」按钮的侧面为三角形。该按钮向右移动一点，看起来与上面的矩形输入字段保持平衡。
在这里，我们探讨另一个对齐问题：文本和图标按钮的对齐。下图，文字看起来居中吗？
秘诀在于，右边是三角形，因此在右边的按钮上我将文本向左移动了一点。此外，箭头按钮的宽度为 40 像素，看起来与矩形按钮在视觉上相等。
文本按钮不仅具有水平对齐，而且具有文本和背景的垂直对齐。我想讲的第一种方法是在各种操作系统、站点和 APP 中使用的。它是基于字体的大写字母的高度（即上限）对齐方式，它等于「 H」或「 I」的高度。
基本上，大写字母上下的空间和按钮的边缘是相等的。这是有道理的，因为操作按钮通常以大写字母书写，并且英文字母的升序更多，上伸出部分（l，t，d，b，k，h）比下伸出部分（y，j，g，p ）多。
另一种方法是使用字体的小写字母的高度（所谓的x高度）来对齐文本和背景。在 sans 和 sans serif 字体中，它等于字母「 x」的高度。
由于文本的主要视觉重量集中在小写字母的区域，因此该方法也是可行的。
这些方法之间有什么区别吗？有区别，但差异不大。
对于「取消」和「确定」（常用按钮），由左列代表的上限高度方法肯定更好，因为「取消」没有下垂部分（y，j，g，p ），并且「确定」都是大写字母。
右栏中显示的 x 高度方法仅对「同步」按钮更好，该按钮的名称同时具有上下突出的元素；「取消」和「确定」两个词似乎位置太高了。
图标按钮的情况与文本按钮略有不同，让我们在圆形背景上放一个「发送」图标。哪个看起来视觉更加平衡？
希望你已经注意到左边的那个有问题。发生这种情况的原因是对齐方法不同。第一个选项将图标视为矩形，在某种程度上说是正确的，因为当你将 SVG 或 PNG 文件给开发人员时，它是一张矩形图。右侧显示图标的位置，使其所有尖锐边缘与圆形按钮背景的距离相等。
如果为开发输出文件，则需要保留一些区域，以便他们可以使图标在背景上正确居中。
同样「播放」按钮也一样，如果直接对齐这些形状（圆角矩形和三角形），它们将看起来很奇怪。
如果要使三角形的视觉位置更好，则将其围绕并使其与按钮背景对齐会更好。
Tips：
还有什么比圆形更圆的图形吗？
我曾认为没有，但是正如我在本文开头所说的那样，我们的眼睛很奇怪，有时会欺骗我们。那么，下面图片中哪个圆看起来最平滑？
我之前问过的人在 3 号和 4 号之间进行纠结。1 号和 2 号绝对太瘦了，5 号太丰满了。如果我们将第三个和第四个变体（一个几何圆和一个修改的圆）重叠在一起，我们会发现，后者比第一个重一些。
为了说明我的意思，我从 Futura，Circe 和 Geometria 这三种著名的几何字体中选取了字母「 o」。鉴于高质量字体是基于人类的视觉感知构建的，并且使用了复杂的视觉构造系统，因此我认为它们的圆形看起来比几何形状更圆。
让我们将它们与几何圆重叠。即使是最几何图形的 Futura 的「 o」也有四个突出部分。此外，Circe 和 Geometria 的字母比圆圈宽，但即使它们的高度和宽度相等，我们也可以看到这四个「肚子」好像小了。
因此，从视觉角度而言，修改后的圆（右侧）看起来比几何圆（左侧）更「圆形」。
我们如何使用这种现象？当然要进行圆角处理。如果你在图形编辑器中直接修改圆角，效果其实并不好。
人眼立即发现直线突然变成曲线的点，而且这种处理看起来并不自然。
考虑到我们的视觉感知，我修改了这个圆角。
这种嵌入具有超出几何圆的额外区域，使得直线与曲线相交的点不那么明显。
只是尝试感受一下这些嵌入方法之间的差异。
现在，我们可以将这种方法应用于圆形按钮。
你可能已经注意到，右侧的按钮具有更平滑的圆角倒角，并且你的眼睛更加舒适。
与 APP 图标相同，人们不只是使用标准的圆角整数来达到理想的效果。在深入探讨此问题前，让我们看一下下面图形的差异：
第一个是我在 Sketch 中创建的圆角矩形。第二个形状是超椭圆形，也称为 Lamé 曲线。它是由法国数学家加布里埃尔·拉梅（GabrielLamé）发现的，根据公式的不同，其范围可能从四点星形到实际上看起来像是圆角正方形。
马克·爱德华兹（Marc Edwards）提出了 Lamé 曲线的公式，该公式产生了平滑且视觉上完美的形状。从 iOS 7 开始的图标均基于此设计的。
后来，通过添加黄金比例和用于指导新图标设计者的网格来修改此形状。
使用超椭圆等形状的主要好处是其光滑的外观。另一方面，这些非标准形状很难到真实项目中。应该将多个 SVG 组合在一起，在代码中包含特殊的公式或脚本，或者像 Apple 为其应用程序图标那样使用 PNG 掩码。
至于设计过程本身，有一个简单的圆角修复方法。您需要调整合适的圆角度数。
锐角倒圆的差异更加明显，这对于绘制道路或交通设计非常重要。
Tips：
有时，非几何正方形看起来更像方形。你可能会想，「这是什么废话？」 那么，你看下面的正方形？哪种形状看起来更方形？
如果你选择了左侧的形状，你就能感受到视觉差异的点。
文章来源：优设网 作者：UX Talk
蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 、平面设计服务
本文从图标的起源、定义到基础的设计方法总结无一不包，还有大量的案例帮你理解布尔运算，是新人设计师学习图标设计的必备干货！
一说到图标，我想您一定会觉得非常熟悉。图标，也称为 icon 或 picto，是指有明确含义的图形视觉语言。那么当我们一提起图标设计，您的脑中会想起哪个图标来呢？有可能您想起的是微信APP ，由两个白色气泡组成的启动图标，或者是我们每天使用的 APP 中的那些返回、关闭等系统图标，也可能是商场导视里的卫生间图标等。没错，图标的形式有很多种，它可以应用在很多场景中，并且表现方式非常丰富：有线的、有面的、也有拟物的等等。图标的历史可以追溯到象形文字（Pictogram），我们的祖先在发明文字之前就使用图标记录一天的生活了。听着是不是不可思议呢？从亘古时代的象形文字开始，我们的祖先就偏爱使用这种抽象的图形来表达意思了。在平面设计领域的商标其实也是一种图标，平面设计里的视觉导视（例如卫生间的图标）也有图标的应用，所以图标在我们的生活中应用非常广泛。
△ 生活中随处可见的图标
在计算机时代，从80年代的施乐公司界面中的单色图标开始，图标就开始出现在屏幕之中了，图标较编程语言更容易被大众理解。到了后来从 iMac 到 iPhone 引领的拟物图标更是开启了一个绚丽的图标设计时代。拟物时代盛行也带来了一些麻烦：拟物图标的质感、光影会吸引走用户的注意力，我们称之为「视觉噪音」。于是 UI设计师开始探索更新的表现形式来设计界面中的图标。扁平图标发展史上有过很多次尝试，比如微软引领的 Metro风格中的图标设计和 Google 引领的扁平设计风格中的长投影风格图标，但由于它们表现形式太过于抽象、缺乏情感的传递，并没有获得用户的垂青。而我们现在界面设计中的图标设计是一种「轻拟物」或「微扁平」的风格：在面积比较小的区域我们使用扁平图标或线形图标；在面积比较大的区域我们会使用加入渐变甚至轻质感的图标。（关于图标风格的变化，可以参考这个网站：https://historyoficons.com）。
△ 不同的图标设计风格
如今我们界面中的图标可谓非常丰富了，如果根据 Material Design 对图标的分类，UI设计中的图标可以分为带有品牌属性和特性的产品图标、有功能指示作用的系统图标两种图标，下面我们将针对于这两种图标进行研究。
产品图标是我们在设计界面的时候体现品牌调性和特性的图标。通过产品图标，用户就可以大概感知这个产品主要是做什么的。比如微信的产品图标是两个对话气泡，暗示了这是一款社交APP；再比如 ofo 的产品图标是字母ofo 的组合，同时也是一辆自行车，这暗示了这款产品是共享单车的APP；再比如 KEEP 的字母「K」的图标，像极了一个在抬腿做运动的人，暗示了这是一个运动APP。
同时有些产品也依靠自身已经在用户心中产生的品牌来直接设计产品图标，比如淘宝APP 的产品图标就是一个「淘」字；支付宝的产品图标就是一个「支」字。优秀的产品图标都会在我们心中打上一个烙印，当我们看到这些图形、配色时，脑中会立即想起来它们的功能和特点。产品图标除了在手机屏幕中作为启动图标，也会出现在闪屏、情感化设计、「关于我们」界面等场景中，所以也要有一定的灵活性，在设计上要以简单、大胆、友好的方式传达产品的核心理念和意图。产品图标很类似在企业识别系统（VI）里的 logo，需要让用户一眼看到它就能够与脑中的产品相关联。所以设计一个优秀的产品图标对于任何产品来说都是非常重要的。
产品图标有不同的风格，这些风格有可能很拟物，也有可能很扁平；有可能很抽象，也可能很具象。通过不同的设计风格可以更加标新立异，从而被用户记住。让用户记住我们的图标真是一件非常重要的事儿，要知道，每个手机都像是一把瑞士军刀，它有无数个功能，而我们的产品只是万种功能中的一个。用户不可能记住手机里所有的 APP 都是什么，所以能在第一时间取得好感和记忆非常重要，产品图标设计得好看并且容易被人记住就成了非常重要的任务。产品图标的主要风格有以下几种。
文字风格
文字是最直白的信息，而且不容易被曲解。所以很多国内的产品都会使用文字来作为自己的产品图标。比如：支付宝、淘宝、今日头条、OFO、爱奇艺、知乎、网易新闻、毛豆新车等。这么做也有它的问题，比如文字给人美的感受不如图形，因为文字需要阅读而不是观察。并且移动端设备都会在启动图标之下加上一行辅助文字，如果图标上的文字和下面的辅助文字完全重合，会显得像介绍了自己两遍一样。如果您决意要使用文字作为产品图标，且是中文的话，那么一定要记得文字最好为1-2个，并且不应该是产品的全称。如果是英文的话，最好是首字母而不是产品全称。当然不管是中文还是英文都需要选择合适气质的字体并做一定的变化。
单读：单读是一个偏文艺的阅读产品，所以产品图标使用了黑白配色和两个非常有文艺气息的宋体繁体字，这样的设计符合产品调性，传递给用户一种产品的文艺气息。
今日头条：今日头条是一款优秀的新闻APP。它的图标非常直白，一张报纸上有红色的头条标题，头条使用了非常粗的黑体字，非常显眼。
淘宝：淘宝采用了一个俏皮的「淘」字作为 icon 的主要元素，并且背景颜色是令人兴奋和刺激的橘黄色，凸显了电商属性。并且这个字使用了很久，用户对此有一定的品牌认知。
爱奇艺：爱奇艺的 icon 采用了英文字母iQIYI 和上下边框相组合的形式。整体看来像是一个电视机，强调了品牌属性和功能，并且使用了在视频领域非常有识别性的绿色，让人一看便知这是爱奇艺了。
△ 单读、今日头条、淘宝、爱奇艺的产品图标
如果您的品牌使用英文作为产品图标，我们在设计的时候要格外注意英文字母之间的正负空间关系以及不同西文字体的不同气质。
ONE：虽然是中文产品，但是 ONE 的icon 显得非常的高端和小众。ONE 三个字母的正负空间关系做了微调，并且选择了无衬线字体来体现时尚感。下面的小字是一个 slogan，并且和 ONE 的宽度一致。
Pinterest：Pinterest 的产品图标是一个手写体的P，并且用红色圆形作为陪衬。这样一个字母作为 ICON 的好处就是方便用户记忆。
HULU：HULU 是一个国外视频产品，它的产品图标颜色很鲜艳，字母本身有韵律感，所以没有做过多的设计。
Facebook：作为一个社交产品，Facebook 的产品图标同样采用了一个字母代表较长的单词。
△ ONE、Pinterest、HULU、Facebook的产品图标
正负形与隐喻风格
图标的设计可以使用正负形和隐喻，来让图标更加有耐人寻味的看点。
抖音：抖音的产品图标是一个音符，但是不知道大家是否发现，下面圆形的负空间也是一个音符，所以显得非常巧妙。为了增加动感还加了红和蓝绿色的类似3D的动感效果。
Keep：Keep 产品图标是一个K，但是同时也是一个人抬着腿正在锻炼。
Skillshare：Skillshare 是一个技能交换平台，第一眼看是两个手像太极一样交换着技能，同时也是该产品的首字母：S。
△ 抖音、Keep、Skillshare、OFO的产品图标
折纸风格
折纸的效果会让人感觉很立体，所以很多产品也选择了折纸效果（比较扁平的手法）来设计产品图标。
Calendar：这个产品的产品图标是一个正在翻页的日历，非常简洁明了。
Snapseed：除了扁平的设计之外，使用了长投影的设计风格。这个长投影也是扁平化的设计。
Netflix：Netflix 的产品图标是该产品的首字母N，这个 N 用了一些阴影来表示立体感。
绘声绘影：同样是用了长投影和折纸效果，显得非常清新。
△ Calendar、Snapseed、Netflix、绘声绘影的产品图标
填充图标风格
产品图标使用填充图标风格是非常合适的。填充图标风格具有简洁和识别性强的特点。这种 ICON 的可扩展性更高，比如在一些特殊节日时可以用手绘、拼贴等形式来做辅助图形。所以很多公司都钟爱填充图标风格。
Lucking：这是一个线上咖啡外卖的产品。它的 APP图标使用了一个鹿回头的造型。这个鹿造型简洁，非常有识别性。
Tinder：这是一个国外社交APP，通过一个火的填充图标让人第一时间记住这个产品。
youtube：这是国外著名视频APP，它的产品图标同样使用了填充图标风格，是一个有电视机隐喻的圆角矩形，并且中心是一个播放键，简明扼要地说明了这个产品的功能。
Twitter：国外著名社交APP，它的 icon 同样使用了填充图标风格，非常简洁好记。
△ Lucking、Tinder、Youtube、Twitter的产品图标
线性风格
由于目前设计流行趋势，很多产品图标都会采用扁平的设计风格。扁平除了填充的图标之外，还有一种非常流行的形式——线性风格。线性风格一定要注意不要太细，因为手机和电脑设计环境显示尺寸不同，如果我们做得太细，那么在手机上看会非常尖锐，显得不太好点击。
Airbnb：Airbnb 的背景是一个微渐变，线性风格是一个曲线组成的 A，同时也是一个小蜜蜂。
LOFTCam：为了凸显文艺产品调性，使用了偏细的线条，同时使用了两种主题色。
NextDay：同样非常文艺的产品，使用了比较抽象的手法。这个 ICON 是一个牛奶，突出了这个产品必须今天看，否则就如牛奶一样会过期。
VUE：这是一个摄影产品，同样应用了黑色的微渐变，前面是非常前卫的45度长短不同的线。
△ Airbnb、LOFTCam、NextDay、VUE的产品图标
LOWPOLY风格
我曾介绍过 LOWPOLY 这种设计风格，这种风格如果应用在产品图标上同样非常抢眼，因为用户的手机上可能安装了很多 APP，那么第一眼扫过去一定会注意到最亮眼的图标。而 LOWPOLY 因为本身造型的独特性非常吸引眼球。当然 LOWPOLY 也有它的问题，比如容易让图标失去细节等，所以很多产品图标都是使用 LOWPOLY 作为图形的背景。
潮自拍：潮自拍使用了暖色邻近色渐变的 LOWPOLY 作为背景，前景使用了一个很潮的S。
潘通色：潘通色本身的最大特征就是色卡，所以使用了 LOWPOLY 的形式。
美妆相机：通常 LOWPOLY 的形式是方块，而美妆相机使用了三角作为基础元素，很特别。
人人：人人的产品图标使用了不同的矩形斜度45°，增加了设计的速度感。
△ 潮自拍、潘通色、美妆相机、人人的产品图标
微渐变风格
微渐变也是非常常见的表现手法。在拟物被扁平替代以后，我们会发现无法表达空间上的 Z轴。所以用轻微的渐变表现图片的深度非常流行。我认为微渐变可能是众多图标设计风格中最有竞争力的一种。
每日优鲜：每日优鲜在背景上用了很多炫彩的圆球，由于促销时段在原有图标上增加了一个双十一的小标识，在手机中非常抢眼。
陌陌：陌陌图标如果设计成扁平你还会注意到它吗？使用线性图标会使得图标厚度感不够，而微渐变可以非常好地解决这个问题。
全民K歌：使用了紫红色的渐变来塑造一只鹦鹉，如果遇到其他使用场景可以使用扁平版本，这样会让产品图标的使用更加灵活。
Mindnode：这款脑图软件的产品图标使用了三组邻近色的渐变，同时使用了非常微妙的阴影。
△ 每日优鲜、陌陌、全民K歌、Mindnode的产品图标
卡通风格
卡通风格的产品图标会让用户更有好感，所以我们可以为产品设计一个可爱的卡通角色。好多决策者会认为卡通是一种低龄的审美，其实是错误的。卡通可以说是一种通吃的风格，比如腾讯就是以一个企鹅作为品牌形象开始拓展自己的版图。而卡通本身有不同的风格，比如拟物类的卡通、扁平类的卡通等，也会给人不同的感受。所以如果我们的产品要使用卡通作为产品图标，最好以目标用户群的喜好作为标尺。
开心消消乐：开心消消乐是一个休闲游戏，游戏类APP 的产品图标通常是使用拟物风格，这样可以最大地吸引玩家的注意力和兴趣。
映客：映客是直播APP，通常用户年龄不是很大，所以使用了一个很可爱的猫头鹰作为产品图标。
Waze：Waze 的产品图标不仅可爱而且突出了 Waze 的地图查找功能。
BOO!：BOO! 是一个儿童社交产品，用户比较低龄，所以更适合使用可爱的卡通作为图标。
△ 开心消消乐、映客、Waze、BOO!的产品图标
如果我们想设计一个小图标，那么我们可以把画布放大到400％来设计。同时可以使用网格和参考线来作为我们设计的辅助。网格在很多软件里都有，比如在 Illustrator 中点击视图 > 网格，即可开启网格了。参考线模板则需要下载第三方设计的模板，比如 Material Design 的参考线模板就有正方形、圆形、圆形和长方形结合等不同形式。如果对齐模板中的形状，即可得到面积相等的长方形、正方形、圆形。这对我们构建视觉上面积相等的图标很有益处。
△ 网格和参考线
△ 不同形状的网格布局
△ 在网格的辅助下可以设计出大小均衡的图标
苹果启动图标尺寸
苹果需要很多尺寸的图标用在不同的场景上，比如说在网页端打开iTunes会使用512px的大图标，而在手机、iPad桌面上的图标大小也不同。除了尺寸不同，这些图标的圆角也有不同的数值。为了简化这部分的难度，苹果为开发者提供了模板，有了模板就不用记那么多东西啦。苹果官方HIG 下载的这套资源中，有 Template-AppIcons-iOS 这个文件，这个文件提供了 PS、Sketch、XD等不同格式。我比较推荐使用 PS 的格式。
打开这个文件，用我们自己设计的启动图标替换掉任意智能对象里的内容。那么打开智能对象就是一个1024x1024px的矩形画布，把我们的产品图标放在这里，保存这个智能对象再关闭它就可以了。这时，你会发现所有尺寸的图标都变成了我们的图标。然后我们把背景隐藏，切出这些图标即可。如果是 AI 完成的产品图标可以直接 Ctrl+C 然后在 PS智能对象中 Ctrl+V复制过来就行。
△ Template-AppIcons-iOS
安卓启动图标尺寸
安卓启动图标同样需要很多尺寸，主流是需要：1024x1024px、512x512px、144x144px、96x96px、72x72px、48x48px这六种。我们提供给程序员的是直角的矩形，然后程序员通过代码进行切割变成圆角图标。在这里我也做了一个智能对象的模板送给您，只要替换其中的智能对象图像，换成您的1024x1024px图标保存即可。
△ 安卓图标模板
设计产品图标前，首先我们需要找一些和产品气质相符的图片制作情绪板。通过情绪板我们可以感受到产品的调性，然后我们从中提取一些形状和色彩作为我们产品图标的主要造型。这里我举我的产品每日名画的例子，每日名画是一个美术方面的APP，所以我找了一些和美术相关的图片。
△ 关于美术的情绪板
下面我开始在 AI 设计产品图标了。我建立了一个1024x1024px的画布，然后根据卢浮宫前的金字塔建筑设计了一枚抽象的产品图标，它内在的符号是：带领大家走进艺术的殿堂。同时我也增加了一些自己对美术的含义，如艺术来源于生活高于生活等。这些都写在了设计说明中。
△ 在Illustrator中设计产品图标
然后我给这枚图标加入了蒙德里安的配色，增加产品的艺术感，并最终完成产品图标的设计。这个图标也可以作为该产品的企业形象（VIS），将来产品周边都可以使用这个图形。
△ 最终定稿的图标
由于产品会首先上线到苹果设备上，所以我下面把 AI 绘制的产品图标全选复制，然后打开图标模板中的智能对象（双击图标模板中智能对象图层的缩略图），粘贴过来。粘贴的时候系统会提示选择粘贴过来的方式，这里我们选择：智能对象。然后保存并关闭智能对象，这时回到模板PSD 中，就看到了这个效果。
△ 替换了模板中智能对象的效果
接下来隐藏背景图层，然后按下键盘上的 ctrl+Shift+Alt+S，调出存储为Web所用模式，选择保存到桌面上，格式选择仅图片。关闭 PS，打开桌面上的文件夹，就看到图标被我们工整地切好了。
△ 产品图标的切图文件
第二种图标被称为系统图标。系统图标指的是担负着一定功能和含义的图形，一般来说需要像文字一般地被人迅速理解，所以表达方式上不适合特别复杂。比如微信底部四个系统图标：「微信」、「通讯录」、「发现」、「我」就使用了比较简洁的线性风格。
当然系统图标也不一定要做的非常无趣，比如我们常用的58同城APP 中就有大量的系统图标，在保证识别性的前提下使用了多彩的颜色和不同的造型，显得非常活泼。所以系统图标同样可以做得有趣和多样，前提是保证图标的可识别性。
填充图标（Filled icon）
填充图标是以面为主要表现形式的图标。在微信APP 底部的 tab栏中，未选中的图标是线性图标，而选中态则是填充图标，并且会变成较为鲜亮的颜色暗示用户该功能被选中了。填充态图标占用的面积要比线性图标多，所以更加显眼。实际上，在最新的苹果设计规范中，苹果也建议开发者在 APP底部 Tab栏中全部使用填充图标，点击态通过改变填充图标的颜色进行区别。这是因为填充图标看上去像可点击的。
△ 图为填充图标
线性图标（Outlined icon）
线性图标的表现形式是线条，在系统图标里通常是由统一粗细的线条组成。这里可能很多新朋友不明白为什么要使用统一的粗细，这是因为通常系统图标并非单一出现，而是成组使用。比如微信底部的四个 tab图标、网易云音乐顶部导航栏的图标等。在一个场景下的几个同等重要的图标，如果线条粗细不一致，很容易造成它们存在权重上差异的感觉。所以我们在绘制线性图标时，线条通常都会使用统一的粗细。
△ 图为线性图标
圆角图标（Rounded icon）
无论是线性还是填充的图标，在图标的边角处使用圆角都是圆角图标风格。圆角图标的好处就是让人觉得很温柔，可以非常舒适地点击它。所以很多产品的图标都会使用圆角图标。
△ 图为圆角图标
尖角图标（Sharp icon）
无论是线性还是填充的图标，在图标的边角处使用尖角都是尖角图标风格。尖角图标的好处是让人感觉到有棱角，视觉上会多凝视几秒。并且给人以正式的感觉，所以像银行、办公等APP 中都较多地使用尖角图标风格。
△ 图为尖角图标
断线图标（Breaking Lines）
如果我们的线性图标显得太死板，我们可以使用断线这种方式来让它变得俏皮。断线图标就是线性图标的一种风格变化，它的特点就是在线条中出现断口。但是这个断口并不是看起来那么简单，它得遵循几个规则：第一，断线开口只有一个，否则图标会无法识别；第二，断线开口位置不应该在中心线上；第三，断线开口尽量在转折处；第四，断线不应该太过于琐碎。
△ 土豆APP的标签栏使用了断线的风格
双调图标（Two-Tone icon）
如果我们把图标简单地分为线性图标和填充图标，是不是太无聊了？比如我们要设计一个 iOS平台的 APP，它的底部Tab栏就一定是未选中态是线性的，选中就是填充的吗（或者全部是填充态，仅仅改变颜色）？这也太无聊了吧！所以又出现了双调图标的设计风格。即：双调图标的外形还是线性图标，但是用透明度很高的同类色填充到线性图标内部空间里。这样的图标显得俏皮可爱，并且感觉非常透气。
△ 图为双调图标
动态图标（Motion）
动态图标是非常有趣的，如果静态图标不足以让用户感受到新鲜，那我们不妨给图标增加动效。比如 QQ应用中底部 Tab栏的图标点击其中一个的时候，其他图标会「偷看」选中态图标的方向。除了底部标签栏之外，很多 APP 点击能触发导航的「汉堡包图标」，点击时也会有一个从导航图标变成返回图标的动画。这都是非常能够调动用户好奇心的。
△ Material Design中的动态图标
我们在使用 Photoshop 工具的时候会感叹，画笔比钢笔好用，橡皮比布尔运算好用。那么我们在画图标的时候能不能使用画笔这样的工具来绘制图标呢？在 Photoshop 里使用画笔工具和橡皮工具、涂抹工具、选区工具的填充、油漆桶工具制作的图形，以及从网络上复制过来的jpg图片文件，这些都是像素图形。它们是计算机记录每一个点的颜色来呈现图像的。这也是为什么我们把一张照片放得特别大它就虚了的原因。而我们通过 Photoshop 中的钢笔工具、布尔运算、贝塞尔曲线、形状图层制作的图形，以及 Illustrator 复制过来的图形、Sktech绘制的图形等，都是矢量图形。它们是计算机记录一个锚点到另一个锚点的方向、位置、色彩来呈现图像的。所以像素图形变化多端、颜色变换丰富、细节更多；矢量图形则文件较小，并且具有随意放大缩小都不虚的能力。因为每个锚点之间的方向、位置都是相对的，放大和缩小不受影响，而像素图形记录每个点的色彩，比如一张2000px x 2000px的图片，缩小到1000px x 1000px就会损失一千个像素信息。我们绘制图标比较适合用矢量图形来设计，因为我们可能需要随时调整图标的大小，并且在不同分辨率的适配中也更加方便。
布尔运算听着很可怕，其实非常简单，布尔运算是数字逻辑推演法，主要有数字逻辑的联合、相交、相减。在我们使用的平面软件中引用了这种逻辑运算方法来使基本图形通过联合、相交、相减等数学计算变成新的造型。比如两个圆形相减可以得到一个月亮的造型，这就是布尔运算了。那么为什么叫布尔运算呢？布尔指的是乔治·布尔（George Boole），一位19世纪最重要的数学家，为了纪念布尔在符号逻辑运算中的杰出贡献，所以我们将这种运算称为布尔运算。布尔运算在 Photoshop、Illustrator、Sketch、Adobe XD、After Effects等我们熟悉的软件中都有，并且操作基本一致。
布尔运算的核心就是两个形状的关系：即Union（并集）、Intersection（交集）和Subtraction（差集，包括A-B和B-A两种）。这些关系有点像我们初中学过的数学，应该比较好理解。但是很多软件中对于布尔运算的关系翻译不同，所以可能大家会有些不适应。比如在 Photoshop 中布尔运算被翻译成：合并形状、减去顶层形状、与形状区域相交、排除重叠形状。而在 Adobe XD 中则翻译成：添加、减去、交叉、排除重叠。虽然名字不同，但是功能是相同的，所以大家在学习新的软件时不妨先找一下布尔运算。
△ 图为布尔运算不同运算模式
贝塞尔曲线是用于二维图形绘制的数学曲线。1962年法国工程师皮埃尔·贝塞尔发表了贝塞尔曲线，它的诞生主要是为了汽车的主体设计绘制图形的。贝塞尔曲线是绘制矢量图形时的重要工具，我们使用钢笔工具画出的所有图形一般来说都是贝塞尔曲线组成的。贝塞尔曲线由锚点和线段组成，点击锚点就会出现两个手柄，一边是控制前面的线条走向，另一边是控制后端的线条走向。同时我们也可以通过增加锚点工具和删除锚点工具进行调整。要想学好平面电脑绘图软件，贝塞尔曲线是必须修炼的一课（练习贝塞尔曲线的在线游戏：https://bezier.method.ac/）。一般来说，二维平面软件都有贝塞尔曲线的痕迹，钢笔工具、增加锚点、删除锚点、转换点工具，这些都是平面软件的标配。并且，贝塞尔曲线和布尔运算可谓是一对好朋友，在绘制矢量图形时可以使用它们轻松地绘制出准确的造型。
△ 图为贝塞尔曲线绘制方法
那么我们使用什么软件来绘制图标呢？这里我建议使用 Illustrator。首先，UI设计师使用不同的软件来设计页面，目前主流是 Photoshop和 Sketch，也有很多设计师选择 Adobe XD。而这些软件都是兼容 Illustrator 的，所以使用它来绘制图标非常有灵活性。可能您对 Illustrator 并不熟悉，不过没关系，我们在这里只需要了解它与图标绘制功能相关的功能即可，比如钢笔、布尔运算、属性面板、描边、填充、混合工具等，并不需要学习非常深入。所以大家不必紧张。
笑脸图标
笑脸图标的设计步骤：画出一个正圆；接着画一个小圆，然后 ctrl+F复制平行移动到旁边，然后右键编组。接着，同时选中大圆和编组的小圆进行水平居中对齐。我们绘制一个圆形，然后通过布尔运算减去一个矩形得到半圆形组成嘴，完成。
△ 笑脸图标
对号图标
对号图标的设计步骤：使用矩形工具画出一个长方形，然后复制，将复制后的长方形向右上移动相同的距离，使用布尔运算剪切，旋转45°后变成一个对号。绘制一个正方形，使用路径选择工具选中，拖动圆角的圆点拉出圆角得到圆角矩形。对号和圆角矩形进行布尔运算，完成。
△ 对号图标
WIFI图标
WIFI图标的设计步骤：绘制多个圆形并且通过布尔运算相加减得出三个圆圈嵌套的靶子造型。通过旋转过的45°矩形和之前图形布尔运算得到 Wifi图标，完成。
△ WIFI图标
地理位置图标
地理位置图标的设计步骤：选择矩形工具单击画面输入数值，建立一个100px的圆形。然后选择这个圆形复制它，然后等比例缩小它，和之前的大圆进行布尔运算相减，得到环形。绘制50px的矩形，用对齐工具放在环形的左下方。旋转45°得到地理图标，完成。
△ 地理位置图标
云彩图标
云彩图标的设计步骤：绘制两个大小不同的圆形，使用对齐工具进行底部对齐。绘制一个矩形，同样底部对齐。合并形状，完成。
△ 云彩图标
眼睛图标
眼睛图标的设计步骤：绘制出一个正圆。复制这个正圆形，然后按着 Shift+方向键下键，并通过布尔运算得到眼睛外轮廓。绘制两个圆形，通过对齐工具和布尔运算工具得到最终眼睛造型，完成。
△ 眼睛图标
铃铛图标
铃铛图标的设计步骤：首先用圆形和矩形合并组成主体；使用矩形和圆形进行布尔运算绘制铃铛底部和铃铛顶部的零件，然后进行合并形状；铃铛底部的半圆使用圆形和矩形布尔运算，完成。
△ 铃铛图标
简易齿轮图标
简易齿轮图标的设计步骤：通过两个圆形进行布尔运算得到环形。绘制一个矩形，上下复制在圆形上，然后把它们俩编组和环形使用对齐工具进行水平垂直对齐。复制矩形编组并旋转90°，得到一个十字形。复制这个十字形并最终全部合并形状，完成。
△ 简易图标
齿轮图标
齿轮图标的设计步骤：用 AI 的爆炸图形和圆形进行布尔运算画出齿轮；用两个圆形进行布尔运算做出里面的零件，完成。
△ 齿轮图标
螺丝刀图标
螺丝刀图标的画法：用圆形和矩形做出螺丝刀主体；用矩形旋转并复制再布尔运算做出凹槽；使用矩形做出前面的造型，完成。
△ 螺丝刀图标
苹果图标
苹果图标的画法：绘制一个六边形。将水平中间两个点向上移动。在中心线上下建立两个锚点，并且向下移动。将下面两个点向内分别移动。使用圆角工具将每两个相同的点一组一组拉成圆角。绘制一个矩形并且旋转45°，然后将左右两个点向内拉得到菱形。用圆角工具使菱形变成叶子造型并且旋转45°。使用一个圆形和苹果造型相切，完成。
△ 苹果图标设计过程
放大镜线性图标
放大镜线性图标的画法：绘制正圆。绘制一条直线。用属性面板里的对齐工具把它们俩对齐。用描边面板里的属性将描边改成圆头，然后旋转45°即可。
△ 放大镜线性图标
时钟线性图标
时钟线性图标的画法：绘制正圆。绘制一个矩形，对齐圆形中心。用增加锚点工具在矩形左和下边上增加两个锚点。用直接选择工具框选没用的线条，删除即可。
△ 时钟线性图标
点赞线性图标
点赞线性图标的画法：绘制两个矩形，并用直接选择工具选择重合的四个锚点，在属性面板里使用对齐工具让它们完全对齐。将大的矩形底部锚点向左移动。绘制一个矩形并和大的矩形左对齐。用直接选择工具选中直角，拖动圆角小圆点让它们变成圆角，完成。
△ 点赞线性图标
如果您掌握了以上填充态图标的设计方法，相信其他图标的设计只要以此及彼的思考，就可以完成。比如线性图标，在绘制线性图标时，我们首先会建立一个半透明的矩形来固定图标应该绘制的范围，比如「40px」。然后我们把填充关闭，只使用描边来绘制线性图标即可。绘制完以后我们无需保存文件，仅通过 Ctrl+C的复制快捷键，然后打开 Sketch 或者 Adobe XD 就可以使用 Ctrl+V 将图标粘贴过去了。但是，如果您使用 Photoshop 做界面设计，可能会多两道手续，首先就是线性图标需要扩展才可以复制到 Photoshop 中。将图标复制一份（扩展之后的图标不方便修改，所以要留着可修改版本），然后点击对象菜单 > 扩展，点确定，就可以把原本是没有闭合的路径改为完整的形状。
△ 在Illustrator中的扩展
然后复制，打开 Photoshop 粘贴会打开提示框，我们可以选择把图标粘贴成为像素、智能对象、路径、形状。如果粘贴成像素的话，那无疑对修改是非常不利的。如果粘贴成智能对象，双击智能对象会回到 Illustrator 中修改，但是也有一定缺点，那就是智能对象不能直接在 Photoshop 中进行调整。如果粘贴成路径也不是很方便，所以最好是我们将 Illustrator 中绘制的小图标粘贴成形状。选择后，图标就粘贴成了形状图层，我们可以在 Photoshop 中对它进行布尔运算、锚点调整等操作了。
△ 粘贴到Photoshop中的选项
然而，我们会发现图标粘贴到 Photoshop 中，横竖的路径会出现虚边的情况（圆角和斜线是允许一定的虚边出现的，但是直线不可以）。这种虚边有可能会影响用户的体验，我们必须把它消灭掉。第一种方法：在 Photoshop 中我们可以用直接选择工具后界面上方的对齐路径功能，给它打钩来尝试修复这个问题。第二种方法：我们可以使用直接选择工具选中虚掉的某两个锚点，然后按 Ctrl+T（自由变换），再按键盘的上下或左右「摇一摇」，路径就会清晰了。第三种方法：也可以使用几像素的矩形进行布尔运算强行对齐。三种方法一定能够让图标的横竖路径没有虚边，达到完美的效果。当然 Sketch 和 Adobe XD 都是矢量工具所以复制后没有这个问题。
在 Photoshop 中使用「摇一摇」的方法对齐路径
在 Adobe XD 中，图标无需进行扩展，并可以实时调整描边粗细等属性。
标签栏图标
在苹果和安卓APP 的底部，一般都会有一个放置重要功能的常驻栏，在 iOS中被称为标签栏（也叫做Tab栏）。一般，Tab栏的图标是2-5个。每个图标的区域平分整个 Tab栏宽度，底部会有一个22px（11pt）的文字注释。当然如果图标释义较为清晰，也可以为了保持设计感去掉文字注释。如果我们是以 iPhone6/7/8尺寸设计界面，那么我们的标签栏图标尺寸应该是60px（30pt）左右，可以基于这个范围来设计我们的图标。
△ 互联网产品中优秀的标签栏图标设计
每个 Tab栏的图标都应该设计一个选中状态，可以做样式的变换也可以做颜色的改变，总之要让人知道当前所在的页面是哪个。如果您的 Tab栏由五个 icon 组成，那么可以在中间放置比较重要的功能，并做出突显的样式，比如使用一个圆球当作背景。还要额外注意，图标的选中态样式要和中间突出状态的图标保持区别，以免发生误会。
导航栏图标
在苹果APP 的顶部区域，我们称之为 Navigation Bar，就是导航栏。导航栏左右一般都会有图标，如果是二级页面，左侧一般是返回图标。安卓也有类似的设计。那么我们在设计这种图标的时候一定要保证所有导航栏上的图标大小和风格都是一致的。如果以 iPhone6/7/8尺寸设计界面，那么导航栏图标的尺寸大概是44px（22pt）左右。
△ 互联网产品中优秀的导航栏图标
金刚区图标
在我们逛淘宝和美团的时候您会发现，在它们页面首页都会有一个区域放置很多分类，一般是6-8个大小一样的图标，有可能是圆形，也可能是不规则形状。这个区域其实在苹果和安卓规范里并没有，属于设计师自创的规范。这个区域经常有八个图标组成，被称为「八大金刚图标」，后来很多产品在这个区域并不使用8个图标，我们就称它们为金刚区了。金刚区图标的设计风格应该尽量是微扁平、轻拟物的感觉，这样会有更好的点击感。尺寸方面，金刚区并没有规范，所以大家可以以设计稿最终效果为准。
△ 互联网产品中优秀的金刚区图标设计
图标设计是 UI设计中非常重要的一环，因为除了文字和图片的排版之外，在扁平时代我们能够传递给用户情绪和设计感的通道就是页面中的各种图形和图标了，如果做不好图标，用户就将在使用界面时失去乐趣。所以，我建议每位 UI设计师都需要在平时做大量的图标练习。在不同的图标风格中，学会使用各式各样的武器。
文章来源：优设网 作者：郗鉴
蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 、平面设计服务
借着疫情期间在家休假的时间，将平时用到的一些零零散散的图标绘制方法与思路进行了一次全面的汇总与沉淀。从实习期间画一组图标的无从下手，每一个图标看起来都像是散装的一样，到后来慢慢学习与练习，到现在变得了解了图标的绘制流程，过程也是比较麻烦，因为很少有全面的图标讲解文章，都是看一篇懂一点，然后在揉到练习当中。所以本篇文章尽量将图标进行细致一些的流程说明，有不足之处还望指教。
图标可用性，顾名思义就是图标绘制出来是否能被用户所看懂并快速识别，是否可以为业务赋能。为此我总结出了四条图标绘制的评判标准。
用户是否能在某页面上迅速找到该图标，凸显性的目的是可以快速查找，帮助用户做选择。图标在识别的速度上远远大于文字，所以在一些页面中的重要功能使用图标的目的是为了吸引用户的注意力，让重要功能得到凸显，提高重要功能的点击率。
图标的目的是要让用户猜出他看到的图标所表达的意义，有什么作用，以及点击后会出现什么样的场景，发生什么样的事情。所以一个图标的好与坏最重要的因素就体现在这里：图标的可识别性与可预知性。
影响图标可识别性的三点因素
3. 美观度
图标是否美观，对用户是否有足够的吸引力。在《设计通用法则》一书中有一条设计法则是：美即适用效应。不管任何事物，美丽的外表都会给人带来好感，让人觉得这种事物在任何方面都非常美好。作为设计师，把一件事物美观化是一件终生的必修课，用户对图标或者界面的第一印象就是始于颜值。
4. 业务属性
图标是否符合业务属性，是否可以唤起用户的使用情绪，提高点击率，起到为业务赋能的作用。在界面中，我们设计的图标最终目的不只是让用户觉得它美观，而是要为我们的产品赋能，什么是为产品赋能呢？通俗来说就是使图标能够提升点击率从而给公司创造收益。
图标如何为产品赋能呢？
1. 线性图标
线性图标，顾名思义，即图标是由直线、曲线、点在内等元素组合而成的图标样式。线性图标具有辨识度高，清晰唯美，简约易看等优点，线性图标不会对页面造成太多的视觉干扰。缺点是：线性图标的创作空间较少，太复杂的线性图标看起来会让人感觉到累。
2. 面性图标
面性图标，即使用对图形内容进行色彩填充的图标样式。面性图标是现实生活中物体的缩影，优点非常多，比如表意能力强，细节丰富，色彩丰富，情绪感强，视觉突出，创作空间大等。面性图标可以让用户迅速定位图标位置，快速预知点击后的状态。但是面性图标在页面中不可过多出现，否则会造成页面臃肿，难分主次，用户视觉疲劳。
3. 混合型图标
在设计图标类型的时候，不一定局限于单纯的线性与面性，也可以两者结合，让图标即有线性描边的轮廓，还有色彩填充的区域，混合型图标可以让页面变得更加有活力，同时还可以吸引用户的注意力，美观与创意性强。但是混合型图标在商业产品中要谨慎使用，因为使用不当会让页面变得杂乱不堪，用户无法识别图标表达的语义。
色彩情绪即颜色心理，指不同波长色彩的光信息作用于人的视觉器官，通过视觉神经传入大脑后，经过思维，与以往的记忆及经验产生联想，从而形成一系列的色彩心理反应。在任何场景下合理使用色彩心理可以调起用户情绪，还可以让用户产生联想进而快速识别。
在设计图标的时候，合理的运用色彩情绪，会使图标更具有科学性，可以让用户在使用的过程中更加自然、舒服，同时也会增加用户的识别速度唤起用户的使用情绪。
色彩情绪表
在配色时，我们采用更具备科学性、更符合人类感官的 HSB 系统进行配置。在根据主色配置渐变色时，我们经常是在主色的基础上加白或者加黑。但是只加入大量的白或者黑就会改变原本色彩的明度与饱和度，从而使画面显得雾蒙蒙的，不够清晰通透。正确的做法是在给主色变亮减暗的同时，改变主色的饱和度。在 hsb 色相条中，最亮的三个颜色分别是，蓝紫色，青绿色与黄色，如果需要加亮主色就在混白的同时将蓝色向青色改变色相，如果需要减暗则是相反，这样在调制渐变色变化的过程中不会出现太脏的颜色。
常见的色彩搭配
中性色（黑白）+主色、主色+点缀色、主色+透明度、单渐变、双渐变错层、撞色叠加穿透等效果。一般常用的就是中性色+主色、主色+点缀色。
点缀色配色
我们在绘制图标的时候，应该将图标的每个像素尽量对齐于像素点，这样导出图标时像素的边缘不会出现锯齿，不会出现过于模糊的情况。通常在绘制时我们应该去除绘制软件中 x 与 y 轴，宽（w）与高（h）的小数点，这样就可以避免无法对齐像素的情况。
在绘制两个或者以上的图标时，为了避免多个图标出现大小不一的情况，我们应该使用由谷歌材料设计语言提供的图标参考线进行绘制，使用图标盒子可以让一整套图标在视觉效果上更加统一和谐，不会出现一大一小一长一短的情况。
使用方法
先绘制一个 152*152px 的正方形，一个 176*176px 的正圆形，一个宽 176*128px 的水平矩形和一个 128*176px 的垂直矩形，圆角为 4px，然后将这个四个形状进行水平居中对齐，之后得出一个图标的参考线。
在宽度相等的情况下，正方形的面积要大于正圆的面积，所以在绘制圆形图标时应该将圆形的上下左右四个顶点顶齐与图标盒子正方形区域的四条边；在绘制方形图标时应该将方形的四个角点顶齐与圆形参考线的外围边；在绘制横向矩形与纵向矩形图标时，应该将图标的左右边或者是上下边控制在正方形的参考线之内，这样矩形图标绘制出来会更加的圆润，相对于其他的形状图标更加匹配。
我们绘制的图标必须要保证清晰度，可辨别性。不管是在强光下还是正常光下都需要良好的可读性。这就需要图标不论是自身元素之间的对比度还是和页面底板背景之间的对比度都需要很好的可读性。我们检测图标的可读性通常要将图标的背景色底板在黑色和白色之间进行切换对比，不论是黑色还是白色的背景都可以看清图标的全部细节，还需要确保图标中的每一种颜色都是可见的。第二就是将图标拿到强光下进行观察，在强光下是否可以看清图标的主题结构，图标是否有足够的辨识度。
在绘制图标时，我们可以参考 WCAG 2.1：图形和用户界面组件的对比度至少为 3 : 1 的标准进行相应配色，以达到良好的可视状态。
可访问性测试：https://webaim.org/resources/contrastchecker/
在绘制多个类型相同的图标时，我们需要注意这一套图标合集需要在视觉上保持统一性。在一整套产品中，会有很多种图标，但是图标的功能不一样，所表达的内容也不同。这时，图标一致性的意义就体现出来了，根据格式塔原理中的相似性原则：人们会将如元素彼此相似的东西感知为一组。这也意味着如果具有相同功能、含义和层次结构级别的元素，则应在视觉上保持统一匹配。我们倾向于将彼此相似的元素视为同一个分组，相似性可以帮助我们组织和分类页面里的元素对象，并将它们与特定的含义或功能相关联。有不同的方法可以使元素被认为是相似的，这些方法包括颜色、大小、形状、纹理、尺寸和方向的相似性。
图标内容的统一会让用户明白相似的图标所代表的的功能也相同，而且在视觉上也更加和谐美观。因此我们在绘标后还需检查线条的粗细比重，边角的大小，配色方案，细节层次和设计元素在整个合集中是否是不变且一致的。
呼吸感的意思就是适当留白。在设计中，适当的留白可以突出主体内容，让内容具备易看性。不管是图标还是界面，元素与元素之间都应该存在一定的间距。在图标的绘制过程中，我们应该注意图标元素之间的间距不宜过近，元素也不宜过多。图标是一个物体的简略缩影，目的是为了表达内容，让用户快速理解，但是在有限的空间中，太过复杂的细节会影响图标的识别速度。因此在图标的绘制过程中应该删除所有无法传达图标意义的元素，避免使图标变得太过复杂难以识别。
布尔运算在设计行业中被得到广泛的运用，比如工业设计，影视后期，logo 设计等，布尔运算具有一致性与规范性的优点。我们在设计面性图标的时候可以合理使用布尔运算进行绘制，这样绘制的图标具有吸引力和说服力。
在页面中，有需要吸引用户点击的图标，也有起到辅助作用的指示图标，还有引导用户操作的图标，这些图标在页面中占据着不同的地位.在所有图标中，有色图标强于无色图标，多色图标强于单色图标，面性图标强于线性图标，带背景图标强于无背景图标，在设计图标的时候应该根据业务需要进行视觉强弱不同的设计。
如文上所说，图标采用与业务相符合的色彩搭配会让用户在使用的过程中更加自然、舒服，同时也会增加用户的识别速度，唤起用户的使用情绪。一个图标的绘制是否具备商业价值也恰恰体现在这里。
如下图所示，左图是斗鱼直播 APP 的截图，右图是京东金融的图标截图。这两款产品的业务以及所对应的用户群体完全不一样，斗鱼是一款直播的产品，直播面向的用户群体是青少年，所以整体的产品调性是：萌、活泼、多彩、绚丽、时尚等，斗鱼直播的图标绘制需要面向年轻人，色彩的高饱和与有趣的元素来抓住用户的眼球。但是京东金融是一款理财的产品，面向的用户则是中老年，大多数都是有一些存款的人，这些人不需要斗鱼那样花里胡哨的元素，他们只在乎这个产品是否安全，利息是否高，所以京东金融这个产品的整体风格就需要偏向于：安全、高端、大气，这样才能给用户从视觉上营造信任感。我们设计图标时通常使用产品的调性作为主风格，但是像美团淘宝这些业务众多的产品中，我们就需要根据产品下的细分业务进行风格定位，然后设计中相应融入产品的品牌元素，使用合理的色彩情绪等让图标变得更符合业务的风格。
当我们的图标绘制完成后需要测试这一组图标的重心是否统一，常用的方法是使用标准的正圆形和正方形来和所有绘制的图标进行对比，保证所有的图标重心相近，视觉统一。也可以采用不同角度的观察法，可以从上下左右四个角度去观察图标，看看图标在不同的角度下重心是否统一。
情绪板是在执行一项设计操作之前非常重要的一个步骤，情绪板并不是像设计平台展示作品集里那样放几张图片，几个关键词，而是一套对接下来设计的一个风格走向定位。根据不同的用户人群，不同颜色的色彩情绪，不同产品的业务，将用户调研的结果，产品的背景进行总结与思考，定位接下来的设计风格。
选取照片
观察生活，对想画的图标进行照片实物造型的提取。图标是对生活中事物的精简概括。利用现实照片作为设计参考可以让绘制出的图标更真实，辨识度更高，还可以做到差异化设计。
造型勾勒
使用矢量软件的基本图形与钢笔工具描着照片进行轮廓的绘制。
简化优化
简化草稿轮廓的结构，只保留一个物体的主要特点元素，删除多余元素。优化图标细节，需要时将图标线性转面性。
业务属性
根据业务需要，调整图标风格，添加质感。
无规矩不成方圆，规矩的出现可以让一切杂乱的东西变得合理，统一起来。在设计上也是如此，规范具有统一输出，指引细节、便于查看的好处，规范就是一组图标中的规矩，所有图标的绘制都按照规矩来，最终的成品就会显得井然有序。
在制定规范时，我们通常先绘制出一个符合业务风格的图标，然后根据这一个图标定制后续的图标规范，最基本的规范便是描边宽度，断点位置、圆角大小，主色辅色，渐变角度，点缀元素，光影角度等，在一组中的图标需要在这些图形属性中进行统一，这样的图标虽然形状不一样但是在视觉上看起来是属于同一合集的。
制定规范一般分为三个过程：
文章来源：优设网 作者：箫灬西人生
蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 、平面设计服务
一套 UI 界面当中，核心的 APP 图标是用户每天都要接触、经常使用的视觉组件和交互对象。设计图标的时候，要用到大家最熟悉的元素才能贴合用户认知，要醒目、统一，也要足够「隐形」，避免喧宾夺主。今天这篇文章，来自著名的 Tubik Studio 团队，他们为华为旗下的 EMUI 10 系统设计了核心的图标系统，来看看他们的设计过程吧。
我们总不会低估一个操作系统基础图标，对于产品的可用性和合意性的影响。基础图标虽然小巧，但是对于整个操作系统而言，总是极具影响力的，因为他们是用户界面的核心元素，帮助用户快速直观地在系统中定位、浏览、导航。但是，对于设计师而言，图标的设计始终是挑战，它看起来最为简单，但实则为最为艰难的工作。
图标需要高效，让人一目了然，但是也要具备良好的可识别性，在传统和创新之间达到平衡。这一次，Tubik Studio 设计团队将要给华为的 EMUI 10 来设计图标，而这篇文章将会为你揭示背后的设计过程。
这次的项目主要是由 Sergii Valiukh 、Arthur Avakyan 和 Polina Taran 来负责。这次的设计项目从最初的探索构思入手，逐渐开始绘制草图，探索样式，一直到最后打磨，完成设计。
为华为 EMUI 10 系统的用户界面设计基础的图标
我们在 2019 年夏季，收到了来自华为的邀约，这次的项目要重新设计 EMUI 这套基于 Android 系统的用户界面基础图标，这套图标会用来适配华为旗下的旗舰手机，这些图标将会随着新版的系统部署到这些手机产品当中。我们的任务，是创建总计 54 款符合当下潮流趋势的图标，这些图标要能够贴合品牌和已有用户的偏好，并且能够吸引新的用户。
这个图标设计项目如今已经在当下的华为旗下手机产品中应用且部署好了，最早使用这套图标的智能手机型号为 Mate 30 ，紧接其后的是 P40。
在整个操作系统中，这些图标是始终位于用户视野以内、最基础的最核心的交互元素，通常用户每天都会同这些核心的基础 APP 进行交互，有时候一天多达几十次，因此它们应当具备良好的功能性，还应该足够美观，给用户带来满足感。同时，这套图标的设计，也应当足够统一，以协调的体验切入到整个 EMUI 的设计系统当中，贴合整体的样式特征。
所以，我们使用了一整套图标网格系统，应对不同需求，在设计的过程中，这套网格有助于确保所有图标外部尺寸的一致性，也保证了内部元素的统一性。
为了发掘全新的视角，我们决定从传统的手绘图标开始，寻找重新塑造图标设计的方法。这些图标所涉及到的元素，早已为全球数百万用户所熟知，要重新设计图标外观，并且还要成套且统一，这本身就是一个巨大的挑战。
比如「电话」图标所对应的听筒元素、「信息」图标所对应的气泡对话框这样的元素，是不可能完全抛弃重新创造的，所以我们的真正的切入点是在形态和色彩上寻求解决方案。
越是简单的东西，重塑起来就越难。
在实际的设计过程中，我们尝试了数以百计的造型变体，从完全放飞、非常规的的外部造型，到极其常规，大家熟知的造型解决方案，我们都逐一试过。而在色彩上的尝试相对会显得更加具有实验性：我们尝试使用明亮的紫罗兰色、栗色和浅绿色来进行混搭。
当然，我们很清楚，这样的实验性的工作是探索过程中的一小步，但是它是必须的，是创造新设计的种子，是寻求正确答案的必经之路。
在设计过程在，有一件有趣的事情发生在设计「相机」图标的过程中。我们尝试过很多不同的图标造型，不同的元素，不同的样式，但是其中始终有一个细节是不变的，那就是右上角的小红点。这是为了暗示用户，华为的摄像头模组来自徕卡，这个红色的小点就是向其致敬的标识。
而下面的概念设计，则是强化了图标之间的几何轮廓的差异，从而提升图标在智能手机屏幕上的对比度和识别度。
下一步，我们基于几何图形外观差异性，设计了多种造型不同但同样优雅的图标。在基于这种风格概念进行延伸的过程中，我们会优先考虑圆形的元素。而「天气」图标明显既不适合圆形也不适合方形来呈现，所以我们使用的是云和太阳两种元素的组合。「钱包」图标使用的是矩形，然后搭配卡片的组合。尽管造型整体上是相对自由的，但是所有的图标都是遵循图标网格，并且在视觉权重上尽可能统一。
在色彩和样式上，我们则更加倾向于渐变。没有色彩渐变，纯扁平的图标显得过于幼稚和「古早」，没有足够的品质感，所以，我们在新的图标设计上，开始加入渐变色彩，提升质感。
不过，在最终版本当中，我们还是保留了图标外部的圆角矩形的外轮廓，然后将图标元素的内径进行了适当地缩减，渐变和核心的简约几何特征依然是整套设计的最高优先级。
这套设计方案展现了在整套 UI 界面中，图标这个小元素的设计上所需要投入的精力和潜在的难度。想要图标足够协调、美观、易用还要贴合品牌特征、还要区别于以往，是一件相当不容易的事情。
细节里藏着魔鬼，任何细小的元素、线条轮廓、色彩的变化都可能会在屏幕上放大、被感知到。
文章来源：优设网 作者：Tubik Studio
蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 、平面设计服务
如期而至，这是标签栏控件总结的第二期。这一期真是掏空职业经验，希望对你的工作有所帮助。
这一期我们来聊一聊标签栏中的关键元素——图标。
图标其实存在于界面中的许多地方，但因为这一期主要分析标签栏，所以我会借标签栏中较主流的图标样式，总结一套图标制作与落地方法。这些方法在图标制作过程中都是相通的，大家可以举一反三。
1. 图标样式
图标具体样式风格的定义是非常主观的，网络上也流传着许多的教程教大家如何设计五花八门的图标，所以在这里我就不再赘述了。我主要来总结一下基础的标签栏图标一般有哪些样式变化。
我调研了诸多的应用程序，发现主流的 APP 标签栏样式变化，大致分为以下五种。其中占比最多的是「由线型转面型」。
调研的应用程序中，所有使用到线性图标的应用程序，都将描边粗细限制在 1pt-2pt 之间。
2. 图标视觉大小
上一期我们讲到，iOS 定义了一套标签栏图标的尺寸规范。
iOS 在这里所定义的尺寸并不是图标文件最后输出的尺寸，而是给设计师作图时，针对不同图标形状的参考尺寸，目的是为了让图标的视觉大小看上去一致。
那么为什么 iOS 会根据不同的图标形状给出不同的图标尺寸呢？因为 50px×50px 的正方形比 50px×50px 的圆形面积更大，所以正方形的视觉大小也会大于圆形。为了统一图标的视觉大小，正方形要做适当的面积收缩处理。（矩形同理）
于是我们看到许多平台都推出了图标辅助网格规范 ¹。其实如果遵从「面积相等」原理，理论上所有的图标网格都应该由下面这一套推理公式得出（以Material Design 标准图标网格为例）：
但实际情况是，不同平台的图标辅助网格规范建议尺寸都有一定的差异。原因就在于，虽然有时候我们参考「面积相等」原则对图标视觉尺寸进行了规范，但项目落地后发现视觉上可能还是有一些不协调，所以最终设计师还是会凭借自己的主观判断再进行微调。
记住：好的设计作品是理性的设计理论与设计师本身感性的碰撞结果，二者缺一不可。
3. 图标输出尺寸
iOS 规定标签栏图标的输出尺寸统一为 31pt×28pt；Material Design 规定标签栏图标的输出尺寸统一为 24dp×24dp。
但我们发现，在借助了图标网格解决了图标视觉大小的问题之后，每一个不同形状的图标，尺寸其实是不同的。为了方便前端落地，我们在输出切图文件时，要保持每一个图标文件的输出尺寸是相同的。该怎么办呢？
于是我们将一组图标都放置在一个比图标本身略大的相同尺寸容器中。而图标与这个容器之间的空白像素，正好也帮助我们规避了图标落地后，切图边缘像素可能被截断的现象发生，所以我们称这个区域为「安全边距」。
对于安全边距的规定：Material Design 全平台规定图标的安全间距统一 2dp；iOS 则根据不同的图标使用场景给出的不同的图标网格和图标安全间距 2。
标签栏的图标一般分为静态图标和动态图标两种。
静态图标的实现方法相对容易，可以与前端沟通确定本次项目交付的标签栏图标文件是采用位图还是矢量图。如果是位图建议交付 .png 格式文件；如果是矢量图建议交付 .svg 格式文件。
使用位图时请注意以下两点：
不同项目环境输出的切图套数不同
请注意：这里我所提到的倍率全都是「绝对倍率」，这个概念非常关键。
「绝对倍率」指的是：以上所有的倍率都是针对 @1x 设计稿下的输出倍率尺寸。而当你使用 @2x 作图时，为了保证「绝对倍率」不变，你的切图输出倍率就应该设置为 @0.5x/@1x/@1.5x 。
如果你在 @2x下作图，却依然保持输出 @1x/@2x/@3x 的切图，那你输出的文件尺寸最终其实是 @2x/@4x/@6x。
有一点绕的话，我们以 Sketch 导出位图切图为例：
所以如果你日常使用的是 Sketch，也是用 Sketch 原生导出工具，那你的切图预设应该根据你的作图尺寸而定，见下表：
如果你日常使用的是 PS，用 Cutterman 切图，那么 Cutterman 会自动识别你当前的画板，然后根据它的宽（横屏情况下是高）来设定它的基准分辨率。那么你在任何情况下输出 @1x/@2x/@3x 的切图，其实都是「绝对倍率」，不用像 Sketch 当中一样换算。前提是「设置当前画布为：Auto（自动识别）」。
假设你在 @2x 下作图，执意不管不顾「绝对倍率」，又忘了交代前端人员手动处理切图尺寸的话，那你所有的切图尺寸实际都是设计稿所需图标尺寸的2倍。就算前端小哥帮你手动处理了切图尺寸，每一张切图所包含的像素信息，都比项目真实所需的要多很多，完全就是在徒增所需切图文件的大小。
注意切图文件大小
切记，公司的线上项目中，用户从服务器下载的每一单位的流量都是要公司花钱的，所以许多项目管理者都是很在意控制线上文件大小的。于是压缩切图是 UI 必备的技能之一。
虽然图标的文件大小一般只有几 KB，但是项目大了难免积少成多，所以在真实项目中，不管任何切图我都会手动压缩一次。
这里推荐一个压缩 .png 文件大小，但几乎不会产生失真的免费网站 tinypng³（是我曾经深爱的一位前端小哥推荐给我的，在此表示感谢）。
位图切图会面临交付的倍率图过多、容易失真、文件大小难控制等问题，但对于矢量图，这些问题都得到了解决。目前.svg矢量图落地也在项目中越来越流行了。UI 可以在 Sketch 或 Ai 中制作。
一般与前端人员对接有在线图标库对接与本地文件对接两种。
在线矢量图标库有很多，国内比较流行的是阿里巴巴矢量图标库-iconfont⁴；本地对接就是直接将文件发送给前端人员，他们会自行进行项目文件的管理与调用。
如果 .svg 切图输出后，与设计稿中样式不符，请注意排查以下三点：
svg 不支持渐变颜色填充；
为了提升用户体验和产品趣味性，动效微交互的标签栏图标也越来越流行了。
动效在前端落地的方法其实有很多：
所以综上所述，落地标签栏动态图标，目前最高效可行的还是 Lottie 动画。
Lottie 是 Airbnb 开源的一个跨平台动画库。表现层面它是一张图片，但实现的方式是通过代码，所以它是矢量的。很花式的动画也可以把文件大小做到非常小。
UI 与前端对接是通过交付一个 json 代码文件。
如果这是你第一次接触 Lottie，再好不过的体验方法就是玩一玩阿里提供的一站式动画平台：犸良动画 5。它最底层采用的技术就是 Lottie，只是被阿里二次封装了许多预设的动画效果，你可以自定义其中的元素与参数，然后试着导出你的第一个 json 文件。
接下来是简单粗暴的 UI 与前端对接实现 Lottie 动画落地的全步骤参考。在此之前，想要全方位了解 Lottie 的相关信息，请参阅 Lottie 官方说明文档 6。
步骤一：安装 Ae 和 bodymovin
制作 Lottie 动画，首先你必需两个工具：Ae 和 bodymovin 插件。
Ae 最低版本要求为 Ae CC2014。又因为据很多设计师反馈，目前 bodymovin 在汉化后的 Ae 中使用会出现诸多问题，所以后面的教程都是基于 Ae 英文版。如果你汉化了Ae，最好在需要制作 Lottie 动画时取消汉化。
然后获取 bodymovin7。bodymovin 插件更新至今，版本已非常多，并不一定最新版就适用于你当前的项目，因为前端使用的 bodymovin 解析包可能无法解析你用最新版 bodymovin 插件输出的 json 文件。
一旦确定使用 Lottie，前端人员会在 GitHub 查询 Lottie 相关文档的，所以 UI 只需要配合前端确定一下合适的 bodymovin 插件版本就可以了。最终走查时，一定要确保当前 bodymovin 输出的动画在项目所需要运行的所有环境中可运行，才说明 UI 使用的 bodymovin 插件和前端使用的 bodymovin 解析包版本是兼容的。
获取了 bodymovin 后，将 bodymovin 拖入到 ZXP Installer8 中，ZXP Installer 会自动识别插件安装到 Ae。
安装完成后，就可以在 AE 的「窗口-扩展」中看到 bodymovin 啦。
步骤二：将 Sketch 或 Ai 中的文件导入 Ae
如果你技术娴熟，当然也可以直接在 Ae 中绘制图案动画。但如果你还是习惯先在其他软件中绘制好基础图案，再到 Ae 中制作动画，那你需要了解如何将图案导入 Ae。
Ai 和 Ae 都是 Adobe 旗下的工具，所以 Ae 是可以完美解析 .ai 文件的，如果你是使用 Ai 作图，可直接存储为 .ai 文件，再在 Ae 中打开。
如果你使用的是 Sketch，可以先导出为 .svg，再用 Ai 打开该 .svg 文件，转换存储格式为 .ai，最后到 Ae 中打开。
当然，Sketch 还有直接和 Ae 对接的插件，AEUX（前身 Sketch2AE）9。需要在 Sketch 和 Ae 中同时安装 AEUX 插件，Sketch 负责传送，Ae 负责接收。具体的使用方法可以在官网教程中查看，我就不再赘述了。
步骤三：制作动效并输出
和静态图标同理，为了保证落地时图标视觉大小一致，一组动效图标输出的文件尺寸应该是相同的。所以在你制作动画之前需要确定合成文件的尺寸。Lottie 官方建议：因为 Lottie 输出的是矢量动画，所以建议以 @1x 输出动效，前端人员在任何屏幕上放大并不会失真。
在制作之前请务必详细阅读 Lottie 所支持的 Ae 参数文档10，以免辛苦做出的动效，前端无法解析。特别提醒：原生环境中 bodymovin 是不支持解析 Ae 表达式的。
完成制作动效后，就可以通过 bodymovin 导出动效了。
步骤四：预览与交付
导出完成后在你的目的地文件夹中将存在一个 .json 文档，如果你的动效中还使用了位图，系统还会自动生成一个 images 文件夹。这些都是你需要交付给与你对接的前端开发人员的文件。
.json 文件中记录的动效代码 UI 不需要过多关心，但是其中两个信息你是一定要了解的。它们是你与前端对接沟通和获悉文件信息的一些关键参数。
UI 自检动效或其他相关人员需要预览动效的时候，可以用 LottieFiles11，拖入 .json 文件即可预览。iOS 和 Android 还可以下载 LottieFiles APP，扫描预览页中的二维码即可在移动端预览。
整个制作图标的流程我已经全部整理出来了。首先要注意图标的规范，然后制作位图、矢量、动效图标时的注意点，我几乎把我在真实项目中踩过的坑都告诉大家了。剩下的创造性的环节就交给你了。
标签栏图标规范
静态图标
1. 位图图标
2. 矢量图
动态图标
1. Lottie的背景
2. Lottie如何上手
总结
文章来源：优设网 作者：UCD耍家
蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 、平面设计服务
图标在设计中是一个最为基础的设计元素之一，对这部分知识花再多时间研究练习都是值得的，哪怕是工作多年的设计老手，也很难说自己把图标设计，做到出类拔萃了。所以不论是温故知新又或是学习精进，花上几分钟看看这篇超干的文章，定有收获。
本文会着重介绍图标基础规则，深入探讨图标的视觉重量和对齐问题。
一个界面中的图标通常可以近似地看成是一些基本形的组合：横向矩形、纵向矩形、倾斜矩形、圆形、三角形、正方形。模糊地看它们有相同的视觉重量，因为它们或多或少的变成了相同的斑点。
△ 图标的基本轮廓
根据图标的形状，将其嵌入到对应栅格中。例如，方形图标比三角形或细长的图标更紧凑些。
△ 图标在栅格中
△ 栅格中的基本图形
图标越紧凑，需要的空间就越少。图标锐利的边缘或小细节越多，它在画板上占据的空间就越大。
△ 图标示例，栅格中可以放不同异形的图标
△ 栅格中放更多细节的基本图形：方形，圆形，三角形
当心成为栅格的奴隶，栅格是用来辅助你而不是去限制你的。如果一个图标因为一些突出的元素而在视觉上有更好的效果，那就让它们突出。
为了使图标在非视网膜屏幕上清晰可见，请坚持使用像素网格并在线性图标上优先使用2px粗细的描边。2px居中对齐的描边通常会提供足够的粗细和清晰的轮廓
△ 2像素线型图标示例
△ 2像素线型图标示例
如果图标选择了1px的描边，则应该使用内描边或外描边而不是居中的。
△ 1像素外描边图标示例
△ 1像素外描边图标示例
1px的居中描边会使图标在放大到100%的情况下变的模糊，但如果放的更大会显的清晰。
△ 1像素居中描边线型图标示例
△ 1像素居中描边线型图标示例
根据像素网格去设置斜线的起点和终点。当斜线的角度为45°，30°和60°时会比不规则角度（像13.7°或81°）更清晰。如今仍有数百万人在使用低分辨率的屏幕设备，这就是为什么图标的清晰度仍然很重要的原因。
△ 矢量和位图图标示例
最好从复杂的图标开始去创建一个图标集。它将定义详细程度，并且对设计具有相同视觉重量的图标们有帮助。
△ 不同细节程度的图标示例
当图标的细节程度不一样时，细节越多的图标越能吸引用户的注意力，并且看起来视觉重量越大。
△ 细节不一致
在整个图标集中，图标内部相邻元素的间距不应太小或不一致。定义最小间距并在各处以同样的方式使用，以避免轮廓「粘连」。
△ 不一致的间隙
△ 间隙统一
对于线型图标，最好使最小间距和线条的粗细相等。线条要么清晰地分开，要么精确地连在一起，永远不要含糊不清。
△ 不一致的间隙
△ 间隙统一
在图标集中，可能会有些重复的细节。删掉它们，让用户的注意力集中在它们不同的地方，就像是数学里分数要约分（化简分数）一样。你看到的视觉干扰越少，你对它的理解就越清晰。
如果目标用户已经明白他或她使用的是什么，那就没必要一遍遍的重复。例如：避免使用基于信封的图标不会让人觉得这不是一个邮箱类app。（有点绕口，意思是：不用添加相关系列类的辅助图标也会让人知道这是一个邮箱类app）
这条规则也适用于图标周围的装饰（框架，背景）。如果这些对图标的识别性没帮助，则它们就会对图标识别产生阻碍。
不要将不同样式，不同角度地元素混合在同一个图标集中。一致的风格会对用户识别图标有所帮助并让用户明白这些图标有同等的重要性和状态。
△ 同一纬度的图标
△ 不同维度的图标
同样的原理也适用于线型图标和面型图标。如果你把它们混在一起，人们可能会认为它们有不同的重要性或状态。当然，除非你是故意的。例如，面型图标用于关键的指令，线型图标用于其他的指令。
△ 一组一致性图标
△ 一组不一致的图标
在界面中拥有两种不同的图标是很好的。线型图标用作不可点击或正常状态，面型图标用于点击状态。
8px网格和12列布局常用于许多界面，与基于十进制的尺寸相比更加灵活。12可以被2、3、4、6整除。因此24或48px的图标已成为了标准。如果需要更大的尺寸，可以对他们进行缩放。
完美主义不是我们的目标：没有人需要为了像素完美而去追求完美的线条。但是，这对于产品中最终呈现正确而不失真的图标是很重要的。记住图形中锚点数量达到最少并且相邻元素之间不要有间隙。
△ 矢量图标的调整与优化
还有那些烦人的「8.999px」或「100.001px」呢？如果锚点的位置很准确，图标的边缘看起来就会很清晰。此外，在合并形状时，也不会有出现多余锚点和间隙的风险。
△ 矢量图标的调整与优化
许多设计软件（例如sketch）生成的svg文件都带有不必要的文件——多余的编组，颜色图层和剪切蒙版。让我们看看，在sketch中，一切看起来似乎都不错。
△ sketch中的图标示例
在其它软件中打开这个SVG文件（例如Ai中），你会看到很多空图层，不必要的编组，有时还会有剪切蒙版。当前端开发人员将图标转换成图标字体或在网页上使用SVG文件的时候，这些都可能导致出现问题。
△ Ai中的图标示例
你可以删除这些垃圾文件然后保存。
你可以看到sketch生成的SVG文件（picture.svg）和Illustrator编辑后生成的SVG文件（picture_new.svg）在文件查看器中预览的效果不一样。顺便说下，也可以在代码编辑器中删除这些垃圾图层。如果你知道SVG代码的样子，可以尝试下直接删除不必要的数据字符串。
当然，这些建议并不是不可打破的规则。如果你知道自己在做什么，请随时跳过它们。在我看来至少在两种情况下严肃的几何图标不是最好的选择。
空状态。如果你正在设计一个页面的空状态（缺省页）如「没有任务了」或「所有邮件已读」，那么最好是用情感化的图标来表现或者只用文字去说明。情感化图标会使用户感到快乐，而没有情感的几何图标不会增加任何交互价值。
吉祥物和插图。如果屏幕上你的界面中有吉祥物或者插图，这种图案应该是感性的。我不知道设计师是如何通过有限的形状选择和坚持使用网格去刻画一个角色的。
还有一件事。在一些特殊情况下最好问问自己是否真的需要图标。这是解决问题的最好方式吗？写点有意义的文字呢？要注意使用时的平衡，否则，可爱、时髦的图标将会让人感到沮丧，所有的努力都将是徒劳的。
文章来源：优设网 作者：彩云译设计
蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 、平面设计服务
最近发现一些能提高图标细节和高级感的小技巧，今天与大家分享下这几种风格的设计思路，以及需要注意的点。
分享大纲：
顾名思义图标之间有纵深前后关系，通过这样去处理，可以让图标层次丰富，增加设计细节，打破枯燥无味的单色扁平图标。
通常大部分人设计一个图标就直接将图形画出来后，这样就完事了，没有继续深入下去。这样图标看着枯燥乏味，普通了一些。
如上图，将图标在接口处进行细节弱透明度处理，那么效果就完全不一样了。
这里需要注意，一般都是在图标的接口处进行层叠处理，从A到B的一个线性渐变。
下面来看看案例：
△ Atlassian的品牌图标系统
使用建议：运用在面形图标效果会更好些，或者线条粗一些的图标，一般运用在TabBar上面居多。
这种比较好用，将图标进行抽象放大化处理，变成一种图形方式。一般运用在卡片设计上面居多。
左侧卡片上面，图标直接使用描边效果。卡片里面虽然加了一些底纹图形，但是整体效果略显平庸了一些 。
重新将图标进行图形化处理，既能够表达当前含义，同时设计上细节和品质感有所提升。
其他思路延展示例：
当然还有一种类似的思路，可以将图标进行放大化，并进行色彩分割处理为背景，前景放图标和文案等。
如图，我将前面两个思路综合运用，图形化背景和层叠图标。这里的图形希望大家不要乱用，尽量使用图标的图形来演变。
图标通过弱渐变透明处理，其思路有点类似第一个。但是这个方法图标整体带透明度的范围更大。
先来直接看个案例：
这种图标给人比较新颖的时尚感，层次也丰富。
如何处理这种图标？
非常重要的一点，需要注意不识别度问题。如左侧图，图标和背景之间几乎融为一体，看不清主体元素。右侧处理刚好，能够识别出图标含义。
处理时候一定要注意透明度的关系，当然也与卡片背景色有关系。
关于图标设计三个小技巧，可多看几遍，思路比较简单直接。当然最重要的是灵活运用，也可以将三个思路都融合起来去设计图标。
本文只是抛砖引玉，这些图标处理的技法，并不是能适用所有场景。大家还是需要根据自己产品特征，找到合适的突破点去设计。
文章来源：优设网 作者：功夫UX
蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 、平面设计服务
图标是 UI 设计中最基础也是很重要的部分，辅助人们更好的理解功能内容。随着扁平化设计风格的普及，图标的风格越来越简约，看似简单的图形，实际要准确的表达含义，也是需要注意一些方法的。以下是图标设计技巧的分享内容：
设计图标是一个艺术创作的过程，里面也有很多需要被关注而不可忽视技巧。要知道如何设计好图标，是对于 UI 设计师来说是不可或缺的重要技能。
在我设计图标的时候，我个人认为有以下7个规则：
一个图标一个非写实的表现。不需要担心图标不够真实，消除不必要的细节，用基本的形状只保留最基础的部分，让这个图标更容易被理解。
有时候图标会因为有更多细节而传达了更复杂的意思，这反而是样式问题！
在整个图标系统中，你的图标要保持同一种样式来确保图标完美协调。比如同样的形状，填充，描边粗细，尺寸等。要制定好可以被复用的栅格，规范和样式。
如果可以的话，尽可能重新设计这些图标，而不要混入其他不同风格的图标来使用。
设计「完美像素」的图标，特别是在图标非常小的时候。这样图标的描边就可以保持锐利，不会有模糊。注意半像素的情况出现，尽量避免小数点参数。
这也可以帮你保持图标的辨识度，在你等比缩放他们的时候保持清晰。
确保你的图标的所有形状有足够的空间。笔画和空间过于狭小会使图标更难被理解。
最少给2px的负空间
确保你的图标看起来是正确的，适当的调整元素的对齐来达到视觉上的平衡。
不要只关注参数，如果有需要就用上你的眼睛来衡量，轻微移动这些元素。
所有图标保持同样的尺寸，在图标周围定义一个可调整的内边距范围，尽量让元素设计在这个范围内。不要挤满所有元素。
当图标需要额外控件时可以超出这个内边距范围。
在设计阶段，你的图标可能看起来是完美的，但还是需要将图标放到实际的界面环境中，测试他们是不是完美，有没有可以调整的细节问题。
确保每个新增的图标和其他图标显示一致。
你在设计图标过程中，有用到以上的这些技巧吗？可以在评论区告诉我，你是怎么怎么设计图标的。
文章来源：优设网 作者：布莱恩臣
蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 、平面设计服务
今天还是一篇非常干货的原创文章。
内容分为两点：
图标的基础特征
动手设计之前，咱们先对完整的图标集进行分析。
弄明白在画整体的系统图标集合时，各个图标得具备哪些特征，有哪些切入点，可以作为我们在实际绘制时候的依据。
先来看几组 iconfont 的案例，看不太清的同学可以戳图片放大。
围绕上面这些案例，咱们可以归纳出图标的几点设计原则。比如：
1. 设计图标需要考虑延续性，图标之间互相牵连影响
图标几乎不会以单个的形式出现，大多数都是以组归类。符号整体性与统一性，都是依靠单个 icon 的共性特征建立起来的。
比如 iconfont 中的这组icon，图标圆形的外轮廓，就保持了一致。其次用户头像的代表符号，也很好保持了延续性。
正是这种小特征，共同组成了图标库的整体特征。
2. 设计手法趋同、图形内容差异
第二点好理解，设计风格、手法要素需要统一，但是内容传达的差异必须要拉开，避免图形趋同导致功能混淆。
比如下面两个案例，由于过于相近，导致用户很难理解图标含义，是天气，还是设置按钮，这种情况我们在设计时需要极力避免。
总结来说，就是图标的共性往往体现在设计手法上，比如颜色、形状粗细、细节的一致性，这些都是设计风格的统一。
而图标的特性，往往体现在形状内容差异，形状会决定图标的信息传递含义。所以共性要趋同，特性要拉开，这个是设计图标集的基本原则。
3. 功能大于形式，图形能理解的情况下样式越简洁越好
不知道大家是否关注，曾经在设计圈风靡一时的MEB图标风格，产品圈却非常冷门，几乎没有产品在继续用这种风格作为功能性质图标。
△ 该作品来自于网络图片，仅作交流使用
因为虽然图标增加了小装饰后，显得有趣精致，但其实也增加了图标的识别难度以及识别效率，反而背离了图标的设计初衷。
所以对于系统功能图标而言，必要的简洁性，高效的识别率，才是关键。
图标的设计约束性
聊完了设计主张及基本的特征。接下来咱们开始剖析图标的设计细节，包括分析制定图标的系统设计规范，应该从哪些方面入手。
规范的第一点，就是图标的基础形状比例。这个比例，主要是约束长与宽，共包含了四个关系，分别为「正方形 : 横矩形 ：竖矩形 ：圆形」
这四个关系的约束，会让图标集里的所有图标大小，看起来是一致的、统一的。横矩形、竖矩形这两个比例，会决定整套图标的饱满程度，横竖比例越一致，图标整体越饱满。
这点大家可以自己斟酌，如果是泛娱乐型的产品，icon可以更饱满一些。如果是偏工具化产品，那么还是可以优先保障图标的识别度，饱满程度倒是其次。
圆润饱满型：
刚正工具型：
定了比例后，接下里就是对图标的细节刻画。对于线性图标而言，最重要的细节就是线条粗细；对于面性图标而言，最重要的就是正负形之间的间距。
所以这些核心元素，在图标的核心线条、核心区域部分，间距样式都应当保持统一。
通常在移动端@2x内，主流icon的粗细为3px，而4px大多数都是为功能性导航icon，细一点的图标通常看起来会更精致一些。
当然也有部分产品使用的是2px，比如新版的YouTube，其次还有些较为复杂的icon，单根粗细的线段不一定能满足其需求，所以还需要制定一条副线的粗细。
细节可以根据产品的调性来定，统一即可。
大比例跟基本元素确定后，也可以制定一些图标的个性化元素规范，比如图标的圆角大小、角度位置，等一些特殊的样式。
像这些个性化的规范，颗粒度可以Case By Case来定义，圆润还是方正，可以根据产品的视觉风格来定义就好。
这些规范样式定好，就可以充分的让图标集内的图标，从设计上是保持一致的，且具有特色感。
上面讲了关于图标的分析及规范。为了方便大家掌握，接下来咱们就来讲讲，具体动手做，流程是什么样的。这里我给个我的步骤作为参考：
第一步：绘制好图标基本网格
第一步，当然是确定好图标icon的大小，以及上面我提到的基本尺寸比例，四个关系「正方形 : 横矩形 ：竖矩形 ：圆形」的约束，构建好基本骨骼。
我这里以图标容器大小为 56×56，预留8px安全间距，图标最大大小为 48×48。
由于视差关系，圆形在图标里面的尺寸是最大的，所以圆形的大小为48×48。因为我想图标饱满一些，所以正方形的大小我两边各减去2，为42×42。
然后再绘制出横矩形（48×36）与竖矩形（36×48），各线段之间的间距保持一致。
然后各个形状居中对齐，这样四个关系「正方形 : 横矩形 ：竖矩形 ：圆形」定好后，基本的容器就制定好啦。
第二步：设定图标基本规范
接着制定好图标的基本规范，为了方便大家看得清，我这里设定图标的线条粗细为3px，圆角为6px，干净简洁一些，让它看起来更饱满。
角度、断点啥的，我这里就不定义了，因为只是示例给大家看，讲一下流程，所以尽可能简单一些。大家在做练习的时候，也可以尝试自己去定义一下。
第三步：绘制图标
好了后就可以开始绘制图标啦。我这里分别绘制十五个，作为示例
然后就是使用路径工具，根据创意去绘制完善图标了。绘制的过程中，也可以不断调整，让图标看起来更协调，更饱满，更容易识别。
花了十五分钟左右，简单的十五个图标草稿就画好了，接下来咱们开始调整细节。
第四步：整体性调整
所有的图标绘制好了后，咱们就可以整体性的开始打磨细节，把图标形状的一些折角处、大小样式调整一致，让图标的节奏更清晰，整体样式更统一。
这样一组精致的系统icon就绘制好啦。
接着咱们也可以加点特色风格进行尝试，比如填充一个颜色。
当然细看的话，图标部分细节还是有点糙，其实还可以再调调，但这个主要做示例用，大家自己在做练习的时候，可别像我一样偷懒嗷
上面讲了很多方法经验，文末给大家来点实际的。
我珍藏了很多较为不错的大厂图标集合库，日常在画图标没灵感的时候，就会打开看看这些，参考一下。
文件都是矢量格式的，编辑方便，还很全面。今天拿出来送大家白嫖了
文章来源：优设网 作者：UX小学
蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 、平面设计服务
最近遇到一个同学，说做了很多稿图标的方案最终还是没有确定下来，但眼看着产品马上就要上线了，该怎么办。经过一轮沟通，发现他陷入几个新手设计师在画图标比较容易犯的问题：
从以上这几个问题，我们进行深入思考，会发现其实这些只是表面上的问题，实际上是在说什么呢？
基于以上这个案例，分享下我在日常设计中常用的一些方法，希望可以帮助遇到相同问题的小伙伴们进行一些答疑，从而帮助你们打破壁垒，高效成长。
下面发改分成 3 个部分来进行阐述：思考维度的锻炼；图形的设计方法；系统化方案呈现
当我们要设计一个图标的时候最容易入手的就是图标的表意，从表意延伸到图形的设计，然后再加以不同的设计手法（线、面、线面等等）。
1. 图标的表意
图标的表意方式，大概可以拆分为以下几种：具有普识性的图标、可进行表意延伸的图标、通过组合的图标、抽象的需要关联的图标。
2. 普识型图标
即我们在现实生活中常见且具有常识性性的图标，例如：删除、添加、放大、搜索、笔记本、手机、眼睛、礼物等等。这类的图标重点在于形体的打磨上需要多花一些时间，从不同的角度进行尝试，比如以删除为例子，同样的造型但可以有不同的设计表现。
3. 表意延伸的图标
即一个事物可以被延伸为一个或者多个图形表现的图标，例如：点赞、浏览、设置、收藏、评论、事件等等。例如点赞-延伸为你很棒用大拇指来表达，游戏延伸为游戏手柄、设置-延伸为机械操作用齿轮来表达，评论延伸为对话使用对话框来表达，浏览-延伸为用眼睛的图标表达。
除此之外延伸表意的图标可以有多种设计方式，例如以事件为案例。
4. 组合型图标
主要是指该类图标的表意需要通过 2 个以上的图形进行组合才能更加准确进行表现，例如：群、群聊、好友、添加联系人、情侣、转账、红包。
5. 创造类图标
特指认识中没有，因为产品需要被二次创造出来的图标，一般在一些新生业务中会常出现，这类图标初期往往需要伴随文字一同出现。例如：微信的朋友圈、视频号、小程序、手机系统的 Wi-Fi、蓝牙等类型等图标。
常规的图标表现方法（线形、线面、面形、插图、叠色等等）我们基本都了解，但作为设计师更应该知道潮流趋势，清楚现在流行什么类型的设计，这样才能让你作出更加出彩的设计。
这里分享几种目前最流行的图标设计类型：
1. 磨砂质感图标
磨砂质感图标作为 2020 年底最流行的图标，已经在不少 APP 中看得了相关的设计，从设计方法上并不难，重点还是在于是否有需要和应用场景。
2. 插图+磨砂质感
图标使用小插图的方式进行绘制，然后再结合高斯模糊的视觉表现手法，整体让图标更具有层次感和通透感。
3. 3D 质感图标
3D 作为这 2 年最流行的设计趋势，自然也牵动着设计师的心。但 3D 的打磨相对会比较耗费时间，不过仍然是值得一试的设计方式之一，目前在 APP 的设计中比较少见到应用，或许会成为 2021 的趋势之一。
4. 3D 磨砂质感图标
基于 3D 与毛玻璃图标的结合，整体的表现结合了这 2 种风格的特点，既保留了毛玻璃图标的通透，同时也具有 3D 的空间感。
5. 流光溢彩的图标
算是属于渐变类型的一种，但颜色和细节的跨度相比常规的渐变图标更加丰富，整体让人感觉具有流光的效果，更加具有未来感。不过从目前来说，更适合作为独立的应用 APP 设计，作为常规的图标设计需要一定的接受度。
想要了解设计的方法之前，我们得了解有哪些类型的图标，具体大家可以查看我之前撰写过的文章，里面有详细的分析了图标的设计类型。除此之外，这里还可以分享下我日常中设计图标使用的方法。
这个专题也有超详细的分类和教程 → https://www.uisdc.com/zt/icon-drawing-guide
1. 表意+基础形
基础形体使用普适性较高的图标造型，在图标的亮点或者点缀处通过表意关联进行创意设计，从而让图标获得新的感受，但又具有较高的识别性。案例：例如我们以日历图标为案例，可以比较直观的使用日历的普识图形，然后通过日期的方式来进行强调赋予图标生命力，然后再叠加上颜色和质感，并且增加一点小趣味的折角设计。
2. 关联延展
基于实际场景的认识来进行图形关联延展，并且进行一定的美感升级及图形的优化，延展出最终的图标设计，这种方法可以大大提高大家对于图标的识别度。案例：设计一个快速聊天表意的图标，聊天我们常规使用气泡，快速我们可以关联为闪电，然后把气泡和闪电进行结合。
3. 组合升级创意
利用一些正负形的创意方法，使用 A、B 图形的进行有机融合或剪切，使其获得新的图标造型，让整体的图标感受更具有创意点。案例：例如我们尝试画一个具有宇宙感受的游戏图标，可以通过手柄和星球的有机结合让整体的图标带有游戏和星球的意思，整体提升了表达的创意。
方案的呈现属于设计的一部分，虽然不能起到决定性的作用，但好的呈现效果往往可以帮助我们得到更好的印象分，这里分享一下我在设计过程中尝试的一些方法。方案的大小或者输出的类型也决定着我们呈现方案的类型，下面根据不同的类型分享不同的呈现案例。
1. 纵横对比法
适用于需要大量尝试的时候，以穷举输出为典型案例，我们可以用最基础的图形为中心点，结合图形的表意和图形风格进行纵横的发散性扩展，例如横向为表意、纵向为图形风格，中间部分属于交叉部分。
案例模版
2. 单个图标创意思考
对于一些标志类或重要的图标，我们需要阐述我们的设计想法或者来源，这种呈现的方式就可以很直观且简洁的表现我们的思考。
案例模版
3. 整套输出
对于一整套的图标，我们需要在案例上呈现图形的设计规则，包括但不限于有：圆角、角度、组合规范、斜度等等。除了呈现图形之外，请补充上颜色的应用规则、颜色的表意等等。
案例模版
图标设计虽然是一个小内容但却很重要，反映着着整个页面的精致度，在 UI 界面来说是除界面排版之外最重要的一环，因此是很值得我们去研究的设计之一，建议在日常工作中多练习多看。
文章来源：优设网 作者：ID设计站
蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 、平面设计服务
蓝蓝设计的小编 http://www.lanlanwork.com