游戏策划基本功：手游UX交互设计的8条原则

UX交互是我最近的工作重点，对策划来说，UX交互设计其实是每一个策划的必修之路，所有的策划在策划案里都会出大体的交互稿。所以太泛的东西就不说了，今天还是主要来说说，从正儿八经的交互角度来说，和策划比较粗和经不起推敲的框线图相比，有哪些不同，有哪些是更加需要注意的地方，而我们作为策划，又可以从中学到一些什么。

交互其实是专业性很强的职业，对策划和视觉美术都要有一定的了解，且最好有一方的专长，所以我只是班门弄斧，十分浅的来聊聊交互。

1.字体字色字号及规范

这里指的一般不包括专门设计的美术字，而是游戏内通用的文字。

既然是UX，就还是来看看实际的界面。


随手截了一张阴阳师的界面，从线框框出来的6个区域简单聊聊。

首先是关于字体，一般来说游戏里会用到3种左右的字体：普通的文本字体，标题及页签字体，数字和英文字体。

阴阳师的主界面中，场景化的功能入口和底部主要的功能入口，还包括顶部的“新”，使用的是标题页签这一类带有风格的字体，形状上来说会比常规字体（宋体、黑体等）更加美观，同时每个游戏结合自己的需要会有不同的字体使用，可以体现游戏的风格。

其实如果是英文的界面（或者全球服），可能更多的是图形化的icon和提示就已经足够，比如放置奇兵的形式。


但是需要注意的是，如果是国服的游戏，还是建议使用汉字+图形。因为汉字是方块字，本身是带有一定图形化元素的，加上特定的字体，并不会如同字母组合的文字那样，信息为主而少有美感。

回到阴阳师，聊天栏里的文字则为普通的阅读文字，适合于大段的描述、对话等内容，不适合风格化的字体，会稍不适合于阅读。

阴阳师种，技能描述、御魂描述也都是使用的该字体。

而数字和英文可以和普通的文字使用一种字体，也可以不同，使用不同主要是因为汉字字体英文和数字不一定好看，但是存在的问题则是汉字中夹杂着英文和数字的内容，则十分蛋疼。

然后是关于文字颜色。这里我使用一个新界面，让大家看得更加清楚。


御魂详情中，可以看到使用了4种颜色：黑色为普通描述颜色，棕色为主属性即重点提示，绿色为达成条件提示，灰色为未达成条件提示。其实这里还有一种颜色：“属性加成”和“方案”使用的是标题色：浅黄+黑色描边。

一般来说，游戏内会用到大约4-5种颜色（使用情况基本约等于阴阳师的这个界面），标题颜色，普通文本色，重点提示色，达成条件/增益/有利色（一般为绿），未达成条件/减益/不利色（一般为红）。

当然，根据游戏的需要，还会有各种各样的颜色：品质色、状态色等，比如下面两种情况。



最后是字号，字号可能存在的情况比较多，一般来说手游从16-32及以上都可能有，为了保证区分度起码要使用两码以上的字号区别（16-18-20-22-……或是18-22-26-……），不同的游戏和不同的情况下使用字号的情况可能大有不同，重要的是要按照规范来，比如：icon内文本使用16，普通描述文本使用20，强调情况或数字使用22，按钮文字使用24，标题使用28，这里就不深入讲了。

字体字色字号的使用并不复杂，困难的是建立规范并且敦促执行，而且在一次次迭代中，规范也可能发生变化，确保游戏内是统一的是最重要的。

2.游戏内的弹窗、按钮及元件

这三者其实很散，但是本质上是一个内容，所以放到一起说明。

先说弹窗，任何一个游戏内的弹窗粗略的概括可以分为三个大类，大弹窗、小弹窗和提示弹窗。




大弹窗接近全屏界面，一般来说可操作区域多，功能或信息较多，不可点击任意区域关闭，有关闭按钮，之所以不做成全屏界面一般是为了节省跳转界面的时间或已经在某个二/三级界面中。

小弹窗则是信息没那么多，可操作功能也较少，同样在某个二/三级界面中，可以是点击任意区域关闭也可以不是，但是需要有关闭按钮。

信息提示弹窗则一般不可操作，一般为点击任意区域关闭，一般和点击的信息位置相关（比如点击奖励icon查看奖励）。

大弹窗一般只有一种，小弹窗可能为1-3种，信息提示弹窗则结合需求，比如技能描述弹窗、查看奖励弹窗，通关弹窗等等。

弹窗结合需要可以偏多，但是一定要注意使用同类型的弹窗元素。

按钮一般来说游戏内通用1-2套资源即可，替换按钮的颜色即可表示（这么一看阴阳师用的并不好233），然后页签栏使用统一的一套资源。

另外，如果有两个功能放在一起（比如一个合成一个分解，一个全部合成一个合成），最好使用不同的颜色用以提示玩家，比如阴阳师这里的强化与卸载，其实使用不同颜色的按钮会好一些，比如下面的两个按钮。（强心要解释的话应该是卸载并非不可撤回的操作，所以不需要用警示色，不过我认为就是没做好233）


最后是元件，元件其实并不能有统一的规则，因为使用到的情况非常多且不同，但是如果是相同的逻辑，建议还是尽量保持使用相同的元件，比如下面两个例子：选取数量最好还是统一使用拉条的元件，造成的不统一需要额外的设计，也会对玩家认知造成一定影响。



但是也会有没有办法的情况：这里总共使用了三种边栏，但是因为大弹窗和界面无法使用同一种边栏，而成就界面的边栏需要点击可展开，所以又采取了另外一种不同的形式。




总而言之，仍然是那句话：统一、规范和细节。

3.对齐和通用信息栏

其实上面已经说了一点关于通用信息栏的东西了，对没错，就是旁边这个条。


一般来说，这个信息条会出现在四个位置：顶部，底部，左边和右边。

对，其实就是游戏屏幕的四周。




一般来说，游戏的顶部是给资源栏的，比如金钱，付费资源、体力等，这个是目前大部分游戏的情况，所以这一部分的内容建议和其他游戏保持一致。需要注意的是顶部资源栏在切换不同界面的时候会有所不同，一般为显示当前界面需要消耗的资源。


一般左右和下方的边栏为功能切换，阴阳师中的规则为主界面及重要展示界面（比如抽卡）为底部边栏，功能性边栏为左右两边，而无二级选取的边栏放在右边，有二级选区的边栏则在右左。

而这几个底部边栏其实也可以叠加，玩家在选取一级信息之后可以通过同界面的另一个边栏选择二级信息，这样就避免了界面的跳转过多和同个界面信息过多的做法，比如下面两种情况。



而至于对齐，则是指同一个区域下的所有信息应该保持对齐，这样才看起来整洁规范而舒服，同边栏的原理类似，最好不要出现参差不齐的情况。


4.信息布局的统一，交互方式及逻辑的统一

所谓的信息布局的统一和交互方式及逻辑的统一，简单来说就是游戏内界面的布局是类似的，操作方式也是类似的。

比如（不截图了就）阴阳师的大部分二级界面的选项边栏都是在最右，如果是展示+操作的界面（比如上面的阴阳术和式神界面），一般来说都是左边展示，右边信息+操作，因为阴阳师本身是主打角色的二次元游戏，所以对于这些能给式神或阴阳师展示的机会绝不吝啬空间。

而如果是操作或信息为主的界面，没有太多需要展示的情况下，则会把中间留给主要的信息或操作区域，底部、左右两边会根据界面把功能和次要信息（或功能）放到其中，并且大部分界面都遵循这个规则。


在考虑这样的界面的时候，一定要先思考清楚，这个界面最重要的是什么，不同的展示、信息和功能之间的比例大约是多少，只有先想清楚了这些，才能够把信息罗列清楚。

比如上面界面中，玩家使用最多的功能：结界，是和其他功能按钮放在一起，但是这是否意味着结界就应该在这个界面占据最大的位置？其实不是，这四个功能，除了结界之外，其余三个功能中，道馆有别的入口，其他两个功能并不重要；并且最重要的是，玩家的交互习惯就是，功能在各个边栏选取，中间是信息栏，所以最后这样的布局显然比将这四个按钮放在中间更加合理。

5.信息的关联和整合，信息的整合方式

这里用式神界面的信息作为实例。


这个界面是选择任意式神之后点击详情可以看到的信息，还有一些第一个界面没有展示的信息（比如觉醒和御魂）。

这些信息是基于什么考量怎样排布的呢？首先我们看到的是大体的信息布局：左边为式神模型展示，右边为功能性信息展示，最右侧边栏。

然后反推：一个式神需要哪些信息？

• 玩家最关心的：形象，稀有度，星级，名字、养成。
• 属性相关最主要的内容：星级，等级，各种总属性，技能。
• 次要属性：御魂属性、御魂套装效果、觉醒与否
• 人物IP相关：CV、传记、皮肤、常用与否、手账
  

在大区域定下来的前提下，哪些信息是和展示相关的？哪些信息是和属性相关的？很明显就可以想到现在在这种布局。

但是也有边缘徘徊的属性，比如星级、稀有度和名字、养成按钮，同样的，这一个界面不可能将所有信息都塞在里面（特别是将较大空间留给了展示区域），比如技能的具体说明，具体的御魂。

那么，这个界面最重要，或者说要占到最大区域的区块是什么？是展示区域，那么可以归为属性和展示的重要信息则统一放到展示区域：稀有度、名字、养成、星级。其余非可展示属性则置于属性区域。

然后还有一些信息塞不下怎么办？或者说不希望影响界面效果怎么办？整合，和其他的信息整合到一起：觉醒与否通过星级勾玉的颜色表示，御魂的属性加成通过X+X的形式表示，技能等级通过icon+角标表示。

而再多的信息，真放不下了，通过弹窗提示和切换页签表示。

而因为左边的展示区域是最重要的，所以左边保持不变，切换右边的信息。

而相关联的信息，尽量放在一起，比如养成和星级（当然手账和CV跟星级没什么关系，稀有度和名字，常用与否和是否上锁，可以看到阴阳师也并没有将整个左边的页面信息关联的特别紧密，这也是阴阳师可以改进的地方。

最后，既然刚刚都说到了，期望在有限的信息区域内展现更多的信息，同时又不至于破坏整体的视觉效果，怎么去把这样的信息整合到一起呢？

再看两个东西。


先看头像框：并不大的范围其实塞了相当多的信息：等级、星级、稀有度、觉醒与否、是否常用、是否上锁、乃至皮肤、以及头像。

怎么做到的呢？先看明显的：大的两个角标、底部的星级、以及左边的皮肤名。

等级和是否上锁使用呢两个角标，而星级使用了底部信息栏。

然后，底框颜色展示稀有度，星级勾玉颜色展示是否觉醒，等级角标的底框展示是否常用，头像的变化及左边名字展示皮肤。

因为阴阳师是将右边放了较大的空间给模型，所以名字放在了右边，这样头像格子里可以省一点空间出来。

就这样，通过各种结合及一个原件反复利用的方式，用一个头像icon表示了相当多的信息，这一点不得不说是十分牛逼的。

最后看一下这个界面的1御魂快捷入口。

因为后期玩家们的培养重点转变成了御魂而非式神本身，所以阴阳师在列表界面加入了一个御魂快捷入口，同时这个入口还通过形状及图形的方式告诉你一些基本信息：御魂是否都带了，有无四件套属性，对御魂这样一个复杂的功能来说，这也是一个很好的精简整合方式了。

6.操作步骤次数及单次操作复杂程度

这里讲的并非单纯的次数，而是玩家行为背后的流程，以及流程对玩家体验和行为的影响。

一般来说，策划案中会有大致的操作流程，但是策划给到的一般以功能为主，流程背后的一些影响和思考一般会比较欠缺的（也是我现在欠缺的），比如：

这个行为，是一个高频行为，还是一个低频行为？

这个界面，是希望玩家在一天之内多次点击进入，执行一个简单的操作；还是希望玩家每日点击一次，执行一个相对复杂的操作？

这里可能的道具/ICON数量将会是多少？有哪些信息是一定要放到一级界面作为展示的？

这一块功能的目标/目的是怎么样的？

这一块的反馈时间大约是多长？立刻？一小时内？一天？七天？一个月？

这些信息，有可能策划清楚，但是没有考虑到界面流程的影响之中，这时候你需要跟策划讨论；有时候可能是策划自己也不清楚的，这时候让策划先把这些内容想清楚了，再来聊界面的一些东西。

比如说，对于一个一天之内需要在短时间内高频点击的界面，比如说日常这样的界面：玩家每天都需要打开，难度不会很高，奖励不算丰厚，玩家一般是在完成日常的那0.5-2个小时之间需要反复打开，这样的界面一定不能有很复杂的功能，一般是入口、引导和信息的平铺，因为一旦有一些繁琐的操作或者页面跳转，玩家跑日常的那一个小时将会非常难受。


聊清楚了这些之后，再考虑界面逻辑会比较靠谱：比如小红点提示一般适用于玩家很快就能消除的情况（而且最好不要出现的太频繁，除非你希望他很多的点击到小红点界面），如果是一个颇为长期的目标，最好不要使用主界面小红点。这个也适用于对于玩家目标的追求：短期目标强引导强提示，长期目标弱化引导和提示，但是加强视觉地位。

7.展示、信息和操作的平衡

其实一切界面都无法逃开这三个内容，这三个内容往往也是交织在一起的。

在多年前我曾经玩过一些文字游戏：北京浮生记、Q宠大乐斗以及一些早期的SLG页游，还有包括我第一期瞎聊做过的放置江湖，其实都是文字或纯文字游戏。

所谓游戏是交互艺术，现在应该没有哪个游戏还是纯文字的了，越来越多的游戏开始减少文字内容，UI，打造沉浸式的体验，整个文娱传媒界也都开始从文字越来越多的转到图、视频。

简单来说的话，信息往往由文字构成，展示往往由图构成，操作则介于二者之间，可能是简单的图形化元素加文字，也可能是场景化的界面和图片元素。

随着游戏的演变，展示的内容可以说越来越重要，乃至出现了风之旅人这样几乎没有任何文字的游戏——但完全没有信息也还是不可避免。

一个界面中，可以适当的放宽图形化元素的追求，尽量减少信息，尽量将操作融合到展示之类，当然，这三者也是需要考虑整体平衡性。

8.视觉、布局、流程、功能、目标

如果将一个界面拿过来看，我们首先看到的永远是代表体验层的视觉：颜色色调，突出展示的模型或立绘，文字信息或按钮等，这些会带给我们第一层的反馈：好不好看。

深入下去看到界面的布局，界面的结构是怎么样的？左展示右信息操作？或者是左中右？上中下？从布局来看，可以看到玩家的视觉重点和视觉路线：我们想让玩家第一眼看到什么？接下来我们想让玩家看到什么？最为常用的信息和操作应该布局在哪里？

整体的布局还会有一个规范性的问题，对于同类界面来说，最好保持布局的统一，这样玩家可以很快的根据自己的经验找到自己想要的内容。

一个界面深入地看是布局，一些相关界面深入地看则是关于流程的内容，玩家每次点击需要进行多少步操作？会不会要跨越整个界面？对于多次重复的流程有没有简便操作？一些功能有没有快捷入口？等等，梳理这些可以帮助我们了解玩家是否会过于繁琐。

界面的核心目的是为了功能的实现，因而界面是否有保证功能的完善性也十分重要。

最后是目标，我们的一切都是从目标出发，我们必须要先弄清楚我们的目标是什么，这样才能设计出好的界面。

完


作者：云飞
专栏地址：https://zhuanlan.zhihu.com/p/54112275