用户体验的要素
以用户为中心的Web设计
1
总目录
• • • • • • • •
用户体验为何如此重要 认识这些要素 战略层：网站目标和用户需求 范围层：功能规格和内容需求 结构层：交互设计与信息架构 框架层：界面的设计、导航设计和信息设计 表现层：视觉设计 要素的应用
2
一、用户体验为何如此重要？
• • • • • 日常生活中的遭遇 什么是用户体验 用户体验和网站 竞争优势和投资回报率 记住你的用户
X职员悲惨の一天
早晨起来，发现闹钟没有按照原先设定的响起来。 一边煲水，一边穿衣服，临走前去取水却发现水没有煲好！ 到了地铁站，交通卡没有钱了。 却发现机器充值无法识别你的交通卡，必须到便利店排队。 终于成功坐上地铁，却不得不在地铁门前排队。 排了3趟地铁，终于到了公司，你却迟到了。
用户体验（user experience） 产品如何与外界发生联系并发挥作用，也 就是人们如何“接触”和“使用”产品。
结果：尽管你已经非常努力，但你还是迟到了。 那么，让我们看看这一连串的倒霉事， 是什么让我们如此倒霉？
3
•
用户体验和网站
面对大量的选择，用户只能 自己想办法，去决定哪一个网站 功能会符合他的需求。
企业开始意识到，提供优质的用户体验是一个重要的、可持续的竞争优势。用户体验 形成了客户对企业的整体印象，界定了企业和竞争对手的差异，并且决定了客户是否还会 再次光顾。
4
•
竞争优势和投资回报率
用户得到一次不好的体验，那么他们将不再回来。“特性”和“功能”总是重要的， 但是体验对于客户的忠诚度有着更大的影响。 关注网站的用户体验可以为企业带来更多回报： 投资所得到的回报（return on investment）或投资回报率（ROI）
花出去的每一元钱，能收回多少元的等值收益？
转化率（conversion rate）
通过跟踪有百分之多少的用户被“转化”到了下一个步骤，就能衡量你的网站在达到“商业目的” 方面的效率有多高。
转化率是一种常用的方式， 来衡量用户体验的效果。
5
转化率的计算公式：
3个注册并订阅邮件的用户 ÷ 36个访问者 = 8.33%的转化率
“偶然浏览者” →
优质的用户体验 → “实际购买者”
差劲的购买过程的用户体验 科技产品没有按照人们期望的那样工作，这样他们觉得自己很笨——即使他 们最终完成了自己想做的事情。那么人们会被你糟糕的用户体验赶跑。
6
你用工具，还是工具用你？
任何在用户体验上所作的努力，目的都是为了提高效率：基本上以两种方式体现出来： ① 帮助人们工作的更快； ② 减少他们犯错的几率。
7
•
记住你的用户
以用户为中心的设计（user-centered design）
——在开发产品的每一个步骤中，都要把用户列入考虑范围内。 考虑用户体验 把它分为各个组成要素 从不同的角度来了解它 ——通过这些才能确保你控制了决策所造成的全部结果。 用户体验很重要，最大的理由是：它对你的用户很重要。
协调一致、直观明了、甚至让人愉快的体验 ——“一次”每件事都按照正确的方式在工作”的体验。
8
总目录
• • • • • • • •
用户体验为何如此重要 认识这些要素 战略层：网站目标和用户需求 范围层：功能规格和内容需求 结构层：交互设计与信息架构 框架层：界面的设计、导航设计和信息设计 表现层：视觉设计 要素的应用
9
考虑用户有可能采取的每一个行动的每一种可能性，并且去理解这个过程的每一个步骤中用户的期望值。 可以把设计用户体验的工作分解为各个组成要素，以帮助我们更好地了解整个问题。 几大决策：网站看起来怎么样、它如何运转、它能让你做什么。
五个层面
表现层（surface） 一系列的网页，由文字和图片组成。
框架层（skeleton） 按钮、表格、照片和文本区域的位置。
结构层（structure） 确定网站各种特性和功能的最适合的组合方式。
范围层（scope） 功能和特性是否要纳入网站，即范围。
战略层（strategy） 经营者和用户分别想从网站得到什么。 10
在每一个层面的决定都会影响到它之上层面的 可用选择。 这种依赖性意味着在战略层上的决定将具有某 种向上的“连锁效应”。 反过来讲，也就意味着 每个层面中我们可用的选择，都受到其下层面中所 确定的议题的约束。
这种连锁效应意味着在“ 较高层面” 中选择一 个界限之外的选项将需要重新考虑“较低层面”中 所做出的决策。
11
这并不是说每一个“较低层面”上的决策都必须在设计“较高层面”之前做出。事物 都有两个方面，在“较高层面”中的决定有时会促成对“较低层面”决策的一次重新评估 （或者是第一次评估）。在每一个层面，我们都根据竞争对手所做的事情、业界最佳的实践 成果来做决定，这是最简单不过的老常识。这些决策可能产生的连锁效应该是双方向的。 如果想在开始“较高层面”设计之前，要完全确定“较低层面”的话，几乎可以肯定的 是，你已经把你的项目日程——也许是你最终产品的成功——扔进了一个危险的境地之中。 相反地，应该计划好你的项目，让任何一个层面中的工作都不能在其下层面的工作完成 之前结束。这里最重要的一条是，在我们知道基本形状之前，不能为房屋加上屋顶。 12
•
基本的双重性
交互设计、信息设计、信息架构……
当网站的用户体验开始形成时，它的设计者 采用的是两种不同的语言。一群人把每一个问题 看成是“应用软件”的设计问题，然后从传统的 桌面和客户端软件的角度来考虑解决方案。另一 群人则以信息的发布和检索的角度来看待网站， 然后从传统出版、媒体和信息技术的角度来考虑 问题的解决方案。 为了解决网页这种基本的双重性质，让我们 从中间把这五个层面分开。 在软件的一边，我们主要关注的是任务— —所有的操作都被纳入一个过程，去思考人们如 何完成这个过程。在这里，我们把网站看成用户 用于完成一个或多个任务的一个或一组工具。 在超文本的一边，我们的关注点是信息— —网站应该提供哪些信息，这些信息对用户的意 义是什么。超文本就是创建一个“用户可以穿越 的信息空间”。
13
表现层（surface）
视觉设计，或者说最终产品的外观。
框架层（skeleton）
不管是软件界面还是信息空间，我们必须要完成信 息设计（information design）。在软件产品那边， 框架层还包括了安排好能让用户与系统的功能产生 互动的界面元素。对于信息空间方面来讲，这种界 面就是屏幕上的一些元素的组合，允许用户在信息 架构中穿行。
结构层（structure）
在软件方面，结构层将从范围转变成系统如何响应 用户的请求。在信息空间方面，结构层则是信息空 间中内容元素的分布。
范围层（scope）
从战略层进入范围层以后，在软件方面它就转变成 对产品的“功能组合”的详细描述。而在信息空间 方面，范围则是对各种内容元素的要求的详细描述。
战略层（strategy）
来自企业外部的用户需求（user need）是网站的目 标——尤其是那些将要使用我们网站的用户。与用 户需求相对应的，是我们自己对网站的期望目标。
14
总目录
• • • • • • • •
用户体验为何如此重要 认识这些要素 战略层：网站目标和用户需求 范围层：功能规格和内容需求 结构层：交互设计与信息架构 框架层：界面的设计、导航设计和信息设计 表现层：视觉设计 要素的应用
15
表现层
框架层
成功的用户体验，其基础是 一个被明确表达的“战略”。知 道企业与用户双方对网站的期许 和目标，有助于确立用户体验各 方面战略的制定。
结构层
• • • •
战略层定义 网站目标 用户需求 团队角色和流程
范围层
网站目标和用户需求
战略层
16
•
战略层的定义
网站失败的最常见原因不是技术，也不是用户体验。网站失败的最常见原因，是 在开始写第一行程序、描第一个像素，或配置第一个服
务器之前，没有人试图回 答下面两个非常基本的问题： 我们要从这个网站得到什么？---------------------------------网站目标 我们的用户要从这个网站得到什么？--------------------------用户需求
通过回答第一个问题，我们就能描述出企业的网站目标（site objective）。第二 个问题则提出了用户需求（user need）的问题，这是来自企业外部的目标。结合 内外两者，网站目标和用户需求就组成了战略层，也就成为我们设计用户体验过 程中做出每一个决定的基础。
17
此处的关键词是明确
当我们能越清楚明确地表达我们想要什么，以及确切地知道其他人想要从我们这里得到什么，我们就 能越明确地满足双方需求。
•
网站目标
网站目标经常以“只可意会不可言传”的状态存在于一小群建站的人当中。当网站目标无法用 口头表达出来时，对于应该如何完成项目，不同的人就经常会有不同的想法。
•
商业目标
尽量避免使用过于宽泛或具体的词汇来描述网站的商业目标，应该在充分了解问题之后再得出 结论。为了创造成功的用户体验，必须保证决策不是随便决定的，而是深思熟虑的结果。
•
品牌识别
品牌识别可以是概念系统，也可以是情绪反应——它之所以重要是因为它无法不被用户注意。 在用户与网站交互的同时，企业的品牌形象就不可避免地在用户的脑海中形成了。网站设计者 必须决定品牌形象是无意之中形成的，还是经过有意精心安排的结果。大多数企业选择对他们 的品牌形象施加一些控制，这就是为什么传递品牌识别是非常普遍的一种网站目标的原因。
18
•
成功标准
即一些可追踪的目标，在网站推出以后用来显示它是否满足了我们自己的目标和用户的需求。 好的成功标准不仅影响项目各阶段的决策，也提供了用户体验工作价值的具体依据。
成功标准具体显示了用户体验 是否有效地达成了战略目标。在此 例中，通过衡量每一个注册用户单 月的访问次数表明了此网站对核心 用户的价值。
改版后的上线日期
有时成功标准与网站本身和用户如何使用网站有一定的关系。如用户在每一次访问网站时的平均停留时 间是多少（服务器记录是否可以帮助你确定这点）？然而不是所有成功标准都必须直接由网站获得，也可以 衡量网站的间接影响。最有效的标准可以直接归因于网站的用户体验改变的标准，但是如果这些改变发生在 一个更长的时间段，则很难判断其是源于用户体验还是其它因素。
19
用户需求 陷阱：认为我们正在为理想用户设计网站，理想用户就是“某些与我们完全一样的用户”。但我们 并不是为自己设计，
而是为其他人设计的，如果想要这些“其他人”喜欢并使用我们创建的东西，那 么就必须要了解“他们是谁”以及“他们的需求是什么”。通过投入时间去研究这些需求，我们才能 抛弃自己立场的局限，真正从用户的角度来重新审视网站。 用户细分 用户细分（user segmentation）的几种最常见的方法： 人口统计学（demographic）方法：性别、年龄、教育水平、婚姻状况、收入等等； 心理学（psychographic）统计办法：记录用户的心理因素； 用户对技术和网页本身的观点【重要属性】 你的用户每周话费多少时间使用网络？ 计算机是他们日常生活的一部分吗？ 他们喜欢和技术打交道吗？ 他们总是有最新最好的硬件吗？ 他们每5年才买一台新计算机？ 我们的设计必须容纳不同类型的用户群。
20
用户细分将全部的用户划分成较小 的、有共同需求的小组，以此来帮 助我们更好地了解用户的需求。
可用性和用户研究 市场调研方法（market research）：如问卷调查和焦点小组——得知用户普遍信息的宝贵资源； 现场调查（contextual inquiry）：用于了解日常生活情境中的用户行为； 任务分析（task analysis）：每一个用户与网站交互行为都发生在执行某一任务的环境中； 用户测试（user testing）：最常见的用户调研方法——让用户帮忙测试你的产品； 卡片排序法（card sorting）：用于探索用户如何分类或组织各种信息元素； 创建人物角色（personas）：用户模型或用户简介——使你的用户真实再现在设计者心中。
21
团队角色和流程 战略专家（strategist）：帮助客户处理项目中的战略问题； 决策层（stakeholder）：资深决策者，管理那些会影响网站决策的部门； 战略文档（Strategy document）和可视性文档：定义网站目标和用户需求的文档。 撰写战略文档时，文档并不是越多越好，而应该简洁明了并切中要点。一个有效的战略文档不仅 可以在用户体验开发团队中起到试金石作用，它还可以成为企业其他部门的项目支持文档。 所有项目参与者——设计师、程序员、信息架构师、项目经理——都需要在项目进行期间频繁地 使用和阅读战略文档，以帮助他们在工作中做出正确的决定。 战略应该是在设计用户体验流程中的起点，但并不意味在项目开始之前你的战略需要完全确定下 来，战略应该是可以演变和改进的。当战略被系统地修改与校正时，这些工作就能成为贯穿整个过程 的、持续的灵感源泉。
22
总目录
• • • • • • • •
用户体验为何如此重要 认识这些要素 战略层：网站目标和用户需求 范围层：功能规格
和内容需求 结构层：交互设计与信息架构 框架层：界面的设计、导航设计和信息设计 表现层：视觉设计 要素的应用
23
表现层
框架层
当你把用户需求和网站目标 转变成网站应该提供给用户什么 样的内容和功能时，战略就变成 了范围。
结构层
功能规格和内容需求
• • • • • • 范围层的定义 功能和内容 收集需求 功能规格 内容需求 确定需求优先级 24
范围层
战略层
•
范围层的定义
定义项目范围包括了两个方面：一个有价值的过程导致一个有价值的产品。 过程（process）：确定现在能解决哪些事情，而哪些必须要再迟一点才能解决； 产品（product）：在项目中要完成的全部工作，保证在开发过程中不会出现模棱两可的情况； 工作流程、日程安排、里程碑：用可视性文档来说明项目要求； 理由1：这样你才知道正在建设什么。一系列明确的要求能够把责任分配得更清晰。 理由2：这样你才知道不需要建设什么。用文档记录不同的可能性能够提供评估这些想法的架构。
一月（现在）
四月
七月
十月
（明年）一月
版本1.0 •------------•------------•------------•------------•------------•------------•------------•-------------
版本1.1 •------------•------------•------------•------------•------------•------------•------------•-------------
当前难以满足的需求，可以成为启动下一版本的基础，这样就能形成一个不断循环的开发过程。 25
功能和内容 在范围层，我们从讨论战略层面的抽象问题着手——“我们为什么要建这个网站？”— —转而面对一个新的问题：“我们要建设什么？”
在这里，范围层被软件界面的网页和超文本的网页分成两个部分。在软件方面，我们考虑 的是功能规格——哪些应该被当成软件产品的“功能组合”。在超文本方面，我们考虑的是 内容，这属于编辑和营销插推广的传统领域。 在软件开发中，范围层确定的是功能需求或功能规格（function specification）文档。 大部分时候这两个术语是可以互换的——事实上，有些人使用“功能需求规格”来表示他们 的文档覆盖了包括以上两者的内容。
26
内容的开发常常不会像软件过程的需求收集一样正式，但基本原则是一样的。功能需求常 常伴随着内容需求（content requirement）。现在，内容常常是通过一个内容管理系统 （content management system, CMS）来进行管理的。
内容编辑 作者 文字编辑 用户
管理层
律师
一个内容管理系统可以实现自动化流程，能出示和交付给用户。
内容管理系统必备的功能取决于你要管理的内容的性质。例如：你是否需要维护多语言或具 有数
据格式的内容？你的每一篇新闻稿是否必须要通过六个执行副总裁和一个律师的审核？ 类似的，功能需求与常常伴随着内容的需求。例如：在个人喜好设置的页面中需要有使用说 明吗？是否需要错误提示？必须要有个专门的人来写这些内容。
27
收集需求 一些需求适用于整个网站。如品牌需求或技术需求。另一些需求只适用于特殊的特性。 大多数时候，当人们说到某种需求的时候，他们想的是产品必须拥有的、某种特殊的一句简短 描述。 最用之不竭的需求源泉总是来自用户本身。去了解“人们在想什么”的最佳途径就是直接 询问他们。 需求的三个主要类别包括： 人们讲述的、他们想要的东西 用户实际想要的东西 人们不知道他们是否需要的特性——潜在需求 由于参与创建和设计网站的人很少去想象网站的新方向，因此汇集企业各个部门的成员或 不同类型的用户代表来进行的头脑风暴会议，可以是一种打开设计者思路、让他们考虑以前从 未想到的可能性的非常有效的工具。其它方法包括使用场景（scenarios）、关注竞争对手等。 需求的详略程度常常取决于项目的具体范围，如项目的目标是一个非常复杂的系统，还是 项目的内容只是相似或相同性质的东西。
28
功能规格 功能规格存在的问题： 阅读起来枯燥，占用大量编码时间，没有人读； 实施过程中事情会发生变化——维护功能规格、及时更新【重要】 撰写功能规格的通用规则： 乐观：描写这个系统件要做什么去“防止”不好的事情发生，而不是描述“不应该” 具体：尽可能详细描述清楚状况 避免主观的语气：保持明确、避免歧义，用量化的术语来定义一些需求 内容需求（内容清单） 确定文本的字数、图片的像素、下载文件的字节等基本元素； 尽可能早地确认某个人来负责某一个内容元素； 有效的内容需要日常维护工作； 定义每一内容元素的更新频率； 如何呈现不同的内容特征。
29
确定需求优先级
排列出哪些功能应该包含到项目中去； 评估这些需求是否能满足我们的战略目标； 实现这些需求的可行性有多大？ 因为技术上的局限而无法实现 需要太多资源，人力财力超出了我们的能力范围 时间局限 网站的内容特性需要其他特性的支持，导致特性的冲突； 留意看上去有可能需要改变战略的特性建议； 优先级别是决定人们所建议的相关特性的首要因素； 与管理层谈判 与管理层确定战略而不是实现这个目标的各种手段； 技术人员的沟通技巧。
有时一个战略目标将产生多个需求（左）
。 另一方面，一个需求也可以实现多个战略目标。
30
总目录
• • • • • • • •
用户体验为何如此重要 认识这些要素 战略层：网站目标和用户需求 范围层：功能规格和内容需求 结构层：交互设计与信息架构 框架层：界面的设计、导航设计和信息设计 表现层：视觉设计 要素的应用
31
表现层
框架层
在收集完用户需求并将其 排列好优先级后，需求并没有说 明如何将这些分散的片段组成一 个整体，这就是结构层：为网站 创建一个概念结构。
交互设计与信息架构
结构层
• • • •
结构层的定义 交互设计 信息架构 团队角色和流程
范围层
战略层
32
•
结构层的定义
确定各个将要呈现给用户的选项的模式和顺序。 交互设计：作为软件界面的网页，为用户设计结构化体验 信息架构：作为超文本的网页，内容建设通过信息架构构建用户体验 它们关心的是理解用户、用户的工作方式和思考方式 交互设计 交互设计关注与描述“可能的用户行为”，同时定义“系统如何配合与响应”； 用户与软件的和平相处。 概念模型 “交互组件将怎样工作”——概念模型 例如，这是内容元素还是用户访问的位置还是用户请求的对象？ 以购物车为例，使用用户熟悉的概念模型能使用户很快适应不熟悉的网站。 错误处理 当人们犯错误的时候，系统如何反应？如何防止用户继续犯错？ 方式一：将系统设置为不可能犯错的那种。 方式二：是错误难以发生，系统帮助用户找出错误并修正它们。 当用户完成动作后才发现做错了，系统应该为用户提供从错误中恢复的方式。【重做】 当无法恢复时，提供大量警告。
33
信息架构 信息架构着重于设计组织分类和导航的结构，从而让用户高效率、有效地浏览网页内容； 信息架构的分类体系
分类
分类
内容 从上而下的架构方法 “网站目标和用户需求的理解”
内容 从下而上的架构方法 内容和弄能需求的分析
一个适应性强的信息架构系统，能把新内容作为现有结构的一部分容纳 进来（左图），也可以把新内容当成一个完整的新部分加入（右图） 34
结构方法 信息架构的基本单位是节点。 节点对应任意的信息片段或组合，节点的安排方式： 在层级结构（树状结构、中心辐射结构），节点与其他相关节点之间存在父级/子级关系; 在矩阵结构中，允许用户在节点与节点之间沿着两个或更多的“唯度”移动； 在自然结构中，不遵循任何一致的模式，节点被逐一连接，用于关系不明确或演变中的主题； 在线性结构中，最基本的信息结构类型，
逐一而连贯； 组织原则 我们决定哪些节点要编成一组，哪些节点要保持独立的标准即组织原则。 应创建一个与“网站目标”和“用户需求”相对应的、正确的结构。 截面：内容不同的属性，使用错误的截面比没有使用截面更糟糕。 语言和元数据 命名原则：描述、标签和网站使用的其他术语。 控制性词典：保证网站“使用用户的语言”并“保持一致性”。 元数据：关于信息的信息，即以一种结构化的方式来描述内容。
35
团队角色和流程 架构图——描述网站结构的工具术语； 架构图的主要内容：哪些类别要放在一起？哪些保持独立？交互过程中那些步骤如何相互配合？ 视觉辞典
首页 首页 登录流程 最新消息
媒体信息
产品
在线支持 2C 入口页 家用产品 2a 前往 用户列表
新闻 办公室产品
文档 技术报告
视觉辞典是一个提供重非常简单（如左图），到非常复杂（如右图）的示意结构系统。
“谁负责这件事情”，通常取决于企业文化或项目本质。
36
总目录
• • • • • • • •
用户体验为何如此重要 认识这些要素 战略层：网站目标和用户需求 范围层：功能规格和内容需求 结构层：交互设计与信息架构 框架层：界面的设计、导航设计和信息设计 表现层：视觉设计 要素的应用
37
表现层
界面设计、导航设计和信息设计
框架层
在充满概念的结构层中形 成了大量的需求，框架层中，我 们要更进一步地提炼这些结构， 确定详细的界面外观、导航和信 息设计，使晦涩的结构变得实在。
结构层
• • • • • •
框架层的定义 习惯和比喻 界面设计 导航设计 信息设计 线框图
范围层
战略层
38
•
框架层的定义
确定用什么样的公恩形式来实现。 界面设计：确定框架，“按钮、输入框、界面控件”的领域； 导航设计：呈现信息； 信息设计：呈现有效地信息沟通。 习惯和比喻 如果我们减少很多反射作用，每天能完成的事情会大大减少。 避免比喻，就是要减少对用户在“理解和使用网上功能”时对心理的要求。 界面设计 成功的界面设计是那些能让用户一眼就看到“最重要的东西”的界面设计。 一个设计良好的界面是要组织好用户最常采用的行为，同时让这些界面元素用最容易 的方式获取和使用。（≠把用户最可能用到的按钮设计成最大的一个） 技巧一：在界面第一次呈现给用户的时候，仔细考虑每一个选项的默认值； 技巧二：自动记住用户最后一次选择状态的系统。 为用户想完成的任务选择正确的界面元素，通过一种能迅速理解和易于使用的方式， 把他们
放置到页面上去； 错误信息以及说明信息的设计——如何让用户真正去阅读这些文字？
39
导航设计 任何一个网站的导航设计都必须完成以下3个目标！
目标一：必须提供给用户一种在网站间跳转的方法。（真实有效的链接） 目标二：必须传达出这些元素和它们所包含内容之间的关系。 这些链接之间有什么关系？ 是否其中一些比别的更重要？ 它们之间的差异在哪里？ 目标三：必须传达出它的内容和用户当前浏览页面之间的关系。 哪些链接对用户是有效的？
几种常见的导航系统：
全局导航：覆盖整个网站的通路。 局部导航：提供给用户在这个架构中道“附件地点”的通路。 辅助导航：提供全局和局部导航不能快速到达的相关内容的快捷途径。 上下文导航：嵌入页面自身内容的一种导航。 友好导航：联系方式、反馈表单、企业信息、法律声明等信息的导航。 远程导航 网站地图 索引表
40
信息设计 最终目的：反映你的用户的思路，支持他们的任务和目标。 线框图 页面布局是将信息设计、界面设计、导航设计放置到一起，形成统一、有内在凝聚力的架构的地方。
友好导航 网站标志 全局导航 指示标示线索 主题图片 搜索 下拉菜单 局部导航
线框图捕获所有在框架层做出的决定， 并用一个文档来展现他们。它作为视觉设 计和网站实施的参考来使用。 三要素：
文本输入 按钮 通过安排和选择界面元素来整合界面设计 通过识别和定义核心导航系统来整合导航设计 通过放置和排列信息组成部分的优先级来整合 信息设计
正文
合作伙伴
辅助导航
友好导航
41
总目录
• • • • • • • •
用户体验为何如此重要 认识这些要素 战略层：网站目标和用户需求 范围层：功能规格和内容需求 结构层：交互设计与信息架构 框架层：界面的设计、导航设计和信息设计 表现层：视觉设计 要素的应用
42
视觉设计
表现层
框架层
内容、功能和美学汇集到 一起来产生一个最终设计，从而 满足其他层面的所有目标。
结构层
• • • • • •
表现层的定义 忠于眼睛 对比和一致性 内部和外部的一致性 配色方案和排版 设计合成品和风格指南
范围层
战略层
43
•
表现层的定义
“弥补网站框架层的逻辑排布”的视觉呈现问题。 忠于眼睛
你的视线首先落在什么地方？ 哪个设计要素在第一时间吸引用户的注意力？ 它们对战略目标来讲是很重要的东西吗？ 用户第一时间注意到的东西与你的目标是否一致？
如果你的设计是成功的，那么用户的眼睛在页面上移动的轨迹模式
应该有以下两个特点：
首先，他们遵循的是一条流畅的路径。 第二，在不需要用太多细节来吓倒用户的前提下，为用户提供有效选择的、某种可能的“引导”。
对比和一致性
对比：帮助用户理解页面导航元素之间的关系，传达信息设计中概念群组的主要手段； 一致性：使你的设计有效地传达信息——如，基于网格的布局。
内部的一致性和外部的一致性
内部的一致性问题：在网站两个不同的地方反映了不同的设计方式。 外部的一致性问题：在其他产品中，反映出被使用的、相同的设计方法。 44
配色方案和排版
设计合成品和风格指南
设计合成品：视觉设计领域中对线框图最直接的模拟物。 风格指南文档：确定视觉设计的每一方面，从最大到最小的范围内的所有元素： 设计网格、配色方案、字体标准或标志应用指南； 某一模块或网站功能的具体标准。 预防随着员工的变动，而使企业集体失忆； 使所有人遵循一套统一的标准来运作，使网站看起来是一个协调一致的整体。 45
总目录
• • • • • • • •
用户体验为何如此重要 认识这些要素 战略层：网站目标和用户需求 范围层：功能规格和内容需求 结构层：交互设计与信息架构 框架层：界面的设计、导航设计和信息设计 表现层：视觉设计 要素的应用
46
了解你正在试着去解决的问题。 了解你的解决办法所造成的结果。 用户体验的决策出现在细节中：
由现状决定的设计 由模仿决定的设计 由领导决定的设计
47
实例：搜索引擎的实施
战略层决策：补偿符合特殊标准的内容的能力
范围层决策：说明用户只能执行哪些类型的搜索
搜索结果如何排列？
结构层决策：决定用户是如何与这个搜索引擎一起工作的
用户如何到达各个页面？ 是否有统一的路径？
框架层决策：决定如何安排按钮、输入框、界面元素
表现层决策：决定如何给与界面和信息元素一致的外观
48
提出正确的问题
面对需要解决的纠缠不休的小问题，抱有正确的心态。 比赛开始以后不需要顾虑太多的想法是错误的。
让企业中的某个人去关注每个 层面的决策，只有这样才能解决创建 一个成功的用户体验所要考虑的全部 关键因素。
马拉松与短跑
+
+
+
+
=
49
谢谢！
50
用户体验的要素
以用户为中心的Web设计
1
总目录
• • • • • • • •
用户体验为何如此重要 认识这些要素 战略层：网站目标和用户需求 范围层：功能规格和内容需求 结构层：交互设计与信息架构 框架层：界面的设计、导航设计和信息设计 表现层：视觉设计 要素的应用
2
一、用户体验为何如此重要？
• • • • • 日常生活中的遭遇 什么是用户体验 用户体验和网站 竞争优势和投资回报率 记住你的用户
X职员悲惨の一天
早晨起来，发现闹钟没有按照原先设定的响起来。 一边煲水，一边穿衣服，临走前去取水却发现水没有煲好！ 到了地铁站，交通卡没有钱了。 却发现机器充值无法识别你的交通卡，必须到便利店排队。 终于成功坐上地铁，却不得不在地铁门前排队。 排了3趟地铁，终于到了公司，你却迟到了。
用户体验（user experience） 产品如何与外界发生联系并发挥作用，也 就是人们如何“接触”和“使用”产品。
结果：尽管你已经非常努力，但你还是迟到了。 那么，让我们看看这一连串的倒霉事， 是什么让我们如此倒霉？
3
•
用户体验和网站
面对大量的选择，用户只能 自己想办法，去决定哪一个网站 功能会符合他的需求。
企业开始意识到，提供优质的用户体验是一个重要的、可持续的竞争优势。用户体验 形成了客户对企业的整体印象，界定了企业和竞争对手的差异，并且决定了客户是否还会 再次光顾。
4
•
竞争优势和投资回报率
用户得到一次不好的体验，那么他们将不再回来。“特性”和“功能”总是重要的， 但是体验对于客户的忠诚度有着更大的影响。 关注网站的用户体验可以为企业带来更多回报： 投资所得到的回报（return on investment）或投资回报率（ROI）
花出去的每一元钱，能收回多少元的等值收益？
转化率（conversion rate）
通过跟踪有百分之多少的用户被“转化”到了下一个步骤，就能衡量你的网站在达到“商业目的” 方面的效率有多高。
转化率是一种常用的方式， 来衡量用户体验的效果。
5
转化率的计算公式：
3个注册并订阅邮件的用户 ÷ 36个访问者 = 8.33%的转化率
“偶然浏览者” →
优质的用户体验 → “实际购买者”
差劲的购买过程的用户体验 科技产品没有按照人们期望的那样工作，这样他们觉得自己很笨——即使他 们最终完成了自己想做的事情。那么人们会被你糟糕的用户体验赶跑。
6
你用工具，还是工具用你？
任何在用户体验上所作的努力，目的都是为了提高效率：基本上以两种方式体现出来： ① 帮助人们工作的更快； ② 减少他们犯错的几率。
7
•
记住你的用户
以用户为中心的设计（user-centered design）
——在开发产品的每一个步骤中，都要把用户列入考虑范围内。 考虑用户体验 把它分为各个组成要素 从不同的角度来了解它 ——通过这些才能确保你控制了决策所造成的全部结果。 用户体验很重要，最大的理由是：它对你的用户很重要。
协调一致、直观明了、甚至让人愉快的体验 ——“一次”每件事都按照正确的方式在工作”的体验。
8
总目录
• • • • • • • •
用户体验为何如此重要 认识这些要素 战略层：网站目标和用户需求 范围层：功能规格和内容需求 结构层：交互设计与信息架构 框架层：界面的设计、导航设计和信息设计 表现层：视觉设计 要素的应用
9
考虑用户有可能采取的每一个行动的每一种可能性，并且去理解这个过程的每一个步骤中用户的期望值。 可以把设计用户体验的工作分解为各个组成要素，以帮助我们更好地了解整个问题。 几大决策：网站看起来怎么样、它如何运转、它能让你做什么。
五个层面
表现层（surface） 一系列的网页，由文字和图片组成。
框架层（skeleton） 按钮、表格、照片和文本区域的位置。
结构层（structure） 确定网站各种特性和功能的最适合的组合方式。
范围层（scope） 功能和特性是否要纳入网站，即范围。
战略层（strategy） 经营者和用户分别想从网站得到什么。 10
在每一个层面的决定都会影响到它之上层面的 可用选择。 这种依赖性意味着在战略层上的决定将具有某 种向上的“连锁效应”。 反过来讲，也就意味着 每个层面中我们可用的选择，都受到其下层面中所 确定的议题的约束。
这种连锁效应意味着在“ 较高层面” 中选择一 个界限之外的选项将需要重新考虑“较低层面”中 所做出的决策。
11
这并不是说每一个“较低层面”上的决策都必须在设计“较高层面”之前做出。事物 都有两个方面，在“较高层面”中的决定有时会促成对“较低层面”决策的一次重新评估 （或者是第一次评估）。在每一个层面，我们都根据竞争对手所做的事情、业界最佳的实践 成果来做决定，这是最简单不过的老常识。这些决策可能产生的连锁效应该是双方向的。 如果想在开始“较高层面”设计之前，要完全确定“较低层面”的话，几乎可以肯定的 是，你已经把你的项目日程——也许是你最终产品的成功——扔进了一个危险的境地之中。 相反地，应该计划好你的项目，让任何一个层面中的工作都不能在其下层面的工作完成 之前结束。这里最重要的一条是，在我们知道基本形状之前，不能为房屋加上屋顶。 12
•
基本的双重性
交互设计、信息设计、信息架构……
当网站的用户体验开始形成时，它的设计者 采用的是两种不同的语言。一群人把每一个问题 看成是“应用软件”的设计问题，然后从传统的 桌面和客户端软件的角度来考虑解决方案。另一 群人则以信息的发布和检索的角度来看待网站， 然后从传统出版、媒体和信息技术的角度来考虑 问题的解决方案。 为了解决网页这种基本的双重性质，让我们 从中间把这五个层面分开。 在软件的一边，我们主要关注的是任务— —所有的操作都被纳入一个过程，去思考人们如 何完成这个过程。在这里，我们把网站看成用户 用于完成一个或多个任务的一个或一组工具。 在超文本的一边，我们的关注点是信息— —网站应该提供哪些信息，这些信息对用户的意 义是什么。超文本就是创建一个“用户可以穿越 的信息空间”。
13
表现层（surface）
视觉设计，或者说最终产品的外观。
框架层（skeleton）
不管是软件界面还是信息空间，我们必须要完成信 息设计（information design）。在软件产品那边， 框架层还包括了安排好能让用户与系统的功能产生 互动的界面元素。对于信息空间方面来讲，这种界 面就是屏幕上的一些元素的组合，允许用户在信息 架构中穿行。
结构层（structure）
在软件方面，结构层将从范围转变成系统如何响应 用户的请求。在信息空间方面，结构层则是信息空 间中内容元素的分布。
范围层（scope）
从战略层进入范围层以后，在软件方面它就转变成 对产品的“功能组合”的详细描述。而在信息空间 方面，范围则是对各种内容元素的要求的详细描述。
战略层（strategy）
来自企业外部的用户需求（user need）是网站的目 标——尤其是那些将要使用我们网站的用户。与用 户需求相对应的，是我们自己对网站的期望目标。
14
总目录
• • • • • • • •
用户体验为何如此重要 认识这些要素 战略层：网站目标和用户需求 范围层：功能规格和内容需求 结构层：交互设计与信息架构 框架层：界面的设计、导航设计和信息设计 表现层：视觉设计 要素的应用
15
表现层
框架层
成功的用户体验，其基础是 一个被明确表达的“战略”。知 道企业与用户双方对网站的期许 和目标，有助于确立用户体验各 方面战略的制定。
结构层
• • • •
战略层定义 网站目标 用户需求 团队角色和流程
范围层
网站目标和用户需求
战略层
16
•
战略层的定义
网站失败的最常见原因不是技术，也不是用户体验。网站失败的最常见原因，是 在开始写第一行程序、描第一个像素，或配置第一个服
务器之前，没有人试图回 答下面两个非常基本的问题： 我们要从这个网站得到什么？---------------------------------网站目标 我们的用户要从这个网站得到什么？--------------------------用户需求
通过回答第一个问题，我们就能描述出企业的网站目标（site objective）。第二 个问题则提出了用户需求（user need）的问题，这是来自企业外部的目标。结合 内外两者，网站目标和用户需求就组成了战略层，也就成为我们设计用户体验过 程中做出每一个决定的基础。
17
此处的关键词是明确
当我们能越清楚明确地表达我们想要什么，以及确切地知道其他人想要从我们这里得到什么，我们就 能越明确地满足双方需求。
•
网站目标
网站目标经常以“只可意会不可言传”的状态存在于一小群建站的人当中。当网站目标无法用 口头表达出来时，对于应该如何完成项目，不同的人就经常会有不同的想法。
•
商业目标
尽量避免使用过于宽泛或具体的词汇来描述网站的商业目标，应该在充分了解问题之后再得出 结论。为了创造成功的用户体验，必须保证决策不是随便决定的，而是深思熟虑的结果。
•
品牌识别
品牌识别可以是概念系统，也可以是情绪反应——它之所以重要是因为它无法不被用户注意。 在用户与网站交互的同时，企业的品牌形象就不可避免地在用户的脑海中形成了。网站设计者 必须决定品牌形象是无意之中形成的，还是经过有意精心安排的结果。大多数企业选择对他们 的品牌形象施加一些控制，这就是为什么传递品牌识别是非常普遍的一种网站目标的原因。
18
•
成功标准
即一些可追踪的目标，在网站推出以后用来显示它是否满足了我们自己的目标和用户的需求。 好的成功标准不仅影响项目各阶段的决策，也提供了用户体验工作价值的具体依据。
成功标准具体显示了用户体验 是否有效地达成了战略目标。在此 例中，通过衡量每一个注册用户单 月的访问次数表明了此网站对核心 用户的价值。
改版后的上线日期
有时成功标准与网站本身和用户如何使用网站有一定的关系。如用户在每一次访问网站时的平均停留时 间是多少（服务器记录是否可以帮助你确定这点）？然而不是所有成功标准都必须直接由网站获得，也可以 衡量网站的间接影响。最有效的标准可以直接归因于网站的用户体验改变的标准，但是如果这些改变发生在 一个更长的时间段，则很难判断其是源于用户体验还是其它因素。
19
用户需求 陷阱：认为我们正在为理想用户设计网站，理想用户就是“某些与我们完全一样的用户”。但我们 并不是为自己设计，
而是为其他人设计的，如果想要这些“其他人”喜欢并使用我们创建的东西，那 么就必须要了解“他们是谁”以及“他们的需求是什么”。通过投入时间去研究这些需求，我们才能 抛弃自己立场的局限，真正从用户的角度来重新审视网站。 用户细分 用户细分（user segmentation）的几种最常见的方法： 人口统计学（demographic）方法：性别、年龄、教育水平、婚姻状况、收入等等； 心理学（psychographic）统计办法：记录用户的心理因素； 用户对技术和网页本身的观点【重要属性】 你的用户每周话费多少时间使用网络？ 计算机是他们日常生活的一部分吗？ 他们喜欢和技术打交道吗？ 他们总是有最新最好的硬件吗？ 他们每5年才买一台新计算机？ 我们的设计必须容纳不同类型的用户群。
20
用户细分将全部的用户划分成较小 的、有共同需求的小组，以此来帮 助我们更好地了解用户的需求。
可用性和用户研究 市场调研方法（market research）：如问卷调查和焦点小组——得知用户普遍信息的宝贵资源； 现场调查（contextual inquiry）：用于了解日常生活情境中的用户行为； 任务分析（task analysis）：每一个用户与网站交互行为都发生在执行某一任务的环境中； 用户测试（user testing）：最常见的用户调研方法——让用户帮忙测试你的产品； 卡片排序法（card sorting）：用于探索用户如何分类或组织各种信息元素； 创建人物角色（personas）：用户模型或用户简介——使你的用户真实再现在设计者心中。
21
团队角色和流程 战略专家（strategist）：帮助客户处理项目中的战略问题； 决策层（stakeholder）：资深决策者，管理那些会影响网站决策的部门； 战略文档（Strategy document）和可视性文档：定义网站目标和用户需求的文档。 撰写战略文档时，文档并不是越多越好，而应该简洁明了并切中要点。一个有效的战略文档不仅 可以在用户体验开发团队中起到试金石作用，它还可以成为企业其他部门的项目支持文档。 所有项目参与者——设计师、程序员、信息架构师、项目经理——都需要在项目进行期间频繁地 使用和阅读战略文档，以帮助他们在工作中做出正确的决定。 战略应该是在设计用户体验流程中的起点，但并不意味在项目开始之前你的战略需要完全确定下 来，战略应该是可以演变和改进的。当战略被系统地修改与校正时，这些工作就能成为贯穿整个过程 的、持续的灵感源泉。
22
总目录
• • • • • • • •
用户体验为何如此重要 认识这些要素 战略层：网站目标和用户需求 范围层：功能规格
和内容需求 结构层：交互设计与信息架构 框架层：界面的设计、导航设计和信息设计 表现层：视觉设计 要素的应用
23
表现层
框架层
当你把用户需求和网站目标 转变成网站应该提供给用户什么 样的内容和功能时，战略就变成 了范围。
结构层
功能规格和内容需求
• • • • • • 范围层的定义 功能和内容 收集需求 功能规格 内容需求 确定需求优先级 24
范围层
战略层
•
范围层的定义
定义项目范围包括了两个方面：一个有价值的过程导致一个有价值的产品。 过程（process）：确定现在能解决哪些事情，而哪些必须要再迟一点才能解决； 产品（product）：在项目中要完成的全部工作，保证在开发过程中不会出现模棱两可的情况； 工作流程、日程安排、里程碑：用可视性文档来说明项目要求； 理由1：这样你才知道正在建设什么。一系列明确的要求能够把责任分配得更清晰。 理由2：这样你才知道不需要建设什么。用文档记录不同的可能性能够提供评估这些想法的架构。
一月（现在）
四月
七月
十月
（明年）一月
版本1.0 •------------•------------•------------•------------•------------•------------•------------•-------------
版本1.1 •------------•------------•------------•------------•------------•------------•------------•-------------
当前难以满足的需求，可以成为启动下一版本的基础，这样就能形成一个不断循环的开发过程。 25
功能和内容 在范围层，我们从讨论战略层面的抽象问题着手——“我们为什么要建这个网站？”— —转而面对一个新的问题：“我们要建设什么？”
在这里，范围层被软件界面的网页和超文本的网页分成两个部分。在软件方面，我们考虑 的是功能规格——哪些应该被当成软件产品的“功能组合”。在超文本方面，我们考虑的是 内容，这属于编辑和营销插推广的传统领域。 在软件开发中，范围层确定的是功能需求或功能规格（function specification）文档。 大部分时候这两个术语是可以互换的——事实上，有些人使用“功能需求规格”来表示他们 的文档覆盖了包括以上两者的内容。
26
内容的开发常常不会像软件过程的需求收集一样正式，但基本原则是一样的。功能需求常 常伴随着内容需求（content requirement）。现在，内容常常是通过一个内容管理系统 （content management system, CMS）来进行管理的。
内容编辑 作者 文字编辑 用户
管理层
律师
一个内容管理系统可以实现自动化流程，能出示和交付给用户。
内容管理系统必备的功能取决于你要管理的内容的性质。例如：你是否需要维护多语言或具 有数
据格式的内容？你的每一篇新闻稿是否必须要通过六个执行副总裁和一个律师的审核？ 类似的，功能需求与常常伴随着内容的需求。例如：在个人喜好设置的页面中需要有使用说 明吗？是否需要错误提示？必须要有个专门的人来写这些内容。
27
收集需求 一些需求适用于整个网站。如品牌需求或技术需求。另一些需求只适用于特殊的特性。 大多数时候，当人们说到某种需求的时候，他们想的是产品必须拥有的、某种特殊的一句简短 描述。 最用之不竭的需求源泉总是来自用户本身。去了解“人们在想什么”的最佳途径就是直接 询问他们。 需求的三个主要类别包括： 人们讲述的、他们想要的东西 用户实际想要的东西 人们不知道他们是否需要的特性——潜在需求 由于参与创建和设计网站的人很少去想象网站的新方向，因此汇集企业各个部门的成员或 不同类型的用户代表来进行的头脑风暴会议，可以是一种打开设计者思路、让他们考虑以前从 未想到的可能性的非常有效的工具。其它方法包括使用场景（scenarios）、关注竞争对手等。 需求的详略程度常常取决于项目的具体范围，如项目的目标是一个非常复杂的系统，还是 项目的内容只是相似或相同性质的东西。
28
功能规格 功能规格存在的问题： 阅读起来枯燥，占用大量编码时间，没有人读； 实施过程中事情会发生变化——维护功能规格、及时更新【重要】 撰写功能规格的通用规则： 乐观：描写这个系统件要做什么去“防止”不好的事情发生，而不是描述“不应该” 具体：尽可能详细描述清楚状况 避免主观的语气：保持明确、避免歧义，用量化的术语来定义一些需求 内容需求（内容清单） 确定文本的字数、图片的像素、下载文件的字节等基本元素； 尽可能早地确认某个人来负责某一个内容元素； 有效的内容需要日常维护工作； 定义每一内容元素的更新频率； 如何呈现不同的内容特征。
29
确定需求优先级
排列出哪些功能应该包含到项目中去； 评估这些需求是否能满足我们的战略目标； 实现这些需求的可行性有多大？ 因为技术上的局限而无法实现 需要太多资源，人力财力超出了我们的能力范围 时间局限 网站的内容特性需要其他特性的支持，导致特性的冲突； 留意看上去有可能需要改变战略的特性建议； 优先级别是决定人们所建议的相关特性的首要因素； 与管理层谈判 与管理层确定战略而不是实现这个目标的各种手段； 技术人员的沟通技巧。
有时一个战略目标将产生多个需求（左）
。 另一方面，一个需求也可以实现多个战略目标。
30
总目录
• • • • • • • •
用户体验为何如此重要 认识这些要素 战略层：网站目标和用户需求 范围层：功能规格和内容需求 结构层：交互设计与信息架构 框架层：界面的设计、导航设计和信息设计 表现层：视觉设计 要素的应用
31
表现层
框架层
在收集完用户需求并将其 排列好优先级后，需求并没有说 明如何将这些分散的片段组成一 个整体，这就是结构层：为网站 创建一个概念结构。
交互设计与信息架构
结构层
• • • •
结构层的定义 交互设计 信息架构 团队角色和流程
范围层
战略层
32
•
结构层的定义
确定各个将要呈现给用户的选项的模式和顺序。 交互设计：作为软件界面的网页，为用户设计结构化体验 信息架构：作为超文本的网页，内容建设通过信息架构构建用户体验 它们关心的是理解用户、用户的工作方式和思考方式 交互设计 交互设计关注与描述“可能的用户行为”，同时定义“系统如何配合与响应”； 用户与软件的和平相处。 概念模型 “交互组件将怎样工作”——概念模型 例如，这是内容元素还是用户访问的位置还是用户请求的对象？ 以购物车为例，使用用户熟悉的概念模型能使用户很快适应不熟悉的网站。 错误处理 当人们犯错误的时候，系统如何反应？如何防止用户继续犯错？ 方式一：将系统设置为不可能犯错的那种。 方式二：是错误难以发生，系统帮助用户找出错误并修正它们。 当用户完成动作后才发现做错了，系统应该为用户提供从错误中恢复的方式。【重做】 当无法恢复时，提供大量警告。
33
信息架构 信息架构着重于设计组织分类和导航的结构，从而让用户高效率、有效地浏览网页内容； 信息架构的分类体系
分类
分类
内容 从上而下的架构方法 “网站目标和用户需求的理解”
内容 从下而上的架构方法 内容和弄能需求的分析
一个适应性强的信息架构系统，能把新内容作为现有结构的一部分容纳 进来（左图），也可以把新内容当成一个完整的新部分加入（右图） 34
结构方法 信息架构的基本单位是节点。 节点对应任意的信息片段或组合，节点的安排方式： 在层级结构（树状结构、中心辐射结构），节点与其他相关节点之间存在父级/子级关系; 在矩阵结构中，允许用户在节点与节点之间沿着两个或更多的“唯度”移动； 在自然结构中，不遵循任何一致的模式，节点被逐一连接，用于关系不明确或演变中的主题； 在线性结构中，最基本的信息结构类型，
逐一而连贯； 组织原则 我们决定哪些节点要编成一组，哪些节点要保持独立的标准即组织原则。 应创建一个与“网站目标”和“用户需求”相对应的、正确的结构。 截面：内容不同的属性，使用错误的截面比没有使用截面更糟糕。 语言和元数据 命名原则：描述、标签和网站使用的其他术语。 控制性词典：保证网站“使用用户的语言”并“保持一致性”。 元数据：关于信息的信息，即以一种结构化的方式来描述内容。
35
团队角色和流程 架构图——描述网站结构的工具术语； 架构图的主要内容：哪些类别要放在一起？哪些保持独立？交互过程中那些步骤如何相互配合？ 视觉辞典
首页 首页 登录流程 最新消息
媒体信息
产品
在线支持 2C 入口页 家用产品 2a 前往 用户列表
新闻 办公室产品
文档 技术报告
视觉辞典是一个提供重非常简单（如左图），到非常复杂（如右图）的示意结构系统。
“谁负责这件事情”，通常取决于企业文化或项目本质。
36
总目录
• • • • • • • •
用户体验为何如此重要 认识这些要素 战略层：网站目标和用户需求 范围层：功能规格和内容需求 结构层：交互设计与信息架构 框架层：界面的设计、导航设计和信息设计 表现层：视觉设计 要素的应用
37
表现层
界面设计、导航设计和信息设计
框架层
在充满概念的结构层中形 成了大量的需求，框架层中，我 们要更进一步地提炼这些结构， 确定详细的界面外观、导航和信 息设计，使晦涩的结构变得实在。
结构层
• • • • • •
框架层的定义 习惯和比喻 界面设计 导航设计 信息设计 线框图
范围层
战略层
38
•
框架层的定义
确定用什么样的公恩形式来实现。 界面设计：确定框架，“按钮、输入框、界面控件”的领域； 导航设计：呈现信息； 信息设计：呈现有效地信息沟通。 习惯和比喻 如果我们减少很多反射作用，每天能完成的事情会大大减少。 避免比喻，就是要减少对用户在“理解和使用网上功能”时对心理的要求。 界面设计 成功的界面设计是那些能让用户一眼就看到“最重要的东西”的界面设计。 一个设计良好的界面是要组织好用户最常采用的行为，同时让这些界面元素用最容易 的方式获取和使用。（≠把用户最可能用到的按钮设计成最大的一个） 技巧一：在界面第一次呈现给用户的时候，仔细考虑每一个选项的默认值； 技巧二：自动记住用户最后一次选择状态的系统。 为用户想完成的任务选择正确的界面元素，通过一种能迅速理解和易于使用的方式， 把他们
放置到页面上去； 错误信息以及说明信息的设计——如何让用户真正去阅读这些文字？
39
导航设计 任何一个网站的导航设计都必须完成以下3个目标！
目标一：必须提供给用户一种在网站间跳转的方法。（真实有效的链接） 目标二：必须传达出这些元素和它们所包含内容之间的关系。 这些链接之间有什么关系？ 是否其中一些比别的更重要？ 它们之间的差异在哪里？ 目标三：必须传达出它的内容和用户当前浏览页面之间的关系。 哪些链接对用户是有效的？
几种常见的导航系统：
全局导航：覆盖整个网站的通路。 局部导航：提供给用户在这个架构中道“附件地点”的通路。 辅助导航：提供全局和局部导航不能快速到达的相关内容的快捷途径。 上下文导航：嵌入页面自身内容的一种导航。 友好导航：联系方式、反馈表单、企业信息、法律声明等信息的导航。 远程导航 网站地图 索引表
40
信息设计 最终目的：反映你的用户的思路，支持他们的任务和目标。 线框图 页面布局是将信息设计、界面设计、导航设计放置到一起，形成统一、有内在凝聚力的架构的地方。
友好导航 网站标志 全局导航 指示标示线索 主题图片 搜索 下拉菜单 局部导航
线框图捕获所有在框架层做出的决定， 并用一个文档来展现他们。它作为视觉设 计和网站实施的参考来使用。 三要素：
文本输入 按钮 通过安排和选择界面元素来整合界面设计 通过识别和定义核心导航系统来整合导航设计 通过放置和排列信息组成部分的优先级来整合 信息设计
正文
合作伙伴
辅助导航
友好导航
41
总目录
• • • • • • • •
用户体验为何如此重要 认识这些要素 战略层：网站目标和用户需求 范围层：功能规格和内容需求 结构层：交互设计与信息架构 框架层：界面的设计、导航设计和信息设计 表现层：视觉设计 要素的应用
42
视觉设计
表现层
框架层
内容、功能和美学汇集到 一起来产生一个最终设计，从而 满足其他层面的所有目标。
结构层
• • • • • •
表现层的定义 忠于眼睛 对比和一致性 内部和外部的一致性 配色方案和排版 设计合成品和风格指南
范围层
战略层
43
•
表现层的定义
“弥补网站框架层的逻辑排布”的视觉呈现问题。 忠于眼睛
你的视线首先落在什么地方？ 哪个设计要素在第一时间吸引用户的注意力？ 它们对战略目标来讲是很重要的东西吗？ 用户第一时间注意到的东西与你的目标是否一致？
如果你的设计是成功的，那么用户的眼睛在页面上移动的轨迹模式
应该有以下两个特点：
首先，他们遵循的是一条流畅的路径。 第二，在不需要用太多细节来吓倒用户的前提下，为用户提供有效选择的、某种可能的“引导”。
对比和一致性
对比：帮助用户理解页面导航元素之间的关系，传达信息设计中概念群组的主要手段； 一致性：使你的设计有效地传达信息——如，基于网格的布局。
内部的一致性和外部的一致性
内部的一致性问题：在网站两个不同的地方反映了不同的设计方式。 外部的一致性问题：在其他产品中，反映出被使用的、相同的设计方法。 44
配色方案和排版
设计合成品和风格指南
设计合成品：视觉设计领域中对线框图最直接的模拟物。 风格指南文档：确定视觉设计的每一方面，从最大到最小的范围内的所有元素： 设计网格、配色方案、字体标准或标志应用指南； 某一模块或网站功能的具体标准。 预防随着员工的变动，而使企业集体失忆； 使所有人遵循一套统一的标准来运作，使网站看起来是一个协调一致的整体。 45
总目录
• • • • • • • •
用户体验为何如此重要 认识这些要素 战略层：网站目标和用户需求 范围层：功能规格和内容需求 结构层：交互设计与信息架构 框架层：界面的设计、导航设计和信息设计 表现层：视觉设计 要素的应用
46
了解你正在试着去解决的问题。 了解你的解决办法所造成的结果。 用户体验的决策出现在细节中：
由现状决定的设计 由模仿决定的设计 由领导决定的设计
47
实例：搜索引擎的实施
战略层决策：补偿符合特殊标准的内容的能力
范围层决策：说明用户只能执行哪些类型的搜索
搜索结果如何排列？
结构层决策：决定用户是如何与这个搜索引擎一起工作的
用户如何到达各个页面？ 是否有统一的路径？
框架层决策：决定如何安排按钮、输入框、界面元素
表现层决策：决定如何给与界面和信息元素一致的外观
48
提出正确的问题
面对需要解决的纠缠不休的小问题，抱有正确的心态。 比赛开始以后不需要顾虑太多的想法是错误的。
让企业中的某个人去关注每个 层面的决策，只有这样才能解决创建 一个成功的用户体验所要考虑的全部 关键因素。
马拉松与短跑
+
+
+
+
=
49
谢谢！
50