很多人认为用户体验就是用户在使用产品时对产品的心理感受和评价。 其实用户体验可以从更多的层面来分析。
Jesse James Garrett 在他的《用户体验元素——以用户为中心的产品设计》一书中，提出了一个经典的用户体验模型概念。 他将用户体验分为表示层、框架层、结构层、范围层和战略层，并解释了软件和网页的五要素。
本文为腾讯游戏学院“真经阁”栏目研发心得。 本期主题为《用户体验要素与游戏交互分析》。 腾讯互娱北极光工作室群交互设计师康亮从游戏界面分析了用户体验的五层要素，并推而广之分析了游戏交互设计的自下而上的逆向设计思路。
1.感受用户体验的要素
表示层：
上图是《王者荣耀》商城的新品页面。 打开这个页面，你会看到一个深蓝色的界面，页面上有动态的英雄，有特效的华丽宝箱，还有明显的橙色按钮。 这些界面呈现给用户的第一印象就是表现层的内容。
框架层：
表现层进一步细分为框架层，用户可以在这里感受到整个系统的框架。 例如居中的3D英雄信息下方有三种不同的购买方式按钮； 在宝箱图标上，有显示奖励的图标。 切页控件用于切换皮肤和英雄，以及兑换货币数量等文字显示，都属于框架层的内容。
结构层：
框架层下面是一个比较抽象的结构层。 框架层专门安排控件和交互元素。 结构层的作用是规划整个界面，比如每个区域呈现什么内容，如何安排用户浏览等。 路由，购买新产品后会跳转到什么页面，这是一个比较抽象的概念。
范围层：
第四层是范围层。 在范围级别，您可以看到此页面提供的内容和不提供的内容。 比如在新品商城，主要会推介新品信息、购买渠道、抽奖渠道等，但也有一些是没有提供的。 比如《王者荣耀》就没有购物车的功能。
战略层：
最后一层是战略层。 策略层就是在这个界面中要达到什么目的。 这个目的是双方面的：比如对于一个用户来说，他可以通过不同的方式通过这个页面获得他想要的英雄和皮肤； 而对于企业来说，这个页面出售的是玩家需要的商品，企业可以获得商业回报。
概括：
上图显示了这五个元素之间的关系。 对于用户来说，他的感受是自上而下的从表现层到战略层，但是在设计产品的时候，是自下而上的。 但每一层都不是相互独立的，而是处于一种环环相扣的状态。 在进行具体的产品设计时，是一个自下而上的具体而详细的过程。 有时在下一个环节，可以发现上一个环节出现的问题，然后反向调整，所以这五个之间并不是纯线性关系。
对于游戏交互来说，框架层和结构层是主要的职责范围，而策略层和作用域层也会影响和决定游戏交互的具体输出。 在完成了结构层和框架层的搭建之后，还需要跟进表现层是否正确传达了整个框架的内容。 下面将以此为线索，介绍各个元素对交互设计的意义。
2. 用户体验要素与游戏交互设计
产品目标和用户目标——战略层
策略层常被描述为产品目标和用户目标，对于游戏产品来说，更适合描述为“我们要什么，我们的用户是谁？”
对于交互设计师来说，为了弄清楚用户是谁，往往会通过用户研究来明确目标用户。 常用的方法有定性研究和定量研究。 比如定性研究就是在试玩结束后请玩家试玩，收集他对玩法的看法； 定量研究最常见的方法是问卷调查，几乎所有的项目都会在前期环节进行这样的测试，通过这两种研究方法的结合，可以了解用户的特征，并尝试对用户进行细分。
角色是进行用户细分时常用的设计工具。 用户画像不是某个特定用户的画像，而是大量真实用户数据基于定量和定性研究综合而成的抽象结果。 上图是一个标准的用户画像。 这类用户会有一些具有代表性的台词，比如“天天玩鸡”、“特别讨厌菜鸡”等等。 用户画像中还包含了他的一些基本信息，比如年龄、性别、是否单身等。 还有一个比较大的部分是叙述性描述，跟研究对象的相关行为有关，比如他什么时候来玩游戏。 另一个重要的关键属性是他的比赛经验和技术水平。 最后，还有一些补充信息，可能与本研究的主题无关，但可以丰富这个人物的背景。
上图是二次元游戏的参考用户画像。 我们总结了四种不同的用户画像：典型的IP信徒画像、典型的游戏极客画像、典型的游戏二次元画像、典型的粉屋画像。 当我们有了具体的用户画像后，我们就可以从宽泛的设计目标转向特定的用户群体，这有助于我们在设计时进行不同的思考。
在战略层面，目标用户研究对交互设计的意义是什么？ 我们具体分析一个案例：
《碧蓝战记》是一款二次元手游游戏图片素材，目标玩家群体为二次元萌宅、军宅等群体。 在交互设计的过程中，设计师针对主界面提出了两种方案。 一种是在 3D 场景中使用 6 个低精度模型。 由于功能的限制制作ui游戏界面的图标方法，当角色较多时，模型的面数必然偏低； 另一画面仅在部分二维场景中使用了高精度摄像妹子。 通过用户研究报告和用户调研，我们发现目标用户的首要需求是细节和精美的画面，对交互和可触摸的动态有比较大的需求，所以我们最终采用了后一种方案。
因此，当我们回过头来看用户研究时，我们会清楚地发现，一个高精度的交互策略比六台低精度的手机更能满足用户需求。 这就是目标画像的意义之一，可以使整个项目的评估有据可依。
在项目的早期阶段，你应该尽可能了解目标用户。 公司会有一些用户研究报告和调查结果分析。 您还可以通过外部互联网搜索相关领域的问卷调查结果和用户研究报告。 这些数据可以作为参考。 另一种方式是通过比赛的直播来观察竞技游戏的核心玩家是如何与主播互动的，这也可以提供很多参考信息。
功能规范和内容要求 - 范围层
在策略层的这个阶段，需要解决的问题是“我们要做什么？” 主要目标是尝试尽可能多地了解用户。 在确定了为谁设计之后，下一个范围层的主要工作就是关注功能和内容。
梳理前的系统蓝图
梳理后的系统蓝图
从广义上看，它的输出是一个非常完整的系统蓝图。 交互设计师在收到内容后，需要再次对这些功能进行分类梳理，了解哪些是核心系统内容，哪些属于系统。 系统的常规玩法。 系统蓝图梳理后，可以看出其分类维度与业务规划的系统蓝图不同。 这样的排序对于游戏的主界面设计来说是非常有必要的。 接口迭代的成本会降低。
除了一份非常详细的系统蓝图，还需要提供一份时间规划版的系统蓝图。 这对于交互设计是很有帮助的，可以让大家清楚的知道整个游戏在每个版本节点的完成度和复杂度，从而知道每个版本首先要建立哪些交互规则。
至于狭义的范围层，是一种很常见的功能描述，它的输出形式就是规划案例。 一般来说，规划案例会明确三点：系统的设计目的、系统的主/从流程、系统各功能的优先级。 其中第三点在交互层面最为关注，有时会根据第三点对策划方案进行反馈，协商对策划方案细节的调整优化。
交互过程与信息架构——结构层
范围层确定后，接下来就是构建结构层，主要包括交互过程和信息架构。 简单来说就是操作流程，一般围绕角色、任务、场景三个要素展开。 角色是谁在玩我们的游戏，他们有什么特点。 场景就是角色玩游戏的环境，比如在地铁上，或者晚上回家后躺在床上。 任务指的是角色要做的事情，是买还是买还是邀请朋友一起砍。 在分析完这三个要素之后，交互设计师需要描述这个系统下可能的用户行为和可能的场景，分析用户在每个任务中的需求。
上图是一个产品需求分析模板，将产品需求、存在的问题、产品目标、用户场景、用户诉求、体验目标、设计方案逐层罗列，然后进行详细的分析。 最后规划用户的操作流程，玩家在这个过程中所经历的所有界面都会在操作流程中明确。
在规划案例的基础上，还需要根据流程层和范围层的内容，做一个更复杂的信息架构。 信息架构列出了这个接口需要的所有信息，以防以后遗漏。 该步骤不一定体现在交互输出中，但它是交互稿输出前的必经过程。
从抽象到具体——框架层
明确了结构层的前期工作后，就可以从抽象到具体，开始框架层的工作，进行界面的原型设计。 每个交互设计师对构建框架层都有自己不同的理解。 我简单说一下我自己的一些经历。
第一点是遵循布局约定。 习惯的含义非常广泛。 比如在横版游戏中，从玩家双手拿着手机的姿势就可以看出来。 上图中绿色部分是便于操作的区域。 另外，在认知和操作习惯上，眼球运动时，是在中央凹的习惯，而手动操作时，则结合正面手持姿势来划定空间两个拇指易于操作。 如果你想了解更多关于用户习惯的原理，推荐你阅读《认知与设计——理解UI设计指南》。 这本书讲的很详细，包括排版中常用的格式塔原理，视觉的中央凹原理等等。
第二点是在设计时尽可能多的覆盖场景和状态，减少开发的迭代版本。 通常优先考虑以下三点：
第三点，设计的时候要选择合适的方法，不一定要选择“最酷”的方法。 比如上图就是一张《狐妖小红娘》的微信分享图。 灵器作为核心的修炼体系，相对复杂，要素较多。 分享图中的人物身边围着九个可以装备的道具，这些道具的好坏和等级对于老玩家来说都是一目了然的炫耀元素，但同时这张图也给了那些没有玩过这个游戏感觉很爽，所以想点击了解一下这个游戏。 基于这个目的，在设计第一个版本的时候，我们想在底部使用不规则的卡片。 这个方案的预期最终效果既漂亮又炫，但是开发周期很长，需要两周甚至更长时间，这个时间成本是无法接受的。
后来我们换了思路，重新做了系统。 改版方案换个角度，直接采用数学公式和手写的方式，让老玩家一眼就能看懂上面的数字，同时让新玩家感到好奇和有趣。 第二种方案，虽然整体的逻辑和素材都很简单，但是也达到了共享的目的。 因此，在设计时，一定要选择合适的方法，减少不必要的成本。 “最酷”的方法不一定是最好的。
第四点，优化交互输出，保证框架层的实现。 framework层输出稿的可读性要求比较高。 上图是项目前期一个交互式草稿输出的结构，但是里面存在一些问题，比如输出草稿的大小不可控，视觉和程序在开发过程中，状态和经常会漏标，而且这个输出稿不适合打印或者会议展示，所以后来做了调整，把所有的流程拆分成1个或者2个界面，这样就可以一页一页的翻，对于开发的同学，他可以掌握每页内容更清晰，不易遗漏，同时方便打印方案。
感知设计-表现层
在交付了更具可读性的交互式草稿之后，就是最后一步：表现层。 这里是负责视觉的同学们的主场。 在表现层，交互基本上不需要承担具体的实现工作，而往往起到反馈和沟通的作用。 表现层的目的是让框架层可感知。 在整个过程中，对于视觉来说，就是实现视觉需求，以自己的方式诠释交互稿； 对于交互设计师：要保证交互设计是“正确感知”的。 因此，双方之间的沟通和双向修改是不可避免的。
以上是交互和设计修改的双向沟通案例。 图片是之前做的分享功能里一个很简单的弹窗。 主要目的是告诉玩家进行分享操作，免费解锁标志。 从信息层面来说，有三点：第一是保证信息的传递，第二是利用情感画面来增加其可玩性，第三是如果玩家不想分享操作，就需要给他一个出口。
第一版的设计稿，基本信息已经满足了，但是视觉反馈说这个通用底板看起来比较呆板，人物也希望换个更Q更可爱的。
修改后的二版，人物变得更可爱了，刚才的硬底板也没有了，但是在信息层面的传递上，“免费分享好友”的信息淹没在像素里，几乎察觉不到，和之前的一样提供的退出路径也被省略。 经过与视觉的讨论，最终完成了第三版的视觉稿。
三稿以气泡的形式强调了信息，同时恢复了退出按钮，人物也换成了系统原本使用的Q版人物。 至此，交互所需的三个信息已经满足。 在基本信息都满意的情况下，视觉同学还希望继续优化，朝着自己满意的方向，最后又做了一个设计稿。
在最终的视觉稿中，人物采用了更加逼真的形象，但是对于交互，信息的表达并没有改变，设计的目的也已经达到，所以在征得双方同意的情况下，本次设计修改为也为大家接受。
三、提炼互动稿的例子
了解了从实现层到表现层的工作之后，整个流程就串联起来了。 这是一个完整的交互稿提炼过程。
在这种情况下，选择了团队形成系统。 本系统的三个主要功能是：选手申请入队、队长管理队伍、申请名单、队员运营队伍信息。 在与策划师核对计划时，会有很多细节需要注意制作ui游戏界面的图标方法，所以右边有一个Check List，确保涵盖计划中要求的所有内容。 逐项核对细节后，即可进行需求分析。
流程规划是根据需求分析和规划建议进行的，首先是主要流程的规划，在流程规划过程中指出几个核心页面，比如队长和队员两个规划维度。
在二次过程中，主要有四种状态：队长解散队伍、队长移除队员、队长交换队员位置、队长退队。 补充完二次流程后，整个信息架构基本搭建完成，结合规划流程和需求分析，梳理信息架构，明确各个接口需要的元素，防止信息遗漏。
接下来可以规划主界面的流程，规划所有主界面之间的关系，以及各个界面的布局。 当复杂的系统达到这个阶段时，可以用规划来检查。 主要讲解各个主界面之间的关系，各个界面的布局，界面之间的跳转。 在规划时，问题可以及时调整，而不是等所有的线框图都画完了。
与平面图核对后，即可绘制交互稿。 绘图时，首先是主界面的细化，所有的元素都按照信息架构和界面流程进行布局。
主界面完成后，接下来就是绘制浮层、弹窗等次要信息。
画好这些界面之后，就是细化界面上控件的状态，比如每个按钮分为几种状态。
完成所有细节后，是时候标记接口了。 写标记的时候，除了在界面上把可能的流程标注清楚，还需要把所有的细节标注出来，每个场景中的处理方式，点击后的反馈，以及极端情况下，如何展示都写清楚了，最后输出文件供会议审议和磋商。 至此就是一个完整的交互设计过程。
第四，其实通常没有这么理想的炼制工艺……
回头看整套互动文稿的输出过程，时间成本很高。 在时间有限的情况下，当一个交互设计师对接多个策划人员贴图笔刷，接到多个需求时，我们应该如何将需求拆解分类，按类别进行处理呢？
实际交互稿输出形式按照紧急程度和重要程度分为四个区域，对需求进行划分和整理。 对于交互设计，紧迫性是指调度交互设计的紧迫性。 比如一个系统即将开通，但是没有办法复用已有的系统，那么它的紧迫性就很高。 重要性是完整的交互设计的重要性，比如游戏的核心系统，它的体验是比较独特的，所以进行一个完整的流程是非常有必要的。 对于这个紧迫而重要的部分，必须留出独立的设计时间，输出的也必须非常详细，有完整的流程图和线框图。 对于紧急但不重要的内容，可以按照调度快速处理。 对于非紧急不重要的内容，比如完全可以媲美竞品的系统/活动，可以考虑延迟其交互，先做效果图和程序开发。 最后是重要但不紧急的内容，通常是非紧急的现有系统迭代。 可以利用碎片化的时间，逐步记录优化思路，在不改变原有功能的情况下，尽可能进行逐步优化和推进。
总结：
用户体验其实就是用户在体验过程中的感官过程。 从产品研发开始到整个研发过程，我们始终从完整的用户体验出发。 为了让我们的游戏产品获得优质的用户体验，交互设计师的工作就是让用户更方便、快捷、高效地完成任务。 最后，与产品用户体验相关的一切都是有意识和明确决策的结果。 只有这样，才能保证我们的游戏产品既符合项目的战略目标，又符合用户的需求。
我正在寻找游戏上衣：
商务合作/采访/投稿：
西瓜（微信ID）
刘薇（微信ID）
文静（微信ID mutou_kiki）
行业爆料：boq（微信ID boq270756）
投稿邮箱：
2019国风+数字创意创新大赛火热报名中
点击“好看”的同学，升职加薪，游戏大卖~
