详情
本书全面系统地阐述了UI图标设计理念、创作过程、设计方法以及各类界面的设计技术等内容，结合Photoshop软件中常用的各种工具和方法，有针对性地剖析UI设计的设计思路和制作过程。本书分别介绍UI设计概述、Photoshop功能、各类图形、图标设计等，并详细介绍了一系列综合项目的设计过程。
书名：UI图标设计从入门到精通
ISBN：978-7-115-43476-0
本书由人民邮电出版社发行数字版。版权所有，侵权必究。
您购买的人民邮电出版社电子书仅供您个人使用，未经授权，不得以任何方式复制和传播本书内容。
我们愿意相信读者具有这样的良知和觉悟，与我们共同保护知识产权。
如果购买者有侵权行为，我们可能对该用户实施包括但不限于关闭该帐号等维权措施，并可能追究法律责任。
• 著 汪兰川 刘春雷
责任编辑 赵 轩
• 人民邮电出版社出版发行 北京市丰台区成寿寺路11号
邮编 100164 电子邮件 315@ptpress.com.cn
• 读者服务热线：(010)81055410
反盗版热线：(010)81055315
本书从轻松进入UI图标设计流程、掌控图标创意原则、图标设计与软件操作、扁平化图标设计、质感图标的设计、用户角色图标设计到拟物化图标设计逐一讲解，使读者由浅入深，逐步了解使用Photoshop制作图标的整体设计思路和制作过程。
本书全面系统地阐述了UI设计理念、创作过程、设计方法以及各类界面的设计技术等内容，以一个逐渐深化的方式为用户呈现设计中的重点门类和制作方法，使读者全面且深入地掌握各种类别的图标设计案例。结合Photoshop软件中常用的各种工具和方法，有针对性地剖析UI设计的设计思路和制作过程，真正做到完全解析、完全自学完备的命令检索，软件功能索引，帮助您快速、准确查询信息学习与练习结合，通过“概念链接”“设计小贴士”，助您轻松掌握并巩固图标设计流程与技巧。
本书分为图标概述篇、扁平化风格篇、色彩篇、材质篇、用户角色篇和拟物化风格篇六个层次，结合实例展示操作方法与处理效果。
全书按照知识点、实战案例、技术秘籍的结构来安排，同时穿插各种技术提示，结构清晰，讲解详细，适合广大UI图标设计初学者，以及有志于从事平面设计、UI设计、图标设计、网页制作、等工作的人员使用。同时，本书也可以作为各培训学校及大中专院校相关专业的教学参考书和各类培训班的学员参考阅读。
汪兰川
沈阳建筑大学设计艺术学院教师，讲师。现为辽宁省美术家协会会员，辽宁省动漫艺委会委员。
近年来，先后编著出版《动画概论》、《FlashCS3从基础到应用》、《动漫美术欣赏教程》、《After Effects应用教程》、《Flash MV制作》、《包装色彩设计》、《包装图形设计》等专著与教材多部。在核心刊物发表多篇论文。漫画作品“中国式教育”获得第十一届全国美展入选奖；招贴设计获得首届、第二届辽宁省艺术设计作品展优秀奖；动画短片“寻城记”获得第二届辽宁省艺术设计作品展优秀奖、第一届辽宁省动漫作品展铜奖等。
刘春雷
现任沈阳航空航天大学设计艺术学院视觉传达系主任，副教授，硕士研究生导师。
辽宁省美术家协会会员，中国包装联合会包装教育委员会委员，中国宇航协会会员，辽宁省包装联合会主任委员，中文核心期刊《包装工程》审稿专家，沈阳市青年美术家协会理事。
近年来，编著出版《创意配色与设计》、《纸品设计与制作工艺》、《包装配色设计》、《纸品创意与设计》、《包装材料与结构设计》、《包装设计印刷》、《纸品设计与制作工艺》、《包装文字与编排设计》、《包装造型创意设计》、《构成艺术》、《广告构图精粹》、《现代动漫教程》等著作与教材四十余部。绘画、设计作品连续入选第十届、第十一届全国美展，获得国家级、省级展览及其他各类奖项数十项。在学术期刊公开发表学术论文数十篇。主持科研项目数项。
UI设计，即用户界面设计，是指为用户提供的人机交互的可视化界面。如何设计让用户满意的，给用户带来方便快捷与快乐体验的界面，已经成为设计人员不断深入研究的主题。无论是哪一种操作系统，UI设计是呈现给用户最直接的对象。无论软件多么优秀与出众，如果没有一个设计合理的界面，它都不会成为吸引用户，让用户满意的好产品。当前，在激烈的市场竞争中，出众的用户界面设计往往会使产品处于不败之地。
UI即User Interface（用户界面）的简称。UI设计则是指对软件的人机交互、操作逻辑、界面美观的整体设计。UI是用户和某些系统进行交互方法的集合，这些系统不单单指电脑程序，还包括某种特定的机器、设备、复杂的工具等。好的UI设计不仅是让软件变得有个性、有品味，还要让软件的操作变得舒适、简单、自由，充分体现软件的定位和特点。
在人和机器的互动过程（Human Machine Interaction）中，有一个层面，即我们所说的界面（Interface）。从心理学意义来分，界面可分为感觉（视觉、触觉、听觉等）和情感两个层次。用户界面设计是屏幕产品的重要组成部分，是一个复杂的有不同学科参与的工程，认知心理学、设计学、语言学等在此都扮演着重要的角色。
UI设计中“视觉、触觉、听觉”三者的关系
GUI（Graphical User Interface）即图形化人机交互用户界面设计。GUI是一种结合计算机科学、美学、心理学、行为学，以及各商业领域需求分析的人机系统工程，强调人—机—环境三者作为一个系统进行总体设计。 这种面向客户的系统工程设计其目的是优化产品的性能，使操作更人性化，减轻用户的认知负担，使其更适合用户的操作需求，直接提升产品的市场竞争力。纵观国际相关产业在图形化用户界面设计方面的发展状况，许多国际知名公司早己意识到GUI在产品方面产生的强大增值功能，以及带动的巨大市场价值，因此在公司内部设立了相关部门专门从事GUI的研究与设计工作，同行业间也成立了若干机构，以互相交流GUI设计理论与经验为目的。随着中国IT产业、移动通信产业、家电产业的迅猛发展，在产品的人机交互界面设计水平发展上日显滞后，这对于提高产业综合素质，提升与国际同行业的竞争能力等方面无疑起了制约作用。
GUI设计
图标（Icon）是具有指代意义或标识性质的图形。桌面图标是软件标识，界面中的图标是功能标识，在计算机软件中，图标是程序标识、数据标识、命令选择、模式信号或切换开关、状态指示的标志。在生活中，人们除了通过文本来获取信息，更主要的是通过各类图标来识别和理解各种信息。UI图标具有高度浓缩快速传达信息和便于记忆的特点。相比命令语言界面，图形用户界面的人机交互更多的是依赖视觉元素，不需要回忆系统指令，用户即可理解界面中图标所代表的含义，大大降低了记忆负荷。功能性指令文字的描述通常冗长、长短不一，而图标有着统一的大小规格，更节省屏幕空间，更易于界面布局规划。尤其是现在流行的掌上设备，图标使得屏内的人机信息交换量变大、形式变得更加丰富。
图标之间的“视觉差异对比”要比文本更强，这样有利于用户更快地定位到所需要的内容，提高视觉目标搜索的效率。虽然不同文化对某一图形含义的理解可能存有差异，但是图形符号还是比文字更加通用。对于UI界面设计而言，利用图标更易避免文字翻译的缺陷。同时，图标也可有效降低因开发不同语言版本所引起的成本升高的问题。
UI图标设计
在UI设计中，图标设计就是将特定的含义转化为图形，或者说把文字语言“翻译”成图形语言。UI图标准确释义是用户体验最为重要的衡量标准之一。图标以明示或隐喻的方式传达其含义，图形蕴含语义的丰富性使得能在方寸之间实现冗长文本所要表达的含义。好的UI图标设计，可以提高软件的普及程度与用户的认知速度。
作为WIMP（Window/Icon/Menu/Pointing Device）界面设计的关键部分，图标在人机交互设计中无所不在。随着人们对审美、时尚、趣味的不断追求，图标设计也不断花样翻新，越来越多精美、新颖、富有创造力和想像力的图标充斥着我们的视界。可是，从可用性的角度讲，并不是越花哨的图标越被用户所接受，图标的可用性要回到它的基本功用去思考。
图标的功用在于建立起计算机世界与真实世界的一种隐喻，或者映射关系。用户通过这种隐喻，自动地理解图标背后的意义，跨越了语言的界限。但是，如果这种映射关系不能被用户轻松并且准确地理解，那么这种图标就不是好的图标。因此，图标的设计应该遵守以下的原则。
综合当前对现有主要产品设计的分析，“以用户为中心”是整个UI图标设计的基本理念。要保证产品可用性，首先从“以用户为中心”的理念衍射出易用性原则。在易用性原则之下，考虑用户视觉和交互习惯，来保证产品的可行性。
逻辑性即产品的交互思维，但是交互思维容易影响用户的操作思维。在产品设计理念未完善之前，所生产的产品的逻辑已经在前期用户心中根深蒂固，而新产品的革新不能与之前的产品出现断层，逻辑性的转变需要一个过渡。所以至今依然要遵循前代产品的逻辑性。例如，系统中也并非完全是产品，而是将前期产品与新产品进行了融合。
“以用户为中心”理念的最前期原则便是为冷漠的机器赋予情感，理念和拟物化设计就此诞生。情感化看似不重要，但是在产品品牌竞争中却是一把利剑，情感化设计可以连同设计质量增加对用户的吸引力。所以，在不影响易用性的基础上增加趣味性可以对用户造成依赖感。
直观性之前多应用于“类界”面的设计。例如，网页信息的展示。直观性解决如何让信息更加直接地使人理解，所以直观性设计意在缩短用户与信息之间的交互距离。其中的模块化设计便是最典型的直观性产品设计。
审美理想、审美欲望、审美追求是人与生俱来的，所以审美性也是“以用户为中心”的设计理念的衍生原则。在面对功能性本质的产品时，美观性设计却有着与功能性同等重要的位置。著名艺术评论家约翰·拉斯金曾说过：“生命无视实业是罪孽，实业无美术是兽性。”美观性的设计不仅仅满足了用户的审美需求还可以提升产品的品质与情感性。
“形态设计”是塑造图标形象的一个重要方面，“形”是图标的物质形体，是指图标的外形；“态”则指图标可感觉的外观形状和状态，也可理解为图标外观的表情因素。形态是塑造UI可视形象，与消费者进行视觉交流的最直接、最重要的信息载体。同时，形态是信息的载体，设计师通常利用特有的造型语言，进行图标的形态设计。利用图标特有形态向外界传达出设计师的思想和理念，消费者在选购产品时也是通过图标形态所表达出某种信息内容来判断和衡量与其内心所希望的是否一致，并最终做出判断。
形态承载着产品的诸多信息，在UI图标设计过程中，设计师借助特殊的造型展开形态设计，通过特殊的形态实现设计师理念与思想的传递。设计师通常利用特有的设计语言，例如，点、线、形的合理运用，尺度、形状、比例及其相互之间的构成关系操控，形体的分割与组合等，进行产品的形态设计，传递设计师的创意理念与思想。
圆形“面”的UI图标设计
方形“面”的UI图标设计
三角形“面”的UI图标设计
设计小贴士
常见的视觉元素包含点、线、面、体、空间、光影、色彩、肌理等，其中点、线、面、体、空间是物象的实体本质，而光影、色彩、肌理则是物象的外在表象。“点”是最简洁的形态，点的运用在图标设计中可以起到吸引注视、稳定图式、造型的作用。在某些特殊的构成形式中，点的运用还可以增加画面动感。“线”是表现运动质感的元素，线是点的延伸，是点任意移动所构成的图形，只有长度而没有宽度和厚度。“面”是最直观表现形体轮廓的元素，面是由线的移动所产生的有长度、宽度而无厚度的轨迹。圆形的面带给人以圆润、优雅、完美之感。方形的面给人以坚毅、稳重、端庄之感。三角形的面给人以警觉、灵动、醒目之感。
色彩是最抽象化的语言，作为首要的视觉审美要素，色彩深刻地影响着人们的视觉感受和心理情绪。色彩设计在UI图标设计中处于十分重要的位置，承担着重要的信息传达任务，是塑造形象的关键。人类对色彩的感觉最强烈、最直接，印象也最深刻。色彩属于抽象化的语言，它是视觉审美要素中的一种，通过色彩能够体现人的心理情绪与视觉感受，因此，对于消费者而言，色彩对其影响是直接的、强烈的，进而使消费者对产品的印象更加深刻。因此，在人们的生活与生产过程中，色彩是重要的，它具有一定的识别作用。同时，色彩具有较强的敏感性，还拥有一定的象征意义，对于消费者的影响是深远的。色彩对产品意境的形成有很重要的作用，在设计中，色彩与具体的形、质结合，才能使产品更具生命力。
图标的色彩设计
从色彩的视觉心理角度分析，色彩相对于形和质来说更感性，它的象征作用和对消费者情感的影响力远大于形和质。物体的形状、空间的界限和区别等，都是通过色彩和明暗关系来反映的，人们必须借助于色彩来认识世界、改造世界。因此，色彩在人们的社会生产、生活中具有十分重要的识别功能。
设计小贴士
色彩设计在UI图标设计中扮演着重要的角色，它能促进产品信息的传递，对于产品形象塑造而言是较为关键的内容。通过色彩设计可以实现对产品的区分，在色彩明暗不同的基础上，易于实现对产品空间界限的区别。同时色彩对于人来说是重要的，它可以实现人对世界的认识与改造。色彩对于图标意境的形成有着重要的影响，在UI图标设计过程中，要将色彩与材质、形态等进行有机地结合，在此基础上，产品的生命力将更加顽强，产品的形象也将更加凸显。
“材质设计”是构成产品的基本要素。材质，是被消费者直接视及和触及的对象，其外部形态、表面纹理与质感表现都直观地表达了产品形象、消费者可以从中获取产品的自然属性、科技属性和社会属性。材质是构成产品的基本要素，没有材质，我们所说的产品也就无从谈起。
材质设计作为基本的要素构成了产品。消费者接触产品时，主要接触的对象便是产品的材质，如表面纹理与外部形态等，此时的质感直接传递着产品的形象。通过产品材质，消费者可以了解产品的属性，如自然属性、社会属性与科技属性等。
木质材质UI图标设计
坚硬而光亮材质的UI图标设计
设计小贴士
视觉意义上的“材质”是指按照客观世界中物体表面的纹理组织结构，运用计算机制作技巧进行模仿，进而达到与客观世界真实存在的物体表面一致的肌理效果。在自然界中，客观存在物体表面肌理的形成是多种因素造成的，有自然环境下自然力影响形成的自然肌理，也有受外力作用产生成的人造肌理，此外还有生物界动植物本身结构的纹理等。材质肌理的存在为世界的面貌增添了美丽且富于变化的视觉效果，日常生活中，我们应多留意大自然中多种多样的材质肌理效果，在对这些繁复而华丽的肌理的观赏中不断地提升对客观世界的认识和感受。
根据项目需求确定图标的风格。在UI图标设计初始阶段，常用“风格评测”的方法来确定图标设计项目走什么风格路线。这也是项目前期用户研究的结果，有潜力的公司会制定“用户角色”，用来指导界面视觉风格方向、界面内容建构和交互设计等。
知识链接
“风格评测”——最早是由科学家赖丁和雷纳提出的一个结构模式，开发了一套认知风格的综合测评系统，即认知风格评测系统（CSA）。此系统直接测量“整体/分析”和“言语/表象维度”的两端，由3个子测验构成。
“用户角色”是一种常用的以用户为中心的研究方法，“用户角色”概念首先由交互设计之父阿兰·库伯（Alan Cooper）提出。在《About Face3.0》中，阿兰·库伯对“用户角色”用的原词汇是“persona”。用户角色，虽然用户角色不是具体的某一个人，但是它的内容都是由观察、记录每个真实用户的行为动作和习惯而综合产生的真实人物的映射。
访问者为低龄人群的图标设计
设计小贴士
用户角色信息来源于真实的用户，设计师通过收集真实用户的使用习惯、行为和想法，将关注点时刻放在用户身上，从而设计以用户为导向的产品。用户对产品的需求包括认知需求和情感需求。用户的认知需求决定了产品的功能和构造，用户的情感需求则决定了产品的外观和风格。一旦确定了产品的功能构造与外观风格，那么该产品就不会脱离以用户为中心的轨道。用户角色是通过强调发掘使用产品的几种不同类型的独特个体用户生活经历，专注于设计方面单独用户角色的需要，帮助设计师在设计过程中保持设计目标，最终实现设计目标的设计过程。
当我们接到设计任务后，我们怎么开始设计图标呢？首先我们要看懂界面需求，对每个功能图标的定义要非常清楚，否则我们设计的结果将导致用户难以理解，这个也是图标设计所关心的可用性问题。
理解功能需求后，我们要收集很多关于“词语——图形”之间能转化的元素，用生活中的物或其他视觉产品来代替所要表达的功能信息或操作提示。
“小熊”图标功能拓展设计
这个阶段就是把我们的创意绘制出来，检验视觉关系，也就是在视觉方面多在草图上推敲，这样效率高些，避免在渲染完后后悔。首先要确定图标的透视，这是关系到一套方案中的每个图标的透视方向，这是在图标设计一致性方面的基本要求，透视统一，然后一步步地添加细节。
照相机图标——草图
为恰当的界面设计任务制作恰当的图标小部件，可以帮助增强应用软件界面风格的一致性，同时也使得应用软件很容易构造。将草图绘制成可以应用的图标，需要相关制作软件的帮助。
照相机图标渲染完成图
在现有的UI设计流程中，包含着下面四个角色：产品经理、交互设计师、视觉设计师及用户研究分析师。在一个完整的UI设计流程中，他们各自承担着不同角色，相互协调，完成流程中的工作。现有UI设计流程的分工，其最终目的，就是通过不同专业，不同职责的设计角色使用其专业技能，合力打造一个优秀的产品，创造最大的产品价值。
UI设计流程图
| 职位 | 使用工具与软件 |
| 产品经理 | 纸张、Axure |
| 交互设计师 | Firework、Axure |
| 视觉设计师 | Photoshop |
| 用户研究分析师 | 问卷、原型 |
UI设计流程中各个角色及使用工具表
产品经理（Product Manager）在整个UI设计的流程中，产品设计最初的来源就是产品经理。在进行产品设计时，他们需要考虑目标用户特征、竞争产品、产品是否符合公司的业务模式等诸多因素。产品经理负责设计产品理念，产品理念是通常需要结合用户需求和公司发展的战略目标进行设计。产品经理设计出来的产品理念，通常是比较粗糙，只考虑到功能点，还未考虑到具体的人机交互问题。当他完成产品的初稿后，就会转交给交互设计师进行人机规范的设计。
好的产品设计理念需要既能满足用户的需求，也能为公司带来好的盈利，符合公司短期或者长期发展的战略目标。一般而言，产品经理管理的是一个或者多个有形产品。但是，产品经理也可以用于描述管理无形产品，如音乐、信息和服务的人。有形产品行业产品经理的角色与服务业中项目总监类似。
知识链接
概念图
概念图（Concept Map）是一种用节点代表概念、连线表示概念间关系的图示法。概念图的理论基础是Ausubel的学习理论。知识的构建是通过已有的概念对事物的观察和认识开始的。学习就是建立一个概念网络，不断地向网络增添新内容。为了使学习有意义，学习者个体必须把新知识和学过的概念联系起来。Ausubel的先行组织者主张用一幅大的图画，首先呈现最笼统的概念，然后逐渐展现细节和具体的东西。
这是一个非常典型的产品设计图，产品经理通常就是将对应的产品理念转换为可视化的、可以提供与UI设计团队进行沟通交流的产品设计稿，尽管它非常粗糙，但是只要能够表达出产品理念即可。有时候产品经理也会使用纸质的图案来进行产品的设计。
在产品UI设计的初期，产品经理根据从市场上收集到的用户信息，结合公司本身发展的战略方向，勾勒出产品最初的形态，功能点。通常情况下，产品经理需要向UI设计流程里面的其他成员，传达其产品设计的理念。
UI产品经理概念图
交互设计师和主要工作就是将产品经理的产品设计图，通过专业的人机交互技术，重新进行设计布局，让UI设计更加符合用户的使用习惯。同时交互设计师也会对产品进行行为设计。行为设计是指各种用户操作后的效果设计，例如按钮按下后的表现形式应该是怎样的，这些UI行为都是需要进行行为设计。产品经理和交互设计师是负责产品初期的交互行为，因为他们的工作经过抽象后有相似的设计需求，因此归类为一个角色，后续将统一为交互设计师角色。交互设计师负责完成UI交互稿。交互设计师通过专业的人机交互技术，完成软件界面UI布局设计，让里面的所有UI功能和操作更加符合用户的使用习惯。
交互设计师所使用的产品交互图
知识链接
页面交互稿
这是一张典型的UI页面交互稿。在这个交互稿里面可以了解到，界面的操作以点击为主。而点击操作又可以分为“表单提交”类和“跳转链接”类两种。除点击外，还涉及拖拽操作等。同时界面设计包括页面布局、内容展示等众多界面展现。例如，使用按钮还是使用图标？字号大小的应用，如何使用tab等。之所以特意提出这样一个话题，是为了强调除了“界面设计”，还需要“行为设计”。交互设计在被认识的过程中会有很多误区，常见的是把交互设计理解为一种专业的、高级的界面设计。实际上并不是这样的，一个产品不好用很多时候是因为流程上有问题，有时候乍一看页面表现挺合理，但是，点击了一下之后，就会发现“走不下去了”。因此，交互的设计更多的是注重行为设计，也就是产品的可用性。交互设计师在UI设计流程中，更加注重其设计产品的可用性，目前最热门的产品平台，如iOS，Android以及Windows都会有一整套庞大的人机UI设计规范。这是因为，对于每个平台，都有其非常独特的用户操作习惯，交互设计师的工作，就是要保证，其产品设计是符合用户所在平台的使用习惯。不符合用户习惯的产品，到最后都会走向失败。而符合用户习惯的优秀产品，都会成为用户所喜爱的产品，并且走向成功。因此，非常娴熟地运用不同平台的人机UI设计规范是一位合格的交互设计师必须具备的基本能力。
如果将交互设计师比喻为赋予UI设计骨骼行动的工程师的话，那么视觉设计师则是为UI设计生命色彩和个性的伟大创造者。下面是一张由视觉设计师设计好的UI设计图。视觉设计师通过UI交互稿进行色彩、尺寸、间距等控件进行设计，为产品带来色彩的生命力，最终输出视觉设计稿的角色。视觉设计师负责完成视觉稿，优秀的软件产品，首先就是要具备优秀的人机交互界面。视觉稿就是视觉设计师通过对完成人机交互设计的UI交互稿进行视觉美化的成果。UI交互稿在设计时，是完全不考虑色彩搭配的，只考虑人机交互的逻辑，而视觉稿，更多的是定义UI的尺寸和色彩，给软件产品注入生命色彩。
设计小贴士
图标视觉风格设计
通过色彩定义和使用，视觉设计师们为交互设计的草稿带来了个性和生命的色彩。很难想象一个没有色彩的产品，给到用户手上，会带来什么样的恶评。UI控件的视觉化，需要视觉设计师赋予控件不同状态的视觉风格，例如一个按钮的视觉风格，包括了Normal、Pressed、Disable和Highlight状态，视觉设计师们需要对这些状态进行统一风格的设计。因此，视觉设计师通过对色彩的娴熟运用，将每一个UI设计转化为富有情感、富有生命的元素。在这个阶段，视觉设计师们有时也会遇到和产品经理类似的如下问题。
如何处理艺术和商业间的冲突。有时候，视觉设计师希望为产品带来一些个性化的色彩，但是产品经理则希望产品不要显得过于突兀，能让大部分的市场用户都喜欢。这样的冲突每天都在产品团队中上演。其实艺术和商业之间并不是不能相容的，视觉设计师们需要在不断的沟通中，寻求两者间的一个平衡点，设计出好的产品。 最终，经过设计师们的努力，这些富有情感的元素，通过技术手段变成产品，给到用户，使其得以使用。
复古风格电视机图标设计
复古风格电视机图标动态效果
用户研究分析师负责验证产品设计是否符合用户的使用需求。通过使用软件原型，用户研究分析师们可以找到软件产品存在的设计缺陷，如UI按钮位置不符合用户预期，文字提醒没有满足用户认知，UI色彩过于鲜艳等问题，都需要用户研究分析师通过研究的手段，反馈到设计团队进行优化。
知识链接
用户研究分析师
用户研究分析师是设计流程中非常重要的角色，他们的分析结果可以帮助团队更好地理解用户，并寻找出让产品的目标、需求与商业宗旨相结合的设计方案。
用户研究的首要目的是帮助企业定义产品的目标用户群，明确并细化产品概念。通过对用户的任务操作特性、知觉特征、认知心理特征的研究，使用户的实际需求成为产品设计的导向，使产品更符合用户的习惯、经验和期待。在产品UI设计中，很多时候，无论是经验丰富的产品经理、交互设计师，还是视觉设计师们，虽然从事相关工作很多年，但是他们都不一定能够非常准确地把握住用户的喜好和行为习惯。其中一个原因是产品设计到产品开发再到将产品推向市场，都需要一个较长的周期。而在这期间，用户习惯竞争对手等这些市场的元素，实际上都是在不断地发生变化的。因此，开发出来的产品，在需求把握上容易会出现偏差，达不到市场的预期。
针对这个问题的解决方案就是用户研究和分析，因此，用户研究分析师的角色就显得非常重要了。他们通过工具，定时地收集市场信息和用户信息，包括产品的信息和数据。对收集回来的数据进行分析研究，完成用户研究分析报告，再反馈给整个UI设计团队，如果发现产品和市场需求出现了偏差，马上进行调整。这样就能保证设计出来的产品，不会与市场脱节，能够满足用户的需求。
在这个阶段，主要由产品经理负责。产品经理在这个阶段需要根据市场情况，竞争产品的状态以及结合自身公司的战略发展目标，对产品进行概念设计。通常情况下，在这个阶段产品经理需要输出产品设计初稿。
在产品设计初稿中，产品设计的理念被表达出来，它不需要像交互设计师那样制作非常精确的UI布局，也不需要进行人机交互的规范，只需要表达出产品经理需要达到的产品意图即可。
UI设计初稿
在产品概念设计的评审确认后，就会进入产品的UI交互设计阶段。UI交互设计阶段需要融合两方面的元素，一方面是产品的功能，另一方面是产品所属平台的可用性和人机交互的规范。UI交互设计师需要将这两方面元素融入到产品的UI设计稿中，产品可用性的优劣通常都在这个阶段体现出来。
UI交互设计层级图
在交互设计师完成UI的交互设计后，输出UI交互设计图。视觉设计师开始工作，设定视觉风格，输出视觉定稿，给到整个设计团队进行评审。在评审确认视觉定稿后，再输出视觉图给到开发人员进行开发，来完成Demo或者正式的产品工作。视觉设计师在这个阶段给与产品最为重要的特性——色彩。因此，对于在用户可以看到的产品层面上，几乎都是有视觉设计师完成的。
视觉设计完成稿
在这个阶段中，用户研究分析师们会利用上个阶段输出的Demo，约谈用户，或者使用问卷的形式，来记录用户的反馈内容。通过这个环节，收集用户对产品的一些问题，一并反馈到产品UI设计团队中去。
扁平化设计风格是当下非常流行的UI视觉设计风格，风格以简约主义为核心的设计理念，它已然成为当下UI设计的主流风格。扁平化的UI设计表现在视觉的扁平化和信息层级的扁平化，但无论是视觉效果还是交互体验都不能因此而单调、呆板，只有从用户体验出发，追求简约，优化层级，才是扁平化设计的根本原则。
概念链接
“扁平化”风格与“拟物化”风格
从UI图标外观直接来判断，对于客观事物直观进行描绘的图标风格就是“拟物化风格”亦称“写实立体风格”。由于“拟物化风格”图标逼真立体，也被称为拟真风格。
“扁平化”这个称谓严格而言其实并不十分贴切，这是因为仅仅单纯从图标外观特征来命名“扁平化”似乎就是描述它的平面化。其实点、线、面等平面元素以及色块的应用和整体的设计语义以及符号组织构架才是该风格是灵魂特征，这是需要设计师特别注意的地方。
设计小贴士
图标像素与尺寸
在数字界面中，图标的标准尺寸多为34×34像素、40× 40像素、64×64像素、72×72像素。而传统图标常常被表现在64×64像素内，而为了节省空间或集成到其他功能之下，图标还会被表现得更小。调查显示用户对于小型图标（64像素以下）的视觉感知为较弱状态，触发效果不佳，因此这类图标在界面中的功能多为状态显示并不常具备点击功能，例如，它们会被集成到窗口边框、工具栏、状态栏中。由于现代数字显示器规格的多样化发展，以及各知名品牌也逐渐开始生产本品牌的显示器，用户视觉需求也渐渐往大尺寸图标靠拢，使得能配合显示效果的范围也在逐步扩大，UI图标的像素和尺寸也需要按照各品牌各系统的独特性进行一对一调整。这种调整将更符合用户视觉感受，为视觉思维在UI设计中的应用打下良好而坚实的基础。
01 打开Photoshop，选择【文件】→【新建】新建画布，大小为64×64像素。
02 新建图层，使用圆角矩形工具画一个5×5像素大小的圆角矩形。打开【视图】→【标尺】，拉动参考线至圆角矩形中间位置。
03 双击圆角矩形所在图层，调出【图层样式】，勾选【渐变叠加】，双击【渐变条】，调出灰到黑的渐变。
04 勾选【投影】，设置【混合模式】为叠加，【不透明度】为79，【角度】为-90度，【距离】为5像素，【大小】为5像素。
05 勾选【内阴影】，设置【混合模式】为正常，【不透明度】为94%，【角度】为-90度，【距离】为3像素。
06 按Ctrl+J组合键复制【圆角矩形1】图层，命名为【圆角矩形1副本】。
07 在【圆角矩形1】图层上单击右键，清除图层样式，【填充】为0%。
08 【圆角矩形1】图层双击右键调出图层样式，添加投影，取消勾选【图层挖空投影】选项。
09 在【圆角矩形1】图层，按住Ctrl键同时按两三下↓键，移动两三个像素作为阴影效果。
10 新建图层，用【椭圆工具】画一个较细的椭圆。
11 按P键转换为点工具，单击椭圆最下面的锚点使其变尖。
12 添加锚点进行调节，使其更有弧度，更加饱满。
13 单击右键，创建【剪辑蒙版】，或者按住Alt键，在【椭圆】图层和【圆角矩形1副本】图层中间单击，把椭圆剪进圆角矩形。
14 双击【圆角矩形1】副本调节图层样式，勾选【将内部效果混合成组】。
15 新建【肉色】图层，用多边形工具画出三角形，填充肉色，调节边缘使其平滑。
16 在【肉色】图层上右键创建【剪辑蒙版】。
17 创建【领子】图层，用【钢笔工具】顺着三角形的边勾出领子，填充灰色。
18 新建【黑色领子】图层，顺着椭圆弧度用【钢笔工具】勾出外套的大领子，填充黑色。
19 领带部分：使用【矩形工具】画一个正方形，旋转45度，将其放到合适位置，按住Alt键复制一个命名为【矩形副本】。
20 在【矩形副本】的图层上，用【直接选择工具】，单击最下方的锚点，按住Shift键往下拉，调节矩形副本的宽度。
21 加花纹：新建【花纹图层】，画一条宽2像素的直线，填充深红色，放在如图位置。
22 复制【花纹】图层副本，按Ctrl+T组合键，单击最上方的小三角形，输入y为-100，可自行调节距离。
23 数字输完后，敲Enter键两下。在【花纹副本】图层，按住Ctrl+Shift+Alt+T组合键连续复制。
24 找到【矩形】和【矩形副本】图层进行合并命名为【领带】；找到所有的花纹复制图层进行合并命名为【花纹】。花纹图层置于【领带】图层上方，创建【剪辑蒙版】。
25 再给【领带】图层创建【剪辑蒙版】，剪掉多余的部分。
26 找到【领子】图层，添加【图层样式】，渐变叠加和投影，数值如下图所示。
27 将领子上的图层样式复制到【领子副本】上。
28 给大领子添加【图层样式】，接着将左领子上的图层样式复制到右边的领子上。
29 给【领带】图层添加【图层样式】，【斜面浮雕】、【外发光】，使领带的立体感更强。
30 领带夹：用矩形画一个长条，添加1像素白色内阴影。
最终效果如下图所示。
01 选择【文件】→【新建】，新建画布，【宽度】为72像素，【高度】为64像素，【分辨率】为72像素/英寸，【背景内容】为白色。
02 使用【渐变工具】（径向渐变），颜色如图所示。
03 单击【渐变工具】，拉出渐变背景。
04 新建图层，将其命名为【背景2】，在下部分制造一个近景的亮色。使用【渐变工具】（线性渐变），颜色参数如图所示。
05 建立组，模式为【穿透】，效果如图所示。
06 新建图层命名为【风扇机身】，使用【圆角矩形工具】，画一个720×720像素，半径为10像素的圆角矩形，颜色填充为#e2e1e0。
07 图层样式依次填充【内阴影】、【渐变叠加】、【投影】。
内阴影
滤色颜色为af7559。
渐变叠加
渐变颜色为b5b5ba。
投影
正片叠底颜色为21262a。
08 复制【风扇机身】，在右键快捷菜单中选择【清除图层样式】，修改图层【填充】为0%。
09 添加内阴影，阴影颜色为8e8594。
10 圆形扇框的制作：使用【椭圆工具】画出549×549像素的圆形，颜色填充为e2e1e0。
11 添加图层样式：【描边】、【内阴影】、【渐变叠加】。
描边
左侧图标颜色为757c88。
右侧图标颜色为898989。
内阴影
阴影颜色为5d6d81。
渐变叠加
左侧色标颜色为636363。
右侧色标颜色为898989。
效果如下图所示。
12 使用【椭圆工具】画一个455×455像素的圆形，命名为【圆形扇框2】，颜色【填充】为e2e1e0。
13 添加图层样式：【描边】、【渐变叠加】、【投影】。
描边
左侧色标颜色为535351。
右侧图标颜色为7e6767。
渐变叠加
填充颜色为b6b8ba。
投影
效果如下图所示。
14 扇格部分：新建图层，使用【椭圆选框工具】画出三个同心圆进行描边，宽度为13像素，然后用【矩形选框工具】进行裁切。
15 填充颜色为#e2e1e0。
16 添加图层样式：【渐变叠加】、【投影】。
渐变叠加
左侧色标颜色为323948。
投影
效果如图所示。
17 风扇扇叶部分：使用【钢笔工具】画出扇叶的形状，【填充】为白色。
18 添加图层样式：【内阴影】、【渐变叠加】、【投影】。
内阴影
渐变叠加
投影
19 给扇叶加上【光影效果】，用【钢笔工具】勾出阴影，【不透明度】为70，【填充】颜色为#573f28。
20 添加【高斯模糊】，参数设置为30。
最终完成效果如下图所示。
