读书：用户体验要素-以用户为中心的产品设计(3)

读书：用户体验要素-以用户为中心的产品设计(3)

第六章 框架层（界面设计、导航设计和信息设计）

结构层界定了我们的产品将用什么方式来运作，框架层则用于确定用什么样的功能和形式来实现。除了解决具体的这些议题，框架层还要处理更精确的细节问题。在结构层，我们看到了一个较大的架构和交互的设计；在框架层，我们的关注点几乎全部在独立的组件以及它们之间的关系上。

对于功能型产品，通过界面设计来确定框架－“按钮、输入框和其他界面控件”的领域；对于信息型产品，要解决导航设计，专门用于呈现信息的一种界面形式。最后，信息设计是功能和信息两方面都必须要做的，它用于呈现有效的信息沟通。即使这些边界有时会变得模棱两可，但是把它们定义成独立的领域仍然能帮助我们更明确地评估是否已经找到了合适的解决方案。“好的导航设计”不能纠正“不好的信息设计”－如果涉及提供给用户做某些事的能力，则属于界面设计（界面的意思是通过它用户能真正接触到那些“在结构层的交互设计中”确定的“具体功能”）；如果是提供给用户去某个地方的能力，属于导航设计（信息架构把一个结构应用到我们设定好的“内容需求列表”之中），导航设计则是一个用户能看到那个结构的镜头，这就表示通过它，用户可以“在结构中自由穿行”；如果是传达想法给用户的话，这就是“信息设计”，这个层面中范围最广的一个要素（跨越了“以任务为导向”的功能型产品和“以信息为导向”的信息型产品的边界）

习惯和比喻：习惯使我们可以把反射作用应用到不同环境中。建立一个成功的用户体验，要求你在做每一个决定的时候都有充分的、明确的理由。三秒钟也可能有挫折感：下意识就能完成的事情 变成 难以忍受的缓慢。让你的界面与用户早已养成的那些习惯保持一致很重要，给用户一个统一的处理方式，从系统其他部分学习。网站特性的概念模型有助于你保持内部一致性。不应该过于强调交互设计背后的概念模型，应该抑制在产品四周建立起比喻的冲动。网站内容应该提供一定程度的上下文，从而帮助用户更好地猜测你所采用的比喻试图代表什么样的特性。提供内容和功能越多，猜测就变得越不可靠，更好的做法就是完全去除猜测的成分。有效地使用比喻，就是要减少用户在“理解和使用你的产品功能”时对猜测的要求。

界面设计：要做的全部事情就是选择正确的界面元素。这些界面元素要能帮助用户完成他们的任务，还要通过适当的方式让它们容易被理解和使用。一个任务通常都会跨过多个界面来完成，每个界面都包含一组不同的界面元素，这些正是用户要与之战斗的对象。哪个功能要在哪个界面上完成，是我们在结构层的交互设计中已经决定的；而这些功能在界面上如何被用户认知到，则属于界面设计的范畴。成功的界面设计是那些能让用户一眼就看到“最重要的东西”的界面设计；不重要的东西不应该被注意到－有时候因为它根本就没有出现在那儿。设计复杂系统的界面所面临的最大挑战之一，是弄清楚用户不需要知道哪些东西，并减少它们的可发现性。好的程序员总是要考虑到很少发生的场景，边缘情况－经验丰富的程序员总是平等地对待每一种可能性（界面设计行不通，让少数用户满意的设计不良的界面不好）。一个设计良好的界面是要组织好用户最常采用的行为，同时让这些界面元素用最容易的方式获取和使用。

界面第一次呈现给用户的时候，仔细考虑每一个选项的默认值。自动记住用户最后一次选择状态的系统－技术工具和体系自身的局限使得我们可选择的界面选项受到限制。复选框、单选框、文本框、下拉菜单、多选菜单、按钮－视觉和界面空间

导航设计：必须满足三个目标（首先必须提供给用户一种在网站间跳转的方法，把每个页面和别的都链接起来是不现实的，导航元素必须选择那些能促进用户行为的－这些链接必须是真实有效的；导航设计必须传达出这些元素和他们所包含内容之间的关系。仅仅提供一个链接的列表是不够的。这些链接互相之间有什么关系？是否其中一些比别的更重要？它们之间相关的差异在哪？这些传达出来的信息对于用户理解“哪些选择对他们是有效的”是非常重要的；导航设计必须传达出它的内容和用户当前浏览页这个页面有什么影响？这些传达出来的信息帮助用户去理解“哪个有效的选择会最好地支持他们的任务或他们想要达到的目标”）－网站中需要清晰地告诉用户“他们在哪儿”以及“他们能去哪儿”非常重要的原因。

导航系统：全局导航（提供了覆盖整个网站的通路，它提供的是用户最有可能需要从网站的最终页面到其他什么地方的一组关键点。在导航栏放上能到网站所有主要栏目的链接。不管你想去哪儿，你都能从全局导航中最终到达那儿）、局部导航（提供给用在这个架构中附近地点的通路，只提供父级、兄弟级和子级通路）、辅助导航（提供了全局导航或局部导航不能快速达到的相关内容的快捷途径）、上下文导航（嵌入页面自身内容的一种导航，需要回到战略层才能设计得越高效）、友好导航（提供给用户他们通常不会需要的链接，他们作为一种便利的途径来使用。比如零食商店、联系信息、反馈表单和法律声明等。远程导航）、网站地图（给用户一个简明的、单页的网站整体结构的快捷浏览方式，网站的一个分级概要出现，通常不会显示超过两个层级的导航－这之后更详细的内容往往超出用户的需求）、索引表（按字母顺序、链接到相关页面的列表，网站试图相对独立地服务于拥有不同信息需求的不同用户）。

信息设计：充当一把各种设计元素聚合到一起的粘合剂。信息设计变成决定如何呈现这些信息，使人们能很容易使用或理解它们。饼图？柱状图？望远镜？放大镜？涉及“分组”或“整理”散乱的信息，把这方面的设计看成是理所当然。最关键的是用一种能“反映用户的思路”和“支持他们的任务和目标”的方式来分类和排列这些元素信息。在这些元素之间的概念关系是真正属于微观信息架构的；当我们必须要在页面上传达结构的时候，信息设计就呈现它的作用了。界面＝收集信息+呈现信息，错误提示+使用手册。不管什么时候，系统都应该给用户提供能正确使用系统的信息，这些都是信息设计的工作范畴。

指示标识：信息设计+导航设计结合，帮助用户理解“它们在哪”以及“他们能去哪”的系统，甚至“哪条路离目标更近”。指示标识的概念来自于物理世界中公共空间的设计。在网站中，指示标识通常会涉及导航设计和信息设计。一个网站的导航系统不仅仅是要提供到网站不同区域的通路，还必须要清晰地传达出这些选项。图标、标签系统和排版

线框图：页面布局是将信息设计、界面设计和导航设计放置到一起，形成一个统一的、有内在凝聚力的架构。页面布局必须结合所有类型的导航系统，每一个旨在传达不同结构中的视图设计；也必须结合任何一个在这个页面的功能所需要的所有界面元素；还包括支持以上这些内容的信息设计，当然也包括在这个页面上内容的信息设计本身。页面布局被纳入一个详细的文档，并称为页面示意图或线框图（对一个页面所有的组成部分以及它们如何结合到一起的、最直观的描述）－捕获所有在框架层做出的决定，并用一个文档来显示他们。

这些简单的线条绘制的图一般要着重注明、建议读者在必要的时候参考结构图表或其他交互设计文档、内容需求或功能规格说明，或者其他类型的详细文档。结构层的结构图示，它是这个项目的一个宏伟远景；而在框架层，线框图正是展示那些远景如何完成的详细文档。线框图有时也需要导航规格的支持，以便能更详细、准确地描述各种导航元素的每一个组成成分。不需要为网站的每个界面都准备一个线框图。线框图在正式建立网站的视觉设计流程中，是必要的第一步，但是几乎每一个参与这个开发过程的人都会在其他任务点中使用它。负责战略层、范围层和结构层的设计者可以借助线框图来保证产品能满足他们的期望。真正负责建设这个网站的人，则使用线框图来回答关于网站应该如何运作的问题。

作为信息架构和视觉设计汇集的地方，线框图变成了争论和纠纷的中心。共同协作画出细节，站在对方角度看待一件事，及早揭示出问题而不是到后来，撰写正确的文档。轻量级即时贴还是正式文档，取决于规则。线框图是整合在框架层的全部三种要素的方法：通过安排和选择界面元素来整合界面设计；通过识别和定义核心导航系统来整合导航设计；通过放置和排列信息组成部分的优先级来整合信息设计。把这三者放到一个文档中，线框图就可以确定一个建立在基本概念结构的架构，同时指出来表现层的设计应该前进的方向。

第七章 表现层（感知设计）

内容、功能和美学汇集到一起来产生一个最终设计，完成其他四个层面的所有目标，并同时满足用户的感官感受。在框架层，我们主要解决放置的事情，界面设计考虑可交互元素的布局，导航设计考虑在产品中引导用户移动的元素的安排，而信息设计考虑传达给用户的信息要素排布。表现层这里解决并弥补“产品框架层的逻辑排布”的感知呈现问题。用户体验的最后一站：视觉、听觉、触觉、嗅觉和味觉。

• 嗅觉和味觉通常取决于那个产品所选用的材料，而非用户体验设计师所能决定的
• 触觉，工业设计领域，主要关注的是用户和产品之间的物理接触。手机和手持游戏设备都可以通过振动来与用户互动。
• 听觉，通知用户，可以使产品变得有个性
• 视觉，每个人的美感见解不同，但不意味着设计决策必须建立在所有参与者都认为酷的方案，应该把注意力集中在它们的“运作是否良好”上。

忠于眼睛：你的视线首先落在什么地方？哪个设计要素在第一时间吸引了你的注意力？他们对于战略目标来讲很重要吗？用户第一时间注意到到的东西与他们的目标背道而驰吗？眼球追踪仪器确定被测人到底正在看什么，以及他们的视线如何在这个屏幕上移动的。用户在页面上的视线移动并不是随机的。如果你的设计是成功的，用户眼睛的移动轨迹的模式应该有以下两个重要的特点：首先它们遵循的是一条流畅的路径。如果人们评论一个设计是“忙碌”或“拥挤”时，这表示这个设计确实没能顺利地引导他们在页面上移动。他们的眼睛在各种各样的元素之间跳来跳去，所有的元素都在试图引起他们的注意；其次，在不需要用太多细节来吓倒用户的前提下，它为用户提供有效选择的、某种“可能”的引导。这些引导应该支持用户试图在此刻通过与产品交互去完成的某个目标和任务。也许更重要的是，这些引导不应该分散用户对那些“能完成目标的信息或功能”的注意力。

对比和一致性：把用户的注意力吸引到界面中的关键部分，过度的对比导致了混乱的视觉。对比能帮助用户理解页面导航元素之间的关系。当一个元素在设计中显得与众不同时，用户就会注意到，这是他们不能控制的－利用这个本能的行为，来使用户注意到那些“真正需要从这个页面的其他元素中突出的东西”。在页面界面上的错误提示通常会被融进页面的其他元素中：通过给文本一些不同的颜色或用一个醒目的图形将它们凸现出来，就能让整个界面完全不同了。

不管怎样，这些工作的整体策略是，让差异必须足够清晰，用户要足够分辨出某个设计选择是特意要传达一些信息的。当两个设计元素的处理相似又不太一样的时候，用户就会感到困惑。“为什么这些会不一样？它们本来是一样吗？也许只是弄错了，还是我应该在这里注意到什么东西吗？”而事实是，我们希望这两者都能抓住用户的目光，而且是有意而为之。

设计中保持一致性，能使你的设计有效地传达信息，而不会导致用户迷惑或焦虑。“一致性”在视觉设计的许多不同方面都会起到作用。视觉元素保持大小一致的尺寸。

基于栅格线的布局是来自平面设计的一种技术，是一种对网页也同样有效的技术。这个方法通过使用母版来确保设计的一致性，各种布局都是根据这个模板来创建的。不是每个布局都要使用栅格的每一个部分，但是每一个元素在网格上的位置应该是统一和一致的。但屏幕交互式产品不会像平面设计一样简单－不教条。不管什么原因，你要能认识到什么时候应该重新考虑设计系统的基础是什么。栅格系统：但栅格应用到屏幕交互式产品上不会像平面设计一样简单。

内部和外部的不一致：内部不一致就是产品的两个不同地方反映了不同的设计方法－建立对网站框架的深刻理解，其中关键在于确定有可能在产品各种各样的界面、导航和信息设计等不同环境中反复出现的设计元素，设计前将每个设计元素独立出来可以更清楚地看到困扰我们的小规模，一次设计，到处使用－但需要考虑不同场景的使用情况，最好的办法是设计出每一个独立的元素， 试着在不同的环境中应用它们，然后在需要的时候进行调整；外部不一致就是这个产品没有在同一企业的其他产品中，反映出被使用的、相同的设计方法。即使大多数的设计元素被相对独立地设计出来，它们最终还是要放到一起的。一个成功的设计不仅仅是收集小巧的、精心设计的东西；相反，这些东西应该能形成一个系统，作为一个有凝聚力、连贯的整体拉使用。用一个“统一的品牌识别形象”强化呈现在你的用户面前产品“跨媒体的一致性”，这种品牌识别的一致性应该呈现出在你的产品的每一个层级的设计中，从每个界面都会出现的导航元素到只出现一次的普通按钮。人们会对那些具有明确定义的企业产生积极向上的印象。不统一的视觉样式会破坏你的企业形象的清晰程度，并且留给访问者一个“企业还没搞清楚自身定位”的坏印象。

配色方案和排版：核心的品牌色彩通常是一个广泛的配色方案，企业所有材料应该得到的。一个企业的标准配色方案中所使用的色彩，互补不冲突。大多数情况下，更亮或更醒目的色彩可以用于设计你的前景色－那些你希望得到更多注意的元素；更暗淡的色彩最好用于不需要跳出页面的背景元素中。差异足够但保持一致。一些企业使用排版增强他们的品牌识别－用设计传达形象，任何文本，简单就好，大多数情况下不需要太多字体来满足你的沟通需求。不要使用非常相似但又不完全一样的风格，只有在你需要传达不同信息时才使用不同的风格。风格之间要有足够的“对比”才能在你需要的时候吸引到用户的注意，但是不要使用过于广泛和多样的风格。

视觉模拟或设计合成品：合成就是从已选定的组件中建立起来的、一个最终的可视化产品。独立组件如何结合在一起，必须考虑约束条件。线框图侧重于记录框架层，首先能独立地了解到框架层的问题，然后再关心到表现层的问题。视觉设计不一定要精确地按照线框图来做－只要它考虑了相关的重要级别以及线框图中各元素的组合关系。

随着时间的推移，我们的决策原因会逐渐从记忆中消失，也有人最后离开－带走了产品如何设计出来、如何在日常基础工作上建立起来的丰富知识。那些“在某种特殊环境下用来解决某个具体问题的临时决策”和那些“为了形成将来的设计工作的基础而有意识地做出的决策”会混杂在一起。承载这些设计决策的权威性文档是风格指南－汇总文档确定了视觉设计的每个方面，从最大到最小范围内的所有元素。影响到产品的每一个局部的全局标准（比如设计栅栏、配色方案、字体标准或标志应用指南）通常是风格指南中的第一部分。风格指南还要包括某一个模块或网站功能的具体标准。在某些情况下，在风格指南中所记录的标准，应该包含各个层级的标准从独立界面到统一的导航元素。风格指南的总体目标是提供足够的细节来帮助人们将来做明智的决策－因为大部分想法都已经为他们实现了。让所有的这些人遵循一套统一的标准运作，需要做大量的工作。风格指南形成一个协调一致的整体。

第八章 要素的应用

不管你的产品有多复杂，用户体验要素都是一样的。但是，将这些要素背后的想法付诸实施却是一次自我挑战。这不仅仅是时间和资源的问题－它常常是一个心态的问题。战略、范围、结构、框架和表现，高度注意细节，全职专家小组来进行，专家可以专注于完整的用户体验的某一方面，他们通常对自己承担那部分工作有更加深刻的理解。几个人的小组实际上可以产生比一个大团队要好得多的结果。创建良好的用户体验最重要的工作内容是大量收集亟待解决的非常细微的问题。“成功的方法”和“注定会失败的方法”差异两点：了解你正在试着去解决的问题（按钮大小、按钮位置、按钮不是用户期望的功能）、了解这些解决办法所造成的后果（每个决定对上下层面的连锁反应，必须同时考虑五个层面的全部因素－有专人负责固然重要，更重要的是保证所有的用户体验要素都被关注）。

由现状决定的设计、由模仿决定的设计、由领导决定的设计。需要解决纠缠不清的小问题，必须在不同的做法间做出妥协并评估利弊和进行取舍，左右为难时正确的做法是，每一个决定都建立在对背后议题的理解之上。与用户体验相关的第一个问题恐怕是问自己：你为什么要这么做？对于你即将面临的问题抱有一种正确的心态是最重要的。每一个用户体验的设计过程的其他方面都有可能导致调整，以适应时间、金钱和为你工作的人员。不要以“节省项目时间或金钱”的名义对用户体验敷衍了事－在结束时附加的用户体验评估，最后你可能会发布一个明知道已经被破坏却没有机会去修复的产品。没有时间收集用户数据？可以看看自己拿到手的信息、客服日志或反馈，找到用户需求的一些感觉、负担不起租用可用性实验室费用？做一些非正式的测试。

用户“接受度”：问题不是说他们是否会喜欢或是否会使用这个产品，而不是他们是否接受它。这些测试往往发生在整个流程的最后。很多人提倡将用户测试作为确保良好用户体验的一个主要手段，但测试永远无法取代一个考虑周密的、准备充分的用户体验设计过程。询问你的用户关于产品的某个具体元素的问题，能帮助你收集来自用户的更多相关信息。没有着眼于用户体验的用户测试，很可能以提出错误的问题而告终，这相反又会导致你得到错误的答案。“不要用不相关的内容来把事情搞得更混乱”－不管创建什么样的用户体验，其最大的挑战是“比用户自己更准确地去理解他们的需求”。

马拉松和短跑：企业中永远处于紧急情况下的开发团队太多了，用户体验开发过程是一场马拉松而不是短跑－了解你所参加的比赛类型才能用适合的方式去参赛。短跑在发令枪响那一刻聚集起所有储备的能量－而且他们必须要在那几分钟碰发出所有的能量，开始到结束都要尽可能块地奔跑。成功的马拉松取决于运动员如何有效地控制自己的步伐－何时加速+何时减速，耐性。产品开发很少是短跑比赛－建立原型和想法，随着时间推移，返回来，测试你所建立起来的东西，看看各个组成部分如何结合在一起，并且为这个项目提炼出出一个综合的画面。有些任务需要重点承担速度，有些则需要一个更加深思熟虑的方法。经过深思熟虑的设计决策，可能会在短期内花费一定的时间，但它们将在一个更长时期中节省更多的时间。设计师和开发者总是在他们工作进行到某个阶段时，才后悔没有提前关注战略、范围和结构。恶性循环 从底向上 从网站开发的时候，始终从完整的用户体验出发，最后得到的网站是一份有价值的资产。每一件与网站的用户体验有关的事情都是有意识地、明确地决策的结果，只有这样你才能确保这个网站能同时满足你的战略目标和用户需求。