一个策划眼中的手游UI规范设计

一、设计概述

在讲述设计规范时，首先要明确界面的分类，在我看来，界面只有主界面、一级界面、二级界面三种。

其中主界面仅包含三种：登陆界面、主城主界面、战斗主界面。

一级界面即指从主界面入口点击一次后第一个呈现在玩家眼前的界面，也包含由系统呼出的结算界面等。

二级界面很好理解，即在一级界面打开的新界面，二级界面再展开的界面，我们仍称作二级界面。

同时还要明确的时，这里主要讲述的时基于手游移动端操作的设计规范，而非PC或者页游等媒体。其操作主体在于触摸、停留、划动三种最基本的操作方式。

二、逻辑关系和显示管理

　　1.返回和关闭

所有的一级界面，应不具有关闭这一概念，呈现在玩家眼前的应只有返回这一概念，即玩家可以认为自己所有操作的出发点和终点，都是回到主界面。而非终止目前自身的操作。

同时具有关闭含义的界面，应尽量用半透明等处理，同时以一行类似“触摸任意地方关闭界面”之类的隐含提示，让玩家遗忘掉X按钮所带来的重度PC体验。

　　2.屏幕遮挡

所有的同一级界面之间，应尽量大小一致，以方便层级叠加时能够相互遮挡，抑或左右上下平行，不对另一方进行半遮挡。切忌两个界面交织在一起，可以越过上层界面点击下层界面信息，达成误操作或层级反转，如果非要这样做，你可以在点击下层界面时，自动将其上层的界面关闭。

　　3.层级和堆叠上限

无论何种界面，应遵循“后出现的界面在上层”的层级规范（除开系统的滚屏信息），并且上层界面不关闭，下层界面无法先行关闭。

要注意玩家所打开界面，特别是二级界面的堆叠数量限制，不要同时存在两种不同功能的界面，比如装备类和宠物类的界面都同时存在于界面中。同时要注意堆叠的数量上限小于5，相信没有人愿意点了4下才回到主界面。

当然，上述堆叠过多的问题也有一个简单粗暴的解决方式，那就是点击一级界面的返回按钮时，同时移出所有非主界面的界面，但粗暴的东西大多并不美妙。

　　4.界面简洁化与二级菜单

在主界面以及一级界面上，尽量不要堆叠超过13个可以响应点击的入口，如果你非要这样做，至少也要划分明确的操作区域，并确保至少划分的区域中两个区域是看起来空空的，否则将会产生让人厌烦的，看起来满屏幕的操作按钮，而使玩家体验不到场景美术的精美设计。

为了解决更多功能入口的问题，可以采用切换、弹出新菜单的操作方式，及同类功能汇聚到一个一级界面后再次作为二级界面弹出。或者你也可以把超过13个不同的地方分组，比如假设20个入口，那么14+6这么分，其中6个功能可以通过与另外6个功能用切换按钮来实现。

页签有时候并不是一个很好的二级菜单设计，排列在一起的功能图标看起来更让人赏心悦目。

　　5.提示信息前置

如果界面是在进行一个跟消耗相关的功能，那么一定要保证玩家在界面上一眼就可以先得到能否完成操作的提示，而非点击功能按钮后再获得提示，比如货币是否充足，消耗品是否达到要求，主体目标是否依然存在等等。

三、装饰与易用性设计

　　1.可用华丽装饰的部分

不是所有的界面，特别是游戏的操作界面并不以界面华丽逼格高作为追求目的，更多的时候我们会发现，只要能够让玩家理解功能意图，即使看起来界面粗糙的游戏，玩家认可度反而更高。

那么哪些界面可以用华丽装饰进行修饰呢，我认为主要包含以下几种：

登陆界面是必须进行华丽设计的界面之一，是玩家第一眼接触的表象；

运营和收费相关的界面，因为其主要宗旨类似于市场营销，因此适用于更广泛的广告设计手段，所以华丽的装饰是必须展示的。

剧情或者文化展示界面，比如能够更具时代或者游戏背景特色的关卡界面等等。

　　2.重要信息的集中展示

界面初学者常犯的错误是尽可能的展示全的信息，或者要展示的信息都给人以同样重要的感觉，其实不然，每个一级和二级界面，都有其重要的部分，比如装备强化界面，对于玩家最重要的是属性的变化，强化材料是否足够，这个时候描述、各种复杂的框，其它装备的同步展示就不能作为主要设计元素。

主要部分内容，尽量以单独的装饰底衬托，即使界面过大，显得过于空旷，也要用花纹装饰底来衬托，而非压缩主要展示内容的空间。

如果发现目标的展示信息是在太多，那么你就要想办法分页或者通过滑动来规避满屏的信息文字了，不要认为玩家没看到信息很累，实际上你也不可能所有的信息都是重要信息。否则就不是一个合格的信息展示者。

　　3.操作壁垒

对于轻休闲的游戏来说，划动是最好的操作体验，而对于动作重度游戏，特别是摇杆游戏，玩家同一时间可以触摸到的点击部分，就是它的操作壁垒。

在设计时，要特别注意降低玩家的操作壁垒，比如摇杆类游戏，那么如果是双持操作，那么主要的操作，特别是复杂的战斗操作，要放在左下和右下两部分，并且玩家需要关注的操作分类不要过多，比如摇杆附近不要有其它可以点击的按钮，而右侧手柄部分，所有操作的按钮都要围绕在一个四分之一圆左右的部分，不要出现过长的拇指触摸不到的按钮。

一些我们不希望玩家去经常操作的部分，比如离开当前副本、放大地图等操作，放到上方的角落里是没有任何问题的。

　　4.关注目标存在感

在设计界面时，要特别注意玩家当前关注的主体目标有哪些，这些主体目标的存在感要特别强烈，可以让玩家预感到它的存在。

比如如果玩家战斗中有宠物，而不设置宠物的头像和血量显示，那么我想这不是一个很好的设计，另外比如装备强化界面，除去页签，选择的装备也没有单独呈现图标出来，这也是一个糟糕的设计，实际玩家在选择完页签之后，根本不会去关注选中状态标注的是哪个装备。

四、界面元素规范

　　1.无界框体

如果场景做的足够优美（通常为了有竞争力，这也是必备的），那么就要考虑界面是否应该具有明显的边界框体，PC时代，鼠标操作喜欢明显的方框+右上关闭来管理界面，然后到了手机上面，我们要理解玩家其实认可的边界界面是设备屏幕的边界，任何过多的额外边界，特别是一级界面最外层的框，由于屏幕自适应以及离显示屏边界过近的问题，特别容易给玩家造成压迫感，并且这也确实会给人一种浪费空间的感觉。

　　2.艺术字

一成不变的字体难以给予人更多认同，在手机游戏中，更多的时候，要注意关键点艺术字显示的应用，比如战斗力、排名、伤害跳字等等，往往应用艺术字的表现更为吸引眼球。界面的主体展示部分通常也可以用艺术字来达到重心集中的作用。

　　3.图标的大小和规范

在我看来，一个小于50X50的图标，实际是很难描述清它所代表的信息的，同时也难以引起玩家的关注，合理的图标应该至少是64X64、72X72、84X84中的一种。

同时图标应该具有明确的品质边框，以方便玩家更加清楚的明确物品价值，按物品品质进行白绿蓝紫橙红的顺序进行表示。

图标应该具有明确的分类底，让人很容易区分清哪些是装备，哪些是头像，哪些是材料等等，而非当很多的图标放置在一起时，让人难以捉摸。

如果没有多样的图标，仅是道具品质的变化，那么至少保证图形长相一致的基础上，一定要额外染色，作为新的道具图标出现，不要图省事，只是边框变化。

对于有递进关系的图标，要注意展示时让玩家轻易就能理解递进关系，并且这种递进关系不要多余5，比如宝石图标，那么1——10级宝石至少应该是像暗黑宝石图标一样让人能够感同身受的进化。

　　4.字体颜色和字号大小

衣服着装上具有三色原则，在我看来，除开道具名的色彩显示，界面上的其它文字颜色也不应该脱离三色原则，否则特别混乱的颜色字体，会使玩家完全分不清主次。另外字体最好具有颜色描边，以便任何情况下，玩家都可以清楚的看清字的内容。

字号的大小因人而异，个人认为，最小的字号不应该低于20，合理的字号是在20、22、24、28、30、32中的一个，再大的字体如果是装饰性描述则考虑用艺术字。

　　5.页签

触摸操作为主的游戏，更适合横页签的使用，而像摇杆操作的游戏，更适合竖页签的使用。同时页签也要符合阅读主流从左到右的规则，即页签最好出现在上部或者左部，右侧和下侧实在不是一个好的选择，那里通常是主要功能按钮和返回按钮该呆的地方。

大部分时候，艺术页签要比通用的写字页签更有说服力，因为对于主要的功能，比如对实力影响至关重要的装备和宠物模块，则应该使用艺术页签，而活动界面就更不用说了，每个活动都要有单独的主体图标来展示。

　　6.其它控件

复选框是个针对选择的良好设计，在我看来要比下拉列表框看起来更加清楚，同时也不会让玩家觉得实在进行二次操作，点一点换一换总是很轻松的感觉。

滚动条实际上也是一个PC遗留产物，在界面设计的时候，只要注意末尾露半个的原则，滚动条是完全不必要的存在。

进度条要比数字更加吸引人，但是特别长和深颜色的进度条，有时会过分抢镜，让人忽略了真正的主体信息，因为应用时要酌情考虑。

　　7.统一性

交互界面设计的另一个重要方面在于统一性，主要是指同一类型控件的大小，出现的位置，字体颜色的同一度等等。大小不一的控件，比如按钮，往往会影响实际的细节体验，让玩家莫衷一是，所以哪怕稍微违背常理的设计，如果长期的让玩家理解，它总是出现在那里，也是一种培养用户习惯的好方法。

五、资源管理和控件复用

　　1.复用的重要性

复杂多样的游戏界面固然让人印象深刻，然后从用户体验的操作讲，习惯界面统一的风格和少数的规矩，要比看起来好看更加重要，因为UI设计的最终目的在于用户体验和操作习惯的养成，而非看起来好看。

　　2.图片和图集

大于256X256的部分，就不太适合进入图集，因为图集要保证在1024X1024大小下运行才不会使得自身更大难以加载。因为256的图片已经超过了十六分之一，显然不适合占有图集，就该另行作为图片进行加载。

能够切九宫的东西尽量切下，进行九宫缩放，因为图集可以更多的节省界面的消耗。

当然，有的应用程序会根据自身需要批量处理多个图片成为一个图集来减小消耗，但是此方法会增加处理器运算复杂度，因此要酌情考虑。

　　3.图片的大小控制

图片大小尽量使用2的倍数，最好是2的幂次方大小的尺寸，这一尺寸会使得利用空间更加充分，且加载时更容易对齐排列。

　　4.控件名命名

所有界面用到的元素控件名最好唯一，以方便日常管理和维护清理，重复过多的控件名，会使清理时很难定位使用了控件的界面。

六、补充说明

UI界面在手机上的设计，更多的需要设计师的积累，而最好的发展对象其实是平面美术，或者说更高阶段的平面美术应该进阶为UI交互设计师。产品经理、主美、测试最好也具有相应的素质，来帮助UI设计者规范和改善界面。