游戏交互设计易用性案例分析

游戏通过创造体验给玩家带来乐趣，而交互设计师通过设计易用的界面给玩家带来更好的体验。那么怎么样的界面才算是易用呢？现在交互的评价维度很多，比较难下一个评价标准。但是小编体验了多个游戏后，发现作为一个玩家是能很直观地感受到界面易用与否的。以这些游戏的界面为基础，本文定性地归纳出一些易用的界面可能具有的特征，并以案例展示实现这些特征的多种方式。

但凡游戏界面，必然不是一开始就能熟练使用的。在手指触碰到第一个功能前的短短一瞬里，已经发生了很多事情。首先是眼睛看到这个界面，然后大脑思考如何使用这个界面，最后才抬起手指去使用这个界面。任何一个步骤给玩家造成困扰都可能会导致体验大大下降，所以易用的界面包含了以下三个特点：易见、易学、易用。

易见 —— 一目了然

界面中有些什么内容？内容之间是什么关系？我应该在哪个位置找到我想要的信息？

1、简约

人类的注意力是有限的，越多的内容就会导致分散在每个内容上的注意力越少。所以只有在界面上保留尽可能少的内容，才能够让玩家轻松地集中注意力。

那我们要如何使界面变得简约呢？《简约至上》这本书给我们提供了删除、组织、隐藏、转移这几个简单的方法。

模拟城市中，需要对玩家展示各建筑的几个不同维度的信息。因为建筑的位置不可移动，设计师让无关的内容去色，突出需要显示的内容；采用不同的色系变化，以类似图表的形式来显示不同的信息，通过右下角的tab进行切换。这些信息维度互不相关，只展示一种信息能够让玩家不受其他信息干扰。

天下HD背包里的物品条目上并只有信息而没有操作，点击条目才出现操作按钮，大大降低了列表的复杂程度。两次点击同时起到了二次确认的作用。最右是天天酷跑，可以看到一排相同的引人注目的操作按钮占据了不少空间，而且吸引了玩家本该用于阅读背包属性的注意力。 

在很多RPG游戏的战斗中，左下角摇杆右下角技能已经成为了标配。如果是主城与副本相连通的游戏，一圈技能按钮更是永恒地占据着屏幕右下角的大块空间。

大部分的游戏以“需要的时候才出现”的想法，把左边的摇杆隐藏起来，手指触碰到相应区域的时候才出现（如太极熊猫）。而剑与魔法在此处做出了创新，在角色走路的时候，一圈技能按钮自动隐藏，点击中间的普通攻击按钮时再次出现，极大地减轻了非战斗时刻的视觉负担。连隐藏技能按钮都能想到，为什么它不把摇杆也隐藏了呢？这真是一个未解之谜。

清爽简约的界面来自一个又一个细节。弹窗出现的时候，虽然有黑色蒙版隐约遮住原来的界面，但蒙版下方的凌乱并不会就此消失。透明度越低的蒙版能够越好地遮蔽下方的内容，但却会让界面显得越沉重。大话西游的设计师从这个角度出发，在弹窗出现的时候隐藏场景中的所有UI，而且多层弹窗出现时只用一层压黑，使界面保持清透而又没有干扰。

隐藏UI的前提条件是“在某个情况下，某种操作或信息不那么重要”，那么当多种操作都有可能被用到的时候，怎么使界面变得简约呢？别急，我们还有转移呀！雷曼：大冒险中，可以对角色进行多种操作：前进、后退、跳跃、反弹、攻击等。但设计师并没有用传统的左右下角一堆按钮，而是把按钮变为各种手势操作，把界面的复杂性转变为动作的复杂性。但这样做是有风险的：减少了界面元素的同时增加了玩家的学习成本。

2、布局

在要显示的内容一定的情况下，界面的布局也是十分重要的。交互设计师作为设计师群体中的一员，对“美”有着永恒的追求，而排版布局正是在黑白灰的交互稿中创造美的最重要的步骤。当然，排版布局带来的不仅仅是美观，更是内容的保真度：重要的内容显眼、相关的内容有联系、各内容块的位置关系符合信息的递进关系等。排版是一门技术活。《写给大家看的设计书》将排版的原则浓缩为：对比、重复、对齐、亲密性。这些原则能够使界面的元素之间产生联系，突出重要元素或使相关的项归组。对比和重复看似矛盾，结合使用却能收到意想不到的效果。在排列多个同等性质的内容时，我们总是倾向于同等大小，平均分布。这种形态上的重复能够给人一种稳定的、有条理的感觉（左图右边的活动列表）。但并不是每一个地方都需要重复。百将行的七天签到界面中，七天的奖励图标大小不一样，用对比突出价值高的奖励，让玩家很容易就知道哪天的奖励更重要，增加领取欲望。而且一排高低错落的图标的上轮廓充满了节奏感。COC的主界面中，左右两边的几个小按钮形态一致，给人整齐的感觉；最希望玩家使用的按钮以大体积吸引玩家注意力，更容易受到点击。

对比和重复取决于内容的区别度和相似度，而对齐是不管什么时候都应该做好的。

人类的视觉是整体的，对齐的内容会被脑补出一些看不见的边线，产生呼应。

举个栗子。太极熊猫和花千骨的这两个界面，内容完全相同，但是品质感却相差甚远。拉几条参考线便知道，太极熊猫的元素是对齐的，配合GUI表现，清晰地分出了界面层次（一级信息对齐最左最右，二级信息向内缩进些许），当然要是进度条也能右对齐就更好了。而花千骨的元素有多条毫无规律的最左和最右参考线，再加上GUI使用了一些含糊的边缘，导致界面层级很不清晰。

对齐可以构建出整个视觉内容的大结构，大结构里面的小分区就要靠亲密性来完成了。

让我们来看功夫熊猫3和剑与魔法的伙伴界面。（为了使两个界面信息量相似，剑与魔法的界面做了一些处理，遮了上下部分的一些内容。）在同等信息量下，功夫熊猫没有很明显的视觉分隔却也分区明确。而剑与魔法，虽有明显视觉分割确略显凌乱。

为什么两个界面的差距会那么大呢？可以看到，功夫熊猫3的界面按照亲密性把相关的项归组在一起，使内容模块化。对剑与魔法的界面进行处理，消除GUI的影响，可发现其内容布局零散，相关的项之间并没有强烈的联系（界面仅靠GUI进行分割），甚至让人无法分清这是左右结构还是上下结构。如果对其元素之间的距离进行微调优化，就可使界面分割清晰不少（最右图）。

界面的排布不仅仅要排版清晰美观，更要符合逻辑，信息块的位置递进关系与玩家应浏览的顺序一致。比如有杀气童话的队伍界面，视觉浏览顺序和信息的递进关系都是：列表——个体主要信息——个体详情；梦幻西游的装备打造界面则是：列表（个体）——所需原料——成品——消耗——打造按钮。但契约兵团的佣兵界面却没有按照信息逻辑来排布界面。在此界面查看信息的次序应该是列表——个体主要信息——个体详情，其布局顺序与查看顺序并不相符。（而且中间一栏的上方还有tab，这个位置是双手握持操作时很不方便的区域）

在设计界面布局的时候，我们还要考虑到信息遮挡的情况。

最常见的信息遮挡发生在键盘输入的时候。考虑周全的设计师会在键盘弹出时把界面同步上移，避免遮挡住输入框。

3、让玩家知道身处何地

随着手游复杂化，游戏中的界面越来越多。只做好每一个单独的界面是不够的，要处理好界面与界面之间的关系，才能让众多界面都“易见”。

首先，不同层级的界面之间要作出区别。其次，同一个层级内部要尽量一致。这两点能够使界面一看就知道属于哪个层级，让玩家一眼就知道自己身处何地。

让我们来看两个截然相反的案例。大话西游中，每深入一个层次，界面样式有所不同（一个比一个小，覆盖在上，不容易混乱）。而天下HD的某些系统中，深入一个层次后样式是一样的（下图是一条操作链上的三个步骤，点击返回会返回到上一个界面），因为样式一样，玩家（特别是新手）很容易会发生混乱，迷失在茫茫界面中。想返回的时候，不知道要返回多少次才能到想要的界面，因此误操作或者每按一次要思考一下。

在界面之间进行对齐，使游戏有一个统一的框架。梦幻西游所有界面整体的框架都是十分相似的。玩家在熟悉一两个界面后来到其他界面很容易就能举一反三推断出：其他界面该在哪里找到什么信息、在哪里进行什么操作。

4、动效提示帮助记忆和思考

动效可以吸引人的注意力，在合适的时候使用一些小动效可以提示玩家关注这里。同时，动效还可以帮助展示界面层级。

天下X天下的英雄界面中，点击英雄一件装备后，下方的装备详情会闪烁一下，引导视线流向装备详情。

天下X天下

天下X天下在这种细节的动效上做了很多设计。战斗前的界面，GO按钮的剑隔几秒会抖动一下，提醒玩家“你怎么还不开始战斗呀？”

天下X天下

一些大的转场动效可以展现界面层级。光幕苍穹的结算界面中，各内容的出现次序帮助界面展示了其逻辑顺序和重要度。

光幕苍穹

易学 —— 毫不费力

玩家对界面从陌生到熟悉是需要花费时间和精力的，那么如何使玩家的学习成本变少呢？

1、步骤数与选项数的平衡

在总选择数一定的情况下，步骤的数量与每步的选项数成反比。当面临的选择越多时，玩家就越难做出决定；操作的步骤越多，流程就越繁琐。作为交互设计师，我们要在这两者之间取一个平衡。

对于新手来说，最让人头疼的莫过于一大堆不熟悉的入口。剑与魔法的主界面虽然比较干净，但是它把所有入口集中到了菜单界面，一堆没有分类的按钮十分震撼的同时也让人感到迷茫。新手一见就一脸懵逼了。大话西游主界面的入口数量并不比剑与魔法少。但它把相似的入口归类，点击两次打开，减少每步的选项数，让玩家能比较容易找到目标。

 剑与魔法、大话西游

不仅仅是新手才会遇到一步选择过多的困扰。下面三个界面都有选择种类的标签栏。

剑与魔法的商店把所有的小分类全部列出来，一共有近40种，上下滑动来查看全部的分类。要在40中分类中找到某一种让这个标签栏使用起来非常累。

同样是商品分类，梦幻西游设置了两级分类，虽然操作多了一步，但是每步要选择的种类大大减少了。小时代的换装界面也有二十个种类，因为这些种类差距较大不好归类，它采用了折中的方式，一级菜单分为两栏，左右切换；“饰品”类有二级菜单，使用也比较方便。

减少步骤数和减少选项数并没有说哪个好哪个不好，要根据实际需求选择合适的方案。

剑与魔法、梦幻西游、小时代

如果一个界面的选项数已经确定了，我们还可以用推荐操作的方式来减少用户思考。比如大话西游的设计就保持了每页一个推荐操作。尽管推荐的设置无法满足所有用户，但只要它是一个常用操作，就可以让玩家在大部分情况下免于思考。

大话西游（引用自钟楚婷《G17的设计与跟进》）

2、渐进呈现

    如果界面不得已要显示较多的信息或按钮，我们可以采用渐进呈现的方式。正如少吃多餐可以让胃更好地消化食物，渐进呈现也可以让大脑更好地消化信息。

    场景UI按照游戏进度逐步出现的方式已经逐渐成为了新手过程的标配。以soda world为例，众多的按钮分阶段出现，让玩家一个一个地熟悉，避免了一开始就要记一堆莫名的按钮。

Soda world

刀塔传奇的这个案例很好地展现了渐进呈现的精髓。装备附魔界面通过几次点击进行【选择英雄-选择装备-打开背包-选择附魔材料】的过程，完美地表现了界面中每一个元素的来源，玩家根本不用费力就能清楚理解附魔功能。如果用户在每次点击时都能得到少量信息，愿意沿着设计思路继续查看，那么他们根本不会注意到点击的操作。

刀塔传奇（来自郑宇菲《界面自辩与他辩》）

3、操作反馈

操作要有反馈是每个设计师都知道的事。这个反馈包括了三个部分：事前状态的指引反馈、操作时的感官反馈、操作后的结果反馈。

游戏中有很多常见的操作反馈：操作前的指引有小红点、技能CD完的动效、战斗中出现危险时的字幕和光效提示；操作时最常见的反馈就是按钮从普通状态变为了点击状态，还有点击的音效；操作后的结果反馈有弹出的浮层、拾取物品的动效等。

在有可操作的内容时，我们告诉玩家这是可操作的。COC的金矿有金币可收取的时候，金矿头顶浮出气泡告知玩家此处可点击；点击收取金币之后会出现动效和收取数量。

COC

在操作的过程中，我们实时给玩家反馈。长按头像@人来自微信，梦幻在引用的同时也作了优化。长按头像@某人的时候，头像会出现向上的箭头，箭头缓慢填充颜色表示计时，计时结束名字就出现在了上方的输入框内。比起微信的毫无反馈，梦幻西游的玩家在箭头出现的一瞬间就能对自己的操作充满信心。

梦幻西游

操作后的结果反馈是树立玩家成就感的重要一点，玩家完成某个动作之后需要通过反馈知道这个动作能达到什么效果，能获得什么回报。天下HD强化装备后弹出反馈，让玩家直观感受到自己获得的收益。

天下HD

4、隐喻（模仿真实世界）

好的隐喻能够在玩家的头脑中建立起与过去经验之间很强的联系，不管是和现实世界还是网络空间中遇到的。这样玩家可以更快而准确地感知到你的系统的功能和限制。隐喻可以是某种操作方式，也可以是某种界面载体。

场景化的游戏最适合使用隐喻。Hayday中，把物品拖动到建筑中的操作方式则十分符合玩家的心智模型：把物品放到某地方中去。其中有几种隐喻特别真实：种子划过田地意味着播种，镰刀划过麦子意味着收割。

Hayday

Land sliders是一个靠滑动来控制角色的游戏。在游戏中，按钮做成场景的一部分。滑动角色靠近按钮时，按钮会出现文字。滑动角色到按钮上，把按钮压下去，大概半秒后打开功能。

Land sliders

非场景化的游戏中，通常使用巧妙的载体来表达隐喻。雷曼：大冒险的结算界面，三种奖品放在三个不同高度的平台上，一根光藤（代表获得的分数）不断增高，够到平台的时候把奖品顶破，获得奖品。让玩家清楚地知道分数与奖品的关系。

雷曼：大冒险

弹弹猴的查看角色信息界面，通过下拉放手的操作把角色弹射到上方查看详情，隐喻现实中“上台展示”的感觉。

弹弹猴

一些游戏外的隐喻也可能会给我们启发。QQ新消息提示的小红点不再是固定的控件，而成了一个可以移动有粘性的物体，在用户知道有新消息而且不想看的时候，拖走它比打开信息清除小红点要有趣得多。

QQ

5、指示和引导

对于学习界面的过程来说，指示和引导是不可缺少的帮助，能够让玩家了解游戏的发展方向和自己该做的具体任务。

新手是学习的主体，为了玩家不要一下记忆过多的信息，新手阶段通常不会解锁全部的功能。

现在大多数游戏都有很多的功能，在新手阶段它们通常都会有一些游戏预告。预告让玩家提前知道未开启的功能或玩法，激发玩家的好奇心，并在开启的时候减少陌生感。天下X天下的功能预告常驻在任务栏的顶端，时刻激励着玩家升级。魂之幻影直接显示出功能按钮，点击后出现详细预告，除了名称之外还告知作用，进一步增加了吸引力。

天下X天下、魂之幻影

游戏预告给了玩家以目标，那如何达到目标呢？我们还需要一些细化的指引。

任务指引是游戏中最常使用的方式。比如天下X天下中的任务栏，途径就放在了目标的旁边；神威启示录的主界面人物会随机出现对话，隔几个就会出现【还有未完成的任务】，提醒玩家完成任务。再比如刀塔传奇，战斗失败的时候告诉玩家提升战力的方式。 

天下X天下、神威启示录、刀塔传奇

易用 —— 高效、安全、贴心

易用指的是在玩家熟练的时候，能够很快地完成目标，这就要求界面是高效的。在速度越来越快的过程中，思考越来越少，这时就很容易出错——所以易用的界面还得是安全的。另外，一些情理之中，意料之外的设计会给玩家带来惊喜感，提升玩家的的满意度。

1、连贯流程

现实中我们一定都有这样的体验：想要去做某件事的时候就突然忘了自己要干什么。同样在游戏中，不够专注的玩家也会经常发生这样的失忆，特别是在任务流被中断的时候。因此设计的时候，我们要考虑流程的各种情况，不让玩家在任务流中返回退出。

最常见的中断流程的情况就是缺少流程进行的必需资源。梦幻西游的各个功能在缺少资源时，总有链接可以跳转到获得资源的地方，大大方便了玩家的操作。

梦幻西游

2、就近操作

在保证了流程的连贯之后，就近操作可以缩短流程的物理距离。直接在要操作的元素身上出现操作选项，缩短视觉流（视觉焦点移动的距离）和操作流（手指移动的距离），让工具就在手边。

LOL的新版界面设计感很强，除了视觉效果之外交互方面也是有所创新的。排位赛匹配前的选择位置，点一下中间的选择按钮，以此按钮为圆心出来一个圆形列表进行选择，不管选哪项都只要移动很短的距离。不久之后，全民超神也出现了类似的设计。战斗中发信号，按住聊天按钮会出现一个圆盘，滑动到某句话再松手就会发送这句话。

LOL、全民超神

Simcity建设道路时，手指在格子中划就可以规划道路位置，格子又以手指为中心移动，形成清晰的指引。松手后有取消和确定按钮出现在终点旁边，使用起来有一种“本该如此”的感觉。Hayday中选择一个建筑后，旁边出现相应的物品，移动短短的的距离就可以完成操作。

Simcity、Hayday

在双手持握设备的情况下，按钮移到左右下角会离手指更近，按起来更方便。（但对于一只手拿设备一只手点击的情况就不一定了）

契约兵团

3、快捷方式

快捷方式是使界面变高效的好方法，能够像空间虫洞一样让人瞬间达到目的地。

现在的重度游戏中，经常有很多功能相同的模块。碎片化的界面会增加玩家的学习难度，所以需要合并重复的功能。天下X天下把所有的商店集合在一起，通过tab进行切换，方便玩家一次查看所有商店卖的物品。不同的入口打开商店会进入到不同tab里。刀塔传奇的各种商店可以通过两边的左右箭头进行切换，连tab也省去了，在商店数量不多的时候也是一个好方法。

天下X天下

有时候我们想要比较两个角色或装备，但是详情界面中只能同时看到一个，要记住第一个的信息再去打开第二个比较，十分麻烦。梦幻西游体贴地考虑到了这一点，在背包中点击一件装备的时候，会同时弹出本装备的详情和目前使用的装备的详情，方便对比替换。对于这个问题，契约兵团则是提供了一个专门的佣兵比较界面，可以同时查看两个佣兵信息，直观地进行对比，不用两个佣兵来回切换。

梦幻西游、契约兵团

在众多的条目中，如果能帮助玩家迅速地找到目标，也是一种实用的快捷方式。COC的聊天框中，如果上/下方有需要捐兵的信息，右上/下角会出现小箭头，点击后会定位到上一条/下一条需要捐兵的内容处，让玩家可以不必花时间在找信息上。

COC

4、错误预防

效率达到之后就要为高效可能带来的高错误率做一些预防工作。错误预防并没有想象中那么难，常见的有：不可使用的功能变为不可点击状态、容易出错的操作用二次确认弹窗确认一次、允许简单的撤销操作等。

大部分游戏对于点击按钮的判断都是松手才确认操作，这就为任何操作都提供了错误预防的可能，松手之前移开都能够撤消操作。但这种错误预防是需要玩家及时发现并反应过来的。一些需要长按的操作特别适合使用这种方式，因为玩家不会习惯性地点完就松手。王者荣耀释放技能时，通过按住屏幕移动来选择技能释放方向，此时把手指拖到“取消施法”的按钮处松手就可以取消释放技能。

王者荣耀

对于可能造成重大损失的操作，二次确认弹窗是不够的，因为玩家很有可能无脑点击二次确认弹窗中的确定按钮。天下HD的删除角色、大话西游的放生宠物可能带来重大损失，需要输入验证码确认。虽然稍微麻烦一点，但是误操作基本不可能发生了。（大话的验证码输入又比天下的要方便，不用打开输入面板。）

天下HD、大话西游

游戏外也有可以借鉴的。知乎客户端中，滑动内容标记为不感兴趣后，下方会出现撤销选项，几秒后消失。比起二次确认弹窗，这种撤销选项有个好处：它是以非模态的形式出现的，不会强制中断用户的操作流程，也不会让用户觉得“你总是怀疑我的智商”而感到不适。

知乎

5、预见性

乔布斯说过，“人们并不知道他们到底想要什么。”玩家随意的操作背后可能隐藏着连他自己都没有意识到的需求。一个好的设计师能够考虑到玩家某种行为的原因，发掘出玩家的需求并自动帮其实现；或者是在不夺走控制权的情况下提供有预见性的操作。

很多时候，玩家想要做的事是很明显的。天下HD在获得道具组时，直接出现打开选项；青丘狐传说在获得（更好的）装备时，倒计时自动装备，点击可以跳过倒计时直接装备；神武在获得新技能时，出现前往查看选项。

这些都是在不同情况下预测玩家想要做的事，为玩家提供方便。

天下HD、青丘狐传说、神武

Hayday从商店中把物品拖到场景中的时候，玩家需要的是较大的视野，因此商店会自动隐藏，放置好了物品商店再出现。

Hayday

欢乐斗地主中，一般点击一次只会选中一张牌。但是当这一圈在打一组牌的时候，玩家点击一次就会自动选中符合条件的一组牌（点击一次选中3个J）。

欢乐斗地主

Twitter发明的下拉刷新现在已经非常广泛地在各种应用中使用（图片以微博为例）。微博和twitter都是按照从新到旧的时间顺序排列内容的应用，在这种应用场景中看完旧的内容时，用户会很自然地下拉查找更新的内容，因此下拉刷新就显得非常合理。

淘宝和花瓣在自定义了一些下拉操作，虽然猜测的用户目的不一样，但是都很适合它们的使用场景。淘宝中在商品详情页下拉，可以查看我的足迹。这个界面没什么可刷新的，下拉表示用户可能想看之前看的东西（其他界面下拉还是刷新）。花瓣中某张图片详情下拉，返回到打开图片的画板（其他界面下拉还是刷新），亲测使用非常方便。

微博、淘宝、花瓣

梦幻西游的聊天锁屏设计也是十分贴心的。当玩家把聊天内容拉至不置顶状态，说明玩家在查看聊天记录，这时会自动锁住聊天框的内容，不会被新消息把正在查看的消息顶下去。当玩家看完了旧消息，解除锁屏之后就自动回到顶端。

梦幻西游

6、考虑使用情景

就像很多网游小说中，游戏公司会出配套的营养仓让玩家可以不吃不喝24小时不停歇地呆在游戏中，我们设计师自然也要为玩家的方方面面做考虑。环境和状态会影响用户与设备进行交互的内容。我们要考虑用户分析、多任务、手势操作、低电量条件和糟糕的链接条件等复杂环境下的通用设计。

梦幻西游是一个挂机游戏，里面有一些针对挂机情景中的设计。挂机游戏可能会把设备放在一边，因此有锁屏功能，不用怕不小心点到屏幕。挂机时场景一般都在战斗中，而且自动战斗就可以了，所以在战斗场景中保留各系统入口、聊天入口，让玩家可以同时操作其他系统。

梦幻西游

全屏游戏会遮挡住手机自带的信息。现在很多游戏的角落处都有时间、电量、wifi显示，让玩家不用回到桌面去看这些状态。

剑与魔法、天下X天下

苹果考虑到了用户使用ipad时的持握方式。因为ipad比较大，双手持握的情况比较多，按住键盘可以向两边拉开，把键盘分成两半，保证键盘都在手指移动的舒适区域。更贴心的是，如果不记得中间的字母是在哪边，按两边都会有反应。

IOS键盘