本文阅读预计27分钟，建议单独抽出半个小时的时间来学习
很多人都看过《用户体验要素》这本书，但是这本书是英文翻译过来的，很多话术都难以理解，案例也比较陈旧，不符合中国人的认知和理解。
很多人看完的反馈就是：好像看懂了，但又不是很懂，所以我用我自己的理解方式给大家重新梳理《用户体验要素》这本书
一、战略层——从一个「想法」开始
如果把《用户体验5要素》用金字塔的结构来形容的话，那「战略层」就是这5要素的「根基」，有了根基，才能搭建起完整的结构。
战略这两个字常常出现在老板口中，老板说：我们公司要在2年内上市、我们要在年底突破300万营业额…
这些话听起来像在喊口号，像是老板为了给我们压力才这样说的，但其实老板说这些话，只是在定义公司的「战略目标」
战略目标就是一个「想法」、一个「概念」，他很抽象，但却决定了我们接下来要做什么事情。
如果没有战略目标，整个公司就会出现混乱，有人说要以设计为主、有人说要以推广为主、有人说要以产品为主…大家都有各自的理由，谁都无法说服对方，而一旦有了战略目标，我们就知道接下来要如何配合，要优先做哪些事情。
战略目标不仅仅用来定义公司方向，做任何事情都应该先明确一个目标，比如我未来要上清华北大、我要在一个月内减10斤、我要3个月内考过雅思…
这些都是在定义「目标」，而在产品设计中，我们的战略目标可以是：增加一个功能、优化一个流程、解决一个问题….
这些问题通常是为了满足「用户需求」或者「产品目标」
『用户需求』
用户需求比较好理解，就是用户想要做什么事情。
比如我的公司是做「旅游攻略」的，大家看完攻略以后都想按照攻略上的路线游玩，而且他们不想重新再找酒店了，想直接预订攻略里提到的酒店，这就是「需求」。
我发现了用户的需求，就可以在APP中增加一个「预定同款酒店」的功能，而当我提出「我想增加这个功能」时，这就是在定义战略目标。
『产品目标』
产品目标通常是「考虑公司利益」，为企业带来价值而定义的，比如我要增加APP的下载数量、我要让更多人完成注册、我要让更多人完成购买…
能够为公司带来利益的，都属于「产品目标」，他更偏向商业化目的，通常都由产品经理去定义。
通过「从用户身上挖掘需求」，以及「产品数据分析」，我们就能够确定产品的战略目标，所以为什么大家都在强调「用户调研」和「数据分析」，就是为了帮助自己确定接下来要做什么事情。
二、范围层——围绕目标思考解决方案
范围层是在确立「战略目标」之后，思考「如何实现目标」的一个环节。
如果我的战略目标是：增加一个「预定同款酒店」的功能，那我接下来就要思考：怎样才能实现这个功能呢？
我需要查看酒店图片、查看酒店介绍、查看酒店位置、选择房间类型、支付预定金额……..
我列出来的这一件件事情，就是我接下来的「工作范围」
@ 范围层的双重性：
作为「产品设计者」来讲，我们思考的都是「产品需要什么功能」，但是还有另外一批人，他们想的都是产品要有什么内容。
比如我需要有「酒店介绍」，另外一批人就会说：我要介绍写什么样的介绍？是关于酒店大小的、还是酒店历史文化的、还是酒店风格的？
他们处在不同的职位，想的事情和我们不一样，但是他们的工作内容也处在「范围层」这个阶段，他们也在定义自己的「工作范围」，所以在「定义范围层」时，我们需要考虑他的「双重性」
#功能规格：产品中需要哪些功能才能实现产品目标
#内容需求：我需要提供哪些内容素材，比如图片、文字、视频等
Long老师希望你把「战略层」和「范围层」的关系转化成自己思考方式，比如当老板提出「公司要在2年内上市」，普通员工的反应是：
这家伙每天都在给我们画饼、每天给我们打鸡血，好烦啊…这家伙也不关心一下自己的产品，做的这么烂怎么可能上市…
普通人只会吐槽，而你要思考的是：为了实现老板说的目标，我要做哪些事情呢？然后把这些事情都一一列出来，这些事情就是我未来的规划，有了规划我就能一步一步实现目标，而不是像其他人一样只会吐槽。
为什么那么多人只会吐槽？
因为「范围层」大多都是领导做的，领导确定了要做什么，其他人只是去执行而已，执行者想要提升自己，不要一味的提升「制作水平」，还要学会思考，执行力只能帮你成为一个很好的执行者，而思考能力可以让你成为一个优秀的领导者。
在工作中遇到某个问题时，你也可以按照这个思路来做，把问题定义成目标，想一想如果我想解决这个问题，我需要做哪些事情呢？把要做的事情都列出来，你就能轻松解决问题。
在生活中，你也可以运用这样的思考方式，比如我想在一个月内减10斤，我就可以先列出我第一周要做什么、第二周要做什么，确定了任务计划，剩下的就是去执行了。
三、结构层——把零散的功能整齐起来
战略层是在确定做什么，范围层是在确定怎么做，而结构层就是在确定做成什么样子。
在范围层的时候，我们确定了产品中需要哪些功能，但是你要知道，我们的目的是要做一个APP，单纯的说我要做什么，并不能形成一个产品结构，现在这些功能还都只是零散的点，你并不知道在哪个页面、哪个环节能看到这些功能。
所以在结构层要做的事情，就是把范围层罗列出来的功能，一一对应到APP的界面当中，让这些功能组成完整的「产品结构」
比如：
我要把酒店图片、酒店介绍、酒店位置，都放在「酒店详情页」；
我要把选择房间类型、支付预定金额，都放在「预定页」；
这些就像是范围层里列出的所有功能点，我需要：
把他们一一对应到不同页面，这样就搭建起了「产品结构」，这个环节虽然没画一张页面，但你已经能看到整个产品是什么样子了，为接下来画页面打好了基础。
@ 结构层的双重性：
-交互设计：这里的交互设计，指的是「页面流程」，你需要「基于信息架构」来思考页面是如何跳转的。
# 交互设计说明：
之所以把「页面流程」算做「交互设计」的范围，是因为用户体验不止存在于一个页面，而是一整套页面组成的完整流程，流程的先后顺序、流程的长短、流程的分支，都影响着用户体验，所以「页面流程」也属于「交互设计」的工作范围。
# 信息架构说明：
信息架构主要包含4种，树状结构、矩阵结构、自然结构、线性结构
树状结构：
矩阵结构：
可以从多个不同页面进入同一个页面，这就是矩阵结构的特性。
自然结构：
自然结构和其他结构不太一样，他是没有规律的，很随意的结构，通常用于「探索性」的产品。
比如一些娱乐网站（微博）或者教育网站，你不需要有明确的目的地，只需要让用户去探索，去发现更多有趣的事情，但是这样有一个弊端，就是用户如果下次再想找到这个页面，他是记不住路径的，很难重复上次的操作。
线性结构：
页面流程呈现一个线性状态，通常出现在流程中的一段小分支，往往使用线性结构的页面流程规模都不大。
比如页面中有一个帮助按钮，你点进去以后唯一的路径就是返回，线路很短，没有分支。
Long老师的话：
上面讲了4种页面结构，但其实没有太多实质性作用，但这是在「学术派」课程中必须要了解的知识，当你和别人讨论产品架构的时候，让你能说出来一些专业词语，并且帮很清晰的表达你的产品结构。
在实际工作中，不管使用哪种结构，都是使用「脑图软件」来做的（如图），我们将这种图称为「功能架构图」，或「信息架构图」
功能架构图：
在「范围层」思考功能时，把想到的功能全都列出来，这样的功能是没有逻辑、没有顺序、没有关联的，想到什么就写什么，这种称为「功能架构图」
信息架构图：
四、框架层——让你的结构可视化
当我们已经知道「每个页面有什么」功能，接下来就是把页面画出来了，我们把这个环节我们称为「框架层」
范围层和结构层都有「双重性」，而在框架层，可以分为3个要素：界面设计、导航设计、信息设计
#界面设计
界面设计要做的全部事情就是选择正确的界面元素，或者是交互方式，你选择的交互方式要让用户更容易理解、更容易使用。我们在结构层决定了哪个功能在哪个界面上显示，而这些功能在界面上如何使用、如何被用户认知、如何被用户理解，这些都属于「界面设计」的范畴。
#导航设计
一些人很坚定地认为,当用户访问网站的时候,用户的脑子里已经有了张大概的地图,就像他们在五金商店和图书馆一样;反对方则认为,用户完全依赖于导航以及在他们面前的一些指示线索,好像他们在网站中走过的每一步,都会在走过以后不久逐渐地从记忆中消退一样。在弄清楚这件事之前，最好的方法就是假设用户是通过搜索引擎空降到这个页面，你需要告诉用户「我在哪」、「我能去哪」
#信息设计
信息设计决定了页面中所有内容的摆放顺序，你可以决定用户先看到什么、再看到什么。界面设计是这个页面如何摆放更合理、操作方式怎样才更好用，而信息设计是我要怎么与用户进行互动，我要怎么才能让用户更好的接收到我的信息。
这三个要素是相互关联的、相互影响的，当你思考导航设计时、同时也要考虑其他两个因素。
@界面设计——如何设计好一个页面？
1.遵循用户使用习惯
如果你要设计一款新的汽车，你一定不是重新设计，而是先看看用户之前是怎么开车的，将他原有的使用习惯搬过来，这样就能让对方上手就会用。
设计一款APP也是一样的，如果你想设计一个聊天页面，先看看用户平时使用的聊天页面是什么样，如果你想设计一款购物页面，先看看用户平时使用的购物页面是什么样的…
一个不习惯的产品需要重新学习，如果太难学还会让人产生挫败感，这两点都是十分影响用户体验的，因此设计一个好的页面，需要优先思考用户「已有的使用习惯」
说的简单一点，就是把别人的页面照搬过来…
2.不要完全遵循用户习惯
并不是每个页面都要遵守用户习惯，你需要结合自己的产品特性，以及自己的业务场景来分析具体情况，当有某种方式很明显比用户原有习惯更有益处时，你应该选择更好的方式。
比汽车档位的设计，传统汽车的档位都在这个位置（如图），大家已经已经习惯了这样的使用方式。
但是有人发现，每次换挡的时候眼睛都在盯着前方，只能凭感觉去换挡，而且右手要从方向盘移动到档位上，这个距离很远，很容易出现错误。
为了解决这个问题，有人就设计出了另外一种换挡方式，就是放在方向盘后面（怀挡式），一方面可以减少眼睛移动的距离，一方面可以减少手臂移动的距离，这样的交互方式相对于「用户已有的习惯」来说，是更有益处的。
在这里Long老师想说：
寻找更好的交互方式，方法就是「分析用户场景」，从场景中发现「问题」，解决了问题，用户体验自然就提升了。
刚才的案例中，旧的挂挡方式需要眼睛和手臂大幅度的移动，Long老师认为这就是问题，问题不是别人告诉你的，而是你要在场景中自己去「发现」的，当我解决了这个问题，用户在使用的时候就会觉得更爽、更好用。
工作中有2种设计师，一种是直接抄袭的，一种是分析问题的。大部分设计师还都停留在抄袭阶段，把别人的东西照搬过来当然不会出什么问题，但这样做并不算是设计。
我们既然要学设计，就要运用正确的设计方法，交互设计师的工作，其中有80%的时间都在思考「用户&场景」，剩下20%的时间是在画页面、改页面。
而交互设计中需要掌握的理论知识、调研技能，都是为了帮助你更好的思考场景，所以你应该把精力更多的放在场景思考上。
思考场景并不是凭空想象的，你可以用一个更简单的方法（偏方）：
多找几个竞品，把他们的页面都搬过来列出自己产品的业务流程、页面结构、场景目标分析每个竞品的优缺点，找到更适合自己的产品（适合比好用更重要）拼凑页面，分析合理性，适当调整
这个方法是Long老师初期学习时经常使用的，之所以拿出来讲，是因为这个方法能帮助自己快速成长，同时分析好几个产品，分析他们的好坏、反推他们的设计思考，自己一下能获得好几倍的经验，所以初学者可以尝试这种方法，但不要太过于依赖，毕竟这是偏方。
@导航设计——包含哪些类型？
全局导航：从任何一个页面都能回到首页或者主要页面
局部导航：只提供一个父级、兄弟级和子级的通路，能回到上一级或者进入下一级
辅助导航：允许用户从当前页移动到其他主要页面，不需要重头开始，类似于侧边栏的形式
友好导航：给用户提供一些平时不需要的链接，当他们需要时，可以起到便利的作用
@ 信息设计——注意哪些事情
信息分为：动态信息、静态信息
动态信息：
动态信息并不是说这个信息在动来动去，而是系统需要给用户「及时的信息反馈」，让用户知道现在发生了什么、知道现在页面正在做什么。
比如一个物流状态，配送中、已收货，就属于动态信息，你需要告诉用户现在事情正在进展，请不要着急。反过来想，如果系统中不存在这样的信息，用户会是什么反应呢？
用户会不知道现在发生了什么，不知道接下来要做什么，动态信息就是在与用户对话，现在发生了什么、有哪些新消息、事情到了什么进度、出现了什么问题，都是在与用户进行信息传递，最常见的就是「错误提示」，不管是登录成功、密码输入错误 还是其他什么情况，系统中发生的任何事情都要及时告诉用户。
静态信息：
静态信息指的是一个图片、一段文字、一个图标…
1.信息处理
首先，静态信息需要将散乱的信息进行「分组」或「整理」，比如下面这个列表:
它看上去有一点混乱，因为我们通常会这样排列：（排序）
我们还可以更进一步地整理信息：（分组）
个人信息
2.信息排序
在一个页面中，用户先看到什么、后看到什么，决定了用户浏览页面的用户体验。
用户浏览顺序从上到下、从左到右的一个形式，形成一个F的形状，所以在页面中，我们需要把重要的信息放在左上角的位置，让用户优先看到。
3.信息的呈现方式
有时候，信息设计是选择更好的呈现方式。比如一组数据，使用「饼状图」还是「柱状图」更好一点? 搜索按钮是用「望远镜」的图标还是用「放大镜」的图标？
信息的呈现方式决定了用户是否能够快速理解，我们要做的是减少用户思考、减少用户猜测、减少用户疑虑。
Long老师认为：
一个好的信息设计，就是帮助用户更快的「获取信息」，让用户一看就知道这是什么，一下就知道我（页面）想表达什么，这里Long老师还可以再提供一个「偏方」：
不论是设计页面还是设计一句话，都只给自己1秒钟的时间，只看一秒，然后闭上眼睛，快速回答刚才看到了什么、记住了什么。
根据这个方法，你就需要「强迫自己」思考「页面核心表达的是什么」，你需要提炼关键信息（类似于小标题），还要控制这个信息的文字数量，还要尽量使用大白话，不要自己创造成语，不要用那些有歧义的表达…
突出重点还有一个方法，就是「减少干扰信息」，好的设计就是在简化页面信息，而对于一个复杂的界面设计，最大的挑战之一就是弄清楚用户「不需要什么」，我需要弱化或者排除掉哪些信息，让页面更加突出、让信息更加准确。
前面的内容并没有讲的很细，是因为在Long老师的第7节课里已经讲了用户的浏览顺序，以及如何突出重点信息，课程是免费的，希望大家可以抽时间再看看这些课程。
框架层的产出物——线框图：
线框图就是把页面布局详细的画出来，告诉别人每个功能放在什么位置，页面的浏览顺序是什么、表现方式是什么。
如图所示，线框图很像是草稿，因为他不需要画的多好看，只需要表达出你的想法、你的思考结果，你需要用80%的时间来思考，20%的时间来把页面画好。
而对于线框图的精细程度，每个公司的要求是不太一样的，你画的越细致、能想到的问题就越多，所以在实际工作中，都会要求你把页面画的很详细，详细到每一句话、每一个按钮都是什么样的，他们有什么状态…
这里我要强调一句，线框图不是为了画的多好看，而是为了把细节补充全面，让自己及早发现问题，让自己的思考更加全面，表面上是让你画的更好，但本质的目的是为了让你「思考的更全面」
线框图只是一张图，无法看出来具体怎么操作、怎么使用，所以需要配合文字说明来给其他同事进行讲解，我们称为「交互文档」，在这里先不讲怎么制作交互文档，如果有需要，可以看Long老师的其他课程。
再回顾一下「框架层」
「范围层」决定了整个产品有什么功能，但不管他们的逻辑关系「结构层」决定了这些有哪些页面，以及页面与页面之间的关系「框架层」决定了每一个每一个页面中的内容如何摆放、内容如何呈现
而在设计页面的时候，设计师需要同时考虑3个层面：界面设计、导航设计、信息设计
五、表现层——良好的视觉感知
表现层就是我们所说的UI设计，表面上来看，他就是给页面上色、画一些插画、图标等，但其实表现层是在解决用户对页面的「感知」问题。
用户对页面的感知分为3个层面：
看的明白——快速清晰的获取信息看的舒服——让页面足够美观创意创新——看到一些不一样的创意点
@ 看的明白
1.突出重点
每个页面都有很多信息，如果信息过多，就会对用户造成不必要的干扰，导致用户不知道自己该看什么，自己能看到什么，最后产生就会产生疑惑甚至离开页面。
表现层要做的就是减少信息干扰、突出重点信息，让用户一下就知道页面想表达什么、重点信息是什么。
这句话听起来与「框架层」很相似，但他们做的事情是完全不的，框架层的突出重点，是在对页面信息进行删减、提炼，让人知道哪些是重点信息；而表现层是通过颜色、对比、大小、距离、形状、方位、空间等方式，将信息显示的更加突出。
比如下面这张图：
这就是UI设计师在表现层要做的事情，我们通常都说视觉设计师要懂交互，懂的就是「页面要传达什么信息」，然后利用视觉效果将信息更好的传达。
需要注意的是，页面要传达「哪些信息」是在「框架层」决定的事情，表现层只是在做辅助工作，通过视觉效果让这些信息能更有效的传达给用户。
我们设计的时候要注意权衡整体页面的重点，有时候，页面中会有非常多要突出的重点信息，就像下图这样：
如果每个模块都想突出，最后导致的就是所有信息都不突出，所以在这种情况下，视觉设计师就要控制整体页面的信息层级，使用「相对」的方法来让某一个信息更加突出。
比如这个航班信息中，每个信息都很重要，但是他们总会有一个信息比另一个信息「更」重要，所以页面中的内容会有大有小：
如果重点信息很多，我们要尽量把他们分离的远一些，在一个页面中，如果你什么都想突出，最后导致的结果就是什么都不突出。
如图所示，价格信息很重要、航班时间也很重要，如果这些信息都堆在一起，整个页面就很混乱，阅读体验极差。
2.局部放大
刚才说的突出重点，这些重点信息都是在「框架层」决定的，而现在要说的，是「表现层」来决定的重点信息，我们可以在一个页面中挑选出重点信息将其放大，让整个页面更加「聚焦」
比如下面这个案例，左边这个页面的设计没有重点，这个页面就会显得很乱，而右边这个设计将「数字3」放大了很多，整个页面的视线就更加聚焦。
这是在没有删减内容、没有改版内容的情况下做出来的设计，是视觉设计师在「表现层」要做的事情。
3.聚焦信息
除了突出重要信息，想让人「看得明白」，还需要对信息进行整合，让人一眼就知道谁和谁是同一组内容、谁和谁是有联系的信息，比如这个页面：
页面中的信息分散在各个地方，这样用户在阅读的时候相当于在分析4部分内容。
这里我们采用了「卡片容器」的方法，将信息装在容器中，聚焦信息、减少阅读干扰，使页面更加清晰、工整：
这种设计方法叫做「聚焦信息」，把页面的信息模块化，让他们成为一组一组的形式，创造多个「信息区域」，让人一眼就知道这个「区域内」的信息是同一组，他们是有关联的，我只需要看到标题，就知道这里面大概有什么、就知道里面有多少内容了。
…
以上内容在《用户体验5要素》这本书中并没有提到，是Long老师脱离书本给大家讲的知识，在这本书中提到的「表现层」只是给大家讲解什么是视觉表现，视觉表现包括颜色、字体、文字排版、保持设计的一致性、保持统一颜色、保持统一风格、注意用户的浏览顺序….
这些内容比较基础，所以Long老师私自替换了内容，给大家讲一些更有用的知识。
总结：
1.总体概述
《用户体验5要素》是一个从「抽象」到「具体」的过程，先提出一个想法，然后一步一步实现。
用大白话来说：
战略层：提出一个想法，告诉大家接下来的目标是什么范围层：我要怎么做才能实现目标，把要做的事情罗列出来结构层：知道要做什么了，那接下来要做成什么样子，流程是怎样的、页面结构是怎样的，都画出来框架层：每一个页面具体长成什么样子，里面有哪些信息，这些信息应该如何与用户进行交互视觉层：如何才能更好的传达信息，如何才能让页面看起来更舒服、更有趣
他们的「产出物」分别是：
战略层：项目文档（告诉大家「用户调研」或者「数据分析」的结果是什么，接下来要做什么）范围层：功能架构图结构层：信息架构图、业务流程图框架层：交互文档（包含页面原型、交互说明）视觉层：UI设计图
2.《用户体验5要素》是相互影响的：
「战略层」做出的决定，会直接影响「范围层」的结果，而「范围层」又会直接影响「结构层」，以此类推，每一层的决定都会影响接下来要做的事情，所以在工作中，我们做出的任何改动都要考虑他下一层级的影响，而最重要的就是「战略层」，如果战略层发生变动，接下来所有事情都要跟着一起变。
3.每层工作的开始时间：
每一层工作都会对接下来的事情产生影响，所以我们在每一项工作之前，都应该先确定好前一阶段的工作都已经完成。
然而这种工作的效率相对较慢，所以推荐一个更好的方法，就是让每一个阶段的工作在下一个阶段「即将结束之前」开始展开，说的更明白一点，就是在前一个阶段基本确定了，但是还未细化的时候开展下一步工作：
Long老师的话：
如果你是一位视觉设计师，你在开展工作前，你要先确定框架层的工作完成到什么程度，页面中哪些信息需要突出、页面布局和交互逻辑是否已经确定，否则一旦出现改动，你的设计就要重做。
而对交互设计师来说，需要确定「信息架构」、「业务流程」是否已经确定，不要直接画页面。
但是不管你是UI还是UE，都希望你能想的更多一点，即使你只需要等着前面的人把工作确定，你也要尝试着去想一想，他的工作有哪些问题，还可以有哪些调整，这样对你接下来的工作也是有很大帮助的，因为用户体验5要素的每一个环节都是相互关联的，不要只把自己的事情做好，要考虑整个产品是否可以做的更好。
全链路设计师：
现在网上比较流行「全链路设计师」这个说法，大家对它的理解就是，设计师能够实现产品从「战略层」到「表现层」的每一个环节。
每一个环节都有相对的专业知识，都需要经过多次的磨练，没有个3~5年的工作经验是很难接触到的，所以大家都觉得全链路设计师是一个非常远大的目标。
Long老师也想说一下自己的看法：
我们现在做的不管是「战略层」也好、「视觉层」也好，都是围绕着一个APP，或者一个网站来做的，不管你再怎么做，都脱离不了产品，就像孙悟空脱离不了如来佛的手掌一样，你只是在「产品」这个小圈里面做设计，所以Long老师更愿意称它为「产品设计」
设计应该是贯穿全链路的，而Long老师对全链路的定义，是整个企业的全链路，企业里包含市场运营，包含营销，包含品牌….
大家都说一个人的格局能决定了他能看的多远，Long老师认为，正是因为市面上缺少有格局的设计师，导致他们只能看到产品设计，他们无法站在企业的高度来思考，就是这帮人一直在谈论全链路设计，久而久之，就导致「全链路设计」=「产品设计」
所以Long老师一直把「产品设计」和「全链路设计」划分成2个概念，如果将来再说到全链路时，应该在前面加上「产品」2个字，你只能说，自己做的是「产品全链路设计」
当然，这只是Long老师个人的想法，而我本人也是脱离了产品设计这个小圈，往更高的方向去走，从一个企业的角度去看设计，希望能给大家带来一些参考性建议。
??
