网页游戏UI设计心得：凸显想要展现的信息

今天想和大家分享一位设计师@ LLjYYY关于游戏UI界面的设计心得。选自@GameRes游资网，文章较长，干货满满，记得收藏！

当你看到这篇文章的时候，我相信读者已经对UI这个概念有了一定的了解。

那么，怎样才是一个好的UI界面呢？

我刚工作时认为一个漂亮的界面就是一个好的界面，凡向美术提需求必要其加上复杂绚丽的边框，雍容华贵的底纹，角落上还要有精致的图标装饰，想方设法让所有好看的东西都能出现在这个界面里。

这样做当然是不行的。

在游戏中，每一个界面都是具有相应功能的，玩法也好养成也罢，界面展示的信息必须是这个功能想要让玩家获得的信息。

这句话有些拗口，直白点就是：让玩家看到你要告诉他的东西。

如果加入一些不必要的元素，就势必会增加玩家的理解成本：复杂的纹理会喧宾夺主，错落的icon会让玩家摸不清头脑，边边角角的图标会让玩家误以为这里有什么东西可以点击。

这些都不是我们想要的。所以，保证一个界面的简洁十分必要，与其花里胡哨，不如突出重点，思考一下，我在这个界面中想告诉玩家什么信息，想让玩家进行什么操作，将这些内容凸显出来，就已经体现了这个界面应有的价值。

以上是我领悟的第一个道理。之后我所负责的系统的界面不再繁杂不堪。我领悟的第二个道理是：按钮就应该有个按钮的样子，页签就该是页签的形状。千万不要觉得自己做的东西是一种创新而去挑战一些已经成为习惯的东西。当时在玩天谕，好像是要做一件事的条件是某个技能修炼到多少多少级，他的技能界面是这样的：

我在整个技能界面里面看了半天，不知道应该怎么做。查询游戏小助手提示是这样的：

最后请教百度大法，终于发现，这里竟然是一个按钮！点进去是满满的养成，简直把我气得不行。

拜托，按正常的理解，这个界面叫做技能修炼，上面那么多技能到多少级就是技能修炼到多少级。即使按照小助手的说法，所谓的“下方”不是一个绿色一个土黄色按钮的位置吗？再者，上方的技能icon饱和度那么高，吸引了所有注意力，“技能修炼”颜色那么朴素，简直要融到背景里去了。最关键的是，按钮应该有一个按钮的样子好吗，就算是半圆形的也请描个边，更换一下材质，加个强光效果，让我能感觉出它是能够点击的。

这个过程我重复了两次，第二次我流失好久回归又忘记了，只好再次请教百度。

回头我就仔细检查了一下自己曾经做过的界面，发现的确存在过类似的问题。在设计的过程中，有时会很主观地想当然，甚至还会为此洋洋得意，感觉自己做了了不起的创新，如果不是换个角度去思考，很容易陷入思维陷阱。现在我设计的每个界面都会让同事看一遍，让他把从界面获取的信息说一遍，看看和自己的想表达的是不是一样。有时会有意想不到的结果哈哈。

再深入一些就是一些用户体验的设计了，比如要在某个特定界面中使用一个道具，进入这个界面要按4下，而如果在包裹可以直接使用该道具进入这个界面只要按3下，那后者的体验就是好于前者的。如果玩家获得一个礼包，需要到包裹中才能打开，那我在他获得礼包的时候就在主界面中允许他打开，那么这种体验就是很好的。如果我在购买道具时只能一下一下按小加号增加购买数量，那么我增加一个拖动条或者数字输入框，那就是极好的。这个东西我们称它为“操作流”。一个简洁的操作流对于用户体验的提升是非常明显的。我们的游戏改过一次新手引导，减少了近1/3的操作，前期流失有了明显降低。当然了，这个是建立在大量经验和体验上的，随着体验次数越来越多，这方面的感受和体会会越来越明显。

随着对游戏的理解越来越深，我个人认为，游戏UI界面最重要的一点，就是一个界面是否易于理解。我曾经看到过一个SLG游戏，煞费苦心将出阵布兵界面做成太极的样子，我看到这个界面的时候惊了一下，认真看了半分钟，还是没看懂，于是单击右上角的小叉，关掉了游戏。果然，这个游戏后来再也没有听到过什么消息了，可能是跪了吧。这个是反面例子，很明显这个策划活在自己的世界中。

总结一下，如果能让玩家很容易GET到你的点，那么这个UI界面就是成功的。如果这个界面的操作还很简洁，那么这个界面就是相当成功的。如果这个界面还很漂亮，那么，这个界面就是非常成功的。

好了，以上都是方法论的东西，那具体到执行时应该如何去实现？

首先，想好你这个界面是用来干什么的。

请不要假装思考了两秒钟就说已经很明确自己的目的了。举个例子，很久很久以前我要做一个资源回收的系统，界面里面我准备把被回收资源的3D模型全放进去。过了一会我老大跑过来问我怎么想的，我说因为被分解的都是一些比较低级的道具，没有展示的地方，但是我们也都辛辛苦苦建了模的，所以我想在回收系统里展示一下。我老大说哦，感情玩家要是觉得模型好看就不分解了？你有没有想过加载资源量？你让用2MB的小水管怎么办？你有没有想过模型缩小可能会有锯齿和噪点？

所以，明确自己的目的，不要为了目的以外的原因影响你的设计。除了这个界面（功能）最原始的目的，你每想再加一个东西的时候都要反复问自己：加了额外的东西有什么好处？会不会引发某些问题？如果不加会不会有什么坏处？三思而后行。

其次，思考你需要在这个界面展示的信息。

这个说来也简单，无非是，在养成系统中讲清楚消耗什么可以增长什么属性，玩法系统中讲清楚游戏规则。运营活动中讲清楚资源便宜了时间有限大家快来买买买。但是把这个做好也是很难的，因为你要告诉玩家的信息有很多，总有重点和非重点，重点信息需要放在醒目位置，核心信息要甚至要加强提示。而非重点信息能藏起来就藏起来（可以做成tips之类的形式）。做这步的时候请牢记你的目的性，举个反面教材：仙侠道有一个星石的养成，插3个同属性的石头会激活一个技能。讲道理，这种带策略性的养成是非常受欢迎的，效果远远好于纯数值方面的养成，让玩家插3块同属性的石头应该是这个养成的核心目的。但是他在做界面设计的时候根本没有提示我插3块同属性石头会激活一个技能，只有在激活后放一个非常快速而且不明显的特效（下面右边那张图），我一看还以为是插满3个石头的特效。

然后，左上角“我的星石”点开后和下方的信息重复了（见下图）。寸土寸金的养成界面怎么能犯这种错误！要是我的话，就把左上角的icon换成技能图鉴，点开icon查看所有技能效果和激活条件。每次进入星石养成界面会有一个小气泡指向这个icon，提示装3块同属性的石头会激活一个新技能，过几秒后气泡自动消失。每次激活了技能时，会有特效将3块石头连起来连起来亮一下，然后化作星星点点光粒飘向左上方的技能图鉴icon，然后砰砰砰弹几个字“星石之力：欲火焚身1级已经激活”

再接下来就是美观方面的东西，这个就仁者见仁智者见智了，我提一点，是关于UI的明显程度。（就是指UI是否明显的程度）

一般来说，UI是越醒目越好的。怎么判断是否醒目，你可以把一张图去色，看看UI能不能一眼就看出来。喏，看看少年三国志或者龙珠，去色后UI图标都十分明显。

做个对比，我到QQ空间上从700多页的页游中随便找了几个跪了的，就发现有一个犯了这样的错误。大家注意看我圈出来的那一块，有个新手指引的箭头大家看到了吗？此外，它的图标用色和背景十分相近，导致整体界面看起来都不是很协调。

再找个比较成功的页游，随便点个小广告，找一个开了几百服的游戏，主界面各个icon清晰可见，这点就做得比较好了，各icon似乎还都做了描边处理，此外每个icon底下有统一的衬底，保证了icon整体的协调，一些需要特殊提示的内容还加了特效。

这个办法是一个画UI的大神告诉我的，有时候觉得需要重点突出的信息无法第一眼看到，尝试一下去色可能会有帮助。这个方法没有经过科学验证，反正我试下来感觉挺好用的。

再接下来就是便捷性的问题。有个叫3次点击原则，大概的意思就是不要让玩家点击三次以上才能进入一个界面。这个表达的思想是好的，但是并不是所有的情况下都要按照这个要求，不然整个界面上都得是图标了。举个例子，比如某些附属的养成点就可以适当藏得深一些，哪怕玩家多点几次也没关系。而要是一个SLG游戏，布阵的入口一定要放在一个很方便的位置，否则要先点三下才能布阵，玩家分分钟流失。

便捷性原则中还有一点，从一个功能中可以快速进入到另一个功能。比如强化到一半强化石不够，可以直接跳转到获取强化石的玩法中。引导玩家做需要的事情。早期的游戏这方面都很缺失，现在大多游戏有有注意这个细节，前两天听魂世界刘哲的分享里他还特意提到了这点。

好了，大概想到的就是那么多了。最实际的还是多做，多想，想好了再去做。话说回来，决定一个游戏最重要的还是核心玩法和美术风格，界面什么的实在没有办法起到逆天改命的作用。但是，就是这些细节堆砌出一个高品质的游戏。作为一个游戏策划，通过不断优化自己的游戏，本来玩家要思考一下才能理解，现在玩家看一眼就能懂这个玩法是怎么玩的，不是很有成就感吗。

让玩家更轻松地体验到游戏的乐趣，这才是一个游戏设计者的乐趣。

学游戏UI，这个公众号（学翼启）还不错，有很多教程资料，需要的拿走哦~