基于上一篇简书读《破茧成蝶-用户体验设计师的成长之路》笔记一（成为用户体验师的信念），这里我们就要进入下一阶段修炼技能啦。写在之前，入门了解一个行业很容易，想要站稳脚跟并创造一番事业，你就需要不断修炼。（全文太长，见谅）

---

设计师具体做什么呢？首先，我们要知道，用户体验设计的目标：解决用户需求，减少用户理解和操作成本，给用户留下美好而深刻的印象。为了达到这个设计目标，设计师不仅要有理性的思维、巧妙的创意，还要在项目中学会与其他角色协作，共同达到目的。（言语枯燥乏味，直接上图）

具体项目流程（书中图）

流程就是这么个流程，可是执行就不是那么回事啦，项目中设计师遇到的问题如下：

1.团队成员的专业能力

2.外界因素的影响

3.团队凝聚力（这一点是可以做到改变的）

---

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

做产品，要同时考虑商业价值和用户需求，缺一不可。

实际工作中需求角度（书中图）

产品经理应该在初始阶段和设计师一起合作，通过融合各自专业方法，共同完成需求分析，以此来平衡商业价值和用户需求，这样才能保证最后的设计不会过度偏离产品方向。

需求分析的前奏——产品定位

产品定位是产品设计的方向，也是需求文档和设计产出的判断标准

产品定位内容：

产品定义（产品经理从网站角度考虑）和用户需求（设计师从用户考虑）

产品定位（书中图）

产品定义：说白了，用一句话概括某产品。使用人群是你明确产品主要为谁服务，所有的功能、内容、设计风格的设定都围绕这类人群来进行；主要功能为你划定了功能的范围和限制，比如你是要做音乐类的，还是做修图方面的；产品特色使你区别于同类竞争者，让你在同类产品中脱颖而出，更具竞争力。

产品定义作用：

1.迫使产品经理去思考产品的方向和机会

2.为产品限定了大致范围

3.使团队成员的凝聚力更强、思想更统一

用户需求：主要包括目标用户、使用场景和用户目标

一条用户需求其实就是解决“谁”在“什么环境下”想要“解决什么问题”

两步走：1.选择用户目标 2.确定产品定位并据此筛选需求

采集需求的方式：

用户调研、竞品分析、用户反馈（上线后）、产品数据（上线后）

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

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

用户反馈---产品在测试阶段或正式发布后，我们可能会收到很多用户反馈

产品数据---产品上线后，就可以收集到产品的相关数据了

处理需求，遵循以下流程。

（如何把用户需求转化为产品需求）书中图

需求是如何产生的？

（从产品定位到需求优先级）书中图

了解需求文档：需求文档对于设计师来说，更像是一个彼此约定好的产品功能清单，帮助设计师接下来做什么。

需求文档的内容：-文档修改与修改记录 -目录 -背景描述 -用户类型和特征 -项目时间安排-信息结构

-整体业务流程说明 -需求详细说明

注意：

1.需求文档不可能一次到位

2.细节在需求阶段不容易考虑，到具体设计阶段才有更深入思考

3.设计师不要严格按照需求文档来做设计

倾听用户的声音

1.拥抱用户（走进他们，倾听他们）

2.别被用户牵着走

-用户说的不一定是心中所想

-用户没有表达出自己的真实需求

-该用户不是你的目标用户

-用户意见不一定专业

如何对待用户意见？

-根据目标用户考虑：提出要求的是你的目标用户吗？

-根据使用场景考虑：用户提出的这个问题一般发生在什么场景？合乎实际的使用情况吗？

-根据目标用户（真实需求）考虑：用户表达出自己的真实需求了吗？

-根据产品定位考虑：用户提出的要求符合产品的定位吗？

-根据项目资源考虑：用户提出的这个要求需要多少开发资源？价值有多大？需要立即开发吗？

作为产品经理，应该养成写需求文档的好习惯。

1.可以有效地帮助产品经理理清产品功能、内容、业务逻辑等整体信息

2.方便团队沟通，让团队成员在项目前期迅速准确、全面的了解你的想法

3.帮助其他项目成员提升工作效率

4.既有利项目持续发展，也能促进产品经理自身能力、专业性的提升

---

注意：当我们确定需求之后，千万不要就开始尝试用软件画界面，这是目前很多产品经理和设计师的一个不好的习惯。

从需求到界面，其实中间还隔着一扇门——信息的组织与任务设定

信息的分类：

1、逻辑归类——我们可以将物品按照生活中常见的用途、品类、形状、颜色、材料、品牌等进行分类，通过数字、字母、时间等进行标识。

2、卡片分类——设计符合用户心智模型的信息架构

开放式：开放式的卡片分类会给用户足够的自由度来进行信息归类。设计师将完全打乱的卡片分发给用户，用户可以完全自由的决定把卡片分为几组、每组有多少张卡片。最后在由用户为分好的组的卡片命名。开放的方式给了用户极大的发挥空间。

开放式卡片分类（书中图）

封闭式：设计师首先会将导航的架构设计好，确定出导航的个数和名称，再将属于这些类目的卡片分发给用户，让用户根据自己的期望，把卡片归类在不同的导航分类下。如果有些卡片用户不知道该将它分到哪个类目下，可以将它拿出来，所有卡片不一定要全部完成，封闭式的分类更利于掌控，可以用户对信息设计的结果进行验证的阶段。

封闭式卡片分类（书中图）

如何设计一个好的导航？

1、导航的自我解释（红色圈）

虚拟的网络世界不比现实世界中的明显方向感，不明确的导航和位置信息可能导致用户迷失方向，成功的导航设计可以自我解释，让用户在导航系统中清楚地认识到信息结构和自己所处的位置。

eBay女装类目（书中图）

2、深广度平衡

相比于鼠标的不停点击，眼睛在页面上扫视的成本要低很多，所以比起深层次的导航结构，广度当行更利于用户发现信息。但如果广度超出用户可以接受的范围，人们必须一次阅读很多选项才能在其中进行选择，也会大大增加用户的选择负担。一般来讲，超过7个选项时，用户就很难记住了，一次性展示过多选项会令用户患上“选择恐惧症”，很难从中挑出哪一项才是自己想要的。

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

在不同产品页面，为用户推荐符合其目标的信息，可以起到事半功倍的作用。

亚马逊商品分类导航（书中图）

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

为重要功能和常用功能设置快捷入口，就像是在原有产品架构的基础上搭建“快捷通道”。用户可以一步步顺着产品的逻辑来寻找所需功能，也可以通过快捷入口，按照自己的行为习惯，快速找到所需功能。但设置快捷入口也是一个需要权衡的过程。必要的“快捷通道”可以提高使用效率，但如果快捷入口过多，产品会变得混乱复杂。同一个功能入口太多，不仅不会提升使用效率， 反而会使用户感到迷茫。

如何突出主要任务？

使用户专注于主要任务：分解用户任务、排列任务优先级、组织合并相关任务

如何引导用户完成任务？

1、相似性引导

所谓相似性引导就是，如果大小、色彩、形态、视觉元素等原因相似，那么这些相似的因素可以牵引着用户的视觉，引导用户操作。

2、方向性引导

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

3、运动元素引导

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

4、向导控件

向导控件（Wizard：巫师）是一种常用的交互方式，用来引导用户完成多补操作。向导控件就像神奇的巫师，可以在陌生的页面环境中，为用户指引路线。同时还可以告诉用户，要完成任务一共需要多少步骤，你现在所处的步骤是哪个，还有多少步可以完成任务。让用户对整个操作有个预期，帮助迷失的人们找到前进的方向。

如何简化复杂的操作？

1、减少冗余步骤和干扰项

2、把复杂操作转移给系统

3、简化操作方式

4、优化操作过程

---

什么是原型？

原型是设计方案的表达，是设计师的重要的产出物之一，也是项目团队的参考、评估的重要依据。它是产品功能与内容的示意图，既包含静态的页面样式（线框图），也包含动态的操作效果（交互说明）。

原型对项目成员影响(书中图）

标准原型包含的内容:

1、简要的说明与信息结构

变更日志一般包含日期、变更内容、变更原因、备注等内容。

变更日志示例（书中图）

版本说明需要包含版本号、日期、更改内容。

版本说明示例（书中图）

信息架构：产品内容都有什么，它们是如何组织起来的，页面层级又是如何分布的，等等，这些信息结构中都有体现。

信息架构示例（书中图）

2、任务流程与页面流程

任务流程：是指用户使用产品时，它的每一步操作会遇到什么结果、系统会如何反馈，等等。

页面流程：比任务流程图更清晰、具体。通过页面流程图，不仅可以看到具体的页面，还可以看到用户如何通过操作，从一个页面跳转到另一个页面的完整过程。任务流程图是页面流程图的基础和依据。

3、线框图&交互说明

原型既包含静态的页面样式，也包含动态的操作效果。线框图代表静态的部分，而交互说明则代表动态的部分。

交互说明是原型中不可缺少的内容。逻辑严密、内容详细的交互说明会让原形看起来更专业。

交互说明示例（书中图）

交互说明的类型：

限制：包括范围值、极限值等。

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

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

状态：包含默认状态、常见状态、特殊状态等

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

常见状态主要只针对某一个模块，经常遇到的一些状态。这些状态都需要在原型上表述出来。比如一个普通的积分模块，一般会出现三种状态：未登录状态、登录后未签到状态。

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

操作：包含常见操作、特殊操作、误操作、手势操作。

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

特殊操作主要指一些极端情况下的操作。

误操作主要指当用户操作错误的情况。不过在我们设计时要尽量避免用户犯错的机会。

手指操作主要指用户移动产品时的操作方式。常见的有点击、双击、长按、捏、伸、滑动，等等。

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

提示主要是指操作后，系统反馈给用户的文字说明等。

跳转主要指点击某个链接后，页面跳转到哪里。设计师需要在原型上注明跳转时是"原页面刷新“还是"新页面打开”。做手机应用的话，需要注明跳转时的转场方式。

动画主要是指用户操作后，系统通过动画的方式反馈给用户。动画给人的感觉比较友好、趣味性强，是非常常见的一种反馈形式。

总而言之，写交互说明时主要应记住2条内容：除静态页面外，还需要考虑各种动态情况；除正常情况外，还需考虑特殊和错误情况。

---

具体如何画线框图？书中作者给出了在工作中积累的心得。

1、通过明暗对比表达

加入明暗对比之后，界面元素的优先级关系更加直观。但是要注意，深色并不意味着比浅色更重要，要看色块之间的对比关系。

2、不使用截图和颜色

注意:很多产品人员为了更清楚的表达想法，拼凑各种竞品的截图，组成一个页面。这样做一来不规范，二来对视觉设计师也有一定的干扰。另外，不太建议在线框图上使用色彩，否则同样会对设计师造成不必要的干扰。

3、合理的布局

建议在确定页面布局时，提前和视觉设计师沟通商量，避免不必要的返工。

4、遵守栅格规范

根据栅格确定栏宽（书中图）

5、标记第一屏高度

重要的操作按钮一定要在第一屏内完全显示，否则用户第一眼看不到，就有可能放弃这个页面，从而严重影响转化率。

6、表达清楚UI逻辑

一般来说，操作的优先级大于链接，链接的优先级大于文本。最重要的操作一般是用按钮来表现的，比如收藏夹中的“加入购物车”按钮；然后是普通操作，比如“对比”等，最后是消极操作，比如“删除”。我们可以把普通操作和需要重点突出的连接设计成同样的样式。虽然它们的性质不同，但对于用户来说，其优先级程度是类似的，最后整理成表格。

7、考虑视觉实现之后的效果

注意：视觉设计师拿到线框图之后，先不要着急做，先看看有没有问题，能不能突出重点。在做之前多沟通、多思考，才能事半功倍。

8、了解视觉趋势

时刻关注一些视觉趋势，有助于我们在审美上和视觉设计师站在较为一致的立场，使大家的沟通更加流畅。

---

写交互说明的诀窍

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

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

3、避免过长的说明

4、避免流水账的说明

-流程图代替文字说明

-用表格罗列各种状态

-巧妙组织文字说明

-制作动态效果

5、关于重复出现的模块

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

其实用什么方法都不是最重要的，重要的是在合作过程中，不仅要把自己该做的做好，同时要站在合作伙伴的角度上考虑问题，给大家提供更多福利，才能使团队的效率越来越高，大家配合的越来越默契。

---

关于设计规范

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

设计规范包含很多内容，比如交互规范、色彩规范、logo规范、UI图标规范、控件规范，等等。

规范解决了什么问题？

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

如果产品保持产品概念、界面元素、视觉风格、操作交互的“一致性”，能啊不能关注用户适应和熟悉产品，让用户更容易“认识”你的产品，从而提高用户粘度。

2、提高易用性

如果相同功能、组件采用类似的处理方式，用户使用起来就会更轻松，就可以避免不必要的思考，也不需要重新适应。

3、满足团队协作需求

规范可以让之前在设计过程中被反复讨论、验证过的设计思路沉淀下来，而不是无声的消亡或变形。

4、其他

避免重复劳动、提高工作效率、提升设计质量、降低培训和支持成本、减少团队成员犯错误的几率等等。

 设计规范的分类？

从纵向考虑，设计规范可分为交互规范和视觉规范。交互规范一般要先于视觉规范。

从横向考虑，设计规范可分为产品战略级方向的大规范及单个项目中的设计小规范。

什么时候开始设计规范？

在设计开始之前就制定规范，是很不切实际的做法。你会发现做好的规范在实际操作中是无用且白费精力的。

项目全部完成之后在设计规范，这可能是我们很多设计师都会采用的方式，你呢挂钩方便产品未来延续发展。但这种方式不是绝对的。如果是一次性的产品，根本没有必要设计完成之后还去浪费时间去整理规范。规范是知道设计的工具，而不是设计后的总结，况且整理规范也是需要不少时间和人力成本的。

交互规范一般先于视觉规范，视觉是在交互的基础上做效果，设计规范一般遵循从大到小的原则，即：先制定大的设计方向，再制定项目中单个详细的说明；先制定团队合作的规范，再制定个人操作上的规范。

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

设计师在发阶段具体怎么做呢？产品上线前，交互设计师需要对测试环境下的产品Ｄｅｍｏ进行交互走查，如交互动作，操作及其反馈，交互控件的各种状态，极端、极限和出错的情况，默认值是否正确，第一屏高度，悬停状态，文案，等等。这些小细节也是开发阶段可能被疏忽的。视觉设计师同样需要对产品进行走查，如视觉样式，是否有色差、尺寸间距、图片质量、是否符合栅格，等等。交互设计师也可以配合测试工程师撰写测试用例，更好地保证上线后的产品与设计稿一致。

设计走查（书中图）

---

这个时候虽然设计师的重头戏都完成了，但是在这个过程中，我们应该主动跟踪和反馈，发现新的需求、新的数据，再去分析产品应该如何持续优化，满足用户不断变化的需求，帮助产品取得更大的成功，也帮助自己不断进步。

可用性测试

可用性测试是改善产品的最佳方式之一。每个设计师都应该掌握简易可用性测试的方法。

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

可用性测试流程（书中图）

设计测试任务该注意什么？

１、给出使用目标，而不是直接操作

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

３、符合正常操作流程

测试用户选择

１、选择有代表性的用户

２、用户数量选择

５名左右用户发现大部分问题

测试过程中的注意事项：

１、切忌引导性过强

２、操作行为永远是重点

３、不要忽视现场反应

４、考虑使用场景

５、感谢被测试者，并给予一定报酬

Ａ／Ｂ测试

含义：就是Ａ和Ｂ的方案的比较

Ａ／Ｂ测试示意图（书中图）

１、设定衡量标准

２、对同一个用户呈现相同的页面

３、保证两个版本同时测试

４、保持单一变量

５、Ａ／Ｂ测试的延伸——灰度分布