Part 2 技能
04 设计流程——设计师具体做什么
用户体验设计的目标归纳为：1.解决用户需求；2.减少用户理解和操作的成本；3.给用户留下美好而深刻的印象
设计流程：需求分析→设计规划→设计规划→项目跟进→成果检验
05 需求分析——拿回产品的主导权
5.1 和产品经理一起做需求分析
做产品需要同时考虑商业价值和用户需求。产品经理一般都要背负各种产品绩效指标，更多地站在商业/项目的角度去考虑问题，而设计师则更多地考虑用户的需求。在初始阶段，产品经理和设计师应该一起合作，通过融合各自的专业方法，共同完成需求分析。
层级为：产品定位→产品需求→需求优先级
5.1.1 产品定位
产品定位是产品设计的方向，也是需求文档和设计产出的判断标准，也使团队成员形成统一的目标和对产品的认识。产品定位包括两方面的内容：产品定义和用户需求，产品定义主要由产品经理从项目角度考虑，用户需求主要由设计师从用户角度考虑。
用户需求中的“目标用户”是再产品定义中的“使用人群”细分的基础上得到的。
产品定义中的主要功能、产品特色和用户需求中的目标用户形成了产品定位中最核心的内容，是产品设计最主要的方向和依据。
·产品定义：用一句话概括某个产品
·使用人群：明确产品主要为谁服务，所有的功能、内容、设计风格的设定都围绕这类人群来进行
·主要功能：划定功能的范围和限制
·产品特色：区别于同类型竞争者的地方
·用户需求：将一个个故事表述为“目标用户”在“合理场景”下的“用户目标”，就是解决“谁”在“什么环境下”想要“解决什么问题”，当然这些内容一定不要脱离前面产品定义的范围。然后，对使用场景与用户目标进行发散，这时候不需要太受人群类型的限制。
·目标用户：在用户需求部分首先要确定的是目标用户，一方面是进一步从使用人群中确定专注于服务的人群是哪一类，另一方面是目标用户的特征对于使用场景和用户目标的筛选有较大影响。选择哪种类型作为目标用户，需要综合权衡用户对公司的价值以及潜在需求量（即产品的潜在用户量）
·使用场景/用户目标：根据目标用户对前面的发散内容进行筛选
5.1.2 需求从哪儿来
采集需求的主要方式有：头脑风暴（用户简单的常见的问题）、用户调研、竞品分析、用户反馈（上线后）、产品数据（上线后）等
·用户调研：通过问卷调查、用户访谈、信息采集等手段来挖掘需求的方式，可以深入了解目标用户在真是使用环境下的感受、痛点、期望等
·竞品分析：找到有代表性的同类产品，对比产品之间的优势、劣势，从而发现产品的突破口。竞品分析可以根据规划进行，也可以根据功能、设计细节来进行，这取决于项目情况和需要。在竞品分析的过程种，我们可以研究别人是怎么拟定产品战略、方向的，怎么做用户体验的，怎么处理逻辑、界面层级、界面细节的等等
·用户反馈/产品数据：都是在产品上线后可以收集到的使用信息。为了能够顺利获取到这些数据，在设计时要考虑到后期数据收集的需求，预先埋点。还可以参考一些公共调研机构出具的数据分析报告：比如艾瑞资讯、百度指数、淘宝指数等，要挖掘数据背后潜在的意义
5.1.3 如何分析与筛选需求（产品需求→需求优先级）
采集需求方式的多样化，会导致需求质量难以控制，如不同需求之间可能有冲突、对用户的理解可能有偏差、采集的需求不适合你的产品等，因此要进行筛选，定义出需求优先级
1.首先筛掉明显不合理的需求
2.其次，要从现象看本质，挖掘用户真实需求。比如，做用户调研时，某用户说上班路上不怎么听音乐，如果这时候追问他可能会说是因为操作麻烦，那么其实上班路上不需要听音乐只是表象，嫌麻烦才是真实的想法，我们要解决的就是简化操作。再比如，在竞品分析中发现用户认为某功能很贴心，我们要做的不是立刻把这个功能照搬过来，而是要分析这个功能为什么贴心，解决了用户什么问题
3.接下来，进一步分析提炼出的用户真实需求是否匹配产品定位（目标用户+主要功能+产品特色等），被选中的需求可根据匹配程度排列需求优先级
4.最后是考虑需求实现的成本以及收益
·需求文档：
完成之后就可以重点描述每个需求的逻辑、内容等，开始撰写详细的需求文档。需求文档对设计师来说，更像是一个彼此约定好的产品功能清单，帮助提醒设计师接下来要做什么。需求文档不仅面向设计师，也面向团队中的开发和测试人员，是项目成员参考的重要依据
需求文档中应该包含的内容：文档修改与审核记录；目录（内容过多时）；背景描述（为什么做这个产品）；用户类型和特征；项目时间安排（何时启动、何时完成）；信息结构；整体业务流程说明；需求详细说明等
需求文档也需要不断地修正、迭代。在完成需求文档后需要进行需求评审，评审后，产品经理会根据大家的意见重新修改。在交互设计师拿到需求报告进行设计产出时，结果一般也会和需求文档中的内容不太一样，只要经过有效沟通，产品经理一般都是可以接受的，也相当于对需求文档进行了迭代。这时产品经理可以在设计完成后在修正需求文档，也可以让设计师把相应的修改部分注释在原型稿上
5.2 倾听用户的声音
5.2.2 别被用户牵着走
用户提出的想法、要求可能会有如下问题：
1.用户说的不一定是ta心中所想的
2.用户没有表达出自己的真实需求：比如在汽车未发明之前，问用户想要什么，用户只会说想要一匹更快的马。要从用户的言语中挖掘他内心的真实需求，而不是直接照着他的话去做
3.用户意见不一定专业：用户的意见只是一种直观感受，设计师需要经过判断和思考，重新审视用户意见的合理性
5.2.3 如何对待用户的意见
将上一小节“如何分析与筛选需求”中的几个考虑因素细分，得到5个处理用户意见的因素：
1.根据目标用户考虑：提出要求的用户是你的目标用户吗？
2.根据使用场景考虑：用户提出的这个问题一般发生在什么场景？合乎实际的使用情况吗？使用场景一方面和使用平台有关，比如台式机的使用场景一般较固定，而手机等移动端的使用场景则较为多样化；另一方面和目标用户有关，用户的职业、身份和兴趣爱好也决定了使用的场景。人在不同场景下会有不同的动作，而用户在提出各种意见反馈时，未必会考虑到不同的使用场景
3.根据用户目标（真实需求）考虑：用户表达出自己的真实需求了吗？【同上面的第2点】
4.根据产品定位考虑：用户提出的要求符合产品的定位吗？
5.根据项目资源考虑：用户提出的这个要求需要多少开发资源？价值有多大？需要立即开发吗？
5.3 设计师的逆袭
在实际的项目中，设计师处在一个比较被动的地位。需要主动出击，主动和产品经理沟通和交流——搬到产品经理旁边去，及时关注产品经理的动态，及时和ta探讨
5.3.2 拒绝不靠谱的需求文档
撰写需求文档的好处：需求文档可以有效地帮助产品经理理清产品功能、内容、业务逻辑等整体信息；需求文档大大地方便了团队的沟通，让团队成员在项目前期迅速准确、全面地了解你的想法；需求文档可以帮助其他项目成员有针对性地提出问题，而不是感到困惑和无所适从，这样也提升了工作效率
如何辨别需求文档的内容是否合理：（如果设计师没有参与前期的需求分析而是直接拿到需求文档）
·首先，要明确：需求文档中关于业务逻辑、产品要求、资源限制等是设计师必须要正确理解的内容，而与设计有关的信息结构、任务流程、功能说明、界面描述等，仅代表产品经理个人的意见，作为参考即可
·其次，如果需求文档中的内容不合理，或者设计师受到的需求文档中就已经有产品经理绘制的一些精致线框图，这时需要进行“重新回炉”（见5.3.3）
·再者，如果产品经理没有给需求文档，直接要求设计师照抄竞品（见5.3.4）
5.3.3 从“功能需求”到“设计需求”
如果产品经理撰写的需求文档并不合格，这种情况下设计师不应该照着需求文档的内容去做设计，而需要“重新回炉”，通过用户调研、竞品分析、用户反馈、分析产品数据等方式重新归纳需求，考虑用户的本质需求，确立相应的设计目标（这里的设计目标似乎是取代了原先产品定位的作用），再发散各种功能、内容等，筛选并排列优先级，得到设计需求（这里的设计目标和设计需求仅是设计师的设计方向和范围，是缺失了产品定位后设计师不得已采取的办法，但它依然无法完全替代铲平定位和产品需求的作用）
5.3.4 如何“抄袭”竞品
流程与5.3.3一致，也是通过倒推的方法，分析竞品的流程图，然后得到原始用户需求与业务逻辑，再提炼设计目标，确定设计需求，开始正常的设计过程。可以通过前面提到的用户调研、竞品分析、用户反馈、产品数据等方式，了解我们的用户和竞品用户的区别，以及精品用户在使用中有什么痛点和期望，如何更好地满足用户需求……拒绝不动脑子的“抄袭”
06 设计规划——从需求到设计草图
交互设计师在这一环节中起到主导作用
我们根据需求来确定应该提供哪些必要的信息给用户，然后对信息分门别类、有效地组织起来，并以导航的形式展现在界面上，让用户可以快速找到自己想要的信息；同时我们会根据需求来设计相应的任务，排列任务优先级，并在界面上通过一些列引导，帮助用户快速完成任务。信息和任务并不是孤立存在的，而是相互关联的：完成任务的过程中离不开信息的提示，而寻找信息有时为了完成一系列的任务
6.1 从需求到界面，隔着一扇门
这扇门就是信息的组织与任务的设定
6.1.1 如何搞定信息分类
·逻辑归类：根据人们在生活中熟悉的分类逻辑对内容进行组织，比如买一件男士T恤，会按照“男装>上装>T恤”的顺序来分类，而不是“上装>男装>T恤”
·卡片分类：可以设计出符合用户心智模型的信息架构。招募进行卡片分类的志愿者最好要是与设计不相关的人员，在用户进行分类时，设计师和用研人员可以观察用户的分类过程，以及他们对标签含义的理解，最后对结果进行分析。数据量小的时候可以直接在白板上分析分类情况，或拍照记录数据，数据量大时可以使用专门的数据分析软件，如IBMEZSort、CardZort、WebSort等
卡片分类一般可分为两类：
开放式：给用户足够的自由度来进行信息归类，用户自由地决定把卡片分为几组，每组多少张卡片，最后再由用户为分好组的卡片命名，适用于内容简单、信息量较少的情况（否则会让结果变得不可控）
封闭式：设计师会首先把导航的架构设计好，确定出导航的个数和名称，再将属于这些类目的卡片分发给用户，让用户根据自己的期望把卡片归类到不同的导航分类下。如果有些卡片用户不知道该将它分到哪个类目下，可以将它拿出来，所有卡片不一定要全部分完。封闭式更利于掌控，可用于对信息设计的结果进行验证的阶段
6.1.2 好的导航是成功的一半
信息的组织与分类是导航设计的基础，在保证结构合乎逻辑的同时，还要考虑是否能正确引导用户，深度与广度是否平衡，用户的习惯和使用场景等问题
1.导航的自我解释：成功的导航设计可以自我解释，让用户在导航系统中清楚地认识到信息结构和自己所处的位置，让用户具有方向感
2.深广度平衡：层级的数目可以称为导航的深度，每一层集中包含的菜单项数可以称为导航的广度。如果导航深度过深，用户就需要耗费多此点击才能找到所需信息，每多一次点击操作都会流失掉一批用户。相较于鼠标的不停点击，眼睛在页面上扫视的成本要低很多，广度导航更利于用户发现信息，但如果广度超出用户可以接受的范围，必须以此阅读很多项才能在其中选择，也会大大增加用户的选择负担
3.用户所需信息与商业推广信息的平衡：导航设计，一方面要了解用户的信息需求，另一方面也要了解网站背后的商业目的。比如亚马逊，相关商业推广并不会一开始就干扰用户浏览商品类目、购买商品，而是在用户选择的内容附近默默出现。在不同产品页面，为用户推荐符合其目标的信息，可以起到事半功倍的作用；在不影响用户找到所需信息的情况下进行商业推广（比如使其在视觉上弱于用户所需信息），可以减少对用户的干扰
4.为重要功能和常用功能设置快捷入口：用户在使用时，并不会考虑到产品的逻辑是否合理清晰，只希望在需要时能立刻找到自己想要的功能。但设置快捷入口哦也是一个需要权衡的过程，必要的“快捷通道”可以提高使用效率，但如果快捷入口过多，产品反而会变得混乱复杂
6.1.3 主要任务与次要任务
如果把产品比作一座购物商城，那么信息架构就是商场的框架，比如商场有多少层，每层都卖什么东西；任务流程则相当于商场里面的通道和指示，用户沿着过道完成“购物”、“支付”等主要任务，根据提示完成“去卫生间”、“找停车位”等次要任务，用户在完成任务的过程中满足了自己的需求，而产品也从中实现了其商业价值
次要任务是为了让用户完成最重要的任务而存在的，因此是否设计支线（次要行为流）要看次要行为流是否能对用户完成主行为流产生必要的帮助
任务流程确定后，就可以通过一系列草图去把用户完成任务的过程表现出来，这样我们就得到了任务流、页面流设计，然后再去细化具体的界面
6.1.4 如何突出主要任务
1.分解用户任务：从用户的行为处罚，详细描述用户的使用过程，将用户任务分解为具体的行为操作，这些用户行为就可以称作这个任务的子任务，每一个子任务都可以对应到一个产品功能、一个界面模块
2.排列任务优先级：要突出用户的主要任务，就要对这些子任务所对应功能的优先级进行排列。确定优先级不是凭感觉，要有可以量化的标准来衡量哪些功能优先级高，哪些功能优先级低。我们可以通过使用人数、使用频率和重要程度这三个维度来排布，将优先级分为三个层次：第一优先级、第二优先级、第三优先级。优先级并不是指出现的先后次序（那是行为流），而是在页面中的重要程度
3.组织合并相关任务：将次序相同、操作类似、界面类似的任务组合起来，合并为同一组模块展示在用户面前。在页面中，对于不同级别的任务要有不同的展现形式，一级任务一级展示，二级任务二级展示。
6.1.5 如何引导用户完成任务
按照用户的操作逻辑，采用相似性引导、方向性引导、运动元素引导等：
·相似性引导：如果大小、形态、色彩、视觉元素等因素相似，那么这些相似的因素可以牵引着用户的视觉，引导用户操作
·方向性引导：可以利用具有指向性的箭头；也可以利用清晰的视觉纵线建立起无形的方向性，同一方向上的视觉顺序使页面向下的逻辑关系很明显
·运动元素引导：比如购物页面，添加到购物车之后会有一个从添加按钮“飞到”购物车入口按钮的一条运动轨迹
跨域多个页面的引导：向导控件（Wizard），用来引导用户完成多步操作，还可以告诉用户，要完成任务以哦那个需要多少步，你现在所处的步骤是哪个，还有多少步可以完成任务等
6.2 设计友好而易用的界面
6.2.1 如何简化复杂的操作
1.减少冗余步骤和干扰项：多一次跳转，意味着多一次注意力的转移，多阅读和理解一个页面的信息。减少不必要的步骤，会让用户操作起来觉得轻松很多。
2.讲复杂操作转移给系统：复杂性存在一个临界点，超过了这个点，过程就无法再简化了。可以将复杂操作从用户转移给系统，让机器代替用户进行操作，也就是让机器变得更智能（比如地图软件的路线起点自动定位为当前地点等）
3.简化操作方式：比如以前搜索一个词条，先在原页面选中词条并复制，然后打开新的页面粘贴到搜索栏，然后点击搜索，现在直接在原页面选中词条，右键就会有一个直接跳转搜索的按键
4.优化操作过程：操作中得不到反馈，发生错误后全部重新填写，因为缺少预先提示而导致的重复操作比操作流程的冗余更可怕（再比如系统更新之前不先提示电量不足，在更新过程中因为没电导致需要重新更新）。提供合适的首选项、适时帮助、及时反馈、提供合理的默认值等等，可以帮助用户降低出错几率，更快更顺畅的完成任务
6.2.2 信息量太大，页面怎么摆
有人举过一个例子：“我们精心设计过的页面，在用户看来，更像是以每小时100公里的速度驶过的广告牌。”
1.让页面层次不言而喻：在设计以信息呈现为主的界面的时候，我们可以将要呈现的大段信息分解成易于理解的信息模块，根据“用户想看到什么”和“我们想让用户看到什么”，为内容板块排列优先级。这与分析用户任务的过程类似，都遵循“分解—排列—组织”的原则
在视觉呈现上，要突出信息模块之间的逻辑关系：
·逻辑相关的信息在视觉上分为一组：可以利用“接近原则”，物体之间的相对距离会影响我们对其组织方式的感知，在模块与模块之间，段落与段落之间等划分几个固定的高度，严格按照这几个间距进行排布，从而形成整个页面的节奏感，用不同的间距表明界面内容的关系
·内容或重要程度不同的在视觉上体现出差异：使用“差异原则”
·逻辑上有包含关系的在视觉上进行嵌套：就像在写文章时，如果太长我们需要以一种层级结构来展示各段及其子段落
2.让重点信息“跳出来”：强调界面的重点元素，而其他非重点的元素应该尽量藏起来，或是显得暗淡些
3.将次要信息“藏起来”：比如Google的首页分了三个层级，用户最常用的功能放置在导航栏上，使用频率次之的功能放置在“更多”展开的菜单里，在菜单的最后一项还有一个“更多”，点击这里会跳转到Google所有产品的列表页，使用频率最低的功能被放置在这里。有效地隐藏使大多数用户可以快速找到常用功能。隐藏策略不仅可以让界面重点更突出，还可以减少跳转，满足用户的快捷操作
6.2.3 理性的规划 VS 感性的界面
既要学会理性的规划网站层级和逻辑，又要学会通过感性的界面吸引用户
1.以人为本的界面设计：目标明确的用户在使用产品时会按照流程一步步完成任务，而对于目标不明确的用户，则需要通过更多的展示内容来吸引他。用户被吸引了才有可能尝试操作，进而完成任务。比如淘宝的收藏夹和购物车的界面又很大的差别，是因为考虑到了用户的使用情境和心理感受：收藏夹需要适度的突出图片、评论和人气等，吸引用户去购买；而购物车则应尽量简洁明了，不过多干扰用户，方便迅速下单
2.帮助用户找到想要的东西：信息组织与分类的目的，就是要让信息易于找寻：让有明确目标的用户快速找到；让有不明确目标的用户通过浏览和寻找一点点明确并最终找到；让没有目标的用户在探索中激发需求
3.吸引无目标用户：不能再用利性、逻辑的思维方式来对待他们，而要充分的换位思考，用感性的思维方式来给他们营造贴心、友好、有吸引力的界面。对于闲逛型用户，如果也买你的内容无法吸引他们，则很可能会流失掉。让用户在没有注册的时候也可以对网站的内容略知一二，他们就有可能留下来，并注册成为活跃用户（如新浪微博和知乎的登陆页面对比）
4.符合用户心理模型
6.3 捕获用户的芳心
6.3.1 来自真实世界的灵感：如果界面设计的元素可以与现实世界中的潜意识因子相呼应，勾起用户的回忆，引起用户的共鸣，那么当用户看到界面时，能够令其产生认同感和情绪体验，与界面产生情感互动，从而引导用户积极操作
1.拟物化的视觉：通过模拟现实中的物体，使用户产生熟悉感，让信息和功能更加易于识别和理解，图标的拟物化设计能够传达应用的使用方式。拟物不是百分百的还原，抽象出物体最有特征的部分，将繁复的视觉元素进行简化处理（比如网易云的播放页面仅保留了留声机最有特征的两个元素：唱片和唱针）
2.隐喻化的操作：当应用中的可视化对象和操作与现实世界中的对象与操作类似时，用户就能快速领会如何使用它。比如ios的文件夹，点击时就像现实生活中的抽屉一样展开，这种操作之间的逻辑关系，形成了一种空间感，这种逻辑关系越符合现实，就越容易让用户理解
6.3.2 贴心的设计惹人爱
1.可控的感受：人们对外部世界的控制感能够带来积极的情绪体验，也更愿意接受挑战和尝试新鲜事物（比如加载状态的进度条）。为了增强用户的可控干，界面还需要预先提供提示，向用户透露一些接下来将要发生的事情，让用户建立预期（比如聊天软件中的“正在输入”）
2.积极的反馈：积极的反馈可以增强用户的信心，提升用户体验的愉悦感和成就感（比如用户完成任务后奖励一个闪闪发亮的奖章，给予一个大大的对勾和赞叹的话语）
3.贴心的提醒：比如在发邮件的时候如果用户在邮件内容中提及到了“附件”二字却没有添加附件，或者没有填写邮件主题，则会在发送前提醒用户；再比如查看消息列表时，看过的消息标题会变灰，降低饱和度，而未读的消息标题前则会有一个小标，且标题醒目
6.3.3 如何调动用户的情感
1.互动的乐趣：比如设计的幽默又友好的404页面
2.惊喜的力量：虽然在功能方面没有什么实际的用处，但用户偶尔发现后，会增添一份特殊的喜悦，增强用户的探索欲望（比如微信中的彩蛋：输入“生日快乐”会出现满屏的蛋糕等，还有Google在特定的节日也会有一些彩蛋）
3.情景的烘托：讲故事的方式，比如qq便民的充值中心在春节期间设计的活动页面，选取了春运、年终奖、打电话拜年等过年时常见的场景，对保险、彩票、充话费等业务进行了推广
6.4 快速表达我的想法——纸面原型
纸面原型的目的不是为了交付，而是为了沟通、测试，无需考虑格式和规则。其中最需要关注的是框架、流程、基本功能和内容，设计细节可以忽略。如果觉得纸面原型难以直观的表达动态效果，还可以使用POP-Prototyping on Paper和“快现”两款手机应用