一.  用户体验设计

· 用户和人机界面的交互过程。

·  用户体验设计特征

1.严谨、理性、创意

2.提供特定问题的解决方案

3.让用户思考

4.妙趣横生

·  用户体验设计的精益之道

1.热爱生活，细心观察，勇于改变

2.了解人，观察人（人有共性，也有差异性，体会大多数人的想法）

3.理性的思路

思路

4.亲自使用、体验

5.多听用户反馈意见

6.留心好的设计，在此基础上优化

二.  用户体验设计师

用户研究员、交互设计师、视觉设计师的含义

·  交互设计就是通过分析用户心理模型、设计任务流程、运用交互知识，把业务逻辑（功能规格或内容需求）以用户能理解的方式表达给用户，最终实现产品战略（公司需求和用户需求的最佳平衡点）的过程。

·  最重要的是解决问题的能力。

·  交互设计师的产出物：竞品分析文档、用户反馈整理、流程图、设计草图、设计原型等。

·  设计原型：手绘、软件绘制

          软件：Balsamiq Mockups手绘风格

                      Axure绘制线框图

·  视觉设计师：懂产品、懂用户、懂设计，关键时能有条理地陈述自己的观点和理由。

菜鸟如何入门 部分知名设计公司/设计团队

·  优秀的设计师之所以优秀，是因为潜藏在技能表面下的东西。

（人文、心理学、设计学、工业工程学、代码、手绘等）

良好的素养，强大的思维能力，专业的技能，浓厚的兴趣

三.用户体验设计师技能

· 用户体验设计师目标：解决用户需求，减少用户理解和操作成本，给用户留下美好深刻印象。

项目流程

· 和产品经理一起做需求分析

需求考虑角度

1. 产品定位

产品定位是关于产品的目标、范围、特征等约束条件，它包括产品定义和用户需求。产品定位是产品设计的芳香，也是需求文档和设计产出的判断标准。

产品定位内容

产品定义——一句话概括某个产品。

使用人群——明确产品主要为谁服务，所有功能、内容、设计风格的设定都围绕使用人群来进行。

产品特色——使产品区别于同类竞争者，让产品脱颖而出，更具竞争力。

用户需求——可以看作是“目标用户”在“合理场景”下的“用户目标”，其实就是解决“谁”在“什么环境下”想要“解决什么问题”。

2. 产品需求

产品需求来源

· 用户调研——通过问卷调查、用户访谈、信息采集等手段来挖掘需求的方式。

· 用户反馈——发现很多之前意想不到的问题。

· 竞品分析—— 找到有代表性的同类产品，对比产品之间的优势、劣势，从而发现产品的突破口。

· 产品数据——艾瑞资讯、百度指数、淘宝指数等，手机到数据后，分析挖掘数据背后潜在的意义。

3. 如何分析与筛选需求

如何将用户需求转化为产品需求 根据产品定位和项目资源情况筛选、提炼出产品需求，定义出需求优先级，接着描述每个需求的逻辑、内容，撰写详细的需求文档。

4. 需求文档：目录、背景描述、用户类型和特征、项目时间安排、信息结构、整体业务流程说明、需求详细说明等。

5. 倾听用户的声音

· 拥抱用户

· 别被用户牵着走

考虑用户意见的5个因素

6.寻找设计目标

在某次优化任务中，产品经理要求增加一系列功能，先不要着急做设计，而是要思考以下问题。

既然是做优化，就说明已经有一定的用户基础了。那是不是可以先查一下目前用户的评论和反馈？是不是可以观察身边的人是如何使用的？可以做一些简单的访谈和测试，看看用户使用过程中有什么痛点。另外，还可以对比一下竞品，看看竞品哪里体验比我们好，哪里还有改进余地……

7. 如何“抄袭”竞品

功能方面，产品经理们可以去抄，设计师无力干涉。

但在设计方面，绝不允许自己盲目“抄袭”，即使功能一样，不同的设计水准也会让产品体验截然不同。

关注竞品、研究竞品、努力超越竞品。

四. 从需求到设计草图

· 工欲善其事，必先利其器。

优秀的设计要经理充足的规划过程。

根据需求，先确定应该提供哪些必要的信息给用户，然后对信息分门别类、有效地组织起来，并以导航的形式展现在界面上，让用户可以快速找到自己想要的信息。

从需求到界面设计

1. 信息/任务   从需求到界面，隔着一扇门

·  信息归类

           逻辑归类——使用人们在生活中熟悉的分类逻辑对内容进行组织。

           卡片归类——邀请用户“把类似的东西放在一起”。

开放式卡片分类 封闭式卡片分类

·  好的导航是成功的一半

            成功的导航设计可以自我解释：让用户在导航系统中清楚地认识到信息结构和自己所处的位置，为用户解释“我从哪里来？”、“我现在在那里？”、“我能去哪里？”的问题。

             。深广度平衡

              在设计导航结构时，要考虑到深度与广度的平衡，也就是纵向的层级数，与横向的选项数的平衡。（每多点击一次操作都会流失掉一批用户）

过深的层级关系令用户迷失方向 过广的导航广度，令用户患上“选择恐惧症”，很难选择哪一项才是自己想要的 平衡的导航深广度，使用户在每个层级上不必面临过多选择，通过每个选项的名称便可以明确自己寻找的方向

         。用户所需信息与商业推广信息的平衡

         矛盾：用户只想看到自己需要的信息，而企业又希望可以把业务和广告推荐给用户。

         合理的信息组织方式，应该既对用户有意义，又能满足业务目标。

         。为重要功能和常用功能设置快捷入口

         就像是在原有产品架构的基础上搭建“快捷通道”，用户可以一步一步顺着产品的逻辑来寻找所需功能，也可以通过快捷入口，按照自己的行为习惯，快速找到所需功能。（快捷入口不宜过多）

· 主要任务和次要任务

        一个页面上如果铺放过多的功能或内容，会让用户迷茫不知所措，效果反而会更差。

        明确主要任务和次要任务，可以帮助我们快速判断界面上内容的主次关系。

        设计任务流程——要先设计主线，再从容设计支线。

      （是否设计支线，即次要行为流，要看次要行为流是否能对用户完成主行为流产生必要的帮助，迷宫的支线越少，整体复杂度越低，越有助于用户迅速完成任务。）

不同角色心目中的产品

·  突出主要任务

             。1 分解用户任务

             。2 排列任务优先级（优先级不是出现的先后次序，而是在页面中的重要程度。这些任务的出现次序，要按照主行为流的次序排列。）

             。3 组织合并相关任务

· 引导用户完成任务

            。相似性引导——大小、色彩、形态、视觉元素等

            。方向性引导——对于操作步骤较多的任务，可以利用具有指向性的箭头，进行方向性引导。

            。运动元素引导——像是用户的小向导，带领用户找到下一步该往哪走。

            。向导控件——在陌生的页面环境下，为用户指引路线，引导用户完成多步操作。

· 设计友好而易用的界面

            。减少冗余步骤和干扰项

            。将复杂操作转移给系统（让机器变得更智能）

            。简化操作方式（Windows和MAC OS 安装软件）

            。优化操作过程（提供合适的首选项、适时帮助、及时反馈、提供合理的默认值等）

界面细节优化

· 信息量太大，页面如何摆

设计师没办法控制页面上要呈现信息的多少，因为这与产品和业务相关。

但设计师要保障受众信息的接受效果，掌握信息的展现形式，在页面信息量很大时，决定该如何组织这些信息。

        。让页面层次不言而喻 

                  逻辑相关的在视觉上分为一组——接近原则

（在设计界面时，将元素分好类后，在模块与模块之间、段落与段落之间、广告与广告之间、标题与正文之间划分几个固定的高度，在为整个页面排版的时候，严格按照这几个间距进行排布，从而形成整个页面模块与模块、内容与内容之间的节奏感。）

                 内容或重要程度不同的信息——差异原则（增强对比）

                 逻辑上有包含关系的——嵌套

       。让重点信息“跳出来”

           通过视觉设计方法——字体加大加粗、色彩对比、添加背景色、留白等，强调界面的重点元素。

       。将次要信息“藏起来”

            列表页的作用是“快速筛选，激发兴趣”。隐藏策略不仅可以让界面重点更突出，减少复杂信息对用户的干扰，还可以减少跳转，满足用户的快捷操作。

· 理性的规划VS感性的界面

           。以人为本的界面设计

                要了解用户，知道用户有什么样的需求。

                要保证界面逻辑不是错误的，可以让用户顺利完成任务。

                 力求让设计形式符合用户的心理模型，让用户感受到“人性化”的设计。

            。帮助用户找到想要的东西

                 让有明确目标的用户，能够快速找到所需信息。

                 有不确定目标的用户，通过浏览和寻找，一点点明确自己的需要，最终找到信息。

                 让没有目标的用户在探索中激发需求。

             。吸引无目标用户

                 充分换位思考，用感性的思维方式来为他们营造贴心、友好、有吸引力的界面。

            。符合用户心理模型

                设计师该充分考虑到用户是如何理解产品的，并在交互设计的表现形式上更贴近用户的心理模型，避免将枯燥的逻辑直接呈现给用户。

2. 捕获用户的芳心

· 来自真实世界的灵感

            。拟物化的视觉

                 注重效率的应用可以设计得尽可能简洁，帮助用户快速完成任务。但是，对于娱乐型应用来说，人们对于情感的追求永远不会消失。

                拟物化并不意味着一定要100%还原物理世界的真实质感，抽象出物体中最优特征的部分，将繁复的视觉元素进行简化处理，一样可以设计出既简约又可以调动用户情感的产品。

            。隐喻化的操作

                视觉表现难以拟物时，也可以通过模拟现实中的操作，使用隐喻的方式让用户对操作感到熟悉。

· 贴心的设计惹人爱

             。可控的感受

                 调查表明，如果界面没有任何提示，80%的用户等待超过2秒就会直接关闭窗口。

                 如果界面有提示或是加载状态，用户的离开率就会极大地降低。加载状态提示可以增加用户对界面的可控感，形成操作预期，使用户安心。

                 为增强用户的可控感，界面还需要预先提供提示，向用户透漏一些接下来将要发生的事情，让用户建立预期。系统需要根据用户的操作收集信息，掌握规律，正确地预计未来可能出现的问题，并提前采取措施或提醒用户，将可能出现的风险消除在萌芽状态。

               。积极的反馈

                   人们在社会交往时具有的期望，在使用互联网产品时也会有。积极的反馈可以增强用户的信心，提升用户体验的愉悦感。

               。贴心的提醒

                   在使用产品时，用户难免会有遗忘或是疏忽的时候。此时给予用户一些贴心的提醒，可以提升用户对产品的好感。

Quora登陆页面细节处理

                 。互动的乐趣

                    灵动的的交互画面、操作后的反馈效果、误操作时的提示，像对话一样亲切的文案，都是机器与用户互动的结果。让用户感觉到，自己的一点一滴都能被系统感知，满足用户的参与感和被尊重感，利用互动因素可以极大提升用户界面的趣味性，调动用户情感。

                     丰富的动效可以使界面更生动、充满活力，也可以提升产品的品质。

                  。惊喜的力量

                    惊喜会为用户增添一份特殊的喜悦与乐趣，还可以引发用户的好奇心，增强他们的探索欲望。

                  。情境的烘托

                     为产品设计一个故事情节，通过视觉、动画和音效的烘托，把用户带入一个情境中。很适合用在活动页面的设计中。

· 快速表达我的想法—纸面原型

。纸面原型的目的

沟通、测试，尽快解决那些不确定的问题。纸面原型具有可塑性，可以快速修改和重建，帮助设计师探索尽可能多得想法并否定掉那些不靠谱的想法。当已经通过纸面原型确定了大致的方案时，也就同时确定了产品的框架、主要流程、基本信息和功能等。

。工具

纸面原型，购买成套出售的纸面原型工具，包括绘图模板、设计绘画本、图标模具、标准交互组件等。

。表达什么

串联需求、任务、信息、操作等。

界面关系可用绘制的深浅和颜色来表现。

对于移动应用，可用纸面原型来表达动效。通过纸张的折叠和左右移动，可以模仿手机中的下拉、滑动分层等各种动效。

APP   “POP-Prototyping on Paper”和“快现”表现动态效果。

· 设计标准——好的设计需要表达

。原型

经过设计规划阶段，通过设计加工，形成最终的结果。

理想情况下原型的由来 现实情况下原型的由来

原型是项目开发的重要标准和依据。

低保真原型：与最终产品不太相似的原型。可以是纸面原型（草图），也可以是用软件绘制的线框图。

         鼓励使用：纸笔。

         较大团队：用专业软件Axure、Visio来设计原型，并向团队成员展示设计成果。使用Axure可以制作一些复杂的动态效果。

         移动端产品，推荐使用PowerPoint绘制原型。强大的动画功能可以掩饰各种逼真的动态效果。

高保真原型：在外观、操作上与最终产品基本一致。

。原型内容

 1）简要说明与信息结构

变更日志：同需求文档一样，原型设计也不可能一次到位，一般都需要经过沟通、评审后略做调整。更新日志，可以方便项目组成员看到每次更改的内容，然后重点关注这部分内容就行，大大提高工作效率。

更新日志示例

版本说明：适合快速迭代且迭代周期较固定的项目。

版本说明实例

信息结构：产品内容都有什么，是如何组织的，页面层级是如何分部等等。（被设计加工过的产物，是综合考虑产品逻辑结构和用户习惯而得到的结果）

信息结构示例

 2）任务流程与页面流程

任务流程：用户使用产品时，它的每一步操作会遇到什么结果、系统会如何反馈等。关注用户如何操作、页面如何反馈等，从而引导用户完成目标。

用户任务流程示例

页面流程：更清晰、具体。可以看到具体的页面，以及用户如何通过操作，从一个页面跳转到另一个页面的完整过程。

页面流程示例

3）线框图&交互说明

线框图：原型图里的静态部分

交互说明：原型图的动态操作效果。

交互说明示例

交互说明——建议采用说明与动态效果相配合的方式。

交互说明类型：

（1）限制：包含范围值、极限值等。

范围值：数据的取值范围。比如，当你的界面上出现了下拉菜单、筛选按钮、滑块等控件时，你必须标注清楚它们的选择范围，否则开发人员就不清楚该如何设定。

范围值说明示例

极限值：数据的显示限制。比如，最多应该显示多少字数，超过时如何显示，是否折行等。

极限值说明示例

（2）状态：包含默认状态、常见状态、特殊状态等。

默认状态：默认显示的文字、数据、选项等。需要注明，否则开发人员可能难以意识到这是用户填完的结果，还是默认就有的。

默认显示部分文字 搜索框内预置文字

常见状态：主要针对某一个模块，经常遇到的一些状态。

签到模块常见状态示例

特殊状态：非正常情况下的样式、文案、说明等。

特殊状态说明示例

（3）操作：包含常见操作、特殊操作、误操作、手势操作等。

常见操作：主要指正常操作时得到的反馈状态。

翻页控件常见操作状态示例

特殊操作：一些极端情况下的操作。

误操作：尽量避免用户犯错的机会。

误操作示例

手势操作：用户使用移动产品时的操作方式。

手势示例

（4）反馈：用户操作后得到的反馈动作，包含提示、跳转、动画等。

提示：操作后系统反馈给用户的文字说明

提示反馈示例

跳转：需要说明跳转时是“原页面刷新”还是“新页面打开”。

移动应用转场示例

              此外还需要注明在界面的不同位置以不同手势操作时，会跳转到哪里。

移动应用跳转说明示例

动画：给人感觉比较友好、趣味性强。

移动应用动画反馈示例

。你真的会画线框图吗

1）通过明暗对比表达，界面元素的优先级关系更直观。

明暗对比

2）不要用截图与颜色

3）合理的布局（尽量保持简单的结构，最好不要出现2列和3列混排的设计）

4）遵守栅格规范

5）标记第一屏高度

6）表达清楚UI逻辑

【整理优先级。一般来说，操作的优先级大于链接，链接的天优先级大于文本。】

最重要的操作：一般用按钮来表现。比如收藏夹中的“加入购物车”按钮。

下来是普通操作，如“对比”等。

最后是消极操作，如“删除”等。

如此，就相当于提前定义好了一套规则，它可以用在不同的表单页面上。通过这个细致的规则，可以保证最终的字号及颜色符合逻辑，减少了视觉设计师的工作成本。

界面逻辑清晰的线框图

7）考虑视觉实现后的效果

8）了解视觉趋势

UI风格每年都在变化

上图可看出，目前视觉趋势如下：

~宽度变宽，留白增多。

~渐变减少，视觉风格更加扁平化，整体感觉更清爽。

~通过空隙和留白来分割区域，而不是用线来分割。

~布局更规整。

~去掉不必要的视觉元素。

。写交互说明的诀窍

1）尽量使用真实、符合逻辑的数据内容

2）不遗漏特殊状态的描述

3）避免过长的说明

            ~需求或设计方案有问题，导致逻辑异常复杂。

            ~这个方案的开发成本是否很高，有没有这个必要（有些异常情况出现频率极小，可以适当舍弃，保证体验和开发成本之间的平衡性）。

            ~如果需求和设计方案都没问题，是否表达方式有问题？应尽量避免文字堆砌。

            ~避免流水账式的说明。

流程图代替文字说明，并将各种状态罗列出来。

巧妙组织文字说明。（if/else/case等）

制作动态效果。

4）关于重复出现的模块，尽量用模块化的思维方式来处理较复杂的问题。

5）如原型有修改，不要口头沟通，而要更新交互说明并告知大家。

。关于设计规范

1）设计规范

是对设计的具体细节、技术要求，是设计工作的规则和界限，是一种模块化应用的方法……

包含很多内容，比如交互规范、色彩规范、logo规范、UI图标规范、空间规范等。

设计规范示例

2）没有规范容易出现什么问题？

       ~不同频道/模块独立设计。

       ~同类功能组件存在多种样式。

       ~同类元素多样性。

       ~设计效率低下。

       ~设计质量难以把控。

3）规范解决了什么问题？

       ~“一致性”形成鲜明的产品特征，增强用户粘度。

       ~提高易用性。

       ~满足团队协作需求。

4）设计规范的分类

       ~纵向：交互规范+视觉规范。交互规范优先与视觉规范。

       ~横向：产品战略级方向的大规范+耽搁项目的小规范。

5）什么时候开始设计规范？

       ~大型且重要的产品。

       ~产品结构、页面类型、UI组件相对较单一，可复用的内容较多。

       ~项目人手充足、时间较充裕。

       ~品牌风格、主题风格已确定完毕，品牌备忘和梳理势在必行。

       ~产品线日益丰富，后续设计一致性和可循环的要求被提高。

       ~产品结构壮大，新人不断涌入，沟通和执行效率亟待提高。

6）制定原则

       先制定大的设计方向，再制定项目中单个的详细说明。先制定团队合作的规范，再制定个人操作上的规范。

· 项目跟进——保障设计效果的实现

评审前要做充足准备 主导评审流程 收集有价值的反馈
勤于沟通
在视觉稿上标注具体尺寸

设计师在标注页面时，一定要与前端采用相同的规范和标准。如果设计师标注行高时，标注的是文字之间的距离，而前端写页面时，行高的标准是文字高度+上下空隙高度，那么前端在看到设计师标注的尺寸时，还要换算成自己需要的尺寸，标注的意义就会大打折扣。

设计与开发需要最终确认 设计走查

· 成果检验

检验设计成果的方法

1）可用性测试

通过观察用户使用产品，发现产品中存在的问题的一种方法。

可用性测试的流程

       ~给出使用目标，而不是直接地操作。

       ~尽量选择最重要、最频繁的任务进行测试。

       ~符合正常的操作流程。

可用性测试考量标准 可用性准则 严重等级评估标准 可用性问题的量化评估表

2）A/B测试

定量分析，样本量大，但结果较为客观。

A/B测试示意图

（1）设定衡量标准

（2）对同一个用户呈现相同的页面

（3）保证两个版本同时测试

（4）单一变量

（5）A/B测试的眼神——灰度发布。

将旧版本作为方案A，新版本作为方案B，让一部分用户继续使用旧版本，一部分用户切换到新版本，然后观察用户反馈和产品数据。

3）定性的用户反馈和定量的产品数据

（1）收集和独栋用户反馈

移动应用在应用市场收集用户反馈。App Store，安卓的Google Play，又或者是豌豆荚、应用助手等第三方应用市场，都可以找到大量的评分、评论信息。

分析用户反馈。从内容、功能、使用流程、设计、新功能建议和现有Bug等几个方面对问题进行归纳。

（2）用数据检验产品目标

五、设计师素养

如何思考和分析 品牌的作用 提升品牌形象的一些设计准则 不同沟通方式的特点 不同沟通方式的适用环境 设计流程 完整的项目流程 小功能的项目流程