抽空看了用户体验的五要素，收获很大，这本书是从战略层、范围层、结构层、框架层、表现层五个方面进行阐述，我们一起来看一下吧：

一、战略层：网站目标和用户需求

成功的用户体验，其基础是一个被明确表达的战略，在做一个产品之前，首先要问自己两个问题：第一，我们要从这个产品中得到什么？我们的用户要从这个产品中得到什么？通过回答第一个问题，我们就能描述出企业的网站目标，第二个问题则提出了用户需求。结合这两者：网站目标和用户需求就组成了战略层。当我们能越清楚明确地表达我们要什么，以及确切地知道其他人要从我人这里得到什么，我们能越精确地满足双方的需求。

1.1、网站目标

网站目标分为商业目标、品牌识别和成功标准

网站目标：

多数人一开始用很宽泛的词汇来描述网站的目标，基本上，企业网站的存在是为了满足两种意图当中的一个：替公司赚钱或替公司省钱，有时它同时满足。

品牌识别：

对于任何一个网站，它需要明确描述的基础目标之一就是品牌识别，提到品牌识别，我们会直接联想到商标、色调等，在这里品牌识别的概念要远远超越了视觉表现。品牌不仅仅影响商业企业一它还影响每 一个有网站的组织，从非盈利机构到政府部门，都是靠着用户体验来创造品牌形象。而将品牌形象具体且明确地写进目标，将会提高呈现出积极的品牌形象的机会。

成功标准：

比赛都有终点，理解我们的目标的其中一个重要的部分，就是理解你要怎样才能知道“什么时候到达了终点”。这就是成功标准：即一些可追踪的指标，在网站推出以后用来显示它是否满足了我们自己的目标和用户的需求，好的成功标准不仅影响项目各阶段的决策，也提供了用户体验工作价值的具体依据。

1.2、用户需求

我们很容易落入这样的陷阱，即认为我们正在为理想用户而设计网站，理想用户就是“某些与我们完全一样的用户”。但我们并不是为自己设计:而是为其他人设计的，如果想要这些“其他人”喜欢并使用我们创建的东西，那么就必须要了解“他们是谁”以及“他们的需求是什么"。通过投入时间去研究这些需求，我们才能拋弃自己立场的局限，真正从用户的角度来重新审视网站。

确认用户需求是复杂的，因为用户群体之间存在着很大的差异性，所以我们可考虑把用户细分。

用户细分：

不同的用户群有不同的需求：创建细分用户群只是一种用于“发现用户最终需求的手段”。我们真正只需要得到的是和“用户需求数目”一样多的细分用户群。

有时候有些需求是彼此矛盾的：就像股票交易软件对于炒股新手自动将股票交易过程分解成简单步骤的软件和炒股专家在一个界面快速进入操作，我们无法提供一种方案可以同时满足这两种用户的需求，此时，此时，我们要么选择针对单一用户群设计而排除其他用户群，要么为执行相同任务的不同用户群提供不同的方式。不论我们选择哪一种，这个决策将会影响日后与用户体验相关的每一个选择。

可用性和用户研究：

可用性是寻求使产品更容易使用的一种方法。

要想明白用户需求什么，我们首先必须知道他们是谁，用户研究的领域致力于收集必要的信息来达成这样认识。

像问卷调查、用户访谈或焦点小组最适合用于收集用户的普遍观点与感知。

像用户测试或现场调查则更适用于理解具体的用户行为以及和网站的交互方面的信息。

通过以上方式收集用户数据，建立用户画像，当决定网站的用户体验设计时，我们必须要牢记用户画像人物所代表的用户群的需求，当我们做决定时，我们可以问问自己：那会对A用户有用吗？B用户会有什么反应呢？人物角色能帮助我们在前进的每一步都时时记着用户。

1.3、团队角色和流程

让你团队的所有人员阅读你的战略文档，战略文档通常包含敏感的资料，但仅仅因为这个就不告知应该理解战略目标的团队，只会破坏他们完成这些事情的能力。战略应该是设计用户体验流程中的起点。

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

一个有价值的过程导致一个有价值的产品。用文档来说明项目要求，这件事很麻烦，但是你必须要做，这是因为：

第一，这样你才知道正在建设什么

拥有一系统明确的要求，能让你把责任分配得更清晰，这可以大大提高协作的效率。

第二，这样你才知道不需要建设什么

许多功能听上去都相当诱人，但是它们对于项目的战略目标并不是必需的。了解这些“不需要建设什么”也就意味着知道哪些是你“不需要马上去建设”的东西，把这些需求收集起来，找到一种适宜的方式，让它们符合你的长期规划，这才是真正的价值所在。

2.1、功能和内容

许范围层被软件界面的网页和超文本的网页分成两个部分。

在软件方面：我们考虑的是功能规格，即哪些应该被当成软件产品的“功能组合“。

在超文本方面：我们考虑的是内容，这属于编辑和营销推广的传统领域。

2.2、收集需求

最用之不竭的需求源泉总是来自用户本身。去了解“人们在想什么”的最佳途径就是直接询问他们。在第3章列出的用户研究技术可以用来帮助你更好地了解用户，了解他们希望在你的网站上看到的特性的种类。

2.3、功能规格

无论这个项目有多么庞大或复杂，有几条规则适用于撰写任何类型的需求

乐观：描述这个系统将要做什么事情去”防止“不好的情况发生

具体：尽可能详细地解释清楚状况，这是我们能决定一个需求是否被实现的最佳途径。

避免主观的语气：需求必须可验证——就是说，它必须要能证明”这个需求没有被满足”。我们也可以用户量化的术语来定义一些需求，通过这样的手段来避免主观性。

2.4、内容需求

很多时候我们说到的内容指的是文本。但是我们还应该记住图像、音频和视频也算是内容的类型。这些不同类型的内容可以一起协作去满足某一个需求。

尽可能早地确定某个人来负责每一个内容元素是非常重要的，内容是一件艰苦的工作，我们可以找一些合作的资源来为网站的初次上线及时地准备好一些内容，有效的内容 ，需要日常维护工作，如果在做内容规划的时候，应该定义每一个内容特性的“更新频率”。更新频率应该来自于你的网站的战略目标。从你的网站目标方面来看，你希望用户多长时间来访问一次？从你的用户需求方面来看，他们希望多长时间更新一次信息？所以，我们必须确定一个频率，它是介于我们的用户期望值和有效资源之间的一个合理的中间值 。

2.5、确定需求优先级

在战略目标和需求之间，你几乎看不到一对一的简单关联。有时一个需求可以满足多个战略目标。同样，一个战略目标也常常关系到多个不同的需求。

我这里有两个确定需求优先级的模型：

第一，用四象限看用户量与发生频率

优先解决大用户量的高频问题，最后解决少量用户的低频问题。

第二，看开发难度和效果

优先见效快且开发难度不大的，这就是迭代，最后做很费而且见效慢的，这可能是未来的机会。

三、结构层：交互设计和信息架构

在收集完用户需求并将其排列好优先级别之后，我们对于最终产品将会包括什么特性已经有了清楚的图像。然而，这些需求并没有说明如何将这些分散的片段组成一个整体，这就是范围层的上面一层：为网站创建一个概念结构。

3.1、交互设计

在传统的软件开发行业，涉及到“为用户设计结构化体验”的方法被称为交互设计。

概念模型：

用户对于“交互组件将怎样工作”的观点称为概念模型，举个例子来讲，“购物车”在典型的电子商务网站的概念模型中是一个容器。这个比喻的概念同时影响了它的视觉设计和在界面上使用的语言。它是一个装东西的容器:作为-一个容器，从我们“放进东西” 到‘ 推车”，以及从里面“ 拿出东西”来，同时系统必须提供能完成这些任务的功能。

错误处理：

任何一个交互设计的项目都有很大的部份牵涉到处理“用户错误”当人们犯错误时系统要怎么反应，并且当错误第一次发生时，系统要如何防止人们继续犯错?

第一个同时也是最好的防止错误的方法：是将系统设计成不可能犯错的那种。

第二个避免错误的方法：就是使错误难以发生。

3.2、信息架构

信息架构着重于设计组织分类和导航的结构，从而让用户可以高效率、有效地浏览网站的内容。信息架构与信息检索的概念密切相关：设计出让用户容易找到信息的系统。

同样地，信息架构要求创建分类体系，这个分类体系将会对应并符合网站目标、希望满足的用户需求，以及将被合并在网站中的内容。我们可以使用以下两种方式来建立分类体系：从上到下或从下到上。

从上到下：

从“网站目标与用户需求的理解”开始直接进和地结构设计。

从下到上：

根据对“内容和功能需求的分析”而来的，把这些资料统统放到最低级别的分类中，然后再将它们分别归属到高一级的类别，从而逐渐构建出能反映我们的网站目标和用户需求的结构。

这两种方法都有一定的局限。从上到下的架构方法有时可能导致内容的重要细节被忽略。另一方面，从下到上的方法有时可能导致架构过于精确地反映了现有的内容，因此不能灵活地容纳未来内容的变动或增加。因此在从上到下和从下到上的方法之间找到平衡是唯一可避免这些缺点的方法。

结构质量最重要的标准，不是“整个过程一共需要多少步骤”，而是“用户是否认为每一个步骤都是合理的”，以及“当前的步骤是否自然地延续了上一个步骤中的任务”。毫无疑问地，用户会喜欢一个被清晰定义的七步过程，而不是一个令人困惑的、被勉强压缩的三步过程。

结构方法：

信息架构的基本单位是节点，节点可对任意的信息片段或组合，它可以小到是一个数字，或者大到是整个图书馆，我们要处理的是节点，而不是页面、文档或组件。这些节点可以用许多不同的方式来安排，下面是几种常见的类型

层级结构（又称树状结构或中心辐射结构）

节点与其他相关节点之间存在父级/子级的关系。

矩阵结构

允许用户在节点与节点之间沿着两个或更多的“维度”移动。矩阵结构通常能帮助那些“带着不同需求而来的用户”在相同内容中寻找他们想要的东西。因为每一个用户的需求都可以和矩阵中的一个“轴”联系在一起。

但是，如果你期望用户把这个当成主要的导航工具，那么超过三个维度的矩阵可能就会出现问题，在四个或更多维度的空间下，人脑基本上不可能很好地可视化这些移动。

自然结构

不会遵循任何一致的模式，节点是逐一被连起来的，同时这种结构没有太强的“分类”的概念。自然结构对于探索一系列关系不明确或一直在演变的主题是很合适的。但是自然结构没有给用户提供一个清晰的指示，从而让用户能感觉他们在结构中的哪个部分。如果你想要鼓励自由探险的感觉，比如某些娱乐或教育网站，那自然结构可能会是个好的选择;但是，如果你的用户下次还需要依靠同样的路径，去找到同样的内容，那么这种结构就可能会把用户的经历变成一次挑战。

线性结构

来自于你最熟悉的线下媒体。。在互联网中线性结构经常被用于小规模的结构，比如单篇的文章或单个部分;大规模的线性结构则被用于限制那些所呈现的内容顺序对于符合用户需求非常关键的应用程序，比如教学资料。

组织原则：

节点在信息架构中是依据组织原则来安置的。基本上，组织原则就是我们决定哪些节点要编成一

组，而哪些节点要保持独立的标准。不同的组织原则将被应用在不同的区域和网站不同的层面。

一般说来，在网站最高层级使用的组织原则应该紧密地与“网站目标”和“用户需求”相关。而在结构中较低的层级，内容与功能需求的考虑将对你所采用的组织原则产生很大影响。

语言和元数据：

既使结构完全准确地代表了用户对网站的理解，用户也仍然无法在结构中找到他们想走的路，这是因为他们无法了解你的命名原则(nomenclature): 描述、标签和网站使用的其他术语。因此，“使用用户的语言”并且“保持一致性”是非常重要的。我们过去常常用来强调一致性的工具被称为控制性词典。

控制性词典也有助于建立起贯穿所有内容的一致性。无论内容创建者是坐在邻近位置，还是坐在不同国家的办公室内，控制性词典提供了一个明确的资源以确保大家都能使用用户的语言。

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

在充满概念的结构层中开始形成了大量的需求，这些需求都是来自我们的战略目标的需求。在框架层，我们要更进一步地提炼这些结构，确定很详细的界面外观、导航和信息设计，这能让晦涩的结构变得更实在。

在软件方面，我们通过界面设计(interface design)来确定框架一一个大家所熟知的、“按钮、输入框和其他界面控件”的领域。但是在信息空间方面，要解决的是一个独一无二的问题:导航设计(navigation design)，这是专门用于呈现信息的一种界面形式。最后，信息设计(information design)是软件和信息两方面都必须要做的，它用于呈现有效的信息沟通。

4.1、习惯和比喻

并不是每一个界面问题的解决办法都必须要毫无条件地死守这些习惯。当一种不同的方式有很明显的益处时，你反而应该试着谨慎地违背一些习惯。建设一个成功的用户体验，要求你在做每-一个决定的时候都有充分的、明确的理由。

4.2、界面设计

成功的界面设计是那些能让用户一眼就看到“最重要的东西"的界面设计。而另一方面，不重要的东西,不应该被注意到一有时 候则是因为它们根本就没有出现在那儿。设计复杂系统的界面所面临的最大挑战之一，是弄清楚用户不需要知道哪些东西，并减少它们的可视性(或者完全把它们排除）。

单选框：允许用户从一组互斥的选项中选择一个

复选框：允许用户独立地选择各个选项

文本框：允许用户——等待着用户——输入文字

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

多选菜单：提供和复选框相似的功能，但是它们在一个更紧凑的空间中做这件事（因为多选菜单有滚动条）。和下拉菜单相同，这使得多选菜单更容易支持大量的选项。

按钮：可以做很多不同的事情。通常情况下，它们告诉系统接受用户通过其他界面元素提交的所有信息，并用信息来做一些事情——采取动作。

4.3、导航设计

任何一个网站的导航设计都必须同时完成以下三个目标：

首先，它必须提供给用户一种在网站间跳转的方法。由于一般来讲把每个页面和别的都链接起来是不现实的(即使是现实的，它也不是一个好方法)，导航元素就必须选择那些能促进用户行为的一一也就是说， 这些链接必须也是真实有效的。

其次，导航设计必须传达出这些元素和它们所包含内容之间的关系。仅仅提供-一个链接的列表是不够的。这些链接相互之间有什么关系?是否其中一些比别的更重要?它们之间相关的差异在哪里?这些传达出来的信息对于用户理解“哪些选择对他们是有效的”是非常必要的。

第三，导航设计必须传达出它的内容和用户当前浏览页面之间的关系。其他的那些内容对于我正在浏览的这个页面有什么影响?这些传达出来的信息帮助用户去理解“哪个有效的选择会最好地支持他们的任务或他们想要达到的目标"。

全局导航：

提供了覆盖整个网站的通路，全局导航提供的是用户最有可能需要从网站的最终页面到其他 什么地方的一组关键点，不管你想去哪儿，你都能从全局导航中到达那儿。

局部导航：

提供给用户在这个架构中到“附近地点”的通。在一个严格的层次结构中，局部导航可能只提供一个页面的父级、兄弟级和子级通路。如果你的架构反映了用户对这个网站的内容结构的思路，那么局部导航通常都会比其他导航系统更有用。

辅助导航：

提供了全局导航或局部导航不能快速达到的相关内容的快捷途径。这咱类型的导航提供了一些分类方面的好处（允许用户转移他们浏览时的方向，而不需要从头开始），同时仍然能让网站保持一个主要的层级结构。

上下文导航：

有时也叫“内联导航“，是嵌入页面自身内容的一种导航。这种类型的导航——比如， 一个在页面文字中的超级链接常常没有得到充分利用(或总是被错误地利用)。用户认为，他们需要另一些信息的时候恰恰是在他们正在读文本的时候。与其强迫你的用户去扫描右侧的导航元素一一 或者更糟的是，让他们不得不求助于搜索引擎——还不如放一些相关的链接在他正在读的地方。

友好导航：

提供给用户他们通常不会需要的链接，但它们是作为一种便利的途径来使用的。

网站地图(site map)

就是一种常见的远程导航工具，它给用户一个简明的、单页的网站整体结构的快捷浏览方式。网站地图通常作为网站的一个分级概要出现，提供所有一-级导航的链接，并与缩进的显示的、主要的二级导航链接起来。网站地图通常不会显示超过两个层级的导航一这之后更详细的内容往往超出了用户的需求(如果不是的话，那就是你高层次的结构定义错了)。

索引表(index)

是按字母顺序排列的、链接到相关页面的列表，它与一此书籍最后所列的索引表非常相像。这种类型的工具对于涵盖了不同主题的、大量内容的网站非常有效。在大多数情况下，一个网站地图和一个规划良好的结构应该足够了。索引表有时会为网站的某个部分特别开发，而不是要去覆盖整个网站的内容：如果你的网站试图相对独立地服务于拥有不同信息需求的不同用户，这个方法会非常有用。

4.4、信息设计

信息设计有时候会很难入手，它常常充当一种把各种设计元素聚合到一起的粘合剂的角色。最后，信息设计变成决定如何呈现这些信息，使人们能很容易使用或理解它们。有时信息设计是视觉上的，对我们的用户来说，展现数据最好的方式是饼图还是柱状图？有时信息广场涉及到”分组“或”整理“散乱的信息。

指示标识

信息设计和导航设计结合到一起去执行的是一个重要的功能——指示标识 。

在网站中，指示标识通常会涉及到导航设计和信息设计。一个网站的导航系统不仅仅是要提供到网站不同区域的通路，还必须要成功地传达出这些选项。好的指示标识能使用户很快地得到一一个心理图像，“他们在哪儿”、“能去哪儿”和“哪条路能使他们离自己的目标更近”。

4.1、线框图

页面布局是将信息设计、界面设计和导航设计放置到一起，形成一个统一的、有内在凝聚力的架构的地方。页面布局必须结合所有类型的导航系统，每一个旨在传达在不同结构中的视图设计，任何一个在这个页面上的功能所需要的所有界面元素，以及支持以上这些内容的信息设计，也包括在这个页面上的内容的信息设计本身。这一次需要平稳很多东西，这就是为什么页面布局被纳入一个详细的文档，并称为页面示意图或线框图。

五、表现层：视觉设计

在充满概念的结构层中开始形成了大量的需求，这些需求都是来自我们的战略目标的需求。在框架层，我们要更进一步地提炼这些结构，确定很详细的界面外观、导航和信息设计，这能让晦涩的结构变得更实在。

在软件方面，我们通过界面设计(interface design)来确定框架一一个大家所熟知的、“按钮、输入框和其他界面控件”的领域。但是在信息空间方面，要解决的是一个独一无二的问题:导航设计(navigation design)，这是专门用于呈现信息的一种界面形式。最后，信息设计(information design)是软件和信息两方面都必须要做的，它用于呈现有效的信息沟通。

5.1、忠于眼睛

评估一个页面的视觉设计的简单方法之一，是提出这样的问题:你的视线首先落在什么地方?哪个设计要素在第一时间吸引了用户的注意力?它们对于战略目标来讲是很重要的东西吗?或者用户第一时间注意到的东西与他们的(或你的)目标是背道而驰的吗?

研究人员有时使用精密的眼球追踪(eyetracking) 仪器来确定被测人倒底正在看什么，以及他们的视线是如何在这个页面上移动的。无论如何，如果只是想略微调整一下某个页面的视觉设计，那么一般你只需要简单地询问- - 下人们就可以一甚至你自己也可以。有时这种方法不能提供最准确的结果，并且它也永远无法捕捉眼球追踪仪器所能提供的细微差别。但是在大多数时候，简单地询问问题是非常适合的。另一种找出主要设计元素的方法是眯着眼睛或斜着去看这个页面，直到你不能认出任何细节，或者走到房间的另一头从那个地方来看这个页面。然后试着确定视线所停留的地方。

如果你的设计是成功的，那么用户的眼睛在页面上移动的轨迹模式应该有以下两个重要的特点：

首先，它们遵循的是一条流畅的路径 。

其次，在不需要用太多细节来吓倒用户的前提下，它为用户提供有效选择的、某种可能的”引导“。这些引导应该支持用户试图去完成他们的目标和任务，这些引导不应该分散用户对那些”能完成目标的信息或功能“的注意力。

5.2、对比和一致性

在视觉设计中，我们用于吸引用户注意的一个主要工具就是对比(contrast)。 一个没有对比的设计，会被看成一个灰色的、平凡的东西，导致用户的视线四处游离，而无法解决任何特别的事情。把用户的注意力吸引到界面中的关键部分，对比是一个重要手段，能帮助用户理解页面导航元素之间的关系。同时，对比还是传达信息设计中的概念群组的主要手段。

将视觉元素的大小保持一致的尺寸，这可以使你在需要的时候把它们更容易地重新组合成一个新的设计。创建一个网格来指导布局工作可以保证一致性而不会牺牲统一。

5.3、内部和外部的一致性

由于网站被生产出来的方法一通常是在企业内部的、其他进行中的设计中，被逐渐、临时、独立生产的一它们的视觉设计的一致性已经被折腾得千疮百孔了，它们的毛病会一般

有以下两种形式：

首先，内部一致性的问题。这是说，在网站的两个不同的地方反映了不同的设计方法。

然后，还有外部一致性的问题。这是说，这个网站没有在同一个企业的其他产品中，反映出被使用的、相同的设计方法。

解决“内部一致性”问题的好办法，是基于对网站框架的深刻理解上的。确定有可能在网站的各种各样的界面、导航和信息设计等不同环境中反复出现的设计元素。在进行设计之前，从这些不同的环境中移除每一个设计元素，通过这个方法，我们就可以更清楚地看到我们应该解决的小规模的问题，而不是被环境所造成的大规模问题分散了注意力。与其一次又一次地设计同样的元素，我们不如试着独立地设计一次，然后将这个设计方案应用到整个网站中去。

5.4、配色方案和排版

色彩可能是向外界传递品牌识别的一个最有效的方法。

一套配色方案应该能整合其中的色彩，以便能将它们应用到一个广泛的范围之中。在大多数情况下，更亮或更醒目的色彩可以用于设计你的前景色，那些你希望得到更多注意的元素中。更暗淡的色彩最好用于那些不需要跳出页面的背景元素中。拥有多种可选择的色彩，为我们提供了一套能做出高效的、设计选择的工具包。

对于一些企业来说，排版(typography)- 对 于创建一个特殊的视觉样式而言，如何使用字体或字型-

对他们的品牌识别是如此重要，他们已经发明了特殊的字型来专门供自己使用。一些企业，从苹果电脑到大众汽车，再到伦敦地铁已经使用了专门定制的字型，在他们的品牌传达中创建-一个强烈的印

象。但即使你选择不采取这个特殊的步骤，字体仍然可以作为“用设计来有效传达形象”的一部分而被利用。

5.5、设计合成品和风格指南

在视觉设计领域中对线框图最直接的模拟物是视觉模型或设计合成品(design comp)。“ 合成”的意思是“综合的"，因为确切地说，它就是从已选定的组件中建立起来的、一个最终的可视化产品。这种合成物显示了各个独立的组件是如何结合到一起而形成一个有机的整体的。或者，如果它们没有组成一

个整体，就说明某个地方破坏了它，同时也表明这是一个任何解决办法都必须要考虑到的约束条件。

我们做出的所有设计决策的权威性文档是风格指南(styleguide)。这个汇总文档确定了视觉设计的每个方面，从最大到最小的范围内的所有元素。影响到网站的每一个 页面的全局标准——比如设计网格、配色方案、字体标准或标志应用指南——通常是风格指南中的第一部分。

风格指南还要包括某一个模块或网站功能的具体标准。在某些情况下，在风格指南中所记录的标准，应该从各个独立界面到统一的导航元素。风格指南的总体目标是提供足够的细节来帮助人们将来做出明智的决策(因为大部分的想法都已经为他们实现了)。