干货分享：《赛马娘》的UI制作里，藏了多少老练的手法？
分镜篇（上）
分镜篇（下）
建模篇（上）
建模篇（下）
对话场景篇
【干货分享：《赛马娘》的UI制作里，藏了多少老练的手法？】紧接着上几期的分享内容 ， 今天这篇文章 ， 将以《赛马娘》的养成系统开发为例 ， 分享一下从信息整理 ， 到UI设计的制作体制 ， 具体包含几个部分：
1 ， 《赛马娘》UI设计的目标；
2 ， 画面制作前的信息整理；
3 ， 建立信息显示的规则 。
01UI设计的目标
总的来说 ， 我们希望制作一套能正确显示必要的信息 ， 且能让训练师（玩家）毫不犹豫地选择自己所需内容的UI体系 。 这个目标虽然看起来简单直白 ， 但这款游戏属于本就复杂的养成模拟品类 ， 所以能承载游戏内巨量信息的UI ， 就显得极为重要 。
在制作UI的时候 ， 主要工作分为设计和视觉两个部分 。 《赛马娘》里 ， 这两块分别承担了各自的任务 。 设计部分 ， 目的就是让玩家毫不犹豫地进行选择；视觉部分 ， 目的就是拉近赛马娘和玩家的距离感 。 虽然这两部分都十分重要 ， 但本次分享主要集中讲解设计部分 。
如刚才所说 ， 《赛马娘》的UI ， 要设计得让玩家能毫不犹豫地进行选择 ， 然而 ， 如果把所有的信息都显示出来 ， 画面就会像这张图一样变得十分复杂 。 玩家就容易产生迷茫 ， 不知道自己要做什么 。 为了防止这个问题 ， 我们需要将必要的信息按照优先级顺序来显示 。
文章图片
文章图片
信息整理 ， 即整理游戏内使用信息的特征、关系性 ， 并将其掌握的工作 。 建立信息显示规则 ， 即基于掌握的内容 ， 按照不同功能版块制定规则的工作 。
原本在一般的UI制作流程 ， 是从策划敲定规格样式后 ， 直接开始进行画面排版 。 但《赛马娘》的UI制作流程 ， 是在画面排版之前 ， 增加了上述的两个步骤 。 通过加入这两个步骤 ， 制作排版时对需显示信息的选择 ， 以及对优先度的判断 ， 其精度都会得到提升 。
文章图片
文章图片
02画面制作前的信息整理
如前文提到的 ， 制作UI之前必须对信息按优先级排序 。
然而 ， 如果不掌握游戏内信息之间的关系性 ， 在每个画面上都可能随之产生信息调用的错位问题 。 如下图 ， 即便是呈现相同信息的画面 ， 调用方式只要产生错位 ， 玩家就会迷茫 ， 不知道该干什么 。 这就成了很难用的UI 。
文章图片
让我们确认一下赛马娘和比赛所包含的信息 。 如下图 ， 这是赛马娘这个要素所含的一部分信息 ， 包括名称、数值这些显而易见的信息 ， 还有姿态、图标等美术相关的信息 。 如果再算上更细节的信息 ， 量还会比这张图更大 。
文章图片
文章图片
1.查出尽可能多的信息 。 这个环节 ， 我们不考虑分类、归属 ， 尽可能多地把信息写出来 。 尽管数量多到可能跟UI没太大关系 ， 但把这些信息写出来掌握清楚才是关键所在 。
文章图片
相关经验推荐
- 《空洞骑士》技巧（九），眼花缭乱，守望者骑士的滚轮
- 上古力作《山海神迹》经典真国战回归感受青春回忆
- 《魔兽争霸3》：穿刺输出单位大盘点
- 《王国保卫战：传奇》6月上线Steam 支持简繁体中文
- 《幽灵线：东京》致玩家的一封信！三上真司解释转型
- 动作游戏《奥特伯恩》公开最新宣传片 登陆PC/PS5
- 《森林之子》宣布再次延期 预计2022年10月发售
- 《王国保卫战：传奇》将于6月在Steam推出
- 《幽灵线：东京》总监致玩家的一封信解释转型
- 网传《宝可梦：晶灿钻石/明亮珍珠》仅开发一年半