相信绝大多数的设计师在入行阶段就接触到了用户体验五要素这个名词，同时也知道它的意思。但是，相当一部分人，包括刚入行的我，仅止步于此，并没有深入理解并将其运用在实际的设计工作中。这篇文章就是想让大家跟我一起，重新认识用户体验五要素。如果你有不同的见解或者想法，也欢迎留言，大家一起讨论。

两个角度来看五要素

图中的两个箭头代表两个不同角度的五要素顺序：

1、从产品设计角度：

一个产品从无到有，从概念到最终具体的呈现，分别经历战略层、范围层、结构层、框架层和表现层，是从底层到表层的过程。

2、用户角度：

用户接触到一个产品，体验的五要素顺序则正好相反，是从表现层慢慢深入到框架层、结构层、范围层和战略层的。

下面就从这两个角度来逐一分析这五要素。

战略层：需求 目标

产品的萌芽是在战略层。往往是公司的领导或者核心成员受到某些东西的启发或者灵感乍现，想要开发一款产品，接下来就是一系列的评估分析可行性，最终产生产品的大致需求。

这时候的产品还是一个概念物，在这个阶段需要理清这些东西：

而对用户来讲，这一层则是最后感受到的。用户在使用完产品后，其需求是否得到了解决，即是否达到了产品的战略目标。举个例子，对于一个电商购物产品，用户通过使用该产品解决了足不出户就能购买商品的需求。

这一层虽然没有设计师的参与，但其内容却是在着手设计之前应该了解清楚的。很多设计师往往忽略了这一点，后面也会再次提到。

范围层：功能 内容

范围层诞生产品的雏形。之前已经有了产品的大致需求，这个阶段主要就是决定做什么、不做什么 (注：这里的做与不做都是指主要需求和功能点，细节的内容不在这里考虑)。

这个阶段会进行很多的头脑风暴、需求讨论、会议评审，主要由产品、交互设计师参与。

最终产出产品需求说明和“低保真原型图”。需求说明包括项目背景、目标，功能概述等；所谓低保真原型图，即大致能看明白的产品草图，将概念化需求转化为可视化内容。这个阶段无需绘制好看的原型图，追求的是快速和易修改。这样，产品的基本雏形就有了。

从用户角度来看这一层，是对产品功能的感知。还是举上面电商的例子，产品是否支持用户和客服人员进行即时通讯，聊天的时候是否可以发送语音、上传图片等等都是用户在这一层的感知。

结构层：架构 流程

决定做的内容和方向后，这一阶段需要在草图的基础上建立产品的信息架构、梳理功能逻辑和交互流程，产出“中保真原型图”。

从该阶段开始，产品转由交互设计师主导。但如前文所述，很多人接到需求后立马就开始着手做图设计，这样做的后果是，很可能由于没有理清目标导致最后设计稿反复修改。

所以，开始做图前一定要有一个设计方案。

step 1、明确目标

产品背景：明确需求的来源、背景、权重及优先级

战略目标：4W-1H

               明确目标用户（who）

               明确需求是在什么场景下，通过什么方式为用户解决什么问题？

             （when where what how）

体验目标：用户使用后能得到什么样的体验？衡量指标是什么？

数据指标：PV、UV、跳失率、留存率、成交额、用户量、页面停留时长等

step 2、竞品分析

竞品分析可以从几个方面入手：

1、视觉：产品气质是严肃商务还是青春活泼？用色、图标风格、布局如何？是否建立完善的品牌形象？(如slogan、吉祥物等)

2、交互：可从信息结构的合理性进行分析，如信息的呈现方式、有哪些功能、信息与功能是如何交互的

3、规范：设计语言是否统一等

4、亮点：与其他竞品的差异化内容

step 3、设计方案

1、设计关键词：从产品气质和用户体验两个层面进行关键词提取，如：青春、可信度高、高效易用、个性化…

2、由产品或交互设计师给出产品的信息架构图、主要功能的流程图

3、针对用户、产品、运营等多方的需求，提供对应的解决手段，逐步梳理出原型上需要展示哪些功能内容。解决手段有加深信息层级、信息分类、信息取舍等。

step 4、产出原型图

前面提到，这一阶段产出的是中保真原型图，只需大体上看得懂、方便修改即可。这里我沿用了之前看到的一篇文章的观点，将原型分为低中高三个阶段，并分别对应到五要素。我赞同这种观点，不过现实情况是，很多小公司没有那么多时间去做这么多环节，只产出一个高保真原型，有的甚至是中保真、低保真的原型就直接交到了视觉设计师的手上。所以设计师们需要根据自身的情况灵活处理，对部分环节进行取舍或者合并，找出最适合自己公司的方案。

从用户角度来看这一层，是对产品的感知。以电商为例，在这一层，用户体验到从下单到完成支付的流程是什么样的。

框架层：细节 核对

架构流程确定后，交互的工作就还剩最后一步——细节核对。主要是梳理完善，特别是各种异常流程、状态等，最后产出高保真原型图，必要时还需制作交互demo和产出交互文档(DRD)。部分公司在结构层只产出信息架构图和主要功能的流程图，那么到了这个阶段，就需要先完成中/高保真原型图，再进行细节核对。另外，为了缩短项目周期，很多公司的技术人员是按照高保真原型图来进行开发的，所以不能像中保真原型图那样，大体看得懂就行。

细节的核对可以从两方面进行：

1、建立设计规范

2、原型自查

具体的方法与本文主题无关，后续有机会再单独做分享。

从用户角度来看这一层，是对产品的整体印象。如打开产品后看到哪些菜单，每个菜单对应什么内容，大概的布局是什么样的。

表现层：视觉 呈现

表现层，名字就很浅显直观的表达了其含义，即产品的皮囊。对用户来讲，就是第一时间呈现在眼前的东西，如电商首页热闹的活动、大大小小的icon等等。这一阶段由视觉设计师主导、交互设计师参与，最终产出视觉稿。

和原型一样，也涉及到自查、设计规范以及组件库的建立等，这里就不再展开细讲。

小结

从产品设计角度，用户体验五要素伴随产品从概念到最终具体的视觉呈现。战略层确定产品需求和目标，范围层确定产品功能和内容，结构层明确产品信息架构和流程，框架层则是对产品细节的核对、梳理和完善，最后视觉设计师通过表现层将产品界面展示给用户。

从用户体验角度，用户打开产品就感知到表现层；通过点击浏览页面了解产品大概内容，感知框架层；进行一系列操作体验业务流程，感知结构层；通过使用中产品提供的功能感知范围层；用户使用完产品后，其需求是否得到了解决，便是感知了战略层。

很多设计师只关心和自己有直接关系的框架层和表现层，对产品本身的认识就会存在很多局限和理解不到位，进而设计出来的产品就不尽如人意。有可能的话，设计师应该尽量参与到产品前期的需求讨论环节中，多些思考，使自己的设计作品不仅仅停留在表面。

最后，欢迎关注我的微信公众号“兔宅菌”

Powered by Froala Editor