兰州平面设计学校产品图标和系统图标的不同风格

　　学习平面设计,就到兰州平面设计培训学校,我校所有课程均可0元试听,满意后再学习,讲师亲自授课,幽默的教学风格,深厚的教学功底和大量的项目实践，让您在学习中实践,在项目中提升自己，成为一名的设计师，成才热线400-888-3854 QQ 2294155463

---

　　如今我们界面中的图标可谓非常丰富了，如果根据Materia lDesign对图标的分类，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 的产品图标同样采用了一个字母代表较长的单词。

　　正负形与隐喻风格

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

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

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

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

　　折纸风格

　　折纸的效果会让人感觉很立体，所以很多产品也选择了折纸效果(比较扁平的手法)来设计产品图标。

　　Calendar：这个产品的产品图标是一个正在翻页的日历，非常简洁明了。

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

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

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

　　填充图标风格

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

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

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

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

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

　　线性风格

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

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

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

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

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

　　LOWPOLY风格

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

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

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

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

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

　　微渐变风格

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

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

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

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

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

　　卡通风格

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

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

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

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

　　BOO!：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复制过来就行。

　　安卓启动图标尺寸

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

　　4. 设计流程

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

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

　　然后我给这枚图标加入了蒙德里安的配色，增加产品的艺术感，并终完成产品图标的设计。这个图标也可以作为该产品的企业形象(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)

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

　　双调图标(Two-Tone icon)

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

　　动态图标(Motion)

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

---

　　学习平面设计,就到兰州平面设计培训学校,我校所有课程均可0元试听,满意后再学习,讲师亲自授课,幽默的教学风格,深厚的教学功底和大量的项目实践，让您在学习中实践,在项目中提升自己，成为一名的设计师，成才热线400-888-3854 QQ 2294155463