用户体验并不是指一件产品本身是如何工作的，用户体验是指“产品如何与外界发生联系并发挥作用”，也就是人们如何“接触”和“使用”它。

从产品设计到用户体验设计

评价一个产品的角度往往从感官和功能两个层面入手， 但它绝不是功能和外观这么简单。对于直接直接面对用户的那些部分，应该由“用户的心理感受和行为”来决定。

一、使用第一

简单的产品用户体验可等同于产品自身定义，比如椅子可以坐。然而，更复杂的产品的用户体验就相对独立了与之相比。列如功能繁多的手机并不能单单满足于能够接听电话简单的自身定义。

1.用户体验和网站

当网站需要用户掌握的技术超过用户自我的技术能力后，用户往往会丧失积极性和信心。不管用户访问类型如何，用户体验都对网站十分重要。但是大多数企业更在乎市场份额，加入更多特性以吸引用户。但是加入繁多的特性被证明只能短时间占据竞争优势，随着功能的增加，网站也会变得难以使用，愈加笨重。所以为了可持续竞争优势，用户体验不可或缺。

2.用户体验不可或缺

哪怕你的网站提供的是世界上最强大的功能，如果用户弄不懂他是如何工作的，低效的沟通仍然难以使你的产品成功。一个常用的投资收益度的度量标准是转化率，通过跟踪有百分之多少的用户被你“转化”到了下一个步骤，就能衡量你网站达到商业目的方面的效率多高(用户体验效果）。

ROI：3个注册并订阅邮件用户/36个访问者=8.33％的转化率

人们所使用的工具效率的改进，会提高企业的生产力，这帮助他们工作的效率更高，犯错率更低。节省员工的时间就是节约企业的钱。

3.在乎你的用户

用户体验对用户来说很重要，如果我们没有提供积极的体验，造访用户对网站的粘性会降低。

二、认识这些要素

用户体验开发流程中，要考虑用户的每一种行动的可能性，以及每个步骤中用户期望值。

1.五个层面

网购的体验从搜索到绑定银行卡填写地址快递送到手中，这一系列体验其实是由完整的决策层组成的

表现层

表现层是由图片文字组成的网页，列如可以执行功能的购物车标志，以及无功能的产品展示图。

框架层

列如：按钮、空间、照片和文本区。框架层作用为优化设计布局，使你记住标识。

结构层

结构层确定网站特性和功能的组合方式，结构层用来设计用户如何到达某页面，框架层定义了导航条上各要素排列方式，结构层则定义分类应该出现在哪里。

范围层

结构层确定网站特性和功能的组合方式，这些特性功能组成了范围层。这个功能是否应该成为网站的功能，是范围层问题。

战略层

网站范围由战略层决定。包括经营者想得到什么？用户想从网站中得到什么？

2.自下而上地建设

五个层面由下而上越来越具体，战略层意义重大，会产生向上的连锁反应。较高层面的决定有时会促成对较低层面的评估，最好的方法是让每一个层面在下一个层面可以结束之前完成。

3.基本的双重性

网页的基本的双重性质为功能型产品和信息型产品，功能型产品主要思考人们完成任务的过程，信息型产品考虑应该提供的信息和信息对用户的意义。

4.用户体验的要素

战略层是满足用户需求为目的所想达到的目标；范围层是对内容元素的描述；结构层即信息架构；框架层即界面设计；表现层即产品的感知体验；

5.应用这些要素

抛开其他层面单独评估该层面是困难的，网站的“内容”是用户访问的关键，其次技术也是建立用户体验的要素之一，它局限了网站能达到的技术层面。

三、战略层 产品目标和用户需求

1.战略层定义

网站失败的原罪是没有人弄清

[1]我们要通过这个产品得到什么？(内部)

[2]我们的用户要通过这个产品得到什么?(外部)

2.产品目标

明确战略，应该检查我们的产品目标并表达出来。

3.商业目标

目标太宽泛，以赚钱和省钱为宗旨的目标，是不清晰的。

相反，太具体的目标无法兼顾战略制定中的随机性困难。

两者之间的平衡，需要我们在充分了解它的影响力的基础上，明确定义“成功的条件”而不是”成功的路径”。

4.品牌识别

品牌的概念超出了简单的视觉表达，它能够在交互中使用户印象深刻。将品牌形象明确写入目标，将提高呈现品牌的机会。

5.成功标准

即一些可追踪的指标是否满足公司目标和用户需求。 测量回访率能够分析网站是否符合用户需求，也不能排除竞争对手造势的外界因素，应客观分析具体问题。

6.用户需求

我们必须站在用户的角度了解用户，而代入自己去看待用户需求。清楚用户群后，需对他们调研，理出需求所在。

7.用户细分

把有共同关键特征的用户细分

以人口统计特征划分，和消费心态档案划分为主，但相同年龄的人群爱好兴趣各不一，所以消费心态更能解刨出一些用户需求。

考虑到不同技术层面用户的使用需求

考虑到不同认知用户的使用需求（小白级【分解过程】，专业级【快速操作】列如股票软件）

考虑到他们不同的社会地位（学生家长，报考学生）

8.可用性和用户研究

问卷调查、用户访谈适用于收集用户普遍观点。

用户测试、现场调查适用于理解用户行为。

现场调查（从考古学和社会学演变过来）完整有效的方法。

任务分析（让用户完成某一任务，可在用户访谈后或现场调查后使用）

用户测试（让用户来测试你的产品——贯穿在整个项目阶段中）

卡片排序法（探索用户如何分类各种信息元素，给用户一沓卡片，让他们自我排列）

9.创建人物角色

创建的人物角色是能代表整个真实用户需求的虚拟人物，另一种说法是用户模型，比如创业网用户人群分为高科技适应度高和第一次使用的人群。

一个角色42，已婚，两个孩子，于副总裁位子上好几年了，想创立新公司。

另一个角色，37，已婚，木材加工为爱好，很多朋友喜欢，他想尝试新生意并放弃目前的司机工作。

10.团队角色和流程

产品目标和用户需求被定义在正式战略文档中，用户需求有时被独立记录在调研报告中，这些目标和分析常由决策者、员工、用户意见支持。战略文档要尽可能简洁方便频繁分享。

四、范围层 功能规格和内容需求

将产品目标转化成产品提供给用户什么内容和功能时，就变成了范围层。

1.范围层定义

这是一个有价值的过程，同时能产生有价值的产品。

用文档来定义产品需求很重要，因为：

[1]可以知道你在建设什么（具体、明确）

[2]可以知道不需要建设什么（作为潜在未来功能囤积）

2.功能和内容

在我们要开发什么这个问题上，范围层被分为“功能型产品”和“信息型产品”

功能型产品考虑功能需求和功能需求规格，功能需求规格时具体化的，在功能需求确定后撰写。

信息型产品考虑内容需求（营销推广，内容通过内容管理系统CMS管理）

如：作者→内容编辑→管理员→文字编辑→律师→用户

二者两户包容存在于彼此之后，不是孤立的。

3.定义需求

内容需求根据项目范围决定，如果目标时完成一个复杂的子系统，需求就很详细。

相反，若是大型项目，内容可相似度高（如提供功能相似的说明书），一般化处理即可。

定义需求可分为以下三类

[1]显而易见人们想要的需求

[2]当人们在某个产品中遇到困难，想象解决的办法，并和用户探讨

[3]人们不确定是否需要的特性（出现于头脑风暴）

为了维持现有产品，而忘记哪些是限制或简化产品的条件的，往往是设计投入最深入的人。所以汇集各部门各类型用户意见变得极为重要，多方位多角度理解问题。

在决定功能需求时，可以把我们人物角色放入“虚拟的场景”中，描述如何使用这些产品的过程。

从竞争对手那里得到需求启示，分析竞品。

4.功能规格说明

规格说明往往很枯燥，但同时它又是必要的，虽然现实实施中会出现改动，但它的价值不应该被否定，我们所能作的是使它足够清晰和准确。

5.记下来

有几条规则适用撰写任何功能规格说明：

乐观（描述系统将要做一些什么事，防止不好的事发生）

具体（详细解释清楚状况）最受欢迎的视频重点标注，改成播放次数（定义了怎样算受欢迎）最多的视频显示最前端。

避免主观语气（网页的外观应该时尚，改成网站的外观应该符合企业品牌指南文档）

6.内容需求

内容需求应该提供每一个特性的规模评估：文本数目、音频大小大致即可。尽早确定每个内容的负责人。

如果你不是希望你的用户只来一次，那么你还需要定义你的网站的内容特性的更新频率。

7.确定需求优先级

我们需要评估需求是否满足战略层的目标，无论用户和网站，除此之外，还要考虑实现的可行性多大？（有些产品特性要三个月去做，但产品两个月就要上线）

一个清晰的优先级可以帮助决定是否采纳人们所建议的相关特性。

五、结构层 交互设计与信息框架

当特性明确之后，如何将它们变成一个整体，就是结构层的事了。

1.结构层定义

涉及“为用户设计结构化体验”的方法被称为交互设计。

只要通过信息架构来构建用户体验。（确定各个要素的“模式”和“顺序”）

要求理解用户的工作方式、行动、思考方式。

2.交互设计

关注描述“可能的用户行为”以及“系统如何配合和响应”

3.概念模型

用户对于“交互组件”将怎样工作的观点称为概念模型。

举个例子，购物车在电子商务网站的概念模型中是一个容器，这个概念影响了它的视觉设计。

在理想状态下我们不用告知用户概念模型，因为网站的交互行为完全一致，用户可以凭直觉去使用。

4.错误处理

当人们犯错时系统作何反应？当第一次犯错时，如何防止错误继续？

避免错误的方法有两种

[1]把系统设置成不可能犯错的样子，比如车子不在空档发车会损害零件，所以设置成除非空挡不然不启动。

[2]使错误难以发生，帮助用户改正错误。

为用户提供的从错误中恢复的方式最常见就是“撤销”、以及警告。

5.信息框架

组织信息以便人们理解，研究的是人们如何认知信息的过程

6.结构化内容

信息构架可以以信息检索的概念为例说明：设计出让用户容易找到信息的系统。

两种方式建立分类体制：

[1]从上到下（从战略层产品目标用户需求设计、主要分类次要分类的层级结构中填入内容和功能）【缺点：细节被疏忽】

[2]从下到上（对内容和功能需求分析，先把已有资料放入底层，然后分别归属高一级）【缺点：无法容纳未来内容，因过于详细】

结构质量的标准不是步数越少越好，而是每一步用户都认为合理。

高效的结构能够容纳成长和适应变动。

7.结构方法

信息构架基本单位是节点，可以对任意信息组合。

节点节点可以用许多不同的方式安排，但是结构常见的类型只有几种：

树状结构或中心辐射结构

节点和节点之间存在父子关系，子节点概念更狭义。

矩阵结构

允许节点和节点之间沿着两个或更多维度移动。列如用户想通过颜色来浏览产品另一类用户想通过尺寸来浏览产品，矩阵可以同时容纳这两种用户。

自然结构

节点被逐一串联起来没有强烈分类的概念。如果想要鼓励自由探险的感觉，比如娱乐教育网站，自然结构会更好，但是用户需要记住路径去再次操作同样的过程，比如你偶然点进再次进入又忘记了。

线性结构

常用于小规模结构，列如单篇文章或单个专题

8.组织原则

节点是依据组织原则安置的，决定哪些节点编成一组。你在产品最高层级使用的组织原则应紧密与“网站目标”和“用户需求”相关，较低层面受内容需求影响。

如果是一家汽车买卖公司网站按照外观型号来分类比以重量分类更适合，在图书馆术语中这类属性称为截面，可以为内容提供简单灵活的组织原则。

战略告诉我们“用户的需求是什么”，“范围告诉我们“什么样的信息满足用户需求”，结构让我们“识别出用户内心重要的信息”。

9.语言和元数据

受控词典是网站使用的一套标准语言,用来强调使命名保持和用户的语言的一致性。

控制词汇的两大方法：

[1]受控词典，创建一个代表用户语言的受控词典能够排除专业术语使用户糊涂的状况。

[2]类词词典，提供常用却未被收纳进网站标准的词汇。（内部术语、俚语、缩写词）

元数据的意思是以结构化方式来描述内容的信息，使用以上方法可建立包含元数据的系统。

假设我们分析志愿消防队如何使用新产品的文章，这篇文章的元数据就是：

*作者

*发布日期

*内容类型（如案例研究）

*产品名称

*产品类型

*客户所在行业（志愿消防队）

*其它相关信息（市政代办处）

元数据在使用相同的词组时，你就可以通过自动化的方式使一组与主题有关的页面连接在一起。

好的元数据能够更快找到信息。

10.团队角色和流程

文档要详细描写网站的结构——从命名原则、元数据的细节、到信息框架和交互设计。

交互设计使用构架图，作者所创的图解网站结构的系统叫“视觉辞典”，www.jjg.net/ia/visvocab/

用户体验设计师已经成为继交互设计师和信息架构师之后更普遍的职位名称。

六、框架层界面设计、导航设计和信息设计

在框架层我们要确定更详细的界面外观、导航和信息设计。

战略层（用户需求/产品目标）→范围层（功能规格/内容需求）→结构层（交互设计/信息架构）→框架层（界面设计（功能型产品）/导航设计（信息型产品）/信息设计（都需要）→表现层（感知设计）

1.框架层定义

确定用什么样的形式和功能来实现，关注点在独立的组件和它们的关系上。

界面设计：指用户能接触到在结构层交互设计中确定的功能。

导航设计：提供用户去某个地方的能力使导航设计，通过它用户可以在内容需求的结构中穿梭自如。

信息设计：在功能型和信息型产品都兼备，使这个层面范围最广的一个要素。

2.习惯和比喻

习惯和反射作用是我们与这个世界交互的基础，你使用手机的技术依赖于你的反射作用。

如果有两个特性都使用了同样的概念模型，那么他们可能有相似的界面要求。

比喻过多不能揭示特性本质反而更加混淆，比如slate的导航使你像真的翻阅杂志一样翻过书。

有效使用比喻就是减少用户在理解使用产品时对猜测的要求。

3.界面设计

界面设计要做的是选择正确的界面元素。这些界面元素要帮助用户完成他们的任务以及容易被理解。

那个功能在哪个界面上完成是交互设计中决定了的，而这些功能如何在界面上被用户认知到就是界面设计范畴。

我们在屏幕上所看到的标准控件很多起源于Mac OS或windows的桌面操作系统，他们提供了一小部分标准界面元素：

复选框

单元框

文本框

下拉菜单

多选菜单（更容易支持大量选项）

按钮（接受用户提交的信息）

妥善处理界面元素，选择和权衡很重要。

下拉菜单能容纳更多选项也节约空间，但是它也让用户不能一眼看到可选项。如果只有六个选项，复选框就是明智之举。

4.导航设计

导航设计必须完成的三个目标：

[1]必须提供网站跳转的方法，往往是能促进用户行为的。

[2]必须传达出这些元素和它所包含的内容的关系。

[3]传达出内容和用户当前浏览页面的关系。

导航系统分类：

全局导航：在导航栏上放上能到网站所有主要栏目的链接。

局部导航：提供给用户到这个框架中附近地点的通路。

辅助导航：提供了前两者不能快速到达的内容的快速途径。

上下文导航：嵌入内容自身的链接。

友好导航：提供给用户通常不会用到的链接，联系信息、反馈表单、律师声明链接通常在友好导航中。

远程导航：一些导航并不在页面结构中，是以自己的方式存在，独立于内容和功能。

导航工具：

[1]网站地图是一种常见的远程导航工具，它给你一个简明的单页网站整体结构的快捷浏览方式。提供所有一级导航的链接、并与主要二级导航链接

[2]索引表是按字母顺序排列、连接到相关信息的列表。（往往为网站某个部分开发，而不是覆盖整个网站）

5.信息设计

如何呈现信息，使人们容易理解，有时是视觉上的，比如饼图，有时它涉及“分组”或“整理”散乱信息。（类似卡片分类）

错误提示也是界面设计时需要思考的问题。

6.指示标识

将信息设计和导航设计结合到一块有一个作用那就是支持指示标识，来自于公共空间设计，比如标志停车的停车牌。

好的指示标识能使用户很快得出心理图像“他们在哪里”、“能去哪里”、“哪条路能使他们离自己的目标更近”。

7.线框图

线框图使对一个页面中所有组成部分以及它们如何结合到一起最直观的描述。

线框图通常还包括附加说明，用于说明线框图和结构图表看得不太明显的网站行为。有时也需要导航规格的支持。

小产品可能只需要一个线框图，大产品往往需要多个线框图。

[1]通过安排和选择界面元素来整合界面设计。

[2]通过识别和定义核心导航系统来整合导航设计。

[3]通过防止和排列信息组成部分优先级来整合信息设计。

把这三个放入同一文档，线框图就确定了建立在基本概念结构上的框架，同时指出表现层的设计的方向。

七、表现层 感知设计

满足用户的感官体验，内容、功能和美学汇聚一起产生一个最终设计。

1.表现层定义

关注信息设计，我们决定了元素如何分组排列。

关注视觉设计，我们决定这种安排在视觉上如何呈现。

2.合理设计感知

这是提供体验的最后一站，要让用户的感觉器官感受到设计。

3.嗅觉和味觉

除了食物香水很少被设计师考虑。

4.触觉

实物产品的触觉体验使工业设计领域的概念。主要关注用户和产品之间的物理接触。包括界面设计，交互设计。也包括设备的外形（圆或方），所使用材质（光滑或磨砂）等。因屏幕震动技术，手机和使用者有了互动。

5.听觉

如汽车中各种各样的滴滴声传来的信息“车门没关好”。

6.视觉

每个人的品味不同，所以关于设计方案的每一次讨论总会归结到个人偏好上。对于评估一个视觉设计方案是否够好，应该把注意力放在它们的“运作是否良好”上。

传达品牌形象有多种方式（网站所使用的语言，网站功能的交互设计）但主要还是视觉设计。如果你的战略定位使技术性的那亮粉色和漫画字体就不适合）。

7.忠于眼睛

评估视觉设计简单方法之一：你的视线首先落在什么地方？哪个设计要素在第一时间吸引了用户的注意力？

研究人员有时用眼动仪确定人到底在看什么，以及视线如何移动。

或者站起来远距离看屏幕或者眯起眼睛看。

如果你的设计使成功的，用户眼睛的移动轨迹模式应该有以下两个特点：

[1]他们是一个流畅的路径，而没有在各种元素上跳来跳去。

[2]他为用户提供有选择的、某种可能的“引导”，不应该分散用户对能完成目标的功能的注意力。

8.对比与一致性

对比可以使用户注意力吸引到界面中的关键部分。当一个元素在设计中与众不同时，人们就会注意到。

让差异足够清晰，使用户能分辨出某个设计选择是特意要传达一些信息的。

一致性可以减少用户的迷惑和焦虑。

基于栅格线的布局是来自平面设计的一种技术，是一种对网页也有效的技术。通过“母版"确保一致性。

但设备尺寸千差万别，所以应用到交互产品中并不容易。

9.内部和外部的一致性

因为网页时在企业内部、其他设计中独立出来的，所以视觉设计已经千疮百孔，一般如下：

[1]在产品的两个不同地方反映了不同的设计方法。（解决办法：确定产品各类界面导航信息设计中出现的设计元素。）

[2]外部一致性差，没有在同企业其他产品中反映相同的设计方法。

品牌识别的一致性应该呈现在产品的每一个层级设计中。

10.配色方案和排版

色彩是向外界传递品牌识别的最有效方法。更明亮或更醒目的颜色可以用于设计你的前景色，暗淡的色彩最好用于那些背景元素。

在同样的环境中，相近又不相同的颜色可能会误导用户无法区分颜色，但是如果在用户能够辨别又保持一致性的情况下，也并非不可。

一些企业有自己的专门的字体和排版，正文处于一个被用户长时间注视的状态，所以尽可能简单就好，以免视觉疲劳。

对于导航元素中短标签一样的文本，则可稍具个性。

有效使用字体的原则为：

[1]不要使用相似又不完全一样的风格。

[2]传达不同信息用不同风格，风格之间要有足够的对比吸引用户

[3]但不要过于多样。

11.设计合成品和风格指南

线框图的最直接模拟时视觉模型或设计合成品。你能看到线框图的组件和设计合成品中一对一的关系。（但不要精确的按照它来做，而是考虑重要级别和元素的组合关系）线框图的核心概念应该呈现在设计合成品中。

应该记录设计系统，因为人事变动，他们会带走关于这个产品如何设计出来的丰富知识。

而权威的记录它的文档就是风格指南，确定了视觉设计的每个方面，包括网站功能的具体标准。

八、要素的应用

创建良好的用户体验最重要的工作是大量收集有待解决的问题。

[1]了解你试着解决的问题（你知道按钮是个问题，是颜色不对？（表现层），放置的地方不对？（框架层）还是功能不是用户期望的（结构层））

[2]了解解决办法造成的后果，解决办法可能造成连锁反应，（在某个部分很好的导航设计可能不符合结构层）

大部分时候，关于用户体验的决策总会体现在以下场景：

【1】由现状决定的设计，比如将企业内部不同部门的内容，在放在一起时才会服务于用户。

【2】由模仿决定的设计，依靠于其他产品的相似情况。

【3】由领导决定的设计，用户体验由个人爱好替代了用户需求。

1.提出正确的问题

在思考如何解决问题的时候，正确的做法是，将每一个决定都建立在对其背后议题的理解上。

每一个用户体验设计都会需要调整，来适应时间、金钱和工作人员。

不要以各种名义对用户体验敷衍了事，不管创建什么用户体验，其最大的挑战是”比用户更加准确地去理解他们地需求。

2.马拉松和短跑

用户体验是一场马拉松而不是短跑，短跑运动员要在开枪那一瞬间积聚所有能量，马拉松也要这样地能量，但他们使用方式不同，但他们要控制快慢地步伐，知道何时加速减速。

深思熟虑地设计决策可能短时间花费一些时间，但是它将在更长的时间里节省更多时间。

绝不可忽略了下一层对上一层的重要性，那些不容易感知的要素决定了用户体验的成败。网站不管是漂亮却不可用，还是杂乱无章但是导航设计明智都是失败的。