用户体验五要素是什么？五个层次的区别与应用案例

用户体验五要素是战略层、范围层、结构层、框架层和表现层。它们依次回答：为谁解决什么问题、要提供哪些功能与内容、这些内容怎样组织、页面怎样安排，以及最终如何被感知。这个框架的价值，是帮团队判断问题发生在哪一层，避免把所有体验问题都归结为“页面不够好看”。

产品团队可以在Boardmix 在线协作白板中把用户资料、需求清单、流程与页面草图放在一起，让五层之间的决定有迹可循。下面按照五层结构，用“校园教室预约”这一设计案例逐层说明应做什么、留下什么结果。

五要素由 Jesse James Garrett 在《用户体验要素》中系统阐述。从下到上，设计从抽象逐渐变得具体：上层决定通常依赖下层依据，例如页面按钮不能弥补错误的功能范围。实际设计仍会反复迭代；发现页面方案行不通时，可以回到结构、范围甚至战略重新判断，而不是机械地一次做完一层。

1. 战略层：明确产品目标和用户需求

战略层决定产品为哪些用户解决什么问题。设计前需要同时回答“组织希望获得什么”和“用户希望完成什么”，再检查二者是否一致。产品分析、产品定位、商业模式分析与用户研究，都是帮助澄清这一层的方法。

以教室预约为例，“做一个预约小程序”只是方案，不是目标。学生真正需要的是找到符合人数和时间要求、规则明确的可用教室；管理方希望减少冲突预约，并知道空间是否被合理使用。若只追求“预约次数增长”，可能鼓励占位，却没有解决临时找不到场地的问题。

这一层的产物可以很短：一份目标用户、核心问题、业务目标和约束的说明。SMART 原则可帮助检查目标表述；用户画像与用户任务分析则用于理解需求。它们服务于判断，不能替代真实用户材料。

2. 范围层：把目标转成明确的功能与内容

范围层主要考虑功能规格与内容需求。两者不是把产品机械分成“工具类”和“内容类”：同一个预约产品既有提交、取消等功能，也需要教室容量、设备、开放时间和使用规则等内容。

如果战略层确定要让学生找到合适的空闲教室，范围层就要写清：

• 必须提供：按日期、时段和人数筛选；查看教室信息；提交预约；查看申请状态；按规则取消预约。
• 必须准备的内容：教室位置、容量、可用设备、开放时段、审批条件、取消截止时间及联系渠道。
• 暂不纳入：校园社交、活动推荐等与本次问题关联较弱的功能。它们可以保留在后续需求中，不必抢占第一版资源。

“支持取消预约”仍然不够具体。需求还要回答：谁可以取消、什么时间前允许取消、取消后名额何时释放、需要向谁反馈。明确这些条件，结构层才有可能设计完整路径。

范围层的产物是可讨论、可验收的功能与内容清单。评审时问“删除这一项会影响哪个已确认的目标”，比只按功能数量评估完整性更有效。

3. 结构层：安排用户路径与信息组织

结构层把需求组织为可理解的关系，主要包含交互设计与信息架构。交互设计说明用户动作后系统怎样响应；信息架构说明内容怎样分类、关联和被找到。两者一起决定用户如何到达目标，而不是仅决定页面长什么样。

• 交互设计：选择时段→筛选教室→查看详情→提交申请→确认结果。提交时若时段已被占用，应说明冲突并允许重新选择，而不是让用户从头填写全部信息。
• 信息架构：把日期、人数、设备作为筛选维度，把位置、设备详情和规则放在教室信息中，把待审批、已确认、已取消整理在“我的预约”里。

画流程时，应覆盖主路径和会改变下一步动作的分支。例如“申请已提交”与“预约已确认”是两个不同状态；需要审批的预约，不能在提交后就显示“可以直接使用教室”。同样，没有结果时应允许放宽条件，而不是只显示空白页面。

这一层可交付用户流程图、信息架构图和关键状态说明。检验方法是给同事一个明确任务，让他沿图回答“从哪里开始、下一步是什么、失败后去哪儿”。如果还需要设计者不断口头补充，关系很可能尚未表达完整。

4. 框架层：确定页面中的布局与操作位置

框架层将结构落实到页面。它关注界面、导航和信息设计：哪些内容先出现、哪个控件承担操作、怎样提示当前位置，以及重要信息如何分组。线框图是表达这些决定的一种方式，重点是安排与层级，不是最终颜色和装饰。

继续看教室详情页：学生在预约前最需要知道“是否合适、是否可用、怎么申请”。因此可以先呈现容量、地点、设备与所选时段，再放规则摘要和预约动作。把关键限制藏在很长的页面底部，会让用户在提交之后才发现不符合条件。

• 界面设计：日期和时段怎样选择，提交与取消操作放在哪里，错误信息靠近哪个输入项。
• 导航设计：从列表进入详情后如何返回原筛选结果，怎样进入“我的预约”查看状态。
• 信息设计：容量、设备和规则怎样分组，待审批与已确认怎样用文字明确区分。

结构层与框架层的区别：“提交后先审批再确认”是路径和状态决定，属于结构层；“审批状态出现在详情页顶部、申请编号放在下方”是页面安排，属于框架层。把两类问题分开，团队就不会用调整按钮位置来解决流程缺失。

5. 表现层：让重要内容容易看见、状态容易分辨

表现层处理用户直接感知的细节。在屏幕产品中，字体、颜色、图标、间距和视觉层级尤其重要。它应延续前四层的决定，让主要任务更清楚，而不是用装饰掩盖信息和流程问题。

• 视觉引导：预约动作和所选时段有清晰层级，次要信息不会与主操作争夺注意力。
• 对比与反馈：可预约、待审批、不可用等状态有明确文字；不能只靠颜色区别，让用户猜测含义。
• 一致性：同一种状态、操作和控件在不同页面中保持相同含义；同一个“取消”不能一处表示返回、一处表示撤销预约。

这一层完成后，要在实际屏幕尺寸下查看。桌面上看起来整齐的三栏卡片，在手机上可能把预约时间挤成两行，导致读者漏看日期；缩小整张页面不等于完成移动端设计。

发现体验问题时，怎样判断应该改哪一层？

评审不必只从底层向上走。先记录用户在哪里停住，再沿五层寻找原因：

一个问题可能跨层。例如用户频繁误约大教室，既可能是容量信息不醒目，也可能是系统根本没有人数筛选。不要看到现象就立即确定设计方案；先把观察、可能原因和待验证办法分开记录。

在 Boardmix 中，可以保留五个相邻区域，分别放目标依据、需求清单、用户路径、页面草图和视觉检查结果，用连线标明同一需求如何落到页面。已有的用户体验设计指南可帮助了解更完整的研究与设计过程；当前评审先锁定一个任务，把五层之间缺失的决定补齐。