编者按：文高达一万字，从图标的源、定义到基础的设计方法总结无一不包，还有大量的案例帮你理布尔运算，是新设计师学习图标设计的必备干货！
一、图标的定义
一说到图标，我想您一定会觉得非熟悉。图标，称为 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，需要让用户一眼看到它就能够与脑中的产品相关联。所以设计一个优的产品图标对任何产品来说是非常重要的。
1. 风格
产品图标有不同的风，风有能很拟物，也有能很扁平；有能很抽象，也能很具象。通不同的设计风以更加标新立异，从而被用户住。让用户住我们的图标是一件非常重要的儿，要道，每个手机像是一把瑞士军刀，它有无数个功能，而我们的产品只是万种功能中的一个。用户不能住手机里所有的 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!的产品图标
2. 图标的网格和参考线
果我们想设计一个小图标，么我们以把画放大到400％来设计。同时以使用网和参考来为我们设计的辅助。网在很软件里有，比在 Illustrator 中点击视图 > 网，即开启网。参考模板则需要下载三方设计的模板，比 Material Design 的参考模板就有正方形、圆形、圆形和长方形结合等不同形式。果对齐模板中的形状，即得到面积相等的长方形、正方形、圆形。对我们构建视上面积相等的图标很有益处。
△ 网和参考
△ 不同形状的网局
△ 在网的辅助下以设计出大小均衡的图标
3. 尺寸
苹启动图标尺寸
苹需要很多尺寸图标用在不场景上，比如说在网页端打开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图标存即。
△ 安卓图标模板
4. 设计流程
设计产品图标前，首先我们需要找一和产品气质相符的图情绪板。通情绪板我们以感受到产品的，我们从中提取一形状和彩为我们产品图标的主要造型。里我举我的产品每名画的例子，每名画是一个美术方面的APP，所以我找一和美术相关的图。
△ 关美术的情绪板
下面我始 AI 设产品图标了。我建立了一1024x1024px的画布，然后根据卢浮宫的金字建筑设了一枚抽象的产品图标，它内的符：领家走的殿堂。同时我也增加了一些自己对的含义，如源于活高于活。这些都写了设明中。
△ Illustrator中设产品图标
然后给这枚图标加入了蒙德安的配色，增加产品的艺术，并最终完成产品图标的计。这个图标也可以作为该产品的企业形象（VIS），将来产品周边都可以使用这个图形。
△ 最终定稿的图标
由于产会首先上线到苹果设备上，我面把 AI 绘制的产图标全复制，然后打开图标模中的智对象（双击图标模中智对象图层的缩略图），粘贴过来。粘贴的时候系统会示择粘贴过来的方式，这里我们择：智对象。然后保存并闭智对象，这时到模PSD 中，就看到了这个效果。
△ 替换了模中智对象的效果
接下来隐藏背景图层，然后按下键盘上 ctrl+Shift+Alt+S，调出存储为Web所用模，选择保存到桌上，格选择仅图片。关闭 PS，打开桌上文件夹，看到图标被我们工地切好了。
△ 品图标切图文件
三、系统图标
第二种图标被称为系统图标。系统图标指的是担负着一定功和含义的图形，一般来说需要像字一般地被人迅速解，表达方式上适合特别复杂。如微信个系统图标：「微信」、「通讯录」、「发现」、「我」就使了较简洁的线性格。
然系统图标也不定要做常趣，比如我们常用58城APP 有大量系统图标，在保证识性前提下使用了多颜色和不造型，显常活泼。所以系统图标样可以做有趣和多样，前提是保证图标可识性。
1. 风格
填充图标（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中的动图标
四、图标的设计方法
1. 矢量图形（Vetctor）
我们使用 Photoshop 具的时候会感叹，画笔比钢笔好用，橡皮比布尔运算好用。那么我们画图标的时候能不能使用画笔这样的具绘制图标呢？ Photoshop 里使用画笔具橡皮具、涂抹具、选区具的填充、油漆桶具制作的图形，以及从网络复制过的jpg图片文件，这些都素图形。它们算机记录每一点的颜色呈图的。这也什么我们把一张照片得特别它就虚了的原因。我们通过 Photoshop 中的钢笔具、布尔运算、塞尔曲线、形状图层制作的图形，以及 Illustrator 复制过的图形、Sktech绘制的图形，都矢图形。它们算机记录一锚点到另一锚点的方向、置、色彩呈图的。所以素图形变化多端、颜色变换丰富、细节多；矢图形则文件较小，并且具随意缩小都不虚的能力。因每锚点之间的方向、置都相对的，缩小不受影响，素图形记录每点的色彩，比如一张2000px x 2000px的图片，缩小到1000px x 1000px就会损失一千素信息。我们绘制图标比较合用矢图形设，因我们可能需随时调整图标的小，并且不同分辨率的配中也加方便。
2. 布尔运算（Boolean）
布尔运算听很可怕，其实非常简单，布尔运算数字逻辑推演法，主数字逻辑的联合、相交、相减。我们使用的平面软件中引用了这种逻辑运算方法使基本图形通过联合、相交、相减数学算变新的造型。比如两圆形相减可以得到一月亮的造型，这就布尔运算了。那么什么叫布尔运算呢？布尔指的乔治·布尔（George Boole），一19世重的数学家，了念布尔符逻辑运算中的杰出贡献，所以我们将这种运算称布尔运算。布尔运算 Photoshop、Illustrator、Sketch、Adobe XD、After Effects我们熟悉的软件中都，并且操作基本一致。
布尔运算的核心就是个形状的关系：即Union（并集）、Intersection（交集）和Subtraction（差集，包括A-B和B-A种）。这些关系有点像初中学过的数学，应该比较好理解。但是多软件中对于布尔运算的关系翻译不同，所以可能大家会有些不适应。比如在 Photoshop 中布尔运算被翻译成：并形状、减去顶层形状、形状域相交、排除重叠形状。而在 Adobe XD 中则翻译成：添加、减去、交叉、排除重叠。虽然名字不同，但是功能是相同的，所以大家在学习新的软件不妨先找一下布尔运算。
△ 图为布尔运算不同运算模式
3. 贝塞尔曲线（Bézier curve）
贝塞尔曲线是用于二维图形绘制的数学曲线。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°即可。
△ 放大镜线性图标
时钟线性图标
时钟线性图标的画法：绘制正圆。绘制一个矩形，对齐圆形中心。增锚点工具在矩形左和边上增两个锚点。直接择工具框没的线条，删除即可。
△ 时钟线性图标
点线性图标
点线性图标的画法：绘制两个矩形，并直接择工具择重合的个锚点，在属性面里使对齐工具它们全对齐。将大的矩形锚点向左移。绘制一个矩形并和大的矩形左对齐。直接择工具中直角，拖圆角小圆点它们变成圆角，成。
△ 点线性图标
4. 线性图标的处理
如果您掌握了上填充态图标的设计方法，相信他图标的设计只要此及彼的思考，就可成。如线性图标，在绘制线性图标时，我们首先会建立一个半透明的矩形来固定图标应该绘制的范围，如「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 中，图标无需进行扩展，并以时整描边粗细等属。
5. 应用
标签栏图标
在苹和安卓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计都需要在做大量的图标练习。在不同的图标风格中，学会使用各式各的武器。
注作者的微信公众号：「西见」
浙公网安备33011002017549号