这份比较长，分上中下三部分（主要是存稿有限，每次更新2000-2500字左右）。会详细说说拼界面需要考虑的点，最后并示范一次。

一、给你个理由

如果你觉得策划的工作就是写好文档就可以了，那么你面对的就是一堆山寨的界面，界面操作用起来完全不趁手。顺便推一波锅，“某某游戏也是这样的！”

如果举的游戏是赚钱的，就可以理直气壮的说，这个系统这个玩法这个界面是经过验证的！我参考（抄）的是流水xx千万的产品。

如果例子不赚钱了？呵呵，不赚钱不叫好的产品会成为你的例子吗？

身为有职业道德的游戏策划，那么low的理由能用吗？

当然可以！

只是你会被鄙视而已。Who care？只要游戏赚钱就好了！！！

可惜，我从业多年都没有碰到赚钱的游戏，所以我只能增强策划能力，保住饭碗。

主流的系统策划，除了写文档，还需要懂得如何出UI需求，因为你是最了解系统的人！作为刚入行的人或许会有一下的疑问。

我们只是策划，为什么还要拼UI？

UI、UE不是美术要做的事情？关策划什么事？

拼UI就算了，为什么还要拼得好看？

第一条：

对玩家来说，自己与系统（玩法）之间的交互，主要是通过界面作为媒介的。而策划，需要对系统内容进行梳理，选择，排列轻重，展示在界面上。

另外，你不把UI拼出来，难道还要美术把你文档一个个字看完，然后和你BB几个小时自己进行设计吗？你能保证他画的就是你要的？呵呵，只要字一多，美术妹子就会头晕。

第二条：

理由上面也说了，你出了的是一个版面的结构，你需要知道这个界面能不能摆下你要的东西，这些东西重要的怎么突出，信息什么状态等，都需要策划列举出来。能用图片表现的，千万不要用文字！

即使我们做的大部分系统都是根据原型去参考（抄）的，再结合自己的想法去进行修改或者优化。把能控制的东西都掌握在自己的手里，为游戏的成功增添小小的概率。

第三条：

最后记得，你就是底线。互联网行业中，年轻人占大多数（像我这样的老饼，真是越来越少了），保不齐你遇到个菜鸟做你的系统，照着你UI拼完后还怼你一句：你需求就是这样啊，百分百还原。

所以，你拼的界面就是最丑的底线。不要让底线一低再低。

（丑的UI我就不放界面了，免得有人发现这需求是自己画的，毕竟圈子那么小）

二、规划好比例

2.1-整体占比

每个项目初始，都会定游戏基础分辨率是多少。如果没有，那么也要和美术订一个UI的比例。

得到最大屏幕大小后，可以制定每个系统的界面大小（全屏界面可以跳过此步骤）。

但是流程不一定是现有界面，后有内容。因为你会发现有些界面的内容很多，如果你都要摆上去的话，预先设计系统的大小就不适合，因为你的内容最重要。

图片中，同样一个游戏，系统都是才有右半屏界面，但是两个占比不同。上图是主要系统用的比例，由此可以看出它的比例是经过制定的，所以才会有大量系统去统一。

下图的背包界面中，道具一行已经五个了（基本到了上限，再多就太密集了），这个就是由内容决定系统占比大小。

同样的系统中，因为需求不同，打开方式和整体占比也会不同。例如下图这款游戏，它几乎统一了所有功能系统的界面占比。在设计时，你就需要尽量在这范围内塞内容。

看到这里，同样游戏不同系统，不同游戏同样系统，都有了一定了例子，不知道大家对整体占比了解没有？

没有了解也没关系，可以随便拍脑袋定一个，定完后你继续往下设计，觉得内容塞不下又可以改整体占比的，就回头把这个给改了。

2.2-个体占比

个体占比是什么？先举一个简单的例子。

简单举几个简单的例子，让大家先有个概念。

2.2.1-文字

第一张图的文字大小基本一致，一行容纳十个中文字符。

第二张图标题比描述文字稍大，标题约一行十二个字，描述一行约十三个字。

第三章标题一行九个字，描述一行约十二个字。

为什么我会用任务引导做例子？因为他们的个体元素最简单，基本是文字。在差不多整体占比中，它个体元素占比尤为突出。

策划需要对于这些文字数量进行一定的规划，虽然一开始规划不一定准确，但需要给美术一个方向，最后再对此进行调整。

容纳文字的多寡直接代表游戏需要表达的信息量，当你是一个拥有一个复杂的游戏背景时，需要更多文字去描述，避免频繁的换行只能选择小字号。

除了文字，个体元素还有什么？

2.2.2-角色模型

角色模型顾名思义展示角色，一般全身，有些可以进行旋转或者交互。

这个最容易定，定一个大概的范围作为角色展示的大小。常见用于队伍、角色界面、或者moba选英雄，这些都需要突出角色的形象。角色作用占比越大，那么占据界面的比例越大。

同样是三个不同游戏对比，MOBA比较注重角色模型的表现，除了模型占比大之外，此范围内模型的尺寸也较大。

最左的RPG类游戏中，模型占比就稍弱了点。因为游戏类型决定RPG更关注的剧情和内容，而MOBA则是英雄本身。前者是通用，后者是特色。

2.2.3-按钮

什么是按钮，最基础肯定是点击出现各种反馈。根据反馈类型不同分为：分页/功能/确认取消/关闭等。

怎么指定按钮的尺寸，让整体界面错落有致，功能凸显？

使用频率

常用代表技能系统。

市面上基本游戏都有技能系统，而玩家在使用技能时，它们所有的按钮都是一样大小的？

又到了举例子时间，最明显的就是MOBA类技能。

根据技能的背景，我们可以分为两类：英雄技能、召唤师技能。而英雄技能分为：普攻和技能。

这三种技能，有三种大小。为什么要分大小？而不是一样的？

如果这三个是同一级别，或者策划没有需求，美术或许都会化成一样。但是仔细一想，技能间最大的差别就是使用频率。

英雄技能因为常用，是主要战斗方式，可以先制定它的大小作为标准。

普攻使用最频繁，没CD，而且又是唯一，所以可以更大一点（但是又因为不重要，颜色会偏淡）。

召唤师技能一般CD长，使用频率低，需要比标准大小更小一点。

重要性

系统的内容肯定会区分主次，因为有些内容你肯定需要突出，有些不重要。那么你就需要根据主次去安排布局。

让玩家打开这个界面时，就清楚知道我需要关注的是什么，是哪个位置。

位置选择

主要针对按钮的位置，因为按钮的位置大概都是固定的，所以预留了他们的位置，剩余才是你可以随意摆的位置。

纵观所有界面（手游），一般按钮都是在界面的底部，左右侧等等。

因为这些位置，玩家横着拿手机的时候，是最容易点击的位置。

当然也有原因是第一批做手游的人这样设计了，大家也都习惯了认同了，形成了默认的规则。如果你另外创新说更容易点击，或许更多人也不会习惯。

2.3-信息内容

2.3.1-图标

界面信息的组成大部分依靠的是图标，它可以是一个载体的显示（如头像），也可以是功能按钮，或者两者结合。

特有的图形、颜色的不同组合，给玩家传递不同信息。

市面上图标的运用基本标准化了，各位只需要看一下了解为什么。

形状

常用的图标框有正方形、圆形、六边形。

正方形利用率最高，常用于道具图标。广泛出现的内容需要制定一个标准化的展示，正方形易于排版，展示内容丰富。

圆形更圆滑，看起来占比小，感官比较好。可以想象一下，如果一个游戏，它的所有图标都是矩形，那这个界面得有多丑。可是在制作起来，一般是按照方形制作，显示圆形范围，所以这个最占空间。一般用于技能按钮、头像等，比较常用又稍微重要的按钮。

六边形一般用于科幻游戏，它的排版会比正方形多一些排列形（六个方向），不会太单调。

或许有些图标根本不需要指定图标框，如主界面的功能图标按钮。而这些就需要策划根据不同系统，不同功能去进行设计。

在不同系统运用同一图标时，会根据它的重要性不同，区分不同的大小。而这个大小策划没办法自己定，而是通过和美术商量后设计出界面的概念图而制定。

一般这些概念图，都会出几个大系统去参考。

为什么要这样呢？

因为需要统一，无论是程序还是美术都有一个统一的标准。图标放大或者压缩都会失真，为了表现好，一般会出2-3个不同尺寸的图标。

这需要在表现和资源大小上做出一定的取舍。

数量

当你确认以上内容后，需要将信息内容进行整合，然后拼凑成你需要的系统界面。从而决定界面展示的内容和整体数量。

例子：MOBA商城

举例子商城系统，是因为它包含了以上所有的内容，同时系统界面相对简单且容易理解。

要求：

商城为了更多容纳内容，一般会做成全屏，所以系统的整体尺寸为全屏。

商城分道具和时装，时装需要腾出空间展示模型的时装效果，但为了简单举例，我只说道具商城。

指定系统格式，根据不同分页，指定对应分页的内容。

分析：

1号区域是固定表头，每个界面都需要显示这些内容。所以这里发挥不多。它在这里加了一个排序的功能。

2号区域是分页区域，这个区域肯定是经过沟通的，将需要分页的系统都固定在左侧。大小一般为固定，除非一些特殊系统显示的文字信息特别多。

一般分页区都会用文字显示，因为方便理解。但是注意文字需要尽量简洁，能让玩家看一眼就知道是什么。

3号区域则为商城显示区域，每个分页内，都可以设计独立的界面显示，这里用了最简单的一个分页。

商城基础内容就是购买，需要让玩家知道购买内容，而MOBA中英雄最重要，同时数量不多，因此图标用了较大的长方形。因为它不是道具，而是人物/时装类的商品，需要更大范围展示它的美观的外形。

商品名称，固定内容没什么好说的。

商品价格，这是玩家最关心的信息。

为了凸显价格的优势，它用了显示了两类价格：原价、打折价。原价用了更小更灰的颜色，因为它不重要，只是起了对比和提示作用。

打折价才是真正的价格，包含货币类型和数量。

购买按钮，其实可以不需要的，但是弄了也可以方便小白理解。

3号区域中，宽是固定的，所以它能摆放一行的数量很容易得知。一般五个就是上限了，太多的话，玩家需要看的一行内容会过多。

第二行中，只显示了一半的信息。现在很多都采用这种显示一半的方式。首先暗示还有翻页，其次界面看起来不会太死板。

有了详细的例子，不知道大家是否对UI界面的规划有了更深层的认识了呢？

3.3.2-背景

最后说的背景，是指在简单，但是重要的系统中，你需要进行一些突出的表现。如强化锻造升星之类的系统，系统简单粗暴，但是又是收费点。

那么策划就需要思考一些包装，配合这个包装，你在界面上增加一些美观的背景。如背后来个法阵什么之类的，成功后法阵就发亮给你个特效。增强付费反馈体验。

这个不属于必要选项，但是精品游戏都需要考虑系统界面的美观性。

四、信息状态

了解拼凑UI的基本尺寸和排版内容后，我们需要进一步标注各种信息状态。列举这些状态，一是为了能让美术出资源，二是为了让程序更直观知道系统不同信息状态的表现。

4.1-信息容量

界面的信息不可能无休止的长，大部分的长度需要策划去制定，如货币上限、名称上限。再次拿上面商城的例子，那么它的UI模板是应该怎么样？

在显示名字的位置，写上显示的内容。内容的多寡，就是中文显示的上限。（譬如，MMORPG中玩家的名字我一般会写：玩家名字七个字）

出售的货币，我预估它实际上是预估5-6位左右，直接根据位数的多寡按顺序填写即可。

4.2-信息位置

信息排列的规则，如居上下左右中等。这些不需要策划列出来，只需要美术做示意图，在最后验收的时候留意一下就行。

4.3-状态类型

可点击：该按钮可以点击，属于高亮状态。

不可点击：不满足点击条件时，按钮可以变灰或者隐藏。

倒计时：显示倒计时的时间

过期：过期的表现

装备/使用中：道具或者其他内容在使用状态中

不可选择：不满足选择条件，如不能出售的道具，不能装备的道具。

空状态：系统没有任何信息时的表现，如没有好友，没有聊天信息等。

有信息状态：对应空状态，但有信息状态时的表现。

四、后面的唠叨

很多新人会纠结用什么工具，我只能说，我习惯用visio。并不是说它特别好用，而是习惯，和相对来说功能比较全。

你画界面最重要的原因是给美术，程序的一个示意图，那么你出的图就是和美术一样，是一张张的，点击后的变化，你可以用箭头给列出来。

很多新人拼出来的界面会很丑，后面我会说说怎么拼会好看一点。

如果觉得拼得丑，那么多看看大厂的UI，他们的设计肯定经过多版的推敲，一般不会错得太离谱，只需要根据自己项目稍微调整。

有人diss你的UI时，你起码可以说：虽然我知道我能力不行，但是我这个UI是抄xx公司xx游戏的。他们肯定是经过严密思考的。

哈哈，这样的情况不少见，但是策划还是需要反思一下，别人说你ui有问题，不一定是排版的问题，也有可能是信息给太多，或者不够？

再举个例子：手游的小地图加了xy坐标的输入去寻路，但是这个必要吗？

我肯定认为不必要的，因为设计者没有列出自己当前xy坐标的位置，去其他地方也是点击对象按钮。

好了吐槽完毕。