图标设计：从象形文字到现代应用的视觉语言之旅

图标的定义

一说到图标，我想您一定会感觉十分熟悉。图标，亦称为icon或picto，是指有明晰涵义的图形视觉语言。这么当我们一提起图标设计，您的脑中会想起那个图标来呢？有可能您想起的是陌陌APP由两个蓝色气泡组成的启动图标；或则是我们每天使用的APP中的这些返回、关闭等系统图标；也可能是超市导视里的卫生间图标等。没错，图标的方式有好多种，它可以应用在好多场景中，而且表现形式十分丰富：有线的、有面的、也有拟物的等等。图标的历史可以溯源到象形文字（Pictogram），我们的先祖在发明文字之前就使用图标记录三天的生活了。听着是不是不可思议呢？从亘古时代的象形文字开始，我们的先祖就青睐使用这些具象的图形来抒发意思了。在平面设计领域的商标虽然也是一种图标；平面设计里的视觉导视（比如卫生间的图标）也有图标的应用，所以图标在我们的生活中应用十分广泛。

生活中随处可见的图标

在计算机时代，从80年代的施乐公司界面中的单色图标开始，图标就开始出现在屏幕之中了，图标较编程语言更容易被大众理解。到了后来从iMac到iPhone推动的拟物图标更是开启了一个璀璨的图标设计时代。拟物时代兴起也带来了一些麻烦：拟物图标的质感、光影会吸引走用户的注意力，我们称之为“视觉噪声”。于是UI设计师开始探求更新的表现方式来设计界面中的图标。扁平图标发展史上有过好多次尝试，例如谷歌推动的Metro风格中的图标设计和Google推动的扁平设计风格中的长投影风格图标，但因为它们表现方式太过分具象、缺乏情感的传递，并没有获得用户的亲睐。而我们如今界面设计中的图标设计是一种“轻拟物”或“微扁平”的风格：在面积比较小的区域我们使用扁平图标或线形图标；在面积比较大的区域我们会使用加入渐变甚至轻质感的图标。

（关于图标风格的变化，可以参考这个网站：）。

不同的图标设计风格

现在我们界面中的图标堪称十分丰富了，若果依照MaterialDesign对图标的分类，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轴。所以用轻微的渐变表现图片的深度特别流行。我觉得微渐变可能是诸多图标设计风格中最有竞争力的一种。

每日优鲜：每日优鲜在背景上用了好多炫彩的球体，因为促销时段在原有图标上降低了一个双11的小标示，在手机中十分惹眼。

微信：微信图标假如设计成扁平你就会注意到它吗？使用线性图标会促使图标长度感不够，而微渐变可以十分好地解决这个问题。

全民K歌：使用了紫蓝色的渐变来打造一只幼鸟，假如遇见其他使用场景可以使用扁平版本，这样会让产品图标的使用愈发灵活。

Mindnode：这款脑图软件的产品图标使用了三组毗邻色的渐变，同时使用了极其微妙的阴影。

每日优鲜、陌陌、全民K歌、Mindnode的产品图标

q版风格

q版风格的产品图标会让用户更有好感，所以我们可以为产品设计一个乖巧的q版角色。很多决策者会觉得q版是一种低幼的审美，虽然是错误的。q版可以说是一种通吃的风格，例如腾讯就是以一个企鹅作为品牌形象开始拓展自己的版图。而q版本身有不同的风格，例如拟物类的q版、扁平类的q版等，也会给人不同的体味。所以假如我们的产品要使用q版作为产品图标，最好以目标用户群的喜好作为标尺。

开心消消乐：开心消消乐是一个休闲游戏，游戏类APP的产品图标一般是使用拟物风格，这样可以最大地吸引玩家的注意力和兴趣。

映客：映客是直播APP，一般用户年纪不是很大，所以使用了一个很帅气的猫头鹰作为产品图标。

Waze：Waze的产品图标除了甜美并且突出了Waze的地图查找功能。

BOO!：BOO!是一个儿童社交产品，用户比较低幼，所以更适宜使用俏皮的q版作为图标。

开心消消乐、映客、Waze、BOO!的产品图标

图标的网格和参考线

假如我们想设计一个小图标，这么我们可以把画布放大到400％来设计。同时可以使用网格和参考线来作为我们设计的辅助。网格在好多软件里都有，例如在Illustrator中点击视图>网格即可开启网格了。参考线模板则须要下载第三方设计的模板，例如MaterialDesign的参考线模板就有正圆形、圆形、圆形和长圆形结合等不同方式。假如对齐模板中的形状，即可得到面积相等的长圆形、正圆形、圆形。这对我们建立视觉上面积相等的图标很有用处。

网格和参考线

不同形状的网格布局

在网格的辅助下可以设计出大小均衡的图标

规格

苹果启动图标规格

苹果须要好多规格的图标用在不同的场景上，例如说在网页端打开iTunes会使用512px的大图标，而在手机、iPad桌面上的图标大小也不同。不仅规格不同，这种图标的圆角也有不同的数值。为了简化这部份的难度，苹果为开发者提供了模板，有了模板就不用记这么多东西啦。苹果官方HIG下载的这套资源中，有Template-AppIcons-iOS这个文件，这个文件提供了PS、Sketch、XD等不同格式。我比较推荐使用PS的格式。打开这个文件，用我们自己设计的启动图标替换掉任意智能对象里的内容（智能对象都是一个变下来的）。这么打开智能对象就是一个10241024xx10241024px的圆形画布，把我们的产品图标置于这儿，保存这个智能对象再关掉它就可以了。这时，你会发觉所有规格的图标都弄成了我们的图标。之后我们把背景隐藏，切出这种图标即可。假如是AI完成的产品图标可以直接Ctrl+C之后在PS智能对象中Ctrl+V复制过来就行。

Template-AppIcons-iOS

安卓启动图标规格

安卓启动图标同样须要好多规格，主流是须要：10241024xx10241024px、512512xx512512px、144144xx144144px、9696xx9696px、7272xx7272px、4848xx4848px这六种。我们提供给程序员的是直角的圆形，之后程序员通过代码进行切割弄成圆角图标。在这儿我也做了一个智能对象的模板献给您，只要替换其中的智能对象图象，换成您的10241024xx10241024px图标保存即可。

安卓图标模板

设计流程

设计产品图标前，首先我们须要找一些和产品知性相符的图片制做情绪板。通过情绪板我们可以感遭到产品的调性，之后我们从中提取一些形状和色调作为我们产品图标的主要造型。这儿我举我的产品每日名画的事例，每日名画是一个美术方面的APP，所以我找了一些和美术相关的图片。

关于美术的情绪板

下边我开始在AI设计产品图标了。我构建了一个10241024xx10241024px的画布，之后按照卢浮宫前的金字塔建筑设计了一枚具象的产品图标，它内在的符号是：率领你们走入艺术的殿堂。同时我也降低了一些自己对美术的涵义，如艺术来始于生活低于生活等。那些都写在了设计说明中。

在Illustrator中设计产品图标

之后我给这枚图标加入了蒙德里安的配色，降低产品的艺术感，并最终完成产品图标的设计。这个图标也可以作为该产品的企业形象（VIS），将来产品周边都可以使用这个图形。

最终初稿的图标

因为产品会首先上线到苹果设备上，所以我下边把AI勾画的产品图标全选复制，之后打开图标模板中的智能对象（双击图标模板中智能对象视口的缩略图），粘贴过来。粘贴的时侯系统会提示选择粘贴过来的方法，这儿我们选择：智能对象。之后保存并关掉智能对象，这时回到模板PSD中，就听到了这个疗效。

替换了模板中智能对象的疗效

接出来隐藏背景视口，之后按下按键上的ctrl+Shift+Alt+S，调出储存为Web所用模式，选择保存到桌面上，格式选择仅图片。关掉PS，打开桌面上的文件夹，就听到图标被我们工整地切好了。

产品图标的切图文件

系统图标

第二种图标被称为系统图标。系统图标指的是肩负着一定功能和含意的图形，通常来说须要像文字通常地被人迅速理解，所以抒发形式上不适宜非常复杂。例如陌陌顶部四个系统图标：“微信”、“通讯录”、“发现”、“我”就使用了比较简约的线性风格。

其实系统图标也不一定要做的特别无聊，例如我们常用的58同城APP中就有大量的系统图标，在保证辨识性的前提下使用了多彩的颜色和不同的造型，变得十分乖巧。所以系统图标同样可以做得有趣和多样，前提是保证图标的可辨识性。

风格

填充图标（Filledicon）

填充图标是以面为主要表现方式的图标。在陌陌APP顶部的tab栏中，未选中的图标是线性图标，而选中态则是填充图标，而且会弄成较为鲜艳的颜色暗示用户该功能被选中了。填充态图标占用的面积要比线性图标多，所以愈发醒目。实际上，在最新的苹果设计规范中，苹果也建议开发者在APP顶部Tab栏中全部使用填充图标，点击态通过改变填充图标的颜色进行区别。这是由于由于填充图标看起来像可点击的。

图为填充图标

线性图标（Outlinedicon）

线性图标的表现方式是腰线，在系统图标里一般是由统一粗细的腰线组成。这儿可能好多新同学不明白为何要使用统一的粗细，这是由于一般系统图标并非单一出现，而是成组使用。例如陌陌顶部的四个tab图标、网易云音乐底部导航栏的图标等。在一个场景下的几个同等重要的图标，假如腰线粗细不一致，很容易导致它们存在权重上差别的觉得。所以我们在勾画线性图标时，腰线一般还会使用统一的粗细。

图为线性图标

圆角图标（Roundedicon）

无论是线性还是填充的图标，在图标的边角处使用圆角都是圆角图标风格。圆角图标的益处就是让人感觉狠温柔，可以十分舒适地点击它。所以好多产品的图标就会使用圆角图标。

图为圆角图标

尖角图标（Sharpicon）

无论是线性还是填充的图标，在图标的边角处使用尖角都是尖角图标风格。尖角图标的益处是让人觉得到有棱角，视觉上会多注视几秒。而且给人以即将的觉得，所以像交行、办公等APP中都较多地使用尖角图标风格。

图为尖角图标

断线图标（BreakingLines）

假如我们的线性图标变得太呆板，我们可以使用断线这些方法来让它显得可爱。断线图标就是线性图标的一种风格变化，它的特征就是在腰线中出现断口。并且这个断口并不是看上去这么简单，它得遵守几个规则：第一，断线开口只有一个，否则图标会难以辨识；第二，断线开口位置不应该在中心线上；第三，断线开口尽量在转折处；第四，断线不应当太过分繁杂。

地瓜APP的标签栏使用了断线的风格

双调图标（Two-Toneicon）

假如我们把图标简单地分为线性图标和填充图标，是不是太无趣了？例如我们要设计一个iOS平台的APP，它的顶部Tab栏就一定是未选中态是线性的，选中就是填充的吗（或则全部是填充态，仅仅改变颜色）？这也太无趣了吧！所以又出现了双调图标的设计风格。即：双调图标的外型还是线性图标，并且用透明度很高的同类色填充到线性图标内部空间里。这样的图标变得可爱甜美，而且觉得十分透气。

图为双调图标

动态图标（Motion）

动态图标是十分有趣的，假如静态图标不足以让用户感遭到新鲜，那我们不妨给图标降低动效。诸如QQ应用中顶部Tab栏的图标点击其中一个的时侯，其他图标会“偷看”选中态图标的方向。站酷应用“偷看”这个过程更是有一个几微秒的动漫。不仅顶部标签栏之外，好多APP点击能出发导航的“汉堡包图标”，点击时也会有一个从导航图标弄成返回图标的动漫。这都是十分才能调动用户好奇心的。

MaterialDesign中的动态图标

站酷标签栏的动态图标特别甜美

图标的设计方式

矢量图形（Vetctor）

我们在使用Photoshop工具的时侯会感慨，笔触比铅笔好用，橡皮比布尔运算好用。这么我们在作图标的时侯能不能使用笔触这样的工具来勾画图标呢？在Photoshop里使用笔触工具和橡皮工具、涂抹工具、选区工具的填充、油漆桶工具制做的图形，以及从网路上复制过来的jpg图片文件，这种都是象素图形。它们是计算机记录每一个点的颜色来呈现图象的。这也是为何我们把一张相片放的非常大它就虚了的诱因。而我们通过Photoshop中的铅笔工具、布尔运算、贝塞尔曲线、形状蒙版制做的图形，以及Illustrator复制过来的图形、Sktech勾画的图形等，都是矢量图形。它们是计算机记录一个锚点到另一个锚点的方向、位置、色彩来呈现图象的。所以象素图形变化多端、颜色变换丰富、细节更多；矢量图形则文件较小，而且具有随便放大缩小都不虚的能力。由于每位锚点之间的方向、位置都是相对的，放大和缩小不受影响，而象素图形记录每位点的色调，例如一张2000pxx2000px的图片，缩小到1000pxx1000px都会损失一千个象素信息。我们勾画图标比较适宜用矢量图形来设计，由于我们可能须要随时调整图标的大小，而且在不同码率的适配中也愈加便捷。

布尔运算（Boolean）

布尔运算听着很可怕，虽然十分简单，布尔运算是数字逻辑推演法，主要有数字逻辑的联合、相交、相减。在我们使用的平面软件中引用了这些逻辑运算方式来使基本图形通过联合、相交、相减等物理估算弄成新的造型。例如两个方形相加可以得到一个月亮的造型，这就是布尔运算了。那么为何叫布尔运算呢？布尔指的是乔治·布尔（GeorgeBoole），一位19世纪最重要的物理家，为了记念布尔在符号逻辑运算中的杰出贡献，所以我们将这些运算称为布尔运算。布尔运算在Photoshop、Illustrator、Sketch、AdobeXD、AfterEffects等我们熟悉的软件中都有，而且操作基本一致。

布尔运算的核心就是两个形状的关系：即Union（并集）、Intersection（交集）和Subtraction（差集，包括A-B和B-A两种）。这种关系有点像我们中学学过的物理，应当比较好理解。并且好多软件中对于布尔运算的关系翻译不同，所以可能你们会有些不适应。例如在Photoshop中布尔运算被翻译成：合并形状、减去顶楼形状、与形状区域相交、排除重叠形状。而在AdobeXD中则翻译成：添加、减去、交叉、排除重叠。其实名子不同，而且功能是相同的，所以你们在学习新的软件时不妨先找一下布尔运算。

图为布尔运算不同运算模式

贝塞尔曲线（Béziercurve）

贝塞尔曲线是用于二维图形勾画的物理曲线。1962年美国工程师皮埃尔·贝塞尔发表了贝塞尔曲线，它的诞生主要是为了车辆的主体设计勾画图形的。贝塞尔曲线是勾画矢量图形时的重要工具，我们使用铅笔工具画出的所有图形通常来说都是贝塞尔曲线组成的。贝塞尔曲线由锚点和线段组成，点击锚点都会出现两个摇杆，一边是控制后面的腰线迈向，另一边是控制前端的腰线迈向。同时我们也可以通过降低锚点工具和删掉锚点工具进行调整。要想学好平面笔记本绘图软件，贝塞尔曲线是必须修练的一课（一个练习贝塞尔曲线的在线游戏：）。通常来说，二维平面软件都有贝塞尔曲线的痕迹，铅笔工具、增加锚点、删除锚点、转换点工具，这种都是平面软件的标配。而且，贝塞尔曲线和布尔运算堪称是一对儿好同学，在勾画矢量图形时可以使用它们轻松地勾画出确切的造型。

图为贝塞尔曲线勾画方式

这么我们使用哪些软件来勾画图标呢？这儿我建议使用Illustrator。首先，UI设计师使用不同的软件来设计页面，目前主流是Photoshop和Sketch，也有好多设计师选择AdobeXD。而这种软件都是兼容Illustrator的，所以使用它来勾画图标特别有灵活性。可能您对Illustrator并不熟悉，不过没关系，我们在这儿只须要了解它与图标勾画功能相关的功能即可，例如铅笔、布尔运算、属性面板、描边、填充、混合工具等，并不须要学习十分深入。所以你们毋须紧张。

笑脸图标

笑脸图标的设计步骤：1.画出一个正圆。2.接着画一个小圆之后ctrl+F复制平行联通到对面，之后右键编组。接着，同时选中大圆和编组的小圆进行水平居中对齐。3.我们勾画一个矩形，之后通过布尔运算乘以一个圆形得到半方形组成嘴，完成。

笑脸图标

对号图标

对号图标的设计步骤：1.使用圆形工具画出一个长圆形，之后复制后将复制后的长圆形往右上联通相同的距离，之后使用布尔运算剪切，旋转45°后弄成一个对号。2.勾画一个正圆形，使用路径选择工具选中，拖动圆角的圆点拉出圆角得到圆角方形。3.对号和圆角方形进行布尔运算，完成。

对号图标

WIFI图标

WIFI图标的设计步骤：1.勾画多个矩形而且通过布尔运算相加减得出三个圆圈嵌套的靶心造型。2.通过旋转过的45°矩形和之前图形布尔运算得到Wifi图标，完成。

WIFI图标

地理位置图标

地理位置图标的设计步骤：1.选择圆形工具单击画面输入数值，构建一个100px的矩形。之后选择这个矩形复制它，之后等比列缩小它，和之前的大圆进行布尔运算相乘，得到环型。2.勾画50px的圆形，用对齐工具放到环型的左下方。3.旋转45°得到地理图标，完成。

地理位置图标

云彩图标

云彩图标的设计步骤：1.勾画两个大小不同的方形，使用对齐工具进行顶部对齐。2.勾画一个圆形，同样顶部对齐。3.合并形状，完成。

云彩图标

耳朵图标

耳朵图标的设计步骤：1.勾画出一个正圆。2.复制这个正方形，之后按着Shift+方向键下键，并通过布尔运算得到耳朵外轮廓。3.勾画两个方形，通过对齐工具和布尔运算工具得到最终耳朵造型，完成。

耳朵图标

铃铛图标

铃铛图标的设计步骤：1.首先用方形和圆形合并组成主体；2.使用圆形和方形进行布尔运算勾画铃铛顶部和铃铛底部的零件，之后进行合并形状；3.铃铛顶部的半圆使用矩形和圆形布尔运算，完成。

铃铛图标

简易蜗杆图标

简易蜗杆图标的设计步骤：1.通过两个方形进行布尔运算得到环型。2.勾画一个圆形，上下复制在矩形上，之后把它们俩编组和环型使用对齐工具进行水平垂直对齐。3.复制梯形编组并旋转90°，得到一个十字形。4.复制这个十字形并最终全部合并形状，完成。

简易图标

蜗杆图标

蜗杆图标的设计步骤：1.用AI的爆燃图形和方形进行布尔运算画出蜗杆；2.用两个方形进行布尔运算作出上面的零件，完成。

蜗杆图标

螺母刀图标

螺母刀图标的画法：1.用方形和圆形作出螺母刀主体；2.用方形旋转并复制再布尔运算作出凹槽；3.使用圆形作出上面的造型，完成。

螺母刀图标

苹果图标

苹果图标的画法：1.勾画一个多边形。2.将水平中间两个点向下联通。3.在中心线上下构建两个锚点，但是向上联通。4.将下边两个点向内分别联通。5.使用圆角工具将每两个相同的点一组一组拉成圆角。6.勾画一个圆形而且旋转45°，之后将左右两个点向内拉得到矩形。7.用圆角工具使矩形弄成叶子造型而且旋转45°。8.使用一个矩形和苹果造型相切，完成。

苹果图标设计过程

放大镜线性图标

放大镜线性图标的画法：1.勾画正圆。2.勾画一条直线。3.用属性面板里的对齐工具把它们俩对齐。4.用遮罩面板里的属性将遮罩改成尖头，之后旋转45°即可。

放大镜线性图标

时钟线性图标

时钟线性图标的画法：1.勾画正圆。2.勾画一个圆形，对齐方形中心。3.用降低锚点工具在圆形左和下面上降低两个锚点。4.用直接选择工具框选没用的腰线，删掉即可。

时钟线性图标

双击线性图标

双击线性图标的画法：1.勾画两个圆形，并用直接选择工具选择重合的四个锚点，在属性面板里使用对齐工具让它们完全对齐。2.将大的方形顶部锚点向左联通。3.勾画一个圆形并和大的方形左对齐。4.用直接选择工具选中直角，拖动圆角小圆点让它们弄成圆角，完成。

双击线性图标

线性图标的处理

倘若您把握了以上填充态图标的设计方式，相信其他图标的设计只要借此及彼的思索，就可以完成。例如线性图标，在勾画线性图标时，我们首先会构建一个半透明的方形来固定图标应当勾画的范围，例如“40px”。之后我们把填充关掉，只使用遮罩来勾画线性图标即可。勾画完之后我们无需保存文件，仅通过Ctrl+C的复制快捷键，之后打开Sketch或则AdobeXD就可以使用Ctrl+V将图标粘贴过去了。并且，假如您使用Photoshop做界面设计，可能会多两道手续，首先就是线性图标须要扩充才可以复制到Photoshop中。将图标复制一份（扩充以后的图标不便捷更改，所以要留着可更改版本），之后点击对象菜单>扩充，点确定，就可以把本来是没有闭合的路径改为完整的形状。

在Illustrator中的扩充

之后复制，打开Photoshop粘贴会打开提示框，我们可以选择把图标粘贴成为象素、智能对象、路径、形状。假如粘贴成象素的话，那无疑对更改是极其不利的。假如粘贴成智能对象，双击智能对象会回到Illustrator中更改，而且也有一定缺点，那就是智能对象不能直接在Photoshop中进行调整。假如粘贴成路径也不是很便捷，所以最好是我们将Illustrator中勾画的小图标粘贴成型状。选择后，图标就粘贴成了形状蒙版，我们可以在Photoshop中对它进行布尔运算、锚点调整等操作了。

粘贴到Photoshop中的选项

但是，我们会发觉图标粘贴到Photoshop中，横竖的路径会出现虚边的情况（圆角和斜线是容许一定的虚边出现的，而且直线不可以）。这些虚边有可能会影响用户的体验，我们必须把它剿灭掉。第一种方式：在Photoshop中我们可以用直接选择工具后界面上方的对齐路径功能，给它对勾来尝试修补这个问题。第二种方式：我们可以使用直接选择工具选中虚掉的某两个锚点，之后按Ctrl+T（自由变换），再按按键的上下或左右“摇一摇”，路径才会清晰了。第三种方式：也可以使用几象素的圆形进行布尔运算强行对齐。三种方式一定就能让图标的横竖路径没有虚边，达到完美的疗效。其实Sketch和AdobeXD都是矢量工具所以复制后没有这个问题。

在Photoshop中使用“摇一摇”的方式对齐路径

在AdobeXD中，图标无需进行扩充，并可以实时调整遮罩粗细等属性

应用

标签栏图标

在苹果和安卓APP的顶部，通常还会有一个放置重要功能的常驻栏，在iOS中被称为标签栏（也称作Tab栏）。通常，Tab栏的图标是2-5个。每位图标的区域平分整个TAB栏长度，顶部会有一个22px（11pt）的文字注释。其实假如图标释义较为清晰，也可以为了保持设计感去除文字注释。假如我们是以iPhone6/7/8规格设计界面，这么我们的标签栏图标规格应当是60px（30pt）左右，可以基于这个范围来设计我们的图标。

互联网产品中优秀的标签栏图标设计

每位Tab栏的图标都应当设计一个选中状态，可以做式样的变换也可以做颜色的改变，其实要让人晓得当前所在的页面是那个。倘若您的Tab栏由五个icon组成，这么可以在中间放置比较重要的功能，并作出展现的款式，例如使用一个球体当成背景。还要额外注意，图标的选中态款式要和中间突出状态的图标保持区别，以免发生误解。

导航栏图标

在苹果APP的底部区域，我们称之为NavigationBar，就是导航栏。导航栏左右通常还会有图标，倘若是二级页面，两侧通常是返回图标。安卓也有类似的设计。这么我们在设计这些图标的时侯一定要保证所有导航栏上的图标大小和风格都是一致的。若果以iPhone6/7/8规格设计界面，这么导航栏图标的规格大约是44px（22pt）左右。

互联网产品中优秀的导航栏图标

金钢区图标

在我们逛天猫和美团的时侯您会发觉，在它们页面首页就会有一个区域放置好多分类，通常是6-8个大小一样的图标，有可能是方形，也可能是不规则形状。这个区域虽然在苹果和安卓规范里并没有，属于设计师自创的规范。这个区域时常有八个图标组成，被称为“八大金钢图标”，后来好多产品在这个区域并不使用8个图标，我们就称它们为金钢区了。金钢区图标的设计风格应当尽量是微扁平、轻拟物的觉得，这样会有更好的点击感。规格方面，金钢区并没有规范，所以你们可以以设计稿最终疗效为准。

互联网产品中优秀的金钢区图标设计

总结

图标设计是UI设计中十分重要的一环，由于不仅文字和图片的排版之外，在扁平时代我们才能传递给用户情绪和设计感的通道就是页面中的各类图形和图标了，若果做不好图标，用户就将在使用界面时丧失乐趣。所以，我建议每个UI设计师都须要在平常做大量的图标练习。在不同的图标风格中，学会使用各色各样的装备。

好啦

我们的音频栏目

郗鉴UI说

还可以继续收听哦