下载掌阅APP，畅读海量书库
立即打开
杰西·詹姆斯·加瑞特（Jesse James Garrett）在深入分析网站和应用的用户体验影响因素之后，根据这些因素对用户体验影响的程度和范围，将其划分为五个层次，用于指导软件系统的交互设计。如图2-12所示，这五个层次包括表现层、框架层、结构层、范围层、战略层。用户在接触产品的过程中，往往是由上到下逐渐感知的，即首先接触到表现层，再经过使用过程一层层体会企业/产品的战略目标。对于设计师而言，则要从下到上展开设计，首先定义企业/产品的战略目标，由战略目标定义产品的功能范围、信息架构和任务流程，最终定义产品的视觉表现。
图2-12 用户体验五个层次
用户在接触产品时，看到的是产品（软件系统、网页或者应用）所呈现出来的视觉表现（surface），主要包括界面元素和信息内容的视觉表现形式。界面元素包括按钮、滑块、窗口、菜单、单/复选按钮、文本框等用以供用户操作、控制软件的元件，其视觉表现指这些元素的形状、尺寸大小、颜色、材质效果等。信息内容可以通过文字和图形、图像进行呈现，其视觉表现包括文字的字体、字号、颜色，图形和图像的色调、轮廓形状、尺寸、明暗度等。这些元素除了通过视觉化的方式向用户传递产品的形象之外，还具有一定的功能性，例如通过颜色、大小的对比，突出显示某一视觉元素，吸引用户的注意力，引导用户的操作流程。
在表现层之下是网站的框架层（skeleton）。框架层定义的是界面元素和信息内容的位置和相对关系，也就是所谓的“布局”。用户在大致浏览完一个网站或者一个产品的首页之后，想进一步地去使用这个网站和产品，接下来只需点击一些控件或者按钮即可。用户在执行操作时，会感觉到有些产品使用起来非常流畅，而有些产品则使用起来非常费力。这其实是由于界面上控件布局合理性导致的。页面布局的合理性会极大地影响用户的操作效率，进而影响用户使用产品的整体体验。框架层的工作主要是优化界面元素的布局，使这些元素能发挥最大的效果，提升用户使用效率——用户在需要的时候，总是能找到应该操作的对象。
与框架层相比更加抽象的是结构层（structure），框架层是结构层在具体界面上的表现形式。框架层定义所有界面元素的位置，而结构层则需要定义用户到达某个界面的路径，并且引导用户完成当前页面的操作之后进行下一步操作。框架层定义导航条上各项的排列方式，而结构层则要确定这些项的具体内容。
用户在使用网页和产品的时候，可能需要跳转多个界面，在跳转的过程中用户其实可以感受到网页或者产品的信息架构和交互逻辑是否清晰。在结构层，通过定义信息架构、任务流程、交互逻辑使产品的功能点能够被使用。结构层在五个层次中应该是比较复杂的一个层次，它就像一个产品的地图，当你需要使用某个功能时，它会一步一步地引导你去实现这个功能，以达到你的预期目标。
结构层确定了信息架构、任务流程、交互逻辑，在结构层之下的范围层（scope）则需要定义产品的功能。除了产品的基本功能外，有一些方便用户操作，使交互流程易于完成的功能需要逐渐加入产品之中。例如，用户经常在电商平台使用某个邮寄地址，那么是否电商平台系统应该记住这一地址，在用户下一次提交订单时，默认填写该地址作为用户的收件地址。范围层要解决的就是定义产品应该具备哪些功能。
范围层之下是战略层（strategy）。战略层定义了产品的目标、用户及所要满足的用户需求。普通用户对于产品战略层的感知是非常不敏感且比较模糊的，只有在产品缺失或不可用时，用户才能感受到产品的价值和存在的意义。例如，某企业对外卖订餐产品的战略定位是为用户提供方便、快捷的订餐服务。普通用户对产品的感知仅停留在其功能层面，即利用该产品可以订外卖。当因为某种原因无法使用这类产品，而确实又需要的时候，用户才会感到不方便。
在整个产品设计过程中，战略层要解决的问题是定义产品目标、目标用户和用户需求。设计团队需要回答以下问题。
· 我们希望通过这个产品得到什么？例如，产品在一年内盈利多少？带来多少流量？能否和现有产品形成互补优势？带来哪些社会影响？为企业树立什么样的品牌形象或社会形象？
· 谁将使用我们的产品？我们希望谁使用我们的产品？
· 用户使用这个产品做什么？使用产品之后他们能得到什么？改善什么？产品给用户带来什么服务和价值？
· 产品的核心竞争力与不可替代性是什么？
以上这些问题的答案定义了产品的基调，最终将传递到其他四个层面，指导各个层相应的设计活动。
范围层定义产品的功能与规格。在确定目标用户、用户需求、产品目标之后，设计团队需要围绕这三方面考虑产品应该提供哪些具体的服务与功能来满足这三方面的战略目标。在定义功能架构之前需要把所有功能定义清楚。产品具备哪些功能？核心功能是什么？每个功能的作用是什么？执行产品功能目标是什么？这些都是范围层需要回答的问题。
在定义产品的功能与规格时，需要确定功能的优先级，以定义设计开发工作的优先次序。从产品功能对盈利模式的支撑程度，对实际业务开展的支撑程度，用户的需求程度等角度分析，可以把产品功能划分为重要核心功能、次要核心功能、重要非核心功能、次要非核心功能，对应的优先级从最高到最低。项目团队的人力、财力、时间等资源要优先保障高优先级的功能设计与开发工作。
结构层的设计工作要确定产品的信息架构、任务流程、页面跳转的逻辑关系等内容。这些设计工作决定了产品的使用流程是否合理、能否保证用户顺利地使用产品。信息架构设计定义了产品功能信息所处的位置和寻找路径；任务流程设计定义了用户使用产品功能完成具体任务所要走过的路径和经历的产品页面；这两者在产品中最后的呈现方式就是页面之间的跳转逻辑关系。
信息架构的设计需要通过卡片分类、信息分类、聚类分析等设计方法解决产品包含的所有信息的分类问题，最终以层级化的树形结构体系呈现给用户。信息架构的层数（信息架构的深度）和每一层信息内容的数量（信息架构的广度）需要很好地平衡。
任务流程的设计需要从业务的具体开展方式开始，分析当前用户完成任务的流程，找出所有信息输入、处理、输出的过程，通过产品帮助用户完成这些任务。层次任务分析法可以有效地对用户任务进行分层，然后分析各层任务流程的合理性，进而展开优化设计。任务流程设计的目标是降低用户操作次数，优化交互方式，提高任务执行顺序的灵活性，减少场景转换，最终提高用户工作效率和准确度。
用户使用产品完成任务时，需要经历不同数量的页面，这些页面间的跳转逻辑应该符合用户已有的知识，才能降低用户学习成本，提高产品易用性，最终提升用户满意度和工作效率。
框架层要定义每个界面具体的控件元素布局，比如按钮、控件图片、文本的区域和位置。在结构层解决了信息结构、任务流程的梳理，在框架层就要把实现每个任务的界面设计出来。在这一阶段应该按照一定的规范定义控件的尺寸、所处区域大小和相应的文字标签。框架层所有设计工作一般以产品设计线框图（wireframe）的方式呈现。
线框图通过选择和布局交互控件和设计元素实现界面设计；通过放置和排列信息对象完成产品的信息设计；通过定义页面跳转关系和交互逻辑完成任务流程定义。把这三者整合到一个文档中，线框图就可以确定产品的基本架构，同时为表现层的具体设计工作指明方向。
表现层是整个五层模型的最后一层，在这一层要完成产品的所有视觉设计工作。基于框架层完成的产品线框图，此时要为线框图“上色”，定义产品最终的视觉呈现效果，也就是绘制产品的“高保真原型”。表现层的工作也可以说是为产品创建最终的感知体验。
软件产品的设计是快速迭代、功能不断更新（增加、减少或替换）的长期过程，为了保证产品（不同版本的）所有页面效果的一致性，为用户带来一致的整体感受，在视觉设计阶段要定义整个产品的设计规范，主要包括色彩的RGB值（或用其他色彩模型表示，如LAB值）；字体的选择、颜色、字号、修饰元素；图片的尺寸、长宽比例、色调、修饰效果等；控件的具体尺寸、修饰效果等。这些具体的设计规范还可以指导程序开发人员的工作，保证程序开发的最后效果和设计方案效果的一致性。在表现层，产品的内容、功能和视觉美学融合到一起，成为最终的设计方案，完成其他四个层面的所有目标，并为用户营造美好的感官体验。
如图2-13所示，在利用用户体验要素的5层模型开展产品设计工作时，先确定产品的战略，再根据产品战略依次从下往上设计，形成战略定义、功能定义、结构设计、布局设计、视觉设计5个阶段。每一阶段的设计结果都是下一阶段的输入内容和工作基础，也决定了工作方向。每一个阶段制定的设计决策都需要在下一设计阶段具体执行，如果反复修改，则会使产品形象变得模糊，并且非常不利于项目的推进。
图2-13 基于用户体验要素模型的产品设计工作框架