1.2 UI图标设计原则、要素与流程

在UI设计中，图标设计就是将特定的含义转化为图形，或者说把文字语言“翻译”成图形语言。UI图标准确释义是用户体验最为重要的衡量标准之一。图标以明示或隐喻的方式传达其含义，图形蕴含语义的丰富性使得能在方寸之间实现冗长文本所要表达的含义。好的UI图标设计，可以提高软件的普及程度与用户的认知速度。

1.2.1 UI图标设计原则

作为WIMP（Window/Icon/Menu/Pointing Device）界面设计的关键部分，图标在人机交互设计中无所不在。随着人们对审美、时尚、趣味的不断追求，图标设计也不断花样翻新，越来越多精美、新颖、富有创造力和想像力的图标充斥着我们的视界。可是，从可用性的角度讲，并不是越花哨的图标越被用户所接受，图标的可用性要回到它的基本功用去思考。

图标的功用在于建立起计算机世界与真实世界的一种隐喻，或者映射关系。用户通过这种隐喻，自动地理解图标背后的意义，跨越了语言的界限。但是，如果这种映射关系不能被用户轻松并且准确地理解，那么这种图标就不是好的图标。因此，图标的设计应该遵守以下的原则。

易用性原则

综合当前对现有主要产品设计的分析，“以用户为中心”是整个UI图标设计的基本理念。要保证产品可用性，首先从“以用户为中心”的理念衍射出易用性原则。在易用性原则之下，考虑用户视觉和交互习惯，来保证产品的可行性。

逻辑性原则

逻辑性即产品的交互思维，但是交互思维容易影响用户的操作思维。在产品设计理念未完善之前，所生产的产品的逻辑已经在前期用户心中根深蒂固，而新产品的革新不能与之前的产品出现断层，逻辑性的转变需要一个过渡。所以至今依然要遵循前代产品的逻辑性。例如，系统中也并非完全是产品，而是将前期产品与新产品进行了融合。

情感性原则

“以用户为中心”理念的最前期原则便是为冷漠的机器赋予情感，理念和拟物化设计就此诞生。情感化看似不重要，但是在产品品牌竞争中却是一把利剑，情感化设计可以连同设计质量增加对用户的吸引力。所以，在不影响易用性的基础上增加趣味性可以对用户造成依赖感。

直观性原则

直观性之前多应用于“类界”面的设计。例如，网页信息的展示。直观性解决如何让信息更加直接地使人理解，所以直观性设计意在缩短用户与信息之间的交互距离。其中的模块化设计便是最典型的直观性产品设计。

美观性原则

审美理想、审美欲望、审美追求是人与生俱来的，所以审美性也是“以用户为中心”的设计理念的衍生原则。在面对功能性本质的产品时，美观性设计却有着与功能性同等重要的位置。著名艺术评论家约翰·拉斯金曾说过：“生命无视实业是罪孽，实业无美术是兽性。”美观性的设计不仅仅满足了用户的审美需求还可以提升产品的品质与情感性。

1.2.2 UI图标设计要素

形态设计

“形态设计”是塑造图标形象的一个重要方面，“形”是图标的物质形体，是指图标的外形；“态”则指图标可感觉的外观形状和状态，也可理解为图标外观的表情因素。形态是塑造UI可视形象，与消费者进行视觉交流的最直接、最重要的信息载体。同时，形态是信息的载体，设计师通常利用特有的造型语言，进行图标的形态设计。利用图标特有形态向外界传达出设计师的思想和理念，消费者在选购产品时也是通过图标形态所表达出某种信息内容来判断和衡量与其内心所希望的是否一致，并最终做出判断。

形态承载着产品的诸多信息，在UI图标设计过程中，设计师借助特殊的造型展开形态设计，通过特殊的形态实现设计师理念与思想的传递。设计师通常利用特有的设计语言，例如，点、线、形的合理运用，尺度、形状、比例及其相互之间的构成关系操控，形体的分割与组合等，进行产品的形态设计，传递设计师的创意理念与思想。

设计小贴士

常见的视觉元素包含点、线、面、体、空间、光影、色彩、肌理等，其中点、线、面、体、空间是物象的实体本质，而光影、色彩、肌理则是物象的外在表象。“点”是最简洁的形态，点的运用在图标设计中可以起到吸引注视、稳定图式、造型的作用。在某些特殊的构成形式中，点的运用还可以增加画面动感。“线”是表现运动质感的元素，线是点的延伸，是点任意移动所构成的图形，只有长度而没有宽度和厚度。“面”是最直观表现形体轮廓的元素，面是由线的移动所产生的有长度、宽度而无厚度的轨迹。圆形的面带给人以圆润、优雅、完美之感。方形的面给人以坚毅、稳重、端庄之感。三角形的面给人以警觉、灵动、醒目之感。

色彩设计

色彩是最抽象化的语言，作为首要的视觉审美要素，色彩深刻地影响着人们的视觉感受和心理情绪。色彩设计在UI图标设计中处于十分重要的位置，承担着重要的信息传达任务，是塑造形象的关键。人类对色彩的感觉最强烈、最直接，印象也最深刻。色彩属于抽象化的语言，它是视觉审美要素中的一种，通过色彩能够体现人的心理情绪与视觉感受，因此，对于消费者而言，色彩对其影响是直接的、强烈的，进而使消费者对产品的印象更加深刻。因此，在人们的生活与生产过程中，色彩是重要的，它具有一定的识别作用。同时，色彩具有较强的敏感性，还拥有一定的象征意义，对于消费者的影响是深远的。色彩对产品意境的形成有很重要的作用，在设计中，色彩与具体的形、质结合，才能使产品更具生命力。

从色彩的视觉心理角度分析，色彩相对于形和质来说更感性，它的象征作用和对消费者情感的影响力远大于形和质。物体的形状、空间的界限和区别等，都是通过色彩和明暗关系来反映的，人们必须借助于色彩来认识世界、改造世界。因此，色彩在人们的社会生产、生活中具有十分重要的识别功能。

设计小贴士

色彩设计在UI图标设计中扮演着重要的角色，它能促进产品信息的传递，对于产品形象塑造而言是较为关键的内容。通过色彩设计可以实现对产品的区分，在色彩明暗不同的基础上，易于实现对产品空间界限的区别。同时色彩对于人来说是重要的，它可以实现人对世界的认识与改造。色彩对于图标意境的形成有着重要的影响，在UI图标设计过程中，要将色彩与材质、形态等进行有机地结合，在此基础上，产品的生命力将更加顽强，产品的形象也将更加凸显。

材质设计

“材质设计”是构成产品的基本要素。材质，是被消费者直接视及和触及的对象，其外部形态、表面纹理与质感表现都直观地表达了产品形象、消费者可以从中获取产品的自然属性、科技属性和社会属性。材质是构成产品的基本要素，没有材质，我们所说的产品也就无从谈起。

材质设计作为基本的要素构成了产品。消费者接触产品时，主要接触的对象便是产品的材质，如表面纹理与外部形态等，此时的质感直接传递着产品的形象。通过产品材质，消费者可以了解产品的属性，如自然属性、社会属性与科技属性等。

设计小贴士

视觉意义上的“材质”是指按照客观世界中物体表面的纹理组织结构，运用计算机制作技巧进行模仿，进而达到与客观世界真实存在的物体表面一致的肌理效果。在自然界中，客观存在物体表面肌理的形成是多种因素造成的，有自然环境下自然力影响形成的自然肌理，也有受外力作用产生成的人造肌理，此外还有生物界动植物本身结构的纹理等。材质肌理的存在为世界的面貌增添了美丽且富于变化的视觉效果，日常生活中，我们应多留意大自然中多种多样的材质肌理效果，在对这些繁复而华丽的肌理的观赏中不断地提升对客观世界的认识和感受。

1.2.3 UI图标设计流程

第一阶段：图标创意

根据项目需求确定图标的风格。在UI图标设计初始阶段，常用“风格评测”的方法来确定图标设计项目走什么风格路线。这也是项目前期用户研究的结果，有潜力的公司会制定“用户角色”，用来指导界面视觉风格方向、界面内容建构和交互设计等。

知识链接

设计小贴士

用户角色信息来源于真实的用户，设计师通过收集真实用户的使用习惯、行为和想法，将关注点时刻放在用户身上，从而设计以用户为导向的产品。用户对产品的需求包括认知需求和情感需求。用户的认知需求决定了产品的功能和构造，用户的情感需求则决定了产品的外观和风格。一旦确定了产品的功能构造与外观风格，那么该产品就不会脱离以用户为中心的轨道。用户角色是通过强调发掘使用产品的几种不同类型的独特个体用户生活经历，专注于设计方面单独用户角色的需要，帮助设计师在设计过程中保持设计目标，最终实现设计目标的设计过程。

当我们接到设计任务后，我们怎么开始设计图标呢？首先我们要看懂界面需求，对每个功能图标的定义要非常清楚，否则我们设计的结果将导致用户难以理解，这个也是图标设计所关心的可用性问题。

理解功能需求后，我们要收集很多关于“词语——图形”之间能转化的元素，用生活中的物或其他视觉产品来代替所要表达的功能信息或操作提示。

第二阶段：绘制图标草图

这个阶段就是把我们的创意绘制出来，检验视觉关系，也就是在视觉方面多在草图上推敲，这样效率高些，避免在渲染完后后悔。首先要确定图标的透视，这是关系到一套方案中的每个图标的透视方向，这是在图标设计一致性方面的基本要求，透视统一，然后一步步地添加细节。

第三阶段：草图制作与渲染

为恰当的界面设计任务制作恰当的图标小部件，可以帮助增强应用软件界面风格的一致性，同时也使得应用软件很容易构造。将草图绘制成可以应用的图标，需要相关制作软件的帮助。