|
演讲者： 陈维，来自腾讯互娱
演讲首先从通常意义上的“好游戏的两个标准”开始谈起：易于上手，难于精通。所以如果要做一个好游戏（尤其是国内的“好游戏”），那么一个UI设计师面临的两个主要挑战就是： 嗯，于是正文开始～
新手引导 新手引导专注于解决让游戏易上手的问题，接触过运营的策划都知道一个游戏流失最严重的地方往往是玩家刚进入游戏的那段时间，所以这个就被安排到最前面讲了。 （所以如果你不关心新手引导，可以快乐地下拉网页跳过此章节） 在新手引导阶段，UI设计师要考虑的东西主要有三点： 哪些内容需要引导 引导这些内容需要花多少时间 应该以什么形式来表现
那么首先先看第一个问题：内容 从演讲者的角度来看，新手引导包含的内容主要有4点： 游戏的核心玩法 基础的界面交互方法 重要系统的教学 向玩家展示灌输游戏世界观
嗯，以上尽是些抽象的概念，所以接下来是一些比较具体的规矩及案例～ 首先针对游戏的核心玩法及基础界面交互的部分，常识部分略过，重点要说的是如何判断哪些基础内容需要向玩家引导。这里引入了两个概念：
然后在遴选需要引导的游戏内容时，需要对内容进行分级，区分出不同的引导内容针对的是什么类别的玩家（以LOL举例）： 
当列明需要引导的内容后，需要估算教学过程所需的时间。因为教学时间与玩家记忆效果之间有这么个关系： 
简单来说，教学时间越长，玩家记忆效果越差。如果你做的足够长，玩家就直接跑了嗯…… 所以呢，在设计引导流程时，一方面要尽可能想办法教会玩家更多东西，另一方面还要尽可能缩短（连续）教学时间。因此设计师经常要这么干： 针对纯新手设置的教学最好允许老手跳过 将一些次重要的系统拆散到后续游戏过程中进行教学（例如将某一系统设计成游戏后期才开放，当系统开放时才开始进行该系统教学） （连续式教学的有 英雄联盟、欢乐西游等， 分布式教学的有 剑灵、Candy Crush等） 根据内容的重要程度选择适当的教学形式。（即需要权衡教学形式的强制性与指引性）
常见的教学形式举例包括： 专门的任务：强制性高，指引性低 Tips提示：强制性低，指引性低 全屏遮罩+箭头指引：强制性高，指引性高 箭头指引/特效指引：强制性低，指引性高
最后还有一个有趣的案例，用来说明新手引导中的“世界观引导”： 
《寻仙》最初的版本中玩家流失率很高，开发组就去研究为啥这帮子玩家累死累活下上好几个G的客户端结果万个十来分钟就都流失了，在访问了几个玩家后开发组找到了原因：寻仙在产品包装与宣传上使用的主题是“修仙”，但是玩家进游戏首先就在一个传统小村子里跑来跑去做点无聊小任务，一点仙气都没感觉到，于是便流失了……于是开发组更改了新手流程，上来先让玩家进副本做了个与修仙高度关联的任务，而且让此类题材中常见的重量级人物（元始天尊之类）出来打了几个嘴炮。前后数据对比，果断效果酸爽无敌。
UI设计准则 好了，这里开始进入到整场演讲中最核心的主线部分了，因此首先要祭出大图，明确一个优秀的UI设计需要包含几个层面： 
一个优秀的UI，首先要满足识别性，然后再满足可用性，最后再满足乐趣性。 好了，以下开始分别说明。
UI的设别性 UI设计的基础层面。在这个层面上，设计师最需要解决的问题是： 使用者能轻松辨识UI上的信息吗？ 使用者能轻松辨识出信息中的重点吗？
对于第一个问题，最主要牵涉到的是文字：
而对于第二个问题，则是个比较综合性的问题，需要举例说明： 明确关键信息： 左边的任务界面文字配色很泛滥，对玩家最重要的信息（任务奖励）被淹没在了一整片标黄文字中，玩家无法一眼区分；而右边的界面则将重要信息的显示位置固定了，并且该用图标就用图标，玩家只要一眼就能知道当前任务进度和任务奖励。 显示有用的信息： 简单概括就是废话少说。比如左边的出售列表中，物品名前面加缀的“名称：”就很多余，而且接下来描述的功能也基本全都是废话，然后还没把售价标出来。砍砍砍改成右边这样，OK了。 避免随意使用颜色： 同一界面修改前和修改后的用色数量之间的差别（尤其是最左侧列表，中列右侧并列的三行数字），可以结合前面“文字颜色”部分的配图感受一下 注意阅读顺序： 注意最左边的武器装备栏，当玩家在从上到下查看UI时，首先视线移动到右边看到右上角的“主武器”，然后视线会移动到左边看到武器名“M4A1”，然后再移到右下角看到“等级1”。这太拧巴了，三行文字统统改到左边垂直对齐不行么！ 化零为整： 
这种情况尤其容易出现在一个上线运营一段时间的游戏里，一些小功能不断累加，导致界面上的东西越来越多而且东一个西一个的时候，想办法把他们聚合起来，让玩家往一个地方看的时候就能尽收眼底。
UI的可用性 在这个层面上，UI设计师应该解决的问题是： 用户能很快明白这套UI怎么用吗？ 用户能通过这套UI快速高效地帮助他完成工作吗？
首先对于第一个问题，在设计上需要注意以下规则： 尊重用户习惯：对于业界内许多约定俗成的设计准则（尤其是目标发布平台的系统设计准则），不要做破坏性创新。比如，以下是绝大部分用户都很熟悉Windows的控件规范： 然后是喜闻乐见的反例： （左边图的圈圈错地方了，应该是圈在按钮上方的复选框上） 左边图的问题是，它画了一个介于圆与方之间的选择框，那么这到底是个单选框还是复选框？右边图是英雄联盟老版本的符文购买页面，左边的单选框选中后是打个叉，完全不符合中国人的认知习惯。 保持设计的一致性：UI需要在不同的设计细节上保持一致，这样用户才能建立起对UI交互的习惯反射。一致性有几个不同的层面。
而提高UI使用效率，则需要注意以下规则： 为用户提供最短路径： 举例的是英雄联盟。这游戏主页下方的部分其实是个Web，允许腾讯自定义这里的显示内容。腾讯的运营人员在分析了玩家的游戏数据后发现，大部分玩家玩的模式就那么几个，而游戏本身设计要经过好几层界面五六次点击才能开始一场匹配，于是腾讯的运营人员直接为最火热的5个游戏模式做了相应的快速匹配按钮（见红框），这样玩家只要一次点击就可以直接开始匹配。 更宽容的操作： 举例的是天天酷跑。游戏中的跳跃与下蹲的实际操作区域远远大于按钮的实际大小，列表的选中也是一样，几乎整行的显示内容都会响应玩家的点击操作。这样就不容易因为失误而导致玩家操作中断。 更流畅的过程： 一个对比，左边的游戏在进行升级操作时每次都会弹个框要求玩家确认，一个花钱的玩家要强化个爽需要来来回回点击上百来次，简直口胡。右边这个直接对着一个按钮狂戳升级就好了。 恰当的反馈： 左边当玩家开始游戏闯关时，体力条上会有一个明显的体力消失的动画反馈；右边则是战力提升下降时给予的不同风格的视觉反馈。
合理的动画反馈可以极好地帮助用户理解当前发生了什么。
UI的乐趣性 这是（尤其是游戏）UI设计的高阶需求，设计师在这个阶段中需要解决的问题是：
以下分别举例说明： 图片比文字更具吸引力： 尽可能在界面上展示图片，这比冷冰冰的文字更讨喜～以下再举一个界面的前后修改对比，自行感悟： 善于运用拟物化设计：
 同样是抽卡，右边的设计看起来就比左边的更让人喜欢。（而且其实左边的抽卡时会有一整套拟物的动态表现过程，因此实际上更胜那么一筹） PS：在另一场英国人的UI/UX设计相关的演讲中也多少涉及到了这一点，例如演讲者提到了如果你在游戏中使用Win8的Metro风格纯扁平化设计，那么几乎很难再做出自己的风格。或者说，（以下为笔者自行夹带的私货），扁平极简化风格的设计本身就是为了去除界面本身的性格而出现的，对于移动越来越注重内容和服务而尝试淡化软件本身的的移动应用来说这是很正常/正确的趋势和改变，但是对于注重营造整体氛围的游戏UI来说，不一定是好事。事实上笔者见到的极简扁平化风格成功的游戏UI要么是UI上显示的其他内容极有风格因此不再需要UI来帮忙造势（比如 中土：暗影魔多），要么就是UI上显示的信息极多因此要尽量避免不必要的UI细节来加重视觉负担（比如 文明：超越地球），再要么就是游戏本身就是扁平风格的因此扁平化的UI与游戏本身风格自洽融为一体（比如 Dots），再要么是游戏本身的世界设定需要扁平极简化设计带来的未来感（比如死亡空间）。 为玩家设定目标： 其实这个有点偏向游戏设计了。举例的是某打飞机游戏，屏幕左侧会显示其他好友的飞行距离记录，这样玩家在玩的时候会不停的有“嗯我刚刚又超过谁谁谁了”这样的感觉。相当于为玩家树立了一个又一个小目标。 切合主题的动态设计 举例中左边的就是前面提到的抽卡时的动画过程，当抽卡时中间的图标所发生的变化，类似于老虎机的摇奖效果。
右边的则是某西游题材游戏中开扭蛋时的界面动画（一道雷劈在一个蛋上，贴合孙悟空从石头里蹦出来的主题） 营造气氛 COD里面低血量时的样子，一看便懂。 满足玩家的情感宣泄 在玩家情绪高涨的时刻，让UI也跟着High起来！左右是同一个战斗结算界面的两个版本，一对比高下立现。
另一个例子： 
右边这个当时相当火，从设计角度来说，它以经达到了“让不玩这游戏的人都能感受到抽到卡的玩家那一刻激动的心情”，32个赞，以上。
Recap：UI设计准则
以上，让我们再次回顾一下UI设计中各个层次的设计原则： 
以上，交互设计部分内容结束。
| 
IP卡
狗仔卡
发表于 2014-10-30 10:37:48
提升卡
置顶卡
沉默卡
喧嚣卡
变色卡
千斤顶
显身卡