从零开始 UI图标设计与制作第3版

UI图标设计与制作/汪兰川，刘春雷著.--3版.--北京：人民邮电出版社，2021.4

ISBN　978-7-115-55778-0

Ⅰ.①U…　Ⅱ.①汪…②刘…　Ⅲ.①人机界面—程序设计　Ⅳ.①TP311.1

中国版本图书馆CIP数据核字（2021）第036879号

◆著　汪兰川　刘春雷

责任编辑　赵轩

责任印制　陈犇

◆人民邮电出版社出版发行　　北京市丰台区成寿寺路11号

邮编　100164　　电子邮件　315@ptpress.com.cn

网址　https://www.ptpress.com.cn

雅迪云印（天津）科技有限公司印刷

◆开本：787×1092　1/16

印张：13.5　　2021年4月第3版

字数：311千字　　2021年4月天津第1次印刷

作者简介

沈阳建筑大学设计艺术学院副教授，现为辽宁省美术家协会会员，辽宁省动漫艺委会委员。

近年来，先后编著出版了《动画概论》《Flash CS3从基础到应用》《动漫美术欣赏教程》《After Effects应用教程》《Flash MV制作》《包装色彩设计》《包装图形设计》等专著与教材，并在核心刊物发表多篇论文。主要工作业绩包括漫画作品《中国式教育》获得第十一届全国美展入选奖；招贴设计获得首届及第二届辽宁省艺术设计作品展优秀奖；动画短片《寻城记》获得第二届辽宁省艺术设计作品展优秀奖、第一届辽宁省动漫作品展铜奖。

沈阳航空航天大学设计艺术学院视觉传达系主任，副教授，硕士研究生导师。

现为辽宁省美术家协会会员，中国包装联合会包装教育委员会委员，中国宇航协会会员，辽宁省包装联合会主任委员，中文核心期刊《包装工程》审稿专家，沈阳市青年美术家协会理事。

近年来，编著出版了《创意配色与设计》《纸品设计与制作工艺》《包装配色设计》《纸品创意与设计》《包装材料与结构设计》《包装设计印刷》《包装文字与编排设计》《包装造型创意设计》《构成艺术》《广告构图精粹》《现代动漫教程》等著作与教材40余部。绘画、设计作品连续入选第十届、第十一届全国美展，获得国家级、省级展览及其他各类奖项数十项。在学术期刊发表学术论文数十篇，主持科研项目数项。

前言

随着时代的发展、科技的进步，越来越多的移动终端设备出现在人们的日常生活中，极大地便利了人们的工作与生活。智能手机、平板电脑等高科技产品在生活中逐渐普及，有着丰富功能和独特定位的软硬件产品也不断出现，而界面优美、操作简易、使用方便的产品总是更受人们的欢迎，UI设计的概念也随之提出。UI即为用户界面，UI设计是指对软件的人机交互、操作逻辑、界面美观的整体设计，其主要目的是使软件有鲜明的特点且简单易用，使界面更加美观，给用户带来独特的视觉感受，拉近商品与用户间的距离。UI设计在科技飞速发展的今天，正在以非常快的速度被用户认可和熟知。UI设计不同于以往的设计，其注重以简约的形式将内容呈现在人们眼前。图标是 UI 界面设计中基本的要素，它以图像符号将软件功能更加直观地表现出来，方便用户操作软件。UI设计是计算机技术与艺术深度结合的产物。在国际国内经济社会需求的大背景下，懂得UI设计的跨学科、复合型的专业人才将越来越受企业的欢迎。

第1章认识UI图标与UI图标设计

UI即用户界面（User Interface）的英文缩写。UI中的图标（Icon）是具有指代意义或标识性质的图形。UI设计则是指对软件的人机交互、操作逻辑、界面外观的整体设计。好的UI设计不仅能让软件变得有个性、有品位，还能让软件的操作变得舒适、简单、自由，并充分体现软件的定位和特色。

今天，用户除了通过文本来获取软件的功能信息，更主要的是通过图标来识别和理解界面。UI图标设计就是将一定的含义转化为图形，或者说把文字语言“翻译”成图形语言，来达到标识数据、引导选择、切换开关、状态指示等目的。UI图标具有高度浓缩并快捷传达信息、便于记忆的特点。相比命令语言界面，图形用户界面的人机交互更多依赖于视觉元素，不需要用户记住系统指令，就可理解界面中图标所代表的含义，大大降低了用户的记忆负荷。功能性指令文字的描述通常冗长、长短不一，而图标有着统一的规格，更节省屏幕空间，更易于界面布局规划。尤其是在掌上设备中，图标使得屏内的人机信息交换量变大，形式也变得更加丰富，如图1-1所示。

1.2 UI图标的分类

UI图标按照其功能属性划分，可以分为启动图标和工具栏图标。

启动图标就是代表产品的象征符号，用户单击图标后可运行及打开软件，如图1-2所示。启动图标和标志设计有一定的相似之处，具有产品或者企业的象征意义。标志设计则更注重抽象和象征寓意，并更多地从企业文化视角出发，强调寓意的深度。而启动图标的应用环境以电子屏幕为主，讲究图标的可用性。

工具栏图标就是对软件起到解说和装饰功能的图标，是文字化解释的图标化设计，用以增强界面设计感和用户体验的趣味性。简约、概括、传达性是工具栏图标的主要特点，系列化设计也是工具栏图标区别于启动图标的典型特征，如图1-3所示。

按照视觉风格划分，UI图标可以分为拟物化图标和扁平化图标。

拟物化图标是指图标与实物在视觉上尽可能地相像，通过造型、质感、文理、阴影等效果的运用对实物进行再现，让人可以一眼就看出图标表现的是什么东西，如图1-4所示。拟物化设计也有一些致命的缺点，例如过分注重外观，缺乏对功能的展现。或是将时间大量花在各种效果的呈现上，忽略了形式美的表现。拟物化设计确实引领过UI设计，功不可没，设计师也可以从中得到启发，同时，绘制拟物化图标可以锻炼设计技能，是设计师学习UI设计的必经阶段。

扁平化图标是指摒弃高光、阴影和透视感的效果，通过抽象、简化、符号化的设计元素来表现功能的图标，如图1-5所示。扁平化表现极简抽象，常见元素包括矩形色块、大字体、光滑的边缘，现代感强，让用户想去体会这是什么东西。扁平化图标的交互核心在于功能本身，所以去掉了冗余的界面装饰。扁平化更加注重造型的形式而摒弃细枝末节的设计，多以简约的线条、形状、高级的渐变配色和元素构成关系夺人眼球，简约而不简单。

1.3 UI图标的释义方式与感知设计

图标的准确释义是用户体验最为重要的衡量标准之一。释义精准可以对软件的推广有着巨大的推动作用。图标释义手段可遵循明确释义、间接释义与语义叠加三个原则。通常利用象形图形、语标符号、表意图形、抽象符号、语义叠加等方式来表现富含语义的图标，以及利用图标语义引导用户行为是图标设计的关键点。

明确释义是指图形形象直接说明其指代对象、功能和状态等。具体可用象形图形、语标符号表示。

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

语标符号是指蕴含特指含义的一个词（组）或产品标识（logo）的图形符号。程序名称简称、专业术语缩写、产品logo图像等均可归纳为语标符号。IE浏览器的图标就是借用Explorer这个单词的首字母“E”，如图1-7所示。随着网络语言的普遍流行，用户都认可PS为软件Photoshop，AI为软件Illustrator的简称。需要注意的是，这些语标符号需要在用户达成共识的基础上加以利用，否则容易造成难以释义的情况。例如，VB、VC可以作为编程语言的缩写，可以在一些面向专业人员的软件界面设计中使用，但对于没有相关认知的人群，这些缩写则很难将其释义传达给用户。

间接释义是指图标与其所表达的含义没有直接的对应关系，而是通过“意指”“隐喻”“寓意”等知觉类比方式将图标含义转换为视觉图形。根据现实世界已经存在的事物为蓝本，将人们对这些事物的认知联想运用到图标设计中，从而减少用户认知的难度。

间接释义是指导用户界面设计和实现的通用手段。具体实施手段可表现为表意图形和抽象符号。

表意图形通过隐喻的方式来表述含义。隐喻是以“相似”和“联想”为基础的，即图标图形与其语义存在的某一相似之处，在转化抽象的动词性文本时较为有效。如保存文件、设置、搜索、录音这些动词性文字，可以通过联想、类比等思维方式，将语义关联为动作执行的对象或参与物等具象事物的图形。图1-8所示为“放大镜”意为搜索图标。

一些数学、逻辑、科学、音乐、语言中的标点符号都可以作为抽象图形表示一定的含义。例如，标点符号中的问号“？”可与问题、答疑、帮助等语义关联起来，如图1-9所示。图1-10给出了利用抽象符号来表示一定含义的图标设计案例。注意，有些抽象符号未必能使用户快速理解其内涵，如代表蓝牙和无线网络的图标。但是随着反复接触和视觉强化，用户已普遍认可这些符号。

图标图形所表达出的释义，必须结合用户普遍认知、认可的心理基础，其内容才能真正被用户所理解。

语义叠加指综合、交叉运用明释义、暗释义等释义手段，传达语义更复杂或语义相似的系列图标含义。在设计一系列含义接近的图标时，可以组合一些已有的基础图标来得到含义更为丰富的图标。报纸可以作为与新闻有关的图标来使用，但是，当要设计更细分的国内新闻与国际新闻的图标时，单一的具象图形很难表示到位，如图1-11所示。

UI图标包括系统图标和应用图标，其表现形态有图形表现、文字表述、图形和文字相结合3种形式。从符号学的视角看，图标与界面的关系，即符号与符号、符号与背景之间的关系，不再是以往单纯图与底的关系，而是具有某种内在联系。界面中的图标不仅是单纯的图形化视觉符号，更是界面的情感传达方式。这种具有情感化特征的符号学图标，代替了传统纸质图文说明的形式，引导用户在操作过程中正确应用各种App软件，具有较强的亲和力。具有情感化的图标交互设计以人们的行为习惯作为人机交互设计的突破点，将图标设计为日常生活中常见、常用且直观和表象化的图形，让用户在体验、参与交互设计时身心愉悦，从而满足使用者的情感需求。人类的感知系统主要分为听觉、味觉、视觉、触觉、味觉，而其中视觉系统最为重要。界面产品的设计主要依靠的是用户利用“视觉刺激思维和人机交互处理模型”来达到人机互动从而达到传递或获取信息的结果，如图1-12所示。

视觉设计是在UI设计中可用性和交互设计研究的综合体现。视觉思维是感知与思维、艺术与科学的结合，能将人类本能的视觉感知、图形设计以及视觉可视化联系起来。在达到使用功能设计的基础上，现代GUI设计已经成为辅助交互，满足用户感知需求、审美需求的和自我实现需求的功能性的视觉设计。用户交互体验设计与UI设计是以用户为中心的设计，是认知科学学会发起人之一唐纳德·亚瑟·诺曼（Donald Arthur Norman）所创立的研究室首创的。设计来源于用户的任务、目标与环境，整个设计过程的重点是对目标用户的全面理解，并且使其参与从开始到结束的整个设计过程中去。用户使用产品的感受反馈给设计开发商，设计开发商根据用户的交互体验感受对设计进行改良，如此的设计关系被业内称之为“螺旋式迭代设计关系”，如图1-13所示。

这种关系让需求与设计更加深入和细致，通过这样的交互体验设计方式，我们很容易得到目标用户对产品的直接感受，也可以节约研究评估的成本，更具有较佳的客观性。我们知道，最初的许多需求往往只是一纸说明，但是对于那些需要视觉任务分析的设计项目来说，“螺旋式迭代设计关系”能够带来需求与设计的良性循环，使设计更加符合用户需求。

视觉思维在UI设计中的涉及面较为广泛，包括了UI设计的整体设计风格及构图、图形语言、色彩因素、视觉层级关系设计和交互动画设计5方面内容，如图1-14所示。

通过视觉思维在UI设计中所涉及的方方面面与交互设计互相配合、融合应用，卓越的UI设计才能为用户提供更完美的交互体验。采用视觉思维导向的UI设计，能够帮助系统提高实用性与可用性，从而提高用户的使用效率。

1.4 UI图标设计原则与制作流程

好的UI图标设计，可以提高软件的普及程度与用户的认知速度。作为界面设计的关键部分，图标在人机交互设计中无所不在。随着人们对审美、时尚、趣味的不断追求，图标设计也不断翻新花样，越来越多精美、新颖、富有创造力和想象力的图标充斥着我们的视界。可是，从可用性的角度讲，并不是越花哨的图标越被用户所接受，图标的可用性要回归它的基本功能。图标的功能在于建立起计算机世界对真实世界的隐喻或者映射关系。用户通过这种隐喻，自然地理解图标背后的意义。但是，如果这种映射关系不能被用户轻松并且准确地理解，那么这种图标就不是好的图标。因此，图标的设计应该遵守以下原则。

综合当前对现有主要UI设计的分析，“以用户为中心”是整个设计的基本理念。UI产品首先要保证产品可用性，“以用户为中心”的理念衍射出易用性原则。在易用性原则之下，通过对用户视觉规律、交互习惯的规律应用，来保证产品的可行性。以用户为中心的开发设计理念如图1-15所示。

逻辑性体现了产品的交互思维，交互思维继而影响用户的操作思维。新产品的革新不能与之前的同类产品出现断层，逻辑性的转变需要一个过渡，所以新产品依然要遵循前代产品的逻辑性。

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

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

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

1.5 UI图标的设计要素

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

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

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

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

材质是构成产品的基本要素，如果没有材质，产品也就无从谈起。一方面，材质保证了产品的使用功能；另一方面，材质成为直接被用户视及和触及的对象，其外部形态与表面纹理、质感等视、触觉要素都直观地表达了产品形象。

材质设计作为基本的要素构成了产品。用户接触产品时，主要接触的对象便是产品的材质，如表面纹理与外部形态等，此时的质感直接传递着产品的形象。通过产品材质，用户可以了解产品的属性，如自然属性、社会属性与科技属性等。UI图标的材质效果如图1-18所示。

1.6 UI图标设计流程

根据项目需求确定图标的风格。在设计UI图标的初始阶段，常用“风格评测”的方法来确定图标设计项目的风格路线，这也是项目前期用户研究的结果。当我们接到设计任务后，怎么开始设计图标呢？首先我们要看懂需求，对每个功能图标的定义要非常清楚，否则我们设计的结果将导致用户难以理解，这也是图标设计所涉及的可用性问题。理解功能需求后，我们要收集很多关于“词语→图形”之间能转化的元素，用生活中的事物或其他视觉产品来代替所要表达的功能信息或操作提示。

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

为恰当的界面设计任务制作恰当的图标小部件，不但可以增强应用软件界面风格的一致性，同时也可以使得应用软件很容易构造。将草图绘制成可以应用的图标，需要相关制作软件的帮助。图标之间的“视觉差异对比”要比文本更强，这样有利于用户更快地定位到所需要的内容，提高视觉目标搜索的效率。虽然不同文化对某一图形含义的理解可能存有差异，但是图形符号还是比文字更加通用。对于UI界面设计而言，利用图标更易于避免文字翻译的缺陷。同时，图标也可有效降低因开发不同语言版本的成本。计算机制作及渲染效果如图1-20所示。

在现有的UI设计流程中，通常包含下面4个角色：产品经理、交互设计师、视觉设计师以及用户研究分析师。在一个完整的UI设计流程中，他们各自承担着不同的角色，相互协作，完成流程中的工作。现有UI设计流程的分工，其最终目的，就是通过不同专业、不同职责的设计角色使用其专业技能，合力打造一款优秀的产品，创造最大的产品价值。UI设计流程如图1-21所示。

在这个阶段，主要由产品经理负责。产品经理在这个阶段需要根据市场情况、竞争产品的状态以及自身公司的战略发展目标，对产品进行概念设计。通常情况下，在这个阶段产品经理需要输出产品设计初稿。在产品设计初稿中，产品设计的理念被表达出来，它不需要像交互设计师那样制作非常精确的UI布局，也不需要设定人机交互规范，只需要表达出产品经理的产品意图即可。UI设计初稿如图1-22所示。

在产品概念设计通过评审后，就会进入产品的UI交互设计阶段。UI交互设计阶段需要融合两方面的元素，一方面是产品的功能，另一方面是产品所属平台的可用性和人机交互的规范性。UI交互设计师需要将这两方面元素融入产品的UI设计稿中，产品可用性的优劣通常都在这个阶段体现出来。UI交互设计层级如图1-23所示。

在交互设计师完成UI交互设计后，输出UI交互设计图。视觉设计师开始工作，设定视觉风格，输出视觉定稿，交付给整个设计团队进行评审。在评审确认视觉定稿后，再输出视觉切图，给到开发人员进行开发，来完成样稿（Demo）或者正式的产品。视觉设计师在这个阶段给予产品最为重要的特性——色彩。因此，对于在用户可以看到的产品层面上，几乎都是由视觉设计师完成的。视觉设计完成稿如图1-24所示。

在这个阶段中，用户研究分析师们会利用上个阶段输出的Demo，约谈用户，或者使用问卷的形式，来记录用户的反馈内容。通过这个环节，用户对产品的一些疑问将被收集起来，一并反馈给产品UI设计团队。

在整个UI设计的流程中，产品设计概念最初来源于产品经理。在进行产品设计时，他们需要考虑目标用户特征、竞争产品、产品是否符合公司的业务模式等诸多因素。产品经理设计出来的产品理念，通常比较粗糙，只考虑到功能点，还未考虑到具体的人机交互。当他们完成产品的初稿后，就会转交给交互设计师进行人机交互规范的设计。

好的产品设计理念既要满足用户的需求，也要为公司带来较好的盈利，符合公司短期或者长期发展的战略目标。一般而言，产品经理管理的是一个或者多个有形产品。但是，产品经理也可以用于描述管理无形产品，如音乐、信息和服务的人。有形产品行业产品经理的角色与服务业中的项目总监类似。

交互设计师的主要工作就是将产品经理的产品设计图，通过专业的人机交互技术，重新设计布局，让UI设计更加符合用户习惯。同时，交互设计师也会对产品进行行为设计。行为设计是指各种用户操作后的效果设计，例如按钮按下后的表现形式应该是怎样的，这些UI行为都需要设计行为。产品经理和交互设计师负责产品初期的交互行为，因为他们的工作经过抽象后有相似的设计需求，因此归类为一个角色，后续将统一为交互设计师角色。

如果将交互设计师比喻为赋予UI骨骼和行动的工程师的话，那么视觉设计师则是为UI设计生命色彩和个性的伟大创造者。视觉设计师通过UI交互稿进行色彩、尺寸、间距等控件的设计，为产品带来生命力，最终输出视觉设计稿。视觉稿就是视觉设计师对UI交互稿进行视觉美化的成果。UI交互稿在设计时，是完全不考虑色彩搭配的，只考虑人机交互的逻辑，而视觉稿，更多的是去定义UI的尺寸和色彩，给软件产品注入生命色彩。

用户研究分析师负责验证产品设计是否符合用户的使用需求。通过使用软件原型，用户研究分析师们可以找到软件产品存在的设计缺陷。如UI按钮位置不符合用户预期，文字提醒没有满足用户认知，UI色彩过于鲜艳等问题，都需要用户研究分析师通过研究的手段，反馈给设计团队进行优化。