《用户体验要素》读书笔记

作者背景：

Jesse James Garrett是旧金山的一名用户体验设计师，同时也是Adaptive Path（用户体验咨询公司）的联合创始人之一。在2005年发表了《Ajax：A New Approach to Web Applications》一文，标志着Ajax的诞生，因此被称为“Ajax之父”。《用户体验要素》出版于2001年，当时作者主要从事于网页设计，所以在书中大多都是以网页作为实例进行讲解。

在本书中，作者提到交互设计是一种方法——为用户设计结构化体验。作为交互设计师，我的理解是：交互设计是解决问题的过程。问题和体验：我们要解决用户碰到的问题，并给用户带来舒畅的体验。那我们如何正确的找到用户碰到的问题？这就是本书作者给我们提供一种怎么正确找到用户问题的一种思考方式。

用户体验五要素： 五个层级，产品0-1的设计过程。我们可以通过以下图片来提前了解下，

一.战略层

1.明确产品目标：

商业目标：企业通过产品来实现赚钱或省钱。虽然看似简单，但在开始做产品时，还是会碰到不清楚做什么的情况。况且产品要实现盈利，前提是找到属于自己的一套商业模式。在互联网公司产品中，实现盈利的方式我想到了3种类型：1通过应用内购买和广告（陌陌哈你等直播平台，游戏）2.平台抽成（滴滴和美团对司机抽成）3.用户变现（滴答清单，印象笔记的高级会员）

品牌识别：品牌识别除了商标，色调，和字体设计外。它还可以是概念系统，也可以是情绪反应。作者还说到——用户体验可以塑造品牌形象。结合“情绪反应”一词，举个例子——当别人跟我说拼多多的时候，我脑袋里自动的播放“拼多多，拼多多…”这句歌词。除了视觉层次外，听觉也是品牌识别的一个重要的点。

成功标准：标准是用来检测产品是否达到了目标和满足了用户的需求。通常在产品不同的阶段会定义一些关键指标，如下载量，用户量等，以此来检测是否达到目标。对于关键指标的设定会根据产品的阶段进行调整，且要注意的是不要被一些虚荣指标给迷惑。

2.用户需求：用户希望从我们的产品得到什么？用户是谁？

1.用户细分：创建细分用户群体是为了帮助我们了解不同用户群体的不同需求，以及当碰到需求彼此矛盾时该如何去抉择。以下是作者说的几个细分用户群的维度：

维度1：人口统计学——了解用户群体的基本特征，如性别，年龄，教育程度，收入等信息。但是该方法大公司采用的比较多，小公司则很少用，原因是费时，费力，费钱。

维度2：消费者心态档案——是一种描述用户对于世界，尤其是对于你的产品相关事物的观点或看法的心理分析方法。

维度3：用户认知程度——了解用户对于产品的熟悉程度及适应程度，以及我们产品服务的用户是随意型用户，主流用户，专家型用户。

2.可用性和用户研究

用户研究常用方法：问卷调查，用户访谈，焦点小组等，适合手机用户的普遍观点与感知。而用户测试和现场调查适合于了解具体的用户行为和用户与产品交互时的表现。

现场调查：是指一整套完整，有效且全面的方法，用于了解用户日常生活情境中的用户行为。但是该方法比较费时且昂贵。

任务分析：每一个用户与产品的交互行为都发生在执行某一任务的环境中。

用户测试：通过请代表性的用户来进行产品的可用性测试，帮助产品寻找更容易使用的路径。这种方法是平常做设计方案时最常用的，快捷，高效。

3.创建用户角色

在用户体验设计中，人物角色是从用户研究中提取出的，可成为样例的虚拟人物，可以帮助我们在整个设计过程中始终将用户放在心里。

4.战略文档

战略文档更多是由公司的高层制定，这份文档包含了产品目标和用户需求。其实在互联网公司里战略文档更像是产品经理输出的PRD文档，或需求文档，有很具体的用户需求点，但是产品目标等内容在这份文档大多产品经理都没写出来。

小结：在产品设计过程中，需要有人明确这两个点给整个Team，产品目标和用户需求，便是后续需求定义以及交互设计的一个方向，防止需求出现大而全，设计出现违背用户心理模型的问题。对于交互设计师来说，在后期的设计则需要考虑如何去平衡产品目标和用户需求之间的设计冲突，

二.范围层（如何定义需求？）

从战略层到范围层，产品目标和用户需求转变成产品需要提供什么内容和功能，从抽象变得具体。在范围层则需要一份明确的需求文档来帮助团队成员明确产品需要做什么和不需要做什么，以及哪些功能和需求是在其他阶段实现的计划。

1.功能需求：明确定义产品需要满足用户的具体需求以及功能点，并形成一份功能规格说明文档。文档中对需求和功能点的描述需乐观，具体，且避免主观语气。之前做的Camera项目，产品则需要明确相机拍照的比例有1：1，4：3，16：9，以及各个比例都支持哪些分辨率等都需要明确，肯定。

2.内容需求：内容需求总是会伴随功能需求，比如豆瓣，格瓦拉，今日头条等内容型产品，用户对内容感兴趣并点赞，收藏，分享等都是功能需求。而内容需求除了文本信息外，图片，音频，视频都是组成内容的元素，而在定义需求时则需明确，如图片，需定义支持的图片格式，大小，缩略图，是否支持保存等具体的功能。除此之外还是明确定义内容产品更新的频率，比如36氪每天九点定推送互联网业内资讯。

3.确定需求优先级：对需求进行评估是否满足产品目标和用户需求，以及实现这些需求的可能性。在实际开发过程中会碰到时间，技术等问题。

小结：范围层——需求的定义始终的围绕产品目标和用户这两个点进行定义和优先级的排序。但是这个过程中，个人认为主要以用户为中心进行需求定义，产品最终是用户在用，以用户为中心不仅是在设计阶段，在需求定义阶段同样适用。而对于交互设计师来说，国内的大环境让交互设计师只能得到一稿功能需求，需求如何来以及要解决什么问题？产品经理很少会简洁直观传达给交互设计。这也是目前自己碰到的问题，认为交互设计师只要拿到明确的功能需求，然后就可以开工，这种工作可能一个刚毕业的都会做得很好，原因很简单，移动端的设计，目前都是大同小异，用一个曾经面试的产品总监的话来说：随便找个APP，借鉴一下就可以了。

三.结构层（如何解决？）：在该阶段需要知道自己的产品，是什么类型产品？工具型产品还是信息型产品

1.交互设计：作者对交互设计的理解是——为用户设计结构化体验的方法。交互设计关注于描述“可能的用户行为”，同时定义“系统如何配合和响应”这些用户行为。这里需要注意的是，书中的交互设计和现在互联网中的交互设计相差较大，互联网中的交互设计其实是界面设计。虽然文章中说到交互设计曾经被归类在“界面设计”中，但作者所处时代的界面设计又是如何定义的，作者并未详细描述。这里稍微说一下，交互设计最早是从工业设计里分支出来的，作为一门大学科，所涉及心理学，经济学等学科。而我们现在所指的交互设计都是基于屏幕的设计。

交互设计是需要明确的告诉用户该如何去执行和完成任务，并给出标准且符合用户习惯的元素。在这个过程中，需要关注用户的行为，工作方式和思考方式。设计需要符合用户的预期以及习惯——概念模型

2.信息架构：信息架构是研究人如何认知信息的过程，对于产品则需要关注呈现给用户的信息是否合理和有意义。对于用户，能否快速从信息架构中找到自己想要的信息是体验的关键。同时，一个高效的信息架构还需要考虑到可拓展性和变动性。

结构方法：

1.层级结构（树形结构）：信息架构的基本单位是节点，节点和其他相关节点之间存在父级/子级的关系。从上至下的结构，即根据产品目标和用户需求进行结构设计的。

2.矩形结构：矩形结构在网页设计中很常见，它能满足那些带着不同需求来的用户。比如京东商城，天猫的分类查找商品，用户可以根据自己的维度来进行查找。

3.自然结构：不用遵循任何一致的模式，，也没有强烈的分类概念。这种结构在互联网产品中已经很少见了。

4.线性结构：该结构很常见，即任何一个任务或流程，只有一个起点和一个终点。还记得你新买手机的开机流程吗？长按Power按键开机，开机动画，选择系统语言，是否联网…。其他的如拉勾APP，在初次登录时的注册流程和填写简历流程。

四.框架层

1.界面设计：界面设计要做的全部事情就是选择正确的界面元素。通过适当的方式让这些界面元素容易被理解和使用，并帮助用户顺利完成任务。一个良好的界面设计需要组织好用户最常采用的行为，所以在设计界面时，要了解用户在此界面的目标和任务是什么。

关于界面元素类型很多，作者举了单选框，复选框，文本框，下拉菜单和多选菜单等界面元素，以及这些元素在设计时应根据用户的实际场景进行细节设计。如今，对于移动端的界面设计，我们需要去了解iOS和MD的设计规范，了解不同平台控件的定义和样式。好的界面设计：

首先：直观，准确的告诉用户如何去做：其次，组织好用户最常采用的行为，同时将这些元素放置最容易获取和使用的地方：最后，选择合适的元素告诉用户怎么去操作，控件的设计需标传达准确

2.导航设计：导航设计就是告知用户如何去他想去的地方——可以理解为指路牌。除此之外还需要告知用户当前在哪里。导航设计需要完成三个目标：

目标1：提供一种用户在网站间跳转的方法

目标2：导航设计必须准确传达出这些元素和它包含的内容间的关系

目标3：导航设计必须传达出它的内容和用户当前浏览页面之间的关系

文章中说到关于网站常见的导航系统：全局导航，局部导航，辅助导航，友好导航，上下文导航，网站地图，索引表。关于网站的导航可以参阅《Don’t Make Me Think》，这本书对网站导航做了详细的分析。

3.信息设计：关于信息设计即将散乱的信息元素进行分类，整理并按照用户目标和任务进行排列。在做界面设计时，需要考虑每个界面改呈现什么信息元素以及重要信息和次要信息的排列顺序。除此之外，对于一些数据型的信息，在视觉表现上可以考虑表格，饼状图等。如网易有钱，鲨鱼记账等APP。

4.线框图：线框图是集合界面设计，导航设计，信息设计的产物，也是一个产品从0-1过程中的第一个初期产品形态。经常会听到有人说画线框图，不是很简单吗？事实并非如此，线框图是设计师基于对用用户目标和任务的了解而设计的最终产物。线框图也作为指导视觉设计的方向，同时一份完整的线框图——交互设计文档（有的公司叫开发文档），是开发和测试必看的文档。

五.表现层

表现成需要解决的问题是如何将“产品框架层的逻辑排布”让用户感知到。根据产品的类型和选择感知类型 ：听觉，触觉，嗅觉，味觉，视觉。对于互联网产品，我们重点则可以放在视觉和听觉上，触觉，嗅觉，味觉更偏向于工业产品的体验范畴。

听觉设计在APP产品中更多的是信息类的提示音以及游戏产品（如农药：欢迎来到王者农药…）

表现层中最常见的——视觉设计

1.视觉焦点：在一个界面上用户最先看到什么？或者我们需要引导用户去完成什么任务？

2.对比：通过色彩，图形大小的对比可以向用户展示主要信息和次要信息。

3.一致性：视觉元素的一致性能有效地传达信息，而不会导致用户迷惑或焦虑。解决一致性的问题可以通过制定视觉规范来避免到这个问题。

4.配色方案和排版：色彩是向外界传达品牌识别的一个比较有效的方法，所以需要和品牌形象结合在一起使用。

六.总结

1.本书的五个层面，由下往上整个过程，更像是一个大的站点，而每个站点我们都可以通过各种设计方法去找出和解决每个层面存在的问题，了解产品的这五个层面，的确能够帮助设计师在解决问题时的一个大方向，而不是为了解决问题而解决问题。

2.在读本书的时候，由于自己知识面的限制，很容易让自己觉得作者所讲的例子比较单薄，不够过瘾，每个层面所举的例子，都只是简单论证自己的观点。但也像作者所说的，这并不是一本告诉你答案的书。而是引导你去思考，且往正确方向思考的书。