如何设计好一款iOS游戏UI的细节

UI是什么？很多人心中他只是界面而已，这正是UI往往被忽略甚至分配给新人做的重要因素。事实也是，目前看到很多设计UI的人，都听漫不经心的，或者说 不太负责任把，认为UI就是没有技术含量的设计，但我并不这么认为，相反的是，User Interface，作为一个游戏和玩家交互的直接接口，它的设计决定了游戏品质的至少40%。UI是一种用户体验的总和，除了视觉上的界面，还有听觉上 的音效、直觉上的Feeling以及真正的用户体验。在我们设计UI之前，我们必须先确定一些UI Patterns，因为有了这些Patterns，我们才能够在一个合理的约束范围内发挥，是的，当你做一款游戏的时候，尤其是ios游戏的时候，你必须 面对一些限制：

1，无论是什么类型的游戏，你不该有超过3个类型的Button。

事实上这并不是说你的按钮只能有yes, no, cancel，而是说在你的游戏中，同样起到yes功能的按钮，最多最多不应该有超过3中的表现。一些策划在设计界面的时候通常会借鉴很多其他游戏的界面 设计，找几个同类型的游戏，然后找到他们认为在某个界面上A游戏表现得很棒，全盘抄来，此时发现另外一个界面B表现的很棒……这个游戏的界面灵感可以来自 尽可能多的游戏，但是请你在借鉴的时候不要连别人的美术风格一起借鉴了。当你发现自己的设计案中，交易界面的“确认”是个蓝色的方块、丢弃道具的界面中 “是”是一个绿色的圆圈、而充值界面中“好”是一个金色的元宝，此时请你立即停下，因为再下去就Anti-Patterns了，事实上现在，你已经在边缘 了。同样一个游戏，每一个界面中担任类似功能的按钮居然长的都不一样，这样的感觉是非常糟糕的，对于一个用户来说，自然的反应就是这些界面并不属于一个游 戏，smells bad。

并不是说在你统一了美术风格之后就意味着你的界面感觉很棒，抛开主观的判断，你还缺少一层设计，那是页游中很少有的，但是作为一款能达到中等品质或者 更高的游戏，你必须有界面出现的方式，而当同一个控件的出现方式都不一样的时候，这样的设计也是Anti-Patterns的，还是拿button来 说，A界面的按钮全都是FadeIn\FadeOut进出的，B界面全都是SlideIn\SlideOut的，到了C界面，界面出现的时候按钮就全都在 那里了，这也是一种漫不经心的设计，同样会让人产生整体游戏界面缺乏统筹性、各个界面风格迥异的感觉。

2，字体可以用美术，但是用不了美术的字体种类必须少，尤其是中文。

字体是界面不可分割的一部分，除非你的设计优秀到用图案就能说清一切了，但是残酷的现实是，我们所做的游戏达不到这样的水平，有这样水平的人都被高薪闷死在腾讯了。那么我们不得不用一些文字、数字来表现出想要表达的东西。但是这里，初级策划往往会犯一些典型的错误：

1）同一个界面上有不下6种的数字，感觉非常糟糕，这就像上面说的一个游戏有超过3种同类控件一样，很不舒服，尤其是当他们出现在同一个界面的时候。

2）需要程序写字的地方多且乱，一会这里角色名字是几号XX字体，一会那里是技能名字几号XX字体，海量出现需要程序运算或者读表获得的文字（数字）信息，并且在不同地方表现不一。

且不说这违背了之前说的界面风格问题，更重要的是，你必须面对一个现实，一个ios游戏，尤其是你需要使用汉字的时候，每增加一种字体，就会给游戏带 来致命的威胁，当你的游戏有超过6种汉字字体的时候，事实上你的游戏已经在崩溃边缘了。因此，作为一个优秀的界面设计师，在开始设计前，你必须约束好自己 要使用的字体和准备如何使用，能用美术画的字（固定的，如某个按钮上的文字“副本”“好友”之类的），尽量用美术的，但是仍然请注意风格的统一性。

3，设计UI的技巧在于使得系统和玩法表现得更棒而不是为了去限制和约束系统的设计。

我们之所以去设计一个UI，是为了更好的表现出我们的玩法，这里我已经不用界面而是用UI了，因为这里要说的设计，不仅仅是界面，还包括了一些操作的 交互。很多时候我们做一些细节设计的时候，会发现要表现好非常困难，因此惰性促使我们退而求其次——去修改游戏的设计。到这里，我必须喊停——Anti- Patterns。

UI设计可以是一个游戏系统设计的验证，可以推翻一些愚蠢的设计或者对于一些设计的逻辑漏洞提出质疑，比如我们在设计一个游戏战报界面的时候，假如这 是一个《我是MT》Like游戏，结束的时候我们要显示给玩家看这个副本掉落了多少卡牌（也就是本次冒险我的收获嘛），但是设计的时候我们可能会发现系统 设计的时候想了很多，却漏了一个问题，一次副本究竟能掉落多少卡牌？是的，这正是UI检验了游戏设计的漏洞，很可能这个仿MT卡牌游戏一次副本不仅仅打3 场，可能要打8场、52场、199场甚至……无限循环？好吧，无论怎样我们先且不说好玩不好玩，那么这么多场，每场我们很可能会收获6张卡牌，那么假设要 10场，就会最多收集到60张卡牌，此时你的设计真的合理吗？

当然这个掉落60张卡牌，没有上下文设计内容的时候我真不好说，那么既然设计的时候已经思考过上限是60，而不是可能会掉落20张也可能12840张 还可能993204张，那么它至少Feeling还是有那么点靠谱的，此时界面设计往往会产生一个Anti-Patterns的行为——因为60张卡牌太 多可能导致显示不下，或者为此我设计的界面操作很不好（有滚动条，至少我个人认为Ios游戏有滚动条Smells Bad），因此这个系统的设计是愚蠢的，事实上这正是惰性导致我想到了如此愚蠢的一个想法。因为我觉得界面难做，我就要把原先大家已经认为OK的系统推翻 重来，这是项目制作中最容易犯的也是最大的错误之一，因此我们要做的应该是集思广益的去思考，比如说我们干脆就不显示详细获得了什么卡牌等等，各种方案的 思考，而不是想着去推翻某个甚至程序上已经完工的系统。

而当谈到60张卡牌掉落的时候，还可能引发出另外一个Anti-Patterns，并且会导致无限争议的就是——有人会告诉你“一般来说，这样的概率 不会发生掉落了60张卡牌的事情”，Cut！作为一个设计师，我们只考虑会还是不会，会就要有对策，不会就不要，而不是因为大多情况如何如何就能忽略。在 我看来“一般来说”是世界上最不负责的一句话，一般来说这幢大楼一层楼不可能同时有100个人，因为他每层楼可使用面积仅仅100平方米，可事实是小小一 个3平方米不足的电梯，上下班高峰都能挤上10人，那么是不是当100人出现在这层楼的时候，他就活该倒塌了？

为了回避一些界面设计的难点或者烦点，而去改变一个系统的设计，只可能产生更大的难点和烦点，so, Anti-Patterns！

4，两个界面间的切换必须得有但必须不能过于复杂或轻浮。

一个现象就是，做惯了页游的策划，他甚至都能不知道界面和界面之间切换还需要一个动画过程，但事实上一款品质中等以上的游戏，再切换界面的时候都应该 有些细节动画表现。而当我们专注于设计这些表现的时候，往往会忽略一个Patterns——界面的切换事实上是一个无聊的过程，如果它太久了，会导致游戏 枯燥乏味。

一个简单的FadeIn\FadeOut效果，配合上相对不错的美术设计，其实完全可以起到让人很不错的感觉，但是千万不要想玩花哨，尤其是当你自己 写代码，或者你的程序员写代码灵感突发也许是急于表现的时候，一定要及时拦住，一些界面的切换可能过于“花哨”但事实上缺乏技术含量又让人感觉十分轻浮， 甚至导致游戏的整体Feeling走偏，譬如一个武侠类游戏，偏偏要采用从4个角聚拢成一个五角星形状关闭界面，然后由五角星展开下一个界面（类似很老的 《名将》），Anti-Patterns，用户不仅不会察觉你写五角星的技术，更不会理解为什么武侠却要跟五角星挂上钩。所以这样画蛇添足的设计必须被提 前制止。

5，用户体验是主观的，但是对于UI来说，长期积累的用户习惯是客观的。

分析一些主观的事情是疲劳的，因为公说公有理、婆说婆有理、谁说都有理、官大就是理，这样的讨论非但得不到很好的结果，而且还会伤了团队的和气，而事 实上本身讨论的出发点也是偏的。为什么说UI是用户体验呢？这说的更多的是一些操作感，在ios游戏中，你如何去定义一个行为是一个典型的例子。

策划设计了，这个界面上点击A地方如何如何，长按B地方如何如何，还能把C拖曳到D身上。说的轻巧，可是请问，您的设计中，点击、长按、拖曳是如何定 义的？作为策划，不懂程序不是理由，这好比一个厨师说我不会切菜，你可以刀工布好，但你至少要知道实现原理。因此，请你给出一个算法，在程序中，我们所能 截获的是按下、拖动、抬起三个触发点，怎样的Coding可以实现您的想法呢？事实上你会发现，你很难区分所谓的长按和拖曳。（当然那些专攻舌战、巧舌如 簧的策划总能想到说法的）。

事实上这个问题，这就是用户习惯问题，用户是如何定义长按的？用户习惯是一个比较讨厌的东西，你不得不先分析出你的目标用户群——我的用户群主要是 Windows用户群，所以OK在左Cancel在右；我的用户群主要是Mac用户群，所以OK在右Cancel在左。这东西没有谁规定对错，但是长久以 来形成了习惯，你不得不顺着习惯去设计。什么是长按？“在我没有触发抬起的时候已经经过了一段时间，并且拖曳的点未曾超过按下点一个规范距离”，这个就可 以理解是一种长按，但不是策划案，而是一个说法，因为没有精细到，多少毫秒以后算发动了长按。

以上5点应该被我们作为设计界面的基本Patterns，但是Patterns只能是一种约束，却解决不了很多问题，事实上开发一款手机游戏，对于一 个程序员来说最苦的事情往往就是UI的开发，尤其是对于使用cocos2d(x)的程序员来说更是如此，那么怎样的合作会更好的提高程序开发效率呢？

1，Axure可以用来设计界面，但不是用来产生策划案的

Axure是一款不错的软件，他帮助你写了Javascript，而很多策划就认为神奇的Axure就是设计游戏界面的神器。没错，Axure可以用 于设计，但也只能用于设计，最多用于检验，而我们的目的是项目做出来，并非追究责任。Axure设计了一整套界面，却没有办法列出一个表，告诉程序员和美 术有多少要做、或者是哪个界面连接哪个界面，除非程序员和美术非常了解这个设计，或者反过来说这个界面设计的太好了以至于谁都一眼能看明白如何操作，但事 实上你我都没有这个实力。因此还是老老实实的列出界面流程，列清楚要那些界面，但是它们的动画表现可以参考Axure没错。

2，“字太多谁高兴看啊”

是的，在界面设计的时候，更多的应该是图，而少量的时一些文字注释，如果说你的设计案里连这部分都是文字多于图片，那就要好好锻炼下表达能力了。

3，请不要忽略对于操作的定义和设计

对于操作的定义和设计，往往是最容易被人忽略的，正如我上面所说的，我需要点击之后如何如何、长按之后如何如何，想法很棒，但是何谓点击？何谓长按？ 每个人的定义不同，因此请给出标准，如果你不愿意给出标准，那么在程序员完成设计（确切的说是替你擦屁 股）之后，请不要JJWW说这不好那不爽的。

4，Scale9很棒，但不要为了Scale9而Scale9

Scale9（九宫图）用来拼界面是一个很棒的主意，他解决了当年49K的S40限制，也是很传统很优秀的优化算法，可是现在的ios游戏已经不是那 个年代的手机游戏了，当你一个界面复用率不高、也并不是大到离谱（超过2048×2048？这的确离谱了，这界面你给谁看？）的时候，请不要选择 Scale9的做法，你说给美术听辛苦，美术拆辛苦、程序对坐标辛苦（虽然cocos2dx通过工具实现了简化，但是工具却不支持动画效果，如这个界面从 外面飞进来之类的，这得程序员去coding，而该死的CCAction机制，骨子里面又缺乏一种“司令部”的概念，这导致开发连续动画有鸿沟）。

5，小时的高达模型，你还记得吗？

如果你想问——什么样的UI设计案会很好，我想告诉你的是高达模型的说明书，上百块的素材放在10来块速料上面，谁知道那块是干什么的？因此我们需要 定义好一个编号给每块材料，并且在说明书上标注这个编号的材料用哪儿，怎么个用法，甚至用起来要注意什么。而且更关键的是，高达的说明书很图形化！

以上是我对于UI设计的一些浅见，作为同样自负的设计师，我也曾忽略了UI设计的重要性，直到在这个论坛看到了一个叫“橙子酱”（好像是这名字）的发 的几个贴，问的是手机游戏中是否该显示时间、手机游戏横着好还是竖着好，我感到十分惭愧，因为一个老牌设计师却会忽略了这样的细节，这也是先天的不足—— 缺乏细心。的确UI设计是一门技术活，也许生活中不少的积累，为了那两个问题，我还特地挤了几次公交车、地铁上班偷 窥大多人使用手机的习惯。

{:7_268:}顶！

很基础，很实用，支持

有道理。。。。{:7_275:}