在用户界面中,图标绝对是不可或缺的元素。虽然绝大多数的图标都很小,甚至不被人注意到,但是它们帮助设计和用户解决了许多问题。作为一名UI设计师需要会的基础操作是什么,那必定是进行图标设计。而图标设计原则是一切基础中的基础,不但可以帮助设计师快速定位,还能让图标更具有生命力。

图标的定义及作用

图标是具有指代性的计算机图形,具有高度浓缩并快速传达信息和便于记忆的特点。图标的应用范围非常广泛,从各种软硬件到现实生活到处都可以看到各种图标的影子,可以说我们的生活离不开图标。

作为UI界面设计的关键部分,图标在UI交互设计中无处不在。一套成功的图标设计不仅需要质感精美、引人眼球,更重要的是具有良好的可用性。一般来讲,具有强烈质感的图标可以为网页增添亮点,给浏览者留下深刻的印象。

ui图标

图标设计原则

对于应用型图标设计,原则有三个:可识别性、差异性、还有要使用栅格线。

•识别性:是图标设计的首要原则,是指设计的图标能准确地表达出所代表的隐喻,能让用户第一眼识别出它所代表的含义,从中获得相关信息。

•差异性:则是指不能让图标千篇一律,要突出产品核心同时具有新意。让用户瞬间抓住重心,给用户留下深刻的印象。

•栅格线:类似于练字用的格子,可让图标与系统保持和谐统一,更好地彼此匹配。

除了应用型图标设计,还有功能性图标设计。主要原则有:表意准确、轮廓清晰、一致性等。

•表意准确:如同字面意义,要把核心思想表达清楚。如果用户看到你的图标一脸懵,那么这个设计无疑是失败的。

•轮廓清晰:在设计图标时,最忌边角不分明,还有发虚的像素。用户用起来还以为自己眼睛花了,或者手机出了问题。

•一致性:当你的设计中需要设计多个图标时,那么这些图标一定要保持一致。如果每个图标的风格颜色各不相同,用户不但会眼花缭乱无法集中,还容易头脑负荷。


图标的分类

  1. 基于功能性图标来划分

交互性图标:

具有双向信息传递能力。不仅可以向用户传递某种信息,引导帮助用户执行特定操作,同时也允许用户向程序传递控制信息。从功能重要程度来讲,它的重要性是最高的。例如:登陆注册按钮、开关按钮、数量按钮、点赞、转发分享等都属于交互性图标。

装饰性图标:

主要为了提高页面设计性,加深个性化设计风格。同时,提升用户线上体验感,迎合受众群的偏好,提升设计亲和度。例如:页面升级、空页面、奖励、用户等级等都属于装饰性图标。

说明性图标:

阐明信息图标类型,区分不同功能或内容的视觉标记。简单的说,就是对功能的解释说明。例如:表现行业特性时,金刚区或个别功能区icon设计。面向不同用户群体时,选择风格设计:早教类APP与健康类APP对比就很明显。目的是为了增强页面的层次感和识别度。

  1. 基于表现形式图标来划分

象形图标:

象形图形是最基本、最典型的处理方式。图标与其所传达的含义有直接的、对应的关系。在表现名词性程序图标和功能语义时,采用象形图形是最直接有效的手段。例如表示日历、时间、天气等名词性程序的图标。

隐喻图标:

两种不相关但却有着某种相似特质的事物用icon的方式链接起来,达到记忆和使用目的。例如:设置与工具、云端与云,购物与袋子、会员与钻石、皇冠等等。

工具图标:

主要以行业类别为分类,使用范围广泛,大众或行内人士识别度高,且被长期使用。例如:建筑行业、医疗行业、化工行业等等。

混合图标:

前三种图标的结合,目的在于达到不同的视觉效果和应用结构,多表达设计师个人设计风格或适用某类设计感较强的软件。

  1. 基于设计风格进行分类

面性图标:

使用范围最广、稳定性强、区分页面层次感更高。设计UI页面时,要从页面层级关系和产品功能角度考虑具体运用。面性图标的分类也有很多,不仅仅只有常规的,还有多色、渐变、不透明叠加、插画、扁平投影等等。

线性图标:

使用感更轻盈、精致度更高,简约风格页面使用最多,也是当下流行的风格之一。除了常见的纯色线状图标之外,还分双色或多色、多种粗细结合、缺口型、渐变、描边不透明叠加等等。

扁平化图标:

扁平化图标设计是去掉多余的装饰效果,让“对象”本身作为核心被凸显出来。在设计元素上强调抽象、极简、符号化。

拟物化图标:

拟物化图标设计是追求模拟现实物品的外形和质感,通过叠加高光、纹理、材质、阴影等图层样式对事物进行再现。


2.5D图标:

2.5D图标设计是区别于拟物化图标和扁平化图标之间的一种图标设计风格,没有拟物化那么复杂,又比扁平化更立体。

图标的分类远不止如此,但是万变不离其宗,都是“线性、面性、线面结合”再结合透明度、渐变、颜色叠加、质感、多维空间等表达方式设计出来的。我们除了需要掌握这些内容之外,更需要日积月累的练习和思考,从量到质的变化,根据不同的场景设计出最合适的图标。

在进行UI图标设计的时候,可以根据自己喜欢的造型参照物去进行分析。先抓取到参照物的关键节点,几何绘制出来一个相似的基本图形,这样就形成了一个骨架。接下来我们要做的就是要让图标有血有肉,内容逐渐丰富起来,最终通过不停地修改,成为我们心中最完美的图标造型。