教你如何提高手游UI设计和用户体验

来源：好游戏攻略时间：2024-11-28 07:53

　　导语：

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

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

声明：新浪网游戏频道登载此文出于传递信息之目的，绝不意味着新浪公司赞同其观点或证实其描述。

　　中国网络游戏排行榜(China Game Weight Rank)是由新浪游戏推出的目前国内最全面、最专业、最公正的最新网络游戏评测排行榜，涵盖2010-2012内所有新游戏，力图为中国游戏玩家打造最值得信赖的新网游推荐平台。

　　新浪中国网络游戏排行榜是以由新浪游戏专业评测员组成的评测团队为核心，以游戏的画质、类型、风格、题材等游戏特性为依据，对中国(大陆港澳台)、欧美、日韩等地区正在进行测试或正式运营的新网游产品进行评测并打分后产生的权威游戏排行榜。新浪中国网络游戏排行榜将网络游戏从六大项、二十八个小分项与同类游戏进行横向比较，再将该游戏与自身的不同版本进行纵向对比后，由评测中心根据加权平均数得出最后的游戏分数，并以游戏测试及上线时间点为分组，根据每款游戏的CGWS分数在每个季度发布排行榜榜单，实现了排行榜的透明化和实时化，帮助玩家准确、迅速地找到心目中的理想游戏。

　　评天下游戏、测产品深浅—新浪中国网络游戏排行榜CGWR！　http://top.sina.com.cn