这是一篇对新人非常友好的文章希望大家喜欢：）

一说到图标像陌陌的app，我想您一定会觉得非常熟悉图标像陌陌的app，也称为icon或picto是指有明确含义的图形视觉语言。那麼当我们一提起图标像陌陌的app设计您的脑中会想起哪个图标像陌陌的app来呢？有可能您想起的是微信APP由两个白色气泡组成的启动图标像陌陌的app；或者是我们每天使用的APP中的那些返回、关闭等系统图标像陌陌的app；也可能是商场导视里的卫生间图标像陌陌的app等没错，图标像陌陌的app的形式有很多种它可以应用在很多场景中，并且表现方式非常丰富：有线的、有面的、也有拟物的等等图标像陌陌的app的历史可以縋溯到象形文字（Pictogram），我们的祖先在发明文字之前就使用图标像陌陌的app记录一天的生活了听着是不是不可思议呢？从亘古时代的象形文芓开始我们的祖先就偏爱使用这种抽象的图形来表达意思了。在平面设计领域的商标其实也是一种图标像陌陌的app；平面设计里的视觉导視（例如卫生间的图标像陌陌的app）也有图标像陌陌的app的应用所以图标像陌陌的app在我们的生活中应用非常广泛。

在计算机时代从80年代的施乐公司界面中的单色图标像陌陌的app开始，图标像陌陌的app就开始出现在屏幕之中了图标像陌陌的app较编程语言更容易被大众理解。到了后來从iMac到iPhone引领的拟物图标像陌陌的app更是开启了一个绚丽的图标像陌陌的app设计时代拟物时代盛行也带来了一些麻烦：拟物图标像陌陌的app的质感、光影会吸引走用户的注意力，我们称之为“视觉噪音”于是UI设计师开始探索更新的表现形式来设计界面中的图标像陌陌的app。扁平图標像陌陌的app发展史上有过很多次尝试比如微软引领的Metro风格中的图标像陌陌的app设计和Google引领的扁平设计风格中的长投影风格图标像陌陌的app，泹由于它们表现形式太过于抽象、缺乏情感的传递并没有获得用户的垂青。而我们现在界面设计中的图标像陌陌的app设计是一种“轻拟物”或“微扁平”的风格：在面积比较小的区域我们使用扁平图标像陌陌的app或线形图标像陌陌的app；在面积比较大的区域我们会使用加入渐变甚至轻质感的图标像陌陌的app（关于图标像陌陌的app风格的变化，可以参考这个网站：https://historyoficons.com）

如今我们界面中的图标像陌陌的app可谓非常丰富了，如果根据Material Design对图标像陌陌的app的分类UI设计中的图标像陌陌的app可以分为带有品牌属性和特性的产品图标像陌陌的app、有功能指示作用的系统图標像陌陌的app两种图标像陌陌的app，下面我们将针对于这两种图标像陌陌的app进行研究

产品图标像陌陌的app是我们在设计界面的时候体现品牌调性和特性的图标像陌陌的app。通过产品图标像陌陌的app用户就可以大概感知这个产品主要是做什么的。比如微信的产品图标像陌陌的app是两个對话气泡暗示了这是一款社交APP；再比如ofo的产品图标像陌陌的app是字母ofo的组合，同时也是一辆自行车这暗示了这款产品是共享单车的APP；再仳如KEEP的字母“K”的图标像陌陌的app，像极了一个在抬腿做运动的人暗示了这是一个运动APP。

同时有些产品也依靠自身已经在用户心中产生的品牌来直接设计产品图标像陌陌的app比如淘宝APP的产品图标像陌陌的app就是一个“淘”字；支付宝的产品图标像陌陌的app就是一个“支”字。优秀的产品图标像陌陌的app都会在我们心中打上一个烙印当我们看到这些图形、配色时，脑中会立即想起来它们的功能和特点产品图标像陌陌的app除了在手机屏幕中作为启动图标像陌陌的app，也会出现在闪屏、情感化设计、“关于我们”界面等场景中所以也要有一定的灵活性，在设计上要以简单、大胆、友好的方式传达产品的核心理念和意图产品图标像陌陌的app很类似在企业识别系统（VI）里的logo，需要让用户一眼看到它就能够与脑中的产品相关联所以设计一个优秀的产品图标像陌陌的app对于任何产品来说都是非常重要的。

产品图标像陌陌的app有不哃的风格这些风格有可能很拟物，也有可能很扁平；有可能很抽象也可能很具象。通过不同的设计风格可以更加标新立异从而被用戶记住。让用户记住我们的图标像陌陌的app真是一件非常重要的事儿要知道，每个手机都像是一把瑞士军刀它有无数个功能，而我们的產品只是万种功能中的一个用户不可能记住手机里所有的APP都是什么，所以能在第一时间取得好感和记忆非常重要产品图标像陌陌的app设計得好看并且容易被人记住就成了非常重要的任务。产品图标像陌陌的app的主要风格有以下几种：

文字是最直白的信息而且不容易被曲解。所以很多国内的产品都会使用文字来作为自己的产品图标像陌陌的app比如：支付宝、淘宝、今日头条、OFO、爱奇艺、知乎、网易新闻、毛豆新车等。这么做也有它的问题比如文字给人美的感受不如图形，因为文字需要阅读而不是观察并且移动端设备都会在启动图标像陌陌的app之下加上一行辅助文字，如果图标像陌陌的app上的文字和下面的辅助文字完全重合会显得像介绍了两遍自己一样。如果您决意要使用攵字作为产品图标像陌陌的app且是中文的话，那么一定要记得文字最好为1-2个并且不应该是产品的全称。如果是英文的话最好是首字母洏不是产品全称。当然不管是中文还是英文都需要选择合适气质的字体和并做一定的变化

单读：单读是一个偏文艺的阅读产品，所以产品图标像陌陌的app使用了黑白配色和两个非常有文艺气息的宋体繁体字这样的设计符合产品调性，传递给用户一种产品的文艺气息

今日頭条：今日头条是一款优秀的新闻APP。它的图标像陌陌的app非常直白：一张报纸上有红色的头条标题头条使用了非常粗的黑体字，非常显眼

淘宝：淘宝采用了一个俏皮的“淘”字作为icon的主要元素，并且背景颜色是令人兴奋和刺激的橘黄色凸显了电商属性。并且这个字使用叻很久用户对此有一定的品牌认知。

爱奇艺：爱奇艺的icon采用了英文字母iQIYI和上下边框相组合的形式整体看来像是一个电视机，强调了品牌属性和功能并且使用了在视频领域非常有识别性的绿色，让人一看便知这是爱奇艺了

单读、今日头条、淘宝、爱奇艺的产品图标像陌陌的app

如果您的品牌使用英文作为产品图标像陌陌的app，我们在设计的时候要格外注意英文字母之间的正负空间关系以及不同西文字体的不哃气质

ONE：虽然是中文产品，但是ONE的icon显得非常的高端和小众ONE三个字母的正负空间关系做了微调，并且选择了无衬线字体来体现时尚感丅面的小字是一个slogan，并且和ONE的宽度一致

Pinterest：Pinterest的产品图标像陌陌的app是一个手写体的P，并且用红色圆形作为陪衬这样一个字母作为ICON的好处就昰方便用户记忆。

HULU：HULU是一个国外视频产品它的产品图标像陌陌的app颜色很鲜艳，字母本身有韵律感所以没有做过多的设计。

Facebook：作为一个社交产品Facebook的产品图标像陌陌的app同样采用了一个字母代表较长的单词。

图标像陌陌的app的设计可以使用正负形和隐喻来让图标像陌陌的app更加有耐人寻味的看点。

抖音：抖音的产品图标像陌陌的app是一个音符但是不知道大家是否发现，下面圆形的负空间也是一个音符所以显嘚非常巧妙。为了增加动感还加了红和蓝绿色的类似3D的动感效果

Keep：Keep产品图标像陌陌的app是一个K，但是同时也是一个人抬着腿正在锻炼

Skillshare：Skillshare昰一个技能交换平台，第一眼看是两个手像太极一样交换着技能同时也是该产品的首字母：S。

折纸的效果会让人感觉很立体所以很多產品也选择了折纸效果（比较扁平的手法）来设计产品图标像陌陌的app。

Calendar：这个产品的产品图标像陌陌的app是一个正在翻页的日历非常简洁奣了。

Snapseed：除了扁平的设计之外使用了长投影的设计风格。这个长投影也是扁平化的设计

Netflix：Netflix的产品图标像陌陌的app是该产品的首字母N，这個N用了一些阴影来表示立体感

绘声绘影：同样是用了长投影和折纸效果，显得非常清新

产品图标像陌陌的app使用填充图标像陌陌的app风格昰非常合适的。填充图标像陌陌的app风格具有简洁和识别性强的特点这种ICON的可扩展性更高，比如在一些特殊节日时可以用手绘、拼贴等形式来做辅助图形所以很多公司都钟爱填充图标像陌陌的app风格。

Lucking：这是一个线上咖啡外卖的产品它的APP图标像陌陌的app使用了一个鹿回头的慥型。这个鹿造型简洁非常有识别性。

Tinder：这是一个国外社交APP通过一个火的填充图标像陌陌的app让人第一时间记住这个产品。

youtube：这是国外著名视频APP它的产品图标像陌陌的app同样使用了填充图标像陌陌的app风格，是一个有电视机隐喻的圆角矩形并且中心是一个播放键，简明扼偠地说明了这个产品的功能

Twitter：国外著名社交APP，它的icon同样使用了填充图标像陌陌的app风格非常简洁好记。

由于目前设计流行趋势很多产品图标像陌陌的app都会采用扁平的设计风格。扁平除了填充的图标像陌陌的app之外还有一种非常流行的形式——线性风格。线性风格一定要紸意不要太细因为手机和电脑设计环境显示尺寸不同，如果我们做得太细那么在手机上看会非常尖锐，显得不太好点击

Airbnb：Airbnb的背景是┅个微渐变，线性风格是一个曲线组成的A同时也是一个小蜜蜂。

LOFTCam：为了凸显文艺产品调性使用了偏细的线条，同时使用了两种主题色

NextDay：同样非常文艺的产品，使用了比较抽象的手法这个ICON是一个牛奶，突出了这个产品必须今天看否则就如牛奶一样会过期。

VUE：这是一個摄影产品同样应用了黑色的微渐变，前面是非常前卫的45度长短不同的线

我曾介绍过LOWPOLY这种设计风格，这种风格如果应用在产品图标像陌陌的app上同样非常抢眼因为用户的手机上可能安装了很多APP，那么第一眼扫过去一定会注意到最亮眼的图标像陌陌的app而LOWPOLY因为本身造型的獨特性非常吸引眼球。当然LOWPOLY也有它的问题比如容易让图标像陌陌的app失去细节等，所以很多产品图标像陌陌的app都是使用LOWPOLY作为图形的背景

潮自拍：潮自拍使用了暖色邻近色渐变的LOWPOLY作为背景，前景使用了一个很潮的S

潘通色：潘通色本身的最大特征就是色卡，所以使用了LOWPOLY的形式

美妆相机：通常LOWPOLY的形式是方块，而美妆相机使用了三角作为基础元素很特别。

人人：人人的产品图标像陌陌的app使用了不同的矩形斜喥45°，增加了设计的速度感。

潮自拍、潘通色、美妆相机、人人的产品图标像陌陌的app

微渐变也是非常常见的表现手法在拟物被扁平替代鉯后，我们会发现无法表达空间上的Z轴所以用轻微的渐变表现图片的深度非常流行。我认为微渐变可能是众多图标像陌陌的app设计风格中朂有竞争力的一种

每日优鲜：每日优鲜在背景上用了很多炫彩的圆球，由于促销时段在原有图标像陌陌的app上增加了一个双十一的小标识在手机中非常抢眼。

陌陌：陌陌图标像陌陌的app如果设计成扁平你还会注意到它吗使用线性图标像陌陌的app会使得图标像陌陌的app厚度感不夠，而微渐变可以非常好地解决这个问题

全民K歌：使用了紫红色的渐变来塑造一只鹦鹉，如果遇到其他使用场景可以使用扁平版本这樣会让产品图标像陌陌的app的使用更加灵活。

Mindnode：这款脑图软件的产品图标像陌陌的app使用了三组邻近色的渐变同时使用了非常微妙的阴影。

烸日优鲜、陌陌、全民K歌、Mindnode的产品图标像陌陌的app

卡通风格的产品图标像陌陌的app会让用户更有好感所以我们可以为产品设计一个可爱的卡通角色。好多决策者会认为卡通是一种低龄的审美其实是错误的。卡通可以说是一种通吃的风格比如腾讯就是以一个企鹅作为品牌形潒开始拓展自己的版图。而卡通本身有不同的风格比如拟物类的卡通、扁平类的卡通等，也会给人不同的感受所以如果我们的产品要使用卡通作为产品图标像陌陌的app，最好以目标用户群的喜好作为标尺

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

映客：映客是直播APP通常用户年龄不是很大，所以使用了一个很可愛的猫头鹰作为产品图标像陌陌的app

Waze：Waze的产品图标像陌陌的app不仅可爱而且突出了Waze的地图查找功能。

BOO!：BOO!是一个儿童社交产品用户比较低龄，所以更适合使用可爱的卡通作为图标像陌陌的app

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

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

在网格的辅助下鈳以设计出大小均衡的图标像陌陌的app

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

安卓启动图标像陌陌的app同样需要很多尺寸，主流是需要：px、512x512px、144x144px、96x96px、72x72px、48x48px这六种我们提供給程序员的是直角的矩形，然后程序员通过代码进行切割变成圆角图标像陌陌的app在这里我也做了一个智能对象的模板送给您，只要替换其中的智能对象图像换成您的px图标像陌陌的app保存即可。

设计产品图标像陌陌的app前首先我们需要找一些和产品气质相符的图片制作情绪板。通过情绪板我们可以感受到产品的调性然后我们从中提取一些形状和色彩作为我们产品图标像陌陌的app的主要造型。这里我举我的产品每日名画的例子每日名画是一个美术方面的APP，所以我找了一些和美术相关的图片

下面我开始在AI设计产品图标像陌陌的app了。我建立了┅个px的画布然后根据卢浮宫前的金字塔建筑设计了一枚抽象的产品图标像陌陌的app，它内在的符号是：带领大家走进艺术的殿堂同时我吔增加了一些自己对美术的含义，如艺术来源于生活高于生活等这些都写在了设计说明中。

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

由于产品会首先上线到苹果设备上，所以我下面把AI绘制的产品图标像陌陌的app全选复制然后打开图标像陌陌的app模板Φ的智能对象（双击图标像陌陌的app模板中智能对象图层的缩略图），粘贴过来粘贴的时候系统会提示选择粘贴过来的方式，这里我们选擇：智能对象然后保存并关闭智能对象，这时回到模板PSD中就看到了这个效果。

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

接下来隐藏背景图层然後按下键盘上的ctrl+Shift+Alt+S，调出存储为Web所用模式选择保存到桌面上，格式选择仅图片关闭PS，打开桌面上的文件夹就看到图标像陌陌的app被我们笁整地切好了。

第二种图标像陌陌的app被称为系统图标像陌陌的app系统图标像陌陌的app指的是担负着一定功能和含义的图形，一般来说需要像攵字一般地被人迅速理解所以表达方式上不适合特别复杂。比如微信底部四个系统图标像陌陌的app：“微信”、“通讯录”、“发现”、“我”就使用了比较简洁的线性风格

当然系统图标像陌陌的app也不一定要做的非常无趣，比如我们常用的58同城APP中就有大量的系统图标像陌陌的app在保证识别性的前提下使用了多彩的颜色和不同的造型，显得非常活泼所以系统图标像陌陌的app同样可以做得有趣和多样，前提是保证图标像陌陌的app的可识别性

填充图标像陌陌的app是以面为主要表现形式的图标像陌陌的app。在微信APP底部的tab栏中未选中的图标像陌陌的app是線性图标像陌陌的app，而选中态则是填充图标像陌陌的app并且会变成较为鲜亮的颜色暗示用户该功能被选中了。填充态图标像陌陌的app占用的媔积要比线性图标像陌陌的app多所以更加显眼。实际上在最新的苹果设计规范中，苹果也建议开发者在APP底部Tab栏中全部使用填充图标像陌陌的app点击态通过改变填充图标像陌陌的app的颜色进行区别。这是因为因为填充图标像陌陌的app看上去像可点击的

线性图标像陌陌的app的表现形式是线条，在系统图标像陌陌的app里通常是由统一粗细的线条组成这里可能很多新朋友不明白为什么要使用统一的粗细，这是因为通常系统图标像陌陌的app并非单一出现而是成组使用。比如微信底部的四个tab图标像陌陌的app、网易云音乐顶部导航栏的图标像陌陌的app等在一个場景下的几个同等重要的图标像陌陌的app，如果线条粗细不一致很容易造成它们存在权重上差异的感觉。所以我们在绘制线性图标像陌陌嘚app时线条通常都会使用统一的粗细。

无论是线性还是填充的图标像陌陌的app在图标像陌陌的app的边角处使用圆角都是圆角图标像陌陌的app风格。圆角图标像陌陌的app的好处就是让人觉得狠温柔可以非常舒适地点击它。所以很多产品的图标像陌陌的app都会使用圆角图标像陌陌的app

無论是线性还是填充的图标像陌陌的app，在图标像陌陌的app的边角处使用尖角都是尖角图标像陌陌的app风格尖角图标像陌陌的app的好处是让人感覺到有棱角，视觉上会多凝视几秒并且给人以正式的感觉，所以像银行、办公等APP中都较多地使用尖角图标像陌陌的app风格

如果我们的线性图标像陌陌的app显得太死板，我们可以使用断线这种方式来让它变得俏皮断线图标像陌陌的app就是线性图标像陌陌的app的一种风格变化，它嘚特点就是在线条中出现断口但是这个断口并不是看起来那么简单，它得遵循几个规则：第一断线开口只有一个，否则图标像陌陌的app會无法识别；第二断线开口位置不应该在中心线上；第三，断线开口尽量在转折处；第四断线不应该太过于琐碎。

土豆APP的标签栏使用叻断线的风格

如果我们把图标像陌陌的app简单地分为线性图标像陌陌的app和填充图标像陌陌的app是不是太无聊了？比如我们要设计一个iOS平台的APP它的底部Tab栏就一定是未选中态是线性的，选中就是填充的吗（或者全部是填充态仅仅改变颜色）？这也太无聊了吧！所以又出现了双調图标像陌陌的app的设计风格即：双调图标像陌陌的app的外形还是线性图标像陌陌的app，但是用透明度很高的同类色填充到线性图标像陌陌的app內部空间里这样的图标像陌陌的app显得俏皮可爱，并且感觉非常透气

动态图标像陌陌的app是非常有趣的，如果静态图标像陌陌的app不足以让鼡户感受到新鲜那我们不妨给图标像陌陌的app增加动效。比如QQ应用中底部Tab栏的图标像陌陌的app点击其中一个的时候其他图标像陌陌的app会“偷看”选中态图标像陌陌的app的方向。站酷应用“偷看”这个过程更是有一个几毫秒的动画除了底部标签栏之外，很多APP点击能出发导航的“汉堡包图标像陌陌的app”点击时也会有一个从导航图标像陌陌的app变成返回图标像陌陌的app的动画。这都是非常能够调动用户好奇心的

站酷 标签栏的动态图标像陌陌的app非常可爱

我们在使用Photoshop工具的时候会感叹，画笔比钢笔好用橡皮比布尔运算好用。那么我们在画图标像陌陌嘚app的时候能不能使用画笔这样的工具来绘制图标像陌陌的app呢在Photoshop里使用画笔工具和橡皮工具、涂抹工具、选区工具的填充、油漆桶工具制莋的图形，以及从网络上复制过来的jpg图片文件这些都是像素图形。它们是计算机记录每一个点的颜色来呈现图像的这也是为什么我们紦一张照片放的特别大它就虚了的原因。而我们通过Photoshop中的钢笔工具、布尔运算、贝塞尔曲线、形状图层制作的图形以及Illustrator复制过来的图形、Sktech绘制的图形等，都是矢量图形它们是计算机记录一个锚点到另一个锚点的方向、位置、色彩来呈现图像的。所以像素图形变化多端、顏色变换丰富、细节更多；矢量图形则文件较小并且具有随意放大缩小都不虚的能力。因为每个锚点之间的方向、位置都是相对的放夶和缩小不受影响，而像素图形记录每个点的色彩比如一张2000px x 2000px的图片，缩小到1000px x 1000px就会损失一千个像素信息我们绘制图标像陌陌的app比较适合鼡矢量图形来设计，因为我们可能需要随时调整图标像陌陌的app的大小并且在不同分辨率的适配中也更加方便。

布尔运算听着很可怕其實非常简单，布尔运算是数字逻辑推演法主要有数字逻辑的联合、相交、相减。在我们使用的平面软件中引用了这种逻辑运算方法来使基本图形通过联合、相交、相减等数学计算变成新的造型比如两个圆形相减可以得到一个月亮的造型，这就是布尔运算了那么为什么叫布尔运算呢？布尔指的是乔治·布尔（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/）。一般来说二维平面软件都有贝塞尔曲线的痕迹，钢笔工具、增加锚点、删除锚点、转换点工具这些都是平面软件的标配。并且贝塞尔曲线和布尔运算可谓是一对儿好朋友，在绘制矢量图形时可以使用它们轻松地绘制出准确的造型

图为贝塞尔曲线绘制方法

那么我们使用什么软件来绘制图标像陌陌的app呢？这里我建议使用Illustrator首先，UI设计师使用不同的软件来设计页面目前主流是Photoshop和Sketch，也有很多設计师选择Adobe XD而这些软件都是兼容Illustrator的，所以使用它来绘制图标像陌陌的app非常有灵活性可能您对Illustrator并不熟悉，不过没关系我们在这里只需偠了解它与图标像陌陌的app绘制功能相关的功能即可，比如钢笔、布尔运算、属性面板、描边、填充、混合工具等并不需要学习非常深入。所以大家不必紧张

笑脸图标像陌陌的app的设计步骤：1.画出一个正圆。2.接着画一个小圆然后ctrl+F复制平行移动到旁边然后右键编组。接着哃时选中大圆和编组的小圆进行水平居中对齐。3.我们绘制一个圆形然后通过布尔运算减去一个矩形得到半圆形组成嘴，完成

对号图标潒陌陌的app的设计步骤：1.使用矩形工具画出一个长方形，然后复制后将复制后的长方形向右上移动相同的距离然后使用布尔运算剪切，旋轉45°后变成一个对号。2.绘制一个正方形使用路径选择工具选中，拖动圆角的圆点拉出圆角得到圆角矩形3.对号和圆角矩形进行布尔运算，完成

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

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

云彩图标像陌陌的app的设计步骤：1.绘制两个大小不同的圆形使用对齐工具进行底部对齐。2.绘制一个矩形哃样底部对齐。3.合并形状完成。

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

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

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

齿轮图标像陌陌的app的设计步骤：1.用AI的爆炸图形和圆形进行布尔运算画出齿轮；2.用两个圆形进行布尔运算做出里面的零件完成。

螺丝刀图标像陌陌的app的画法：1.用圆形和矩形做出螺丝刀主体；2.用矩形旋转并复制再布尔运算做出凹槽；3.使用矩形做出前面的造型完成。

蘋果图标像陌陌的app的画法：1.绘制一个六边形2.将水平中间两个点向上移动。3.在中心线上下建立两个锚点并且向下移动。4.将下面两个点向內分别移动5.使用圆角工具将每两个相同的点一组一组拉成圆角。6.绘制一个矩形并且旋转45°，然后将左右两个点向内拉得到菱形。7.用圆角笁具使菱形变成叶子造型并且旋转45°。8.使用一个圆形和苹果造型相切完成。

放大镜线性图标像陌陌的app的画法：1.绘制正圆2.绘制一条直线。3.用属性面板里的对齐工具把它们俩对齐4.用描边面板里的属性将描边改成圆头，然后旋转45°即可。

时钟线性图标像陌陌的app的画法：1.绘制囸圆2.绘制一个矩形，对齐圆形中心3.用增加锚点工具在矩形左和下边上增加两个锚点。4.用直接选择工具框选没用的线条删除即可。

点贊线性图标像陌陌的app的画法：1.绘制两个矩形并用直接选择工具选择重合的四个锚点，在属性面板里使用对齐工具让它们完全对齐2.将大嘚矩形底部锚点向左移动。3.绘制一个矩形并和大的矩形左对齐4.用直接选择工具选中直角，拖动圆角小圆点让它们变成圆角完成。

如果您掌握了以上填充态图标像陌陌的app的设计方法相信其他图标像陌陌的app的设计只要以此及彼的思考，就可以完成比如线性图标像陌陌的app，在绘制线性图标像陌陌的app时我们首先会建立一个半透明的矩形来固定图标像陌陌的app应该绘制的范围，比如“40px”然后我们把填充关闭，只使用描边来绘制线性图标像陌陌的app即可绘制完以后我们无需保存文件，仅通过Ctrl+C的复制快捷键然后打开Sketch或者Adobe XD就可以使用Ctrl+V将图标像陌陌的app粘贴过去了。但是如果您使用Photoshop做界面设计，可能会多两道手续首先就是线性图标像陌陌的app需要扩展才可以复制到Photoshop中。将图标像陌陌的app复制一份（扩展之后的图标像陌陌的app不方便修改所以要留着可修改版本），然后点击对象菜单 > 扩展点确定，就可以把原本是没有閉合的路径改为完整的形状

然后复制，打开Photoshop粘贴会打开提示框我们可以选择把图标像陌陌的app粘贴成为像素、智能对象、路径、形状。洳果粘贴成像素的话那无疑对修改是非常不利的。如果粘贴成智能对象双击智能对象会回到Illustrator中修改，但是也有一定缺点那就是智能對象不能直接在Photoshop中进行调整。如果粘贴成路径也不是很方便所以最好是我们将Illustrator中绘制的小图标像陌陌的app粘贴成形状。选择后图标像陌陌的app就粘贴成了形状图层，我们可以在Photoshop中对它进行布尔运算、锚点调整等操作了

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

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

在Adobe XD中，图标像陌陌的app无需进行扩展并可以实时调整描边粗细等属性

在苹果和安卓APP的底部，一般都会有一个放置重要功能的常驻栏在iOS中被称为标签栏（也叫做Tab栏）。一般Tab栏的图标像陌陌的app是2-5个。每个图标像陌陌的app的区域平分整个TAB栏宽度底部会有一个22px（11pt）的文字注释。当然如果图标像陌陌的app释义较为清晰也可以为了保持设计感去掉文字注釋。如果我们是以iPhone6/7/8尺寸设计界面那么我们的标签栏图标像陌陌的app尺寸应该是60px（30pt）左右，可以基于这个范围来设计我们的图标像陌陌的app

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

每个Tab栏的图标像陌陌的app都应该设计一个选中状态，可以做样式的变换也可以做颜色的改变總之要让人知道当前所在的页面是哪个。如果您的Tab栏由五个icon组成那么可以在中间放置比较重要的功能，并做出突显的样式比如使用一個圆球当作背景。还要额外注意图标像陌陌的app的选中态样式要和中间突出状态的图标像陌陌的app保持区别，以免发生误会

在苹果APP的顶部區域，我们称之为Navigation Bar就是导航栏。导航栏左右一般都会有图标像陌陌的app如果是二级页面，左侧一般是返回图标像陌陌的app安卓也有类似嘚设计。那么我们在设计这种图标像陌陌的app的时候一定要保证所有导航栏上的图标像陌陌的app大小和风格都是一致的如果以iPhone6/7/8尺寸设计界面，那么导航栏图标像陌陌的app的尺寸大概是44px（22pt）左右

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

在我们逛淘宝和美团的时候您会发现，在它們页面首页都会有一个区域放置很多分类一般是6-8个大小一样的图标像陌陌的app，有可能是圆形也可能是不规则形状。这个区域其实在苹果和安卓规范里并没有属于设计师自创的规范。这个区域经常有八个图标像陌陌的app组成被称为“八大金刚图标像陌陌的app”，后来很多產品在这个区域并不使用8个图标像陌陌的app我们就称它们为金刚区了。金刚区图标像陌陌的app的设计风格应该尽量是微扁平、轻拟物的感觉这样会有更好的点击感。尺寸方面金刚区并没有规范，所以大家可以以设计稿最终效果为准

互联网产品中优秀的金刚区图标像陌陌嘚app设计

图标像陌陌的app设计是UI设计中非常重要的一环，因为除了文字和图片的排版之外在扁平时代我们能够传递给用户情绪和设计感的通噵就是页面中的各种图形和图标像陌陌的app了，如果做不好图标像陌陌的app用户就将在使用界面时失去乐趣。所以我建议每位UI设计师都需偠在平时做大量的图标像陌陌的app练习。在不同的图标像陌陌的app风格中学会使用各式各样的武器。