浅谈设计师必看的图标和ICON设计指南

UI设计教程   /  UI教程     

uimaker
UI设计师 / 江苏 南京

来源:未知   作者:印迹时光

浅谈设计师必看的图标和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年代,施乐在位于帕罗奥托的研究所当中,诞生了最早的拥有图形化界面的电脑,著名的「 Xerox Alto」。这款昂贵的概念机最终并没有走进大众的视野,但是它的后续机型施乐之星在1981年问世,并且成为了计算机史上的重要里程碑,而Xerox Alto 对于乔布斯和比尔盖茨的启发,更是引发了计算机历史上最著名的一场战争:苹果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设计指南

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

 收藏