一次优质的用户体验是将“偶然的浏览者”转化为“实际购买人”的关键因素。

to B 的网站，用户体验仍然会带来很大的差异。一个是“为企业创造价值的项目，另一个则是“变成资源消耗噩梦的项目”

任何在用户体验上所做的努力，都是为了提高效率。这基本上是以两种主要形式体现出来的：“帮助人们工作的更快”和“减少他们犯错的概率”

※ 根据网站的性质，可以分为：

A功能型平台类产品

关注任务—所有的操作都被纳入一个过程，去思考人们如何完成这个过程。在这里，我们把网站看成用户用于完成一个或多个任务的一个工具或一组工具。

B信息型媒介类产品

关注点是信息—网站应该提供哪些信息，这些信息对用户的意义是什么。创建一个富信息的用户体验，就是给用户提供一个可以寻找、理解且有意义的信息组合。

战略层：

我们要通过这个产品得到什么？-产品目标

我们自己对网站的期望目标-产品目标

我们的用户要通过这个产品得到什么？-用户需求

来自企业外部的-用户需求；

产品目标

商业目标（business goal）：不能太宽泛，也不能太具体？？？

品牌识别（brand identity）：概念系统+情绪反应

成功标准（success metric）：一些可追踪的指标，在上线以后用来显示它是否满足了我们自己的目标和用户的需求。

好的成功标准不仅影响项目各阶段的决策，也为衡量用户体验工作的价值提供了具体依据。

有时成功标准与网站本身和用户如何使用网站有关。

如果你想要鼓励用户随意轻松地发掘网站提供的服务，那么你一定希望看到单次访问的时间有所增加。相反，如果你想要提供快捷简便的信息或功能服务，那么你或许希望单次访问的时间减少。

用户需求

抛弃自己立场的局限，真正从用户的角度来重新审视网站。

※ 用户细分（user segmentation）：具有某些共同关键特征的用户组成

a人口统计学-性别、年龄、教育水平、婚姻状况、收入等

b消费心态档案-用户对于这个世界，尤其是与产品有关的某个事物的观点和看法的心理分析方法

c其他

-创建网站时，考虑用户对技术和网页本身的看法（上网时间？喜欢技术型产品吗？升级？）

-用户对于网站相关内容的知识掌握度（专业vs爱好者）

-用户的社会角色或专业角色（学生vs家长）

-某些需求是矛盾的（炒股新手vs专家：分解步骤vs快速操作）

↓

创建细分用户群

※ 用户研究（user research）：收集必要的信息来达成共识

问卷调查、用户访谈、焦点小组-手机用户普遍观点与感知

用户测试、现场调查-理解具体的用户行为以及用户在和产品交互时的表现

a现场调查（contextual inquiry）（情境调查） 指一整套完整、有效且全面的方法，用于了解在日常生活情境中的用户行为

现场调查也可以用一种更轻量级、更低成本的方式来实施。-任务分析（task analysis）

任务分析：仔细分解用户完成任务的精确步骤，可以通过用户访谈，用户自己讲故事，也可以通过现场调查来完成。

b用户测试（user testing）：测试产品

可用性测试的终极目标，是寻找另产品更加容易使用的途径。

用户测试的方法：

-测试一个清晰地概念，比如用户如何成功的完成一项特定的任务

-测试原型，纸上原型、草图、低保真、高保真等

-卡片排序法，用于探索用户如何分类或组织各种信息元素

※ 创建人物角色（用户模型、用户简介）：可以让用户更加真实

将用户调查及细分过程中得到的分散资料重新关联起来，确保在整个设计过程中把用户始终放在心里。

战略层产出：战略文档（strategy document）或愿景文档（visin document）

由决策者、普通员工和用户自己组成决策层

——————————————————————————————————

范围层：

※ 定义需求

将用户需求和产品目标转换成产品应该提供给用户什么样的内容和功能

功能型产品-创建功能规格-对产品的功能组合的详细描述

信息型产品-以内容需求的形式出现-对各种内容元素的要求的详细描述

※ 为什么要用文档来定义需求

1.这样你才知道你正在建设什么

每个参与在项目里的人都会知道这个项目的目标是什么，什么时候将达到这样的目标。

拥有明确的要求会让你把责任分配的更清晰，提高协作效率。

2.这样你才知道不需要建设什么

记录所有功能的可能性，评估这些想法的架构，当前难以满足的需求，可以成为启动下一个版本的基础，形成一个不断循环开发的过程。

在范围层，从“我们为什么要开发这个产品”转换为“我们要开发的是什么”

功能型产品-功能规格（functional specification）-对产品的功能组合的详细描述-哪些应当被当成产品的功能以及相应的组合

信息型产品-内容需求-对各种内容元素的要求的详细描述-编辑和营销推广的领域

内容需求与功能需求互相穿插

定义需求

详略程度取决于该项目的具体范围

需求源泉是用户本身，而不是利益相关同事，需求也来源于企业内部管理者。

在决定功能需求时，可以使用人物角色，把虚拟人物放到一个场景中，想象用户会经历什么样的过程，找出帮助他顺利完成这个过程的潜在需求。

也可以从竞争对手处得到启示，在做同一件事的产品基本上是在试图满足用户同样的需求。

※ 需求分类

用户描述的想要的东西

用户说的、期望的特性，并不是他们想要的

用户不知道他们是否需要的

-寻找产品新方向：汇集企业各个部门成员进行头脑风暴

功能规格说明书

不需要包含产品的每一个细节，只需要包含设计或开发过程中可能混淆的功能定义，只记录在创建时已经确定的决议，不展望理想化状态。

1.乐观-描述系统将要去做什么事情去“防止”不好的情况发生，而不是描述这个系统“不应该”做什么不好的事情

× 这个系统不允许用户购买没有风筝线的风筝。

✅如果用户想购买一个没有线的风筝，系统应该引导用户到风筝线页面。

2.具体-尽可能详细的解释清楚状况，

× 最受欢迎的视频要重点标注。

✅上一周被播放最多的视频要显示在列表的最前端。

定义【最受欢迎】，描述【重点关注】的机制

3.避免主观语气-使需求保持明确和避免歧义。

× 这个网站的风格应该是时尚、闪耀的。

✅网站的外观应该符合企业的品牌指南文档的要求。

内容需求文档

定义出所有不同类型的内容，可以帮助你确定需要哪些资源来制作这些内容（或他们是否应该被提供）

1.不要混淆内容的格式和它的目的

FAQ vs 用户普遍需要的常见信息

2.提供每一个特性规模的大致预估

文本的字数、图片像素大小、下载的文件字节、PDF或音频文件等相对独立元素的大小

3.尽早的确定某个人来负责每一个内容元素

4.定义每一个内容特性的“更新频率”

-来自产品的战略目标（你希望用户多长时间访问一次？）

确定一个频率，介于你的用户期望值和有效资源之间的合理中间值。

5.明确有相异需求用户的不同内容处理方式

6.整理网站现有内容的清单。（content inventory）

确定需求优先级

需求是否能满足战略目标（产品目标or用户需求）

需求实现的可能性

不同需求之间的关联性

范围层产出：功能规格说明书，内容需求文档

——————————————————————————————————

结构层：

确定各个将要呈现给用户的元素的模式（pattern）和顺序（sequence）。

功能型产品-交互设计-定义系统如何响应用户的请求-关注于将影响用户执行和完成任务的元素

信息型产品-信息结构-合理安排内容元素以促进人类理解信息-关注如何将信息表达给用户的元素

交互设计

关注可能的用户行为，定义系统如何配合与响应

※ 概念模型（淘宝vs1688？）

交互组件该怎样工作

eg：“购物车”在电商概念模型中是一个容器，这个概念模型影响了它的视觉设计和在界面上使用的语言。它是一个容器，我们放东西到推车中，以及从里面拿出东西来，系统必须提供能完成这些任务的功能。

假设购物车的概念来自于订货单，系统应该使用编辑来代替购物车的添加与移除。

我们无需把明确的概念模型告诉用户，会使用户混淆。

概念模型用于在交互设计的开发过程中保持使用方式的一致性。

eg：航空公司订票系统

※ 错误处理

1.把系统设计成无法犯错

自动档汽车不挂在P上，无法启动。

2.时错误难以发生，系统帮助用户找出错误并改正它，甚至自动更正。

3.提供在错误中更正的方式

如果在用户完成操作之后，才发现做错了，系统无法纠正时，提供恢复方式。

eg：undo

4.对于无法恢复的错误，提供大量的警告

信息架构

呈现给用户的信息是否合理并具有意义。

※ 结构化内容

在以内容为主的网站上，信息架构主要的工作是设计组织分类和导航的结构，让用户可以高效率、有效地浏览网站的内容。

与信息检索的概念密切相关：设计出让用户容易找出信息的系统

※ 建立分类体系

A 从上到下（top-down approach）-战略层驱动

根据产品目标和用户需求直接进行结构设计

从最广泛的、有可能满足决策目标的内容与功能开始分类，然后再依据逻辑细分出次级分类。

可能会导致细节被忽略。

B 从下到上（bottom-up approach）-范围层驱动

根据对内容和功能需求的分析而来，逐渐构建能反映产品目标和用户需求的结构。

可能导致架构过于精确而无法灵活变动。

结构质量最重要的标准，不是整个过程一共需要多少步骤，而是用户是否认为每一步都是合理的，当前步骤是否自然延续了上一个步骤中的任务。

高效结构的优点是具备【容纳成长和适应变动】的能力。

※ 节点的结构方法

节点是信息架构的基本单位（可以对应任意的信息片段或组合-价格or整个图书馆）

节点可以用不同的方式来安排：

a层级结构/树状/中心辐射-节点与其他节点之间存在父级/子级关系

b矩阵结构-允许用户在节点与节点之间，沿2个或更多维度移动

能够帮助“带着不同需求而来”的用户

c自然结构-没有太强烈的分类概念

适用于探索一系列关系不明确或一直在演变的主题，鼓励自由探险的感觉，如某些教育、娱乐网站

d线性结构-来自于线下媒体，书、文章

在互联网中适用于小规模结构，如专题、教学资料等

※ 节点的组织原则

决定哪些节点要编成一组，哪些要保持独立。

不同的组织原则将被应用在不同的区域和网站的不同层面。

eg：

公司信息网站，树状结构中的最上层为：消费者、企业集团、投资者

那么组织原则为：不同内容所针对的观众。

旅行网站最上层的类别为：北美洲、欧洲、非洲

那么组织原则为：地区

产品在最高级使用的组织原则紧密的与“网站目标”和“用户需求”（战略层）相关，而在结构中较低的层级，内容与功能需求（范围层）将对你所采取的组织原则产生重大影响。

※ 语言与元数据

命名原则-描述、标签，和网站使用的其他术语。

“使用用户的语言”并且“保持一致性”是非常重要的。

【受控词典】是网站使用的一套标准语言。用来强调一致性。

-与用户访谈并了解他们的沟通方式，开发出一个让用户感到自然地命名原则系统

【类词词典】-控制词汇的另一张较为精细的应用方法

与简单列出所使用词汇的清单不同，类词词典提供常用的，但未纳入使用的标准用语词汇以供选择。

内部专用术语、速写语、俚语、缩写词，词汇之间的类型关系、更广义或狭义的相关词汇建议

使用受控词典或类词词典对于建立包含元数据的系统特别有用。

↓

【元数据】-关于信息的信息，以一种结构化的方式来描述内容的信息。

掌握的信息越详细，在建设信息架构时灵活性越高。

可使用受控词典，使你的内容中，每一个独特的概念都对应一个固定的词，就可以依靠自动化来定义内容之间的联系。

结构层产出是架构图-视觉词典

——————————————————————————————————

框架层：

结构层界定了产品将用什么方式来运作，框架层用于确定用什么样的功能和形式来实现。

关注独立的组件以及他们相互的关系上。

主要解决放置问题。

界面设计考虑可交互元素的布局

导航设计考虑产品中引导用户移动的元素的安排

信息设计考虑传达给用户的信息要素的排布

功能型产品-界面设计-安排好能让用户与系统的功能产生互动的界面元素-确定框架（按钮、输入框、其他界面控件）

提供给用户做某些事的能力，通过他，用户能真正接触到那些在结构层的交互设计中确定的具体功能。

信息型产品-导航设计-屏幕上的一些元素的组合，允许用户在信息架构中穿行

提供给用户群去某些地方的能力，信息架构把一个结构应用到我们设定好的“内容需求列表”之中，而导航设计则是一个用户能看到那个结构的镜头，表示通过它可以再“结构中自由的穿行”。

二者都要做-信息设计-促进理解的信息表达方式-用于呈现有效的信息沟通

传达想法给用户

三者紧密结合

※ 习惯和比喻

习惯和反射是我们与世界交互的基础

当某种不同的方式有明显的益处时，你反而应该试着去未被一些习惯。建立一个成功的用户体验，要求你在做每一个决定的时候都有充分的、明确的理由。

界面设计

选择正确的界面元素，帮助用户完成他们的任务，还要通过适当的方式让它们容易被理解和使用。

要让用户一眼看到最重要的东西。

设计复杂系统的最大挑战是弄清楚用户不需要知道哪些。

组织好用户最常采用的行为，让界面元素用最容易的方式获取和使用。

仔细考虑每一个选项的默认值（理解用户任务和目标）

自动记住用户最后一次的选择状态

※ 一些标准界面元素

• 复选框 checkbox

-允许用户独立的选择各个选项

• 单选按钮 radio button

-允许用户从一组互斥的选项中选择一个

-可显示所有可选项，但需要更多的空间

• 文本框 text field

-输入文字

• 下拉列表 dropdown list

-提供和单选按钮相似的功能，但是它们在一个更紧凑的空间中完成这件事，允许更有效的呈现更多选项。

-由于在视觉上隐藏了重要的选项，可能会妨碍用户。

-节省空间

• 列表框 list box

-提供和复选框相似的功能，但他们在一个更紧凑的空间排列（有滚动条）

-列表框更容易支持大量的选项

• 按钮 action button

-通常情况下，告诉系统接受用户通过其他界面元素提交的所有信息，并用这些信息来做一些事情-采取动作

导航设计

用户需要知道自己在哪儿？自己能去哪儿？

必须同时完成以下目标：

提供给用户一种在网站间跳转的方法

传达出这些元素和它们所包含内容之间的关系

导航内容与用户当前浏览页之间的关系

全局导航（global navigation）-覆盖整个网站的通路

局部导航（local navigation）-提供用户在这个架构中到附近地点的通路

辅助导航-快速捷径

上下文导航（文字超链接）-方便用户获取额外信息

友好导航-联系信息、反馈表单、法律声明

网站地图-远程导航的一种？

索引表？

信息设计

反映用户的思路

支持他们的任务和目标

线框图

捕获所有在框架层做出的决定，作为视觉设计和网站实施的参考

通过安排和选择界面元素来整合界面设计；

通过识别和定义核心导航系统来整合导航设计；

通过放置和排列信息组成部分的优先级来整合信息设计。

——————————————————————————————————

表现层：

为最终产品创建感知体验

解决并弥补产品框架层的逻辑排布的感知呈现问题。

评估视觉设计方案

运作是否良好？

对于下层的设计目标是否给予良好的支持？

（产品外观有没有破坏结构？有没有强化结构？使用户可用选项清晰明了？）

是否强化品牌形象？

1.遵循视觉动线

用户的实现移动并不是随机的，是一种人类共有的、对于视觉刺激而产生的、一系列复杂的原始的本能反应。

-遵循一条流程的路径

-不需要太多细节来分散用户注意力

2.对比和一致性

使用对比，吸引用户注意力到关键比分-差异需要足够清晰

使用一致性，有效传达清晰地信息（栅格系统）

3.内部和外部的一致性

建立在对网站框架的理解上-解决内部一致性

确定有可能在产品各种界面、导航、信息设计等不同环境中反复出现的元素，独立出来，统一设计。试着在不同环境应用他们，进行调整。

4.配色方案和排版

5.设计和成品和风格指南（设计系统）

——————————————————————————————————

设计要素的应用

了解你正在试着去解决的问题

你已经知道在主页的紫色大按钮是个问题：

按钮太大还是紫色不合适？-表现层

页面放置地方不对？-框架层

按钮功能与用户期待不符？-结构层

了解这些解决办法所造成的后果

考虑五个层面的联动反应

用户体验最大的挑战是比用户自己更了解他们的需求

Powered by Froala Editor