用户体验要素这一概念来自于 Jesse James Garrett 出版于2002年的书籍 The Elements of User Experience (《用户体验要素》)。书中，Garrett将影响用户体验的产品工作分为五个层次：战略层、范围层、结构层、框架层、表现层。
从上图来看，好像功能型产品与信息型产品的要素有很大不同，其实只是侧重点不同。功能型产品也有信息，信息型产品也有功能。前者是主要关注任务，即产品对用户而言只是用于完成任务的工具，比如聊天软件；后者主要关注信息，即产品对用户而言主要提供信息，比如资讯软件。现在的多数产品已经不是单纯的功能型或信息型，信息型产品有不少功能，功能型产品也能提供不少信息，很难将某个产品定义为信息型或功能型了。
战略层
我们要通过这个产品得到什么（产品目标）？用户通过产品能得到什么（用户需求）？
（即明确我们“为什么”做？）
产品目标：除了我们一般知道的简单的盈利、提供服务之类，还可以有品牌目标，并要树立衡量产品目标实现的标准。
用户需求：战略层的产品需求不会列出所有需求，而是一种概述。比如微信最初的用户需求可能是：一个通信工具。而在确定用户需求时，需要确定用户群体、用户画像，有可能的话要做更多用户调研。
企业的产品目标（product objectives）是来自企业内部的需求，而用户需求（user needs）是来自企业外部的目标。这两者就组成了战略层，也称为我们在设计用户体验过程中做出每一个决定的基础。
战略层=产品目标+用户需求
如何寻找产品战略：根据用户群定义、参考同类产品、观察市场动态、老板决定
范围层
当我们把用户的需求和产品目标转换成产品应该提供给用户什么样的内容和功能时，战略就变成了范围。即明确我们应该“做什么”。
在软件开发功能中，范围层确定的是全部的功能需求或功能规格。有些企业用这些术语表示两种不同的文档。在项目初期，这个词表示需求，描述系统应该做什么(就像施工图)；在项目末期，这个词表示规格说明，描述系统真正完成了什么（就像竣工图）。
范围层是根据产品目标和用户需求（战略层），列出所有需要满足的需求和所有需要实现的功能，并确定优先级。
更具体地说，范围层是将产品所有要做的需求都列举出来，并确定需求优先级。在战略层确认了用户细分群体、用户画像，范围层就要结合对应的场景来确认产品的需求。
用户+场景=>需求
范围层=功能规格+信息内容+优先级
如何收集需求、需求的优先级
在解决了“为什么做”和“做什么”的问题后，我们就要解决“怎么做”的问题。接下来的结构层、框架层、表现层则完美的做出了解答，由抽象到具体，层层递进。
结构层
它适当的将我们关注的点从抽象的决策与范围问题，转移到影响最后的用户体验的具体问题。本层主要关注交互设计（interaction design）和信息架构。
结构层：功能和内容的组合、排列
在定义好用户的需求并排列好优先级之后，我们对于最终产品包括什么特性已经有了清晰的图像。然而，这些需求并没有说明如何将这些分散的片段组成一个整体。这就是范围层的上面一层：为产品创建一个概念结构。
交互设计关注于描述“可能的用户行为”，同时定义“系统如何配合和相应”这些用户行为。
对于产品而言，信息构架关注的就是呈现给用户的信息是否合理并具有意义。
信息构架要求创建分类体系，我们可以使用两种方式来建立分类体系：从上到下或从下到上。从上到下（top-down approach）的构架方法是由战略层驱动的；从下到上（bottom-up approach）的架构方法是由范围层驱动的。
产品需要绘制架构图。架构图最重要的是绘制概念关系：哪些类别需要放在一起，哪些需要保持独立？在交互过程中哪些步骤需要相互配合？
概括地说，是将范围层确定的所有需求梳理出一个恰当的结构，以匹配用户体验。所有的需求在范围层已经全部列出，结构层的任务就是把这些需求分门别类、确定结构：
交互设计：确定好哪些需求放在哪些页面更符合用户使用习惯
信息架构：说白了就是分类和导航，并确定对应的结构——比如是线性结构、还是层级结构等等。层级结构就是有父子层次关系。
结构层=交互设计+信息架构
框架层
在结构层，我们看到一个较大的构架和交互的设计；在框架层，我们的关注点几乎全部在独立的组件以及它们之间的相互关系上。
界面设计（interface design）来确定框架——一个大家熟知的、“按钮、输入框和其他界面”的领域。以任务为导向，针对功能型产品
导航设计（navigation design）专门用于呈现信息的一种界面形式。以信息为导向，面向信息型产品。
信息设计（information design）呈现有效的信息沟通。
在产品设计中，有一个很重要的概念：线框图。线框图可以说是上述的界面设计、导航设计、信息设计的三者的结合，是产品的雏形和大体形态。需要注意的是，线框图与产品原型略有差别，原型是对线框图的更细致描述的产品体现，原型要求必须有交互，而线框图则可以是静态的，没有交互也可以。
框架层=界面设计+导航设计+信息设计
表现层
将内容、功能和美学汇集到一起产生一个最终设计，完成其它四层所有目标，并同时满足用户的感官感受。
在表现层的视觉实际中，我们用于吸引用户的一个主要工具就是对比（contrast）。对比能帮助用户理解页面导航元素之间的关系。在设计中需要保持一致性（uniformity）,这使得我们的设计可以有效传达出信息，并不会致使用户迷惑。
此外需要保持内部和外部设计的一致性。选择合适的互补的不冲突的配色方案。并设计视觉模型和风格指南。
表现层不仅仅是「视觉设计」，或者说是「感知设计」而非「视觉设计」，差别在于：”视觉”只是视觉，而”感知”有5感。对于互联网产品，除了嗅觉、味觉，其他几种感觉都能用到。而如果你要做硬件产品，嗅觉也得注意。
表现层=感知设计
在各个层次，我们需要做哪些事？
战略层
BRD、MRD
（市场分析、用户画像、竞品分析、、、
范围层
PRD（部分）
（需求收集、需求分析、Feature List、、、
结构层
PRD（部分）和低保真原型（线框图）
（业务流程图、功能结构图、信息架构图、、、
框架层
高保真原型和交互设计
表现层
UI设计
用户体验顺序
用户拿到你的产品以从上到下的顺序来体验你的产品。
表现层
用户拿到产品后，产品呈现给用户的第一印象。例如，产品的主色调是蓝色还是红色、采用了扁平风格还是拟物的风格等。
框架层
当用户进入产品时，用户对产品的整体印象。例如，进入产品后，用户可以看到菜单是怎么设计的，每个菜单分别对应什么功能。怎么找到需要的内容，是通过列表还是搜索框。
结构层
用户开始使用产品后，用户对产品的感知。例如，从购物到完成支付的流程是如何的，在各个环节是否有信息提示等。
范围层
更深入地使用某个功能时，用户对功能的感知。例如，聊天功能是否支持自定义表情、是否支持发送文件等。
战略层
用户使用完产品之后，用户判断是否完成了他的目标。例如，通过产品进行购物、通过产品阅读需要的内容。
产品设计顺序
用户体验要素这些层次列出来后，给人的感觉是可以从上往下推导来做产品。比如先确定战略层，再确定范围层……
实际工作中并非如此，很多时候可能只是突发奇想，感觉到一个功能可以满足用户需求，然后再倒推用户更本质的需求是什么，一开始战略层的产品目标可能都不明确，比如很多互联网产品的盈利模式都是边发展边发现。
所以，实际工作往往各个层次互相交织、可能从上往下推导，也可能从下往上倒推，也可能从中间突破。这些层次的作用更多是让我们能更精确地把握用户体验。
参考资料：
1.《用户体验要素》：一张图读懂用户体验五要素
2. Jesse James Garrett的个人网站
3.《用户体验要素》读后感 知乎用户：草莓花裤衩
4.关于「用户体验要素」的11个常见误区，你注意到了吗？——人人都是产品经理
5.聊聊用户体验的五个要素——林子的笔记