杭州哪里有平面设计短期培训班

　　图标设计是UI设计中非常重要的环节，因为除了文字和图片的排版之外，在扁平时代能够传递给用户情绪和设计感的通道就是页面中的各种图形与图标。全文16,834字，阅读时长约35分钟。

　　设计师必看的图标（icon）设计指南

　　图标是UI设计中除了文字之外最不可或缺的视觉元素，在设计中看似只占一个很小的区域，但是它却是考验设计师基本功的重要标准，了解图标相关的概念，以及正确绘制的方法，是入门UI设计的必备条件。

　　本文尽量将图标进行系统一些的介绍说明，当然仅一篇文章是不可能面面俱到包含所有知识点。内容比较基础，主要以设计概念和设计思路为主，对图标相关的内容进行组织梳理和分类，便于小伙伴们建立图标的概念体系。过程中也有针对几种典型的图标结构进行实操代练，想要把图标设计的更好，这就需要我们在平时勤加练习外，还要进行深度的思考，希望我的这篇梳理可以给大家带来帮助。

　　设计师必看的图标（icon）设计指南

　　1.1图标的定义

　　图标，也称为icon或Picoto，是计算机世界对现实世界的隐喻和概括，代表软件产品中的功能及操作。它的本质是一种符号，它采用对这个世界的隐喻，来指代功能，含义，用途等。

　　设计师必看的图标（icon）设计指南

　　图标做为国际通用性语言，生活中随处可见，例如商场导视中收银台图标、出口图标、卫生间图标等，日常手机里使用的那些App图标，如微信、电话、短信等。的确，图标的形式有很多种，它可以应用在很多场景中，并且表现方式非常丰富，有线的、有面的、还有拟物的等。

　　设计师必看的图标（icon）设计指南

　　如果粗浅划分的话，UI设计中常见的图标大致分为2大类，第一类我们称之为「标志性图标」，比如手机中应用启动图标；第二类我们称之为「功能性图标」，这类图标经常出现于App或网站中，用于功能性指示引导或操作。

　　1.2图标的重要性

　　对于UI设计而言，图标可以说是整个产品的点睛之笔，它甚至可以直接影响着一款产品的形象和气质。在不少UI界面中，图标几乎是这个页面的核心支撑体，它直接影响着产品的视觉体验和产品调性。它有以下几点好处：

　　设计师必看的图标（icon）设计指南

　　全球通用：Windows,iOS,etc.,中文版和英文版甚至各种语言版本，在不打开菜单之前，基本上都长一样；

　　节约空间：如果在一个图标能够表述清楚含义的时候，比如用一个叉就可以不用写「关闭」；

　　快速定位：图标可以用它独特的形状或者颜色让人快速定位到一个功能；

　　上下文的定位：比如小飞机的图标单独放出来不确定是什么，但是在和收件箱在一起它就可以认为是发件箱了。

　　1.3发展历程

　　如你所知，图标、标识都不是界面设计师所创造的概念，它的存在可以追溯到人类文明诞生之初，在漫长的历史长河当中，早期用来传达信息的图标演变为系统的文字，而在地图、图书、壁画和建筑等各种各样的地方，还存在着用来代表和传达特定概念的图标和标识。

　　设计师必看的图标（icon）设计指南

　　随着技术的发展，计算机诞生了，而显示器的出现，也为图形化界面的诞生，铺平了道路。20世纪70年代，施乐在位于帕罗奥托的研究所当中，诞生了最早的拥有图形化界面的电脑，著名的「XeroxAlto」。这款昂贵的概念机最终并没有走进大众的视野，但是它的后续机型施乐之星在1981年问世，并且成为了计算机史上的重要里程碑，而XeroxAlto对于乔布斯和比尔盖茨的启发，更是引发了计算机历史上最著名的一场战争：苹果VS微软，Windows对抗Macintosh。当然这都是后话。

　　设计师必看的图标（icon）设计指南

　　来自苹果的Macintosh系统在图形化界面发展史上是无法绕过的里程碑。1991年，苹果借由Macintosh，首次发布了彩色的图标设计。图标所能容纳的信息量比起上一个黑白界面的时代更大，全新的样式使得它在信息传达的功能性上有了明显的提升。

　　从iMac到iPhone引领的拟物图标更是开启了一个绚丽的图标设计时代。拟物时代盛行也带来了一些麻烦——拟物图标的质感、光影会分散用户的注意力，形成「视觉噪声」。于是UI设计师开始探索更新的表现形式来设计界面中的图标。如微软引领的Metro风格图标设计和Google引领的长投影风格的图标设计，但由于它们的表现形式太过于抽象，缺乏情感的传递，并没有获得用户的青睐。

　　设计师必看的图标（icon）设计指南

　　在此之后，越来越多的图标开始借由灵活而强大的数字技术而诞生，并且基于不同的需求而演化出不同的分支和风格。许多操作系统和工具开始预制一些成体系的图标，诞生基于种种需求，越来越多的自制的、重设计的图标，逐步进入了我们的视野。图标类型很多，我们可以用不同的方式来划分它们。

　　设计师必看的图标（icon）设计指南

　　图标的类型

　　2.1拟物图标

　　由于人们都是通过以往的认知来理解新事物，所以基于这一点，早期应用界面必然要采用拟物风格，以便于人们的理解和操作。是一个由实物→符号的发展历程。

　　设计师必看的图标（icon）设计指南

　　例如「保存」图标就是将「软盘」符号化之后形成的图形，「软盘」是「保存」图标的实体。但随着时间的推移，人们逐渐将长期接触的符号本身作为一种新的实体，在大家的眼里，它不再是一个具象事物的抽象符号，而是直接当成一个实体来使用，甚至这个符号的实体已经淡出历史，但人们还在习惯性使用这个符号。

　　更具体点来说，拟物设计就是追求模拟现实物品的造型和质感，通过叠加高光、纹理、材质、阴影等各种效果对实物进行再现（也可适当程度变形和夸张）；扁平化设计就是摒弃以上对效果（尤其是高光、阴影等能造成透视感的效果）的追求，转而通过抽象、简化、符号化的设计元素来表现。你还记得曾经熬夜画写实图标的日子嘛～上千个图层不在话下有木有！

　　设计师必看的图标（icon）设计指南

　　但是随着ICON的发展，拟物图标也带来了一些问题，因为用户关注的核心永远都是信息本身，华丽的视觉元素或许在用户使用的初期，起到赏心悦目的装饰，但久而久之，这都将成为对用户获取信息的一种干扰。再者，大家都熟悉的事物其实非常有限，而APP的创新却在不断进行，很多创新的产品本身在现实世界就没有参照物，所以也决定了拟物图标必然会被取代。

　　2.2扁平图标

　　区别于拟物化更加接近于真实的实物，扁平化则是简化真实的物体，进行平面化的表现。

　　2013年，苹果推出了iOS7开启了拟物向扁平转变的风潮。扁平化的概念最核心的地方就是：去掉冗余的装饰效果，意思是去掉多余的透视，纹理，渐变等等能做出3D效果的元素让“信息”本身重新作为核心被凸显出来。并且在设计元素上强调抽象、极简、符号化的概念。

　　设计师必看的图标（icon）设计指南

　　扁平图标风格发展的后期，由于它们表现形式太过于抽象、缺乏情感的传递，也没有获得大众的青睐，这也表明UI新的趋势再一部向“突出内容”的本质靠拢，即“认知简约”。也许当满世界都是扁平化后，拟物化的设计却又变得更显眼了呢？最近流行的新拟物风格就是最好的证明。

　　2.3微扁平、轻拟物

　　从扁平风格发展至现在，图标慢慢开始发展到微扁平轻拟物的方向，相较于拟物风格不会有太多复杂的视觉元素，与扁平风格又有了更丰富的情感内容，所以现在界面中，在面积比较小的区域我们使用扁平图标或线形图标；在面积比较大的区域我们会使用加入渐变甚至轻质感的图标。

　　设计师必看的图标（icon）设计指南

　　2.4线性图标

　　线性图标是由直线、曲线、点在内等元素组合而成的图标样式，通过线来塑造轮廓。线性图标具有辨识度高，清晰，简约易识别等优点，线性图标不会对页面造成太多的视觉干扰。缺点是：线性图标的创作空间较少，太复杂的线性图标对识别性产生较大的困扰。

　　设计师必看的图标（icon）设计指南

　　在图标设计中使用的线有粗细之分，常用的App图标设计线的粗细一般有2PX或者3PX，不同的线条粗细ICON所带来的视觉感受也不同，细线显得精致，粗线视觉面积大，显得厚重。直角线条的icon显得专业严谨，圆角粗线条的ICON显得饱满而可爱。

　　2.5面性图标

　　面性图标是通过面来塑造形体的图标，采用了剪影的设计形式，通过线或者面去切割基础轮廓面，通过分型来塑造图标的体积感。不同的切割手法造成了面性图标设计感的差别。

　　面形图标具有表意能力强，细节丰富，情绪感强，视觉突出，创作空间大等优点。面性图标可以让用户迅速定位图标位置，预知点击后的状态。但是面性图标在页面中不可过多出现，否则会造成页面臃肿，难分主次，用户视觉疲劳。

　　设计师必看的图标（icon）设计指南

　　2.5文字图标

　　文字图标是指用文字直接表示特定含义的图标符号。由于文字本身就是一种演化而来的符号，英文的首字母或者词语关键字本身也具备很强的信息浓缩性，因此在某些场景下，采用文字或字符作为图标，是一种很不错的表现手法。

　　设计师必看的图标（icon）设计指南

　　比如「提示」图标，使用一个圆圈包裹一个英文字母「i」，表示information，表示「注释信息」的含义；比如停车场直接使用「Parking」中的首字母「P」，这些都是比较约定俗称的使用方式。还有一些场景，很难用象形或者表意的方式进行表达，那么就很适合使用文字符号，例如京东/天猫某些商品具备「正品保证」的标识，这个概念太抽象了，很难用象形去概括，创造新的表意符号又很难被大众接受，这时「正」字就很适合作为这个场景特定的图标符号，作为针对中国用户群体的产品图标，简单粗暴且有效。

　　设计师必看的图标（icon）设计指南

　　如果可能的话，尽量避免在图标中使用文字。因为图标应该是全球性的。如果你确实需要文字图标(例如货币符号等等)，那么请你自己绘制，而不是直接使用字体。

　　2.6"新拟物"风格图标

　　苹果在WWDC20搞了个大新闻：macOS将与iOS统一步调，从X86平台迁移至ARM平台，并从macOS10迭代为macOS11。这20年一遇的Mac大版本更新被称为BigSur。

　　macOSBigSur是第一个将"新拟物"设计投入大规模商用的操作系统，这可视为"新拟物"在实用化道路上的首次胜利。值得一提的是，在BigSur的"外观"设置里，多了一项名为"自适应强调色"的选项。苹果将主题色的指定权留给开发者，这是否暗示新一代App在光影上会有更丰富的效果？

　　设计师必看的图标（icon）设计指南

　　"新拟物"设计的精髓在于对光线的绝妙运用。它把光效拿捏在"扁平"与"拟物"之间，进而打造一种全新的视觉体验。

　　不同于传统的拟物，"新拟物"虽然将符合物理规律的光影效果引入界面，但它所模拟的材质是自然界不存在的。换句话说，"新拟物"是将真实光线用于虚拟对象，而"拟物"是还原实际物品在特定光照下的效果；

　　由于整个设计界将不得不考虑新拟物风格，围绕该风格的可能性将会有爆炸性的发展，并且这种新的数字空间设计理念如何能够合理地适用于用户界面设计和功能性将取得更大的突破。与以往一样，第三方应用将比苹果更大胆、更快速地推动这一风格——这也是我们将会真正开始解锁新拟物优势的时候。

杭州天琥设计培训学校 http://www.91soxue.com/1517/

本文链接：http://www.91soxue.com/news/46943.html

详情请进入 杭州天琥设计培训学校 咨询电话：155-5710-6220 点击咨询