UI也能讲故事？箫家睿教你如何提高手游UI设计和用户体验

　　2014全球移动游戏开发者大会（GMGDC）于9月24日在成都世纪城举行，各方移动游戏精英齐聚一堂共享开发经验。知名游戏制作人箫家睿进行了主题为"如何提高手游UI的设计和用户体验"的演讲。

　　以下是演讲实录：

　　UI是一个常常被手游开发者忽略的问题，也有很多值得说的地方，今天我就从两部分来分享：第一个是相对于策划来说的用户体验；第二个是相对于美术来说的外观部分。

　　用户体验的挑战性

　　为什么说手游的UI是具有挑战的？先来看一下用户体验的定义。

　　用户体验：手游一直强调用户体验，玩家体验就是整体的印象和感觉，他决定你游戏的留存，决定你这个游戏是否赚钱，决定你的游戏有多少人玩，整个就是玩家用户的体验。我们在整个游戏里面打交道最多其实就是UI，他怎么去控制，怎么去用这个游戏？这个是最多的。所以我们说UI设计是很考验策划和美术基本功的事情。

　　下面我们说一下为什么有这样的挑战性，我们现在的游戏和以前的PC游戏承载是不一样了，进入手游之后，我们是没有键盘的，直接用了触摸屏。也就是，第一你的屏幕小了，相对于原来的手游和家用机来说，他缩小到一个几乎迷你的境界。第二个你失去了键盘，失去了以前我们作为主要支撑力的一些外设的东西，所以现在你必须把以前所有的操作，比如说我们控制这个人物，往前走，往后走，这些操纵全部集中在你的屏幕上，也就是说在这些迷你的屏幕上你UI所要承载的内容是更多的，相对于以前的PC游戏和PU游戏来说就是一个挑战了。

　　UI设计的三要诀

　　现在的UI设计是更加的细致和精致，也是更加专业化的。看看UI设计的几个要素，第一个是量体裁衣，根据你游戏的类别，游戏题材的不同，你UI的设计也是不一样的，我们现在说格斗游戏的UI和RPG的UI也是不一样的。

　　还有就是"繁而不乱"，原来是在键盘上实现了，而现在没有了，都在屏幕上，相对原来的PC游戏来说已经加了很多的内容。

　　第三个是"鱼贯而入"，这么多UI的元素，你如果一下子扔给玩家，他会觉得无所适从。我相信大家在座很多同仁都知道游戏开发的经验，其实我们之前做得很多事情都是遵循了鱼贯而入的原则，大家也会做新手指引，你们的UI也是一点点呈现给玩家的。

　　现在分别说一下这三点：

　　第一个"量体裁衣"。你在设计UI之前，和你设计游戏其他所有的元素是一样的，你需要把你的游戏分门别类，你的游戏是什么，你需要讲什么样的故事，你的UI的设计思路是不一样的。我们在做RPG游戏UI设计的时候，把任务放在最明显的地位，任务的指引，任务的按钮，新手指引，包括后面所有的指引，任务的钮一定要放在最明显的位置，这是和其他悠闲类、格斗类游戏是不一样的。反过来说格斗游戏需要有很大的空间给玩家展示格斗的技巧，展示整个的战斗过程。

　　说到格斗游戏的话，你就需要把你任务的纽往旁边放一下，让屏幕空出来让他来体验格斗的数据，比如说减选量，加选量都要明显出来，这样的话才可以有更好的用户体验。也就是说我们经常所说的格斗游戏的手法。

　　第二点"繁而不乱"。现在我们一说到游戏可能就会想到很多的功能，比如说我们现在支付的功能，还有一些任务，有一些养成类，甚至有一些游戏有宠物，甚至是交给这些很多聚集在你很小屏幕上的时候会显得更挤，甚至挤占你主要的游戏区域，这时候就得做到"繁而不乱"。怎么样做到？我们先把游戏主要的功能理出来，这应该是第一参差的功能，放在你第一层的UI上，然后理出来你的第二层功能，你可以把你的UI进行重叠化，这样子你的屏幕会比较干净，玩家开始操作的时候也会有一个层级化的概念。

　　第三点"鱼贯而入"。这一点体现在新手引导和每一次版本的信道，不要把你所有的版本一下子全部呈现给玩家。

　　我以前玩过一个外国的游戏是只有五个按钮，前后中左右，这样子做有一个好处是会比你亮一下给玩家的印象更深，他用UI给玩家做了一个信号的新手指引，第一关较你怎么往前走，所以第一关在下面只有一个向前走的按钮。第二关教给后退，在后面有一个后退的按钮。整个下来我是非常适应的，因为你们必须有一个概念就是原来玩家用机也好，玩PC，或者是掌上游戏机也好都是有手感的。而现在摸不着进攻键，所有这些在手机上大概用手滑，经常会滑错。所以他用了一关的时间去适应这个钮，后来我发现我习惯了很多，也顺手了很多。我认为这就是一个好的UI设计。

　　界面设计的主要思路，第一个界面。第二个界面设计的重要元素，刚才说了其实就是你各个功能，怎么样把你的功能规划到按键里面去，这个需要之前有一个系统详细的策划，现在很多的UI设计师，策划师不习惯去做文档，他一上来就把UI做成一个图，然后用图一层层的去讲，这种做法没有什么不对，但是我要说这种做法不利于你自己理清思路。我对手底下UI的设计师有一个整合文档，这样做的好处？在后期有版本更新的时候，你需要加新功能，新UI的时候，你发现你的思路很清楚，而不是跟之前做的UI互动打架，这个是从长远发展思路来说的。

　　UI如何讲故事

　　下面说到视觉上的东西了，因为我本人是策划出身，不是一个做美术的人，所以我现在可能没有什么资格讲配色，光线或者是布局什么的。我只能从大概的审美角度跟你们说一下这个事情的要求，什么叫UI也能讲故事。

　　现在一说游戏讲故事，首先想到重点是角色，是场景，你的角色要带感，你的场景要带感，可是对于UI是美观、简洁就行了，但实际上UI也可以带有自己的风格，可以配合整个游戏的风格来做一些辅助性的作用。

　　我之前玩过的一款游戏，他讲的是在一个小镇里面，一款解密类的游戏，在小镇里面有掉线的木偶娃娃，整个在中世纪巴罗克的画面，做的非常的漂亮。所以我还是UI在从头至尾，从游戏一开始，一直到关闭那一刻，唯一陪伴玩家的要素，甚至比主要玩家陪伴的时间都要长，所以一定要把UI故事做到里面。第一个就是通过画面强调游戏的重要性。

　　第二个游戏角色的定位。你的游戏主角是怎么样的人物，你的UI就需要跟着他的风格去走。比如说要做蝙蝠侠这类题材游戏的话，你的UI肯定根据美漫的风格走的，而你UI的主色调一定根据蝙蝠侠的主色调走的黑色，灰色，不可能是蓝色红色。

　　第三个游戏界面的设计可以告诉玩家很多游戏简单的信息。你可以通过UI告诉玩家在这款游戏里面见到什么，比如说设置，比如说养成。

　　原来我们做了UI的按钮，做了五张图，这个按钮的意思是说当时我们的游戏有一个失重的设定，就是说玩家在通过这个功能之后，玩家的角色会从地上翻转到天上，我们叫做失重，当时用了几个按钮来表达，第一个按钮是水在底下，火焰在上面的按钮，这个场景做的非常漂亮。第二个按钮是一个像八卦一样的图形，两边是像空气一样的旋转，做得也很漂亮。第三个按钮做的很一般，做了一个绿色的箭头。

　　当时进行投票的时候，绿色的按钮投票率是很低的，因为觉得很丑，但是我觉得反而要用这个按钮，为什么？因为他告诉玩家足够多的信息，一看这个按钮就是晚上，如果给你一个下面是水，上面是火焰的按钮，你不知道是干什么的，所以最后的结果我把这个按钮反回去，就用这个，但是更家美观一点，思路是对的。