分镜篇（上）
分镜篇（下）
建模篇（上）
建模篇（下）
对话场景篇
译/依光流
紧接着上几期的分享内容，本日这篇文章，将以《赛马娘》的养成系统开拓为例，分享一下从信息整理，到UI设计的制作系统编制，详细包含几个部分：
1，《赛马娘》UI设计的目标；
2，画面制作前的信息整理；
3，建立信息显示的规则。
01 UI设计的目标
总的来说，我们希望制作一套能精确显示必要的信息，且能让演习师（玩家）绝不犹豫地选择自己所需内容的UI体系。这个目标虽然看起来大略直白，但这款游戏属于本就繁芜的养成仿照品类，以是能承载游戏内巨量信息的UI，就显得极为主要。
在制作UI的时候，紧张事情分为设计和视觉两个部分。《赛马娘》里，这两块分别承担了各自的任务。设计部分，目的便是让玩家绝不犹豫地进行选择；视觉部分，目的便是拉近赛马娘和玩家的间隔感。虽然这两部分都十分主要，但本次分享紧张集中讲解设计部分。
如刚才所说，《赛马娘》的UI，要设计得让玩家能绝不犹豫地进行选择，然而，如果把所有的信息都显示出来，画面就会像这张图一样变得十分繁芜。玩家就随意马虎产生迷茫，不知道自己要做什么。为了防止这个问题，我们须要将必要的信息按照优先级顺序来显示。
如下图，在整理干净后的画面里，玩家就可以把精力集中到自己想做的事情上。以是制作UI的人，必须清楚地理解那些须要精确排序温柔次利用的信息。
因此，我们认为，在设计画面之前，信息整理和建立信息显示规则，是非常主要的前置事情。顺便一提，信息整理和建立信息显示规则，也是《赛马娘》开拓过程中的专用词汇。
信息整理，即整理游戏内利用信息的特色、关系性，并将其节制的事情。建立信息显示规则，即基于节制的内容，按照不同功能版块制订规则的事情。
原来在一样平常的UI制作流程，是从策划敲定规格样式后，直接开始进行画面排版。但《赛马娘》的UI制作流程，是在画面排版之前，增加了上述的两个步骤。通过加入这两个步骤，制作排版时对需显示信息的选择，以及对优先度的判断，其精度都会得到提升。
《赛马娘》的游戏内容，大致可以分为养成、强化、军队赛三块，而贯穿所有内容的要素，可以概括为赛马娘和比赛这两点。因此，我们首先须要对赛马娘和比赛进行信息整理，以此为根本，再决定信息显示的规则，接着构思画面布局。末了才能实现不会让玩家产生迷茫的UI设计。
下面就以养成体系为例，详细看这两大环节的制作方法。
02 画面制作前的信息整理
如前文提到的，制作UI之前必须对信息按优先级排序。
然而，如果不节制游戏内信息之间的关系性，在每个画面上都可能随之产生信息调用的错位问题。如下图，即便是呈现相同信息的画面，调用办法只要产生错位，玩家就会迷茫，不知道该干什么。这就成了很难用的UI。
为了避免这些问题，我们首先对游戏最紧张的赛马娘和比赛，这两块信息进行了整理。下面以养成系统为例，看一下详细的整理方法。
让我们确认一下赛马娘和比赛所包含的信息。如下图，这是赛马娘这个要素所含的一部分信息，包括名称、数值这些显而易见的信息，还有姿态、图标等美术干系的信息。如果再算上更细节的信息，量还会比这张图更大。
下图是比赛干系的信息。能看到，这个中包括了策划平时没有节制的各种信息。像这样把赛马娘和比赛干系的信息铺开，就能看到个中实在分门别类包含了诸多细节。
接下来，便是按流程将上述信息进行整理。我们在开拓过程中，紧张根据以下五个步骤来进行信息整理。
1.查出尽可能多的信息。这个环节，我们不考虑分类、归属，尽可能多地把信息写出来。只管数量多到可能跟UI没太大关系，但把这些信息写出来节制清楚才是关键所在。
2.将得到的信息分组。由于这里的信息跨度较大，以是并非严谨准确的分组，而是划定大致的分类，重点是将信息整理得清爽一些。
3.分层处理。通过分层处理，来节制哪些信息存在从属关系，同时，之前相对暧昧的信息，经由处理之后，关系也会变得详细起来。比如角色的适应属性，到底是适应马场，还是适应间隔，经由分层，这里就能分清楚这些信息。
4.整理各个信息的关系。比如养成目标和参赛条件的关系。赛马娘养成目标的一半内容，以及参赛条件的一半内容，都是粉丝数量，以是这里是干系性的关键点。
再深入来看，把这两块信息提炼出来，就能创造为了参加目标中的比赛，必须知足参赛粉丝的数量条件，因此须要让赛马娘参加其他的比赛积累粉丝数。进一步来说，理解这一关系性之后，我们就能得出还差多少粉丝数才足以达到必要粉丝数。
这样一来，我们就能明白，哪怕是粉丝数这一个单独的信息，根据不同情形，它的调用方法也存在很多种。
5.节制信息流。末了这个环节，便是节制“信息会如何根据玩家选择而改变”的全体流程。下图是养成系统下可进行的行为的图标，根据不同的选择会追加不同的信息，比如进行了演习，角色根本能力会增加，体力会低落，大致就这个觉得。
节制了信息流往后，就可以节制信息变革频率和整体的流程。也能便于我们精密检讨通用信息和独立信息。
通过上述五个步骤，我们对赛马娘和比赛的干系信息都进行了整理。下图便是整理后的赛马娘干系的部分信息，能看到，除了常见的根本能力值，还包含了大量的信息，乃至于比赛干系的信息。
下面是比赛干系的信息。只管这些信息并不一定会根据玩家操作而改变，但对付“在比赛里得胜”这一目的而言是必不可少的信息。因此，《赛马娘》的UI制作里，比赛信息会根据必要性来显示，这也是让玩家不产生迷茫的一大要点。
接下来，通过刚才的信息整理，我们可以判断出，以下几个信息在养成系统里是最为主要的。养成目标、体力、干劲这三项，是决定玩家行为的基本指针；粉丝数是关乎赛马娘和比赛，对养成目标来说的主要信息；根本能力和技能是赛马娘的主要强化要素，在养成里最吸引眼球；适应性决定了赛马娘对马场、间隔、脚力的适应力数据，是参赛的判断依据。
基于这种判断，养成系统的UI，尽可能将信息的显示办法统一，在各个画面里，合营玩家想要做的事情，将对应信息的显示优先度提高。这虽然听起来是一套天经地义的设计，但我们认为，针对不同功能模块节制主要信息，是制作UI的过程中十分主要的一件事。
下图是我们在实际开拓过程中，进行信息整理的照片。信息整理的目的，是为了整理和节制信息特色和关系性，以是我们不会用电脑，而是用纸笔来进行，常日会有多名员工相互谈论，将要用到的信息写在白板上，再逐步节制它们的特色和关系性，然后以此为根本，制作了育成系统的版面。
此外，通过整理信息，我们也能提高UI制作过程的效率。如果不整理信息，会导致在每次制作画面和功能UI时，都须要确认必要信息的优先级和呈现机遇；此外只要有一个画面里的信息用场和其他画面不同，就随意马虎在其他画面产生错位，导致返工修正。然而，进行信息整理后，必要信息和优先级能轻松地确定下来，可以缩短制作流程和提高制作效率。这样一来，整系统编制作UI的效率都会得到提升。
总体来说，在制作UI画面之前，我们会通过查找、分组、分层、关联、信息流五个步骤将游戏内干系信息进行整理，来节制信息特色和关系性，然后筛选出对应系统的重点信息。一方面衔接后续制作，另一方面从根本长进步UI制作的效率。
信息整理虽然是件天经地义的事，但通过完善的流程，可以让全体UI制作的根本更加牢固和有效。
03 建立信息显示的规则
整理好信息往后，就须要建立信息显示的规则。信息显示规则，即在信息特色和关系性的根本上，划定功能性层面的职能、优先度等规则。在《赛马娘》里，我们在根据系统功能决定了信息显示规则往后，才开始制作UI画面的布局，以此创作更便于玩家利用的UI。
在制订信息显示规则的时候，我们最重视的两个要点，分别是保持统一性和预留弹性空间。统一性，指的是让各个UI通过保持一定的规律，达到玩家不迷失落的浸染。弹性空间，则是在改变样式、追加内容时，能让开发者轻松应对的机制。
我们还是以养成系统为例，来看详细的做法。
1.保持统一性。
如下图，养成系统的UI界面可以分为4个根本区域，基于信息整理所节制的内容，决定好每个区域要显示的信息，并保持统一性。我们来细看各个区域。
最上面的区域，显示的是勾引养成方向干系的信息。我们将育成系统里的养成目标、剩余回合、体力、干劲的优先级提高，放在这个区域显示。这些内容相称于页眉，以是我们会故意识地让它总是显示在各个子页面同一位置。
然后，屏幕中上位置的第二块区域，紧张用来显示赞助嬉戏的信息，此外，这里还时常用来显示赛马娘的形象以及演出干系的诸多信息。在养成系统的主界面里，会用来显示赛马娘的class、建议，以及形象。
然后画面中下的第三部分，紧张用来显示嬉戏的紧张信息，并用来显示按键，属于游戏中玩家视线最集中的部分。在养成主界面里，这块区域会时候显示角色的根本能力值，让这一与养成时候干系的信息，能随时表示出角色的发展状态。此外，养成的基本行动指令按键，也都放在这个区域。
末了是最下面的第四部分，是作为页脚承载通用操作功能的区域。养成界面里，则用来显示跳过、更换、活动缩短设定、养成历史信息、主菜单等操作按钮和干系信息。
在这四个区域中，第一部分的页眉和第四部分的页脚，基本上不论在哪个界面里，显示的内容都是相同的，此外的两个部分，虽然会根据不同画面来调度必须显示的信息，但会根据画面本身的功能以及优先级别来考虑和决定终极要显示的信息。
养成系统里，我们也根据各个子页面的基本构成逻辑，决定了功能和优先级往后，再谈论对应页面要显示的信息。我们详细来解释以下几个子页面的案例。
首先是演习页面。如下图，左侧是养成主界面，右侧是演习子页面。能看到，除了页眉页脚，我们还将角色根本能力数值做了固定显示，使其保持与养成主页面的同等性。相称于，我们通过固定显示根本能力值，让玩家把稳到通过演习变强的赛马娘。
其次是活动事宜页面。活动事宜会伴随养成行为的进行而发生，会涉及到各种画面之间的迁移。因此，我们也会故意识地固定住页眉页脚。只管活动事宜页面看起来并不须要显示页眉信息，但为了让玩家时候留神养成目标、剩余回合数、体力和干劲，我们还是进行了保留。
末了是比赛选择界面。由于这部分涉及赛马娘和比赛两部分的信息，以是到底要选择表示什么信息，是一件非常困难的事情。如图，页眉页脚还是跟其他一样，做了固定显示处理。然后，根据子页面构造哀求，我们在第三个区域内呈现了用来判断如何选择比赛的干系信息。
但是，如果显示了所有的比赛信息，会显得过于繁芜，以是我们经由筛选，终极保留了赛马娘比拟赛的适应性、估量得到粉丝量等优先级特殊高的信息。以上便是保持统一性的做法。
2.预留弹性空间。
随着开拓推进，时常会碰着须要变更、追加样式的情形。而UI，常常受其影响，涌现变更、修正的必要性。这时候，如果只优先于变更、追加面前的UI样式而进行修正，很可能造成必要信息的优先级变更，使得UI用起来变得费劲。比如下图这种比较常见的情形，在修正UI的时候，不管三七二十一先在画面有空的地方追加信息，或者缩小原有信息的占用空间。
然而，如果事先定好信息显示的规则，要变动和追加信息的时候，应对起来也能更加灵巧。我们以开拓过程中，在追加养成目标时候的情形为例，详细来看一下做法。
下图是游戏开拓早期的养成流程。当时的系统流程，是玩家先在平时进行演习和安歇，然后在月末的时候选择参赛。因此，与养成环节行家动方针有关的体力和干劲，以及作为强化要素的角色根本能力值和技能，就成了最主要的信息。
然而开拓过程中追加了养成目标这一版块，于是养成系统也变动为以“达成赛马娘的养成目标”为主的模式。这样一来，养成过程中的行动方针里，增加了育成目标这个项目，强化要素里，增加了粉丝数这个要素。于是，就须要对UI进行调度，并追加一些新的画面和演出表现。
首先，如果不达成养成目标，养造诣不会结束，以是养成目标就成了玩家必须时常留神的信息，因此，我们提高了养成目标的优先级，并制订了这个显示规则。又基于这个规则，将这个信息融入了页眉的UI里。
其次，为了加强“达成养成目标”这一阶段性终点给玩家的印象，我们还追加了用来显示目标开始和目标达成的新画面和演出效果。对我们来说，主要的信息不仅须要提高优先级，还须要配备专用的演出效果和画面，将其突出。
与这个案例类似，由于定好了画面的基本构造和信息显示规则，我们在现有UI上不论进行修正还是追加演出效果，都能轻松自若地逐一应对。
接下来，由于粉丝数这一信息变主要了，我们还调度了一部分信息显示规则加以应对。游戏中所有养成目标，都与粉丝数挂钩，因此，被作为参赛条件的粉丝数，也随着养成目标这一机制的追加，而提高了优先级。
因此，我们也须要反省在各个画面里显示粉丝数。下面是实际修正后显示粉丝数的画面，它们在原来并没有显示这一信息，但随着信息优先级提高，也对应着做了调度。
下面是比赛选择画面的调度。调度之前，我们还显示了褒奖道具等信息，但由于要让玩家意识到粉丝数，干脆就删了这些次要信息。这也属于我们根据粉丝数优先级，对信息显示规则做出的调度。
然后是比赛结果画面的调度。这一部分原来是显示了粉丝数的，然而后来进一步提升了优先级，用金字塔样式，来强调赛马娘会随着粉丝数增加而提高Class。属于从视觉上增加关注度的修正手腕。
如上，虽然在UI里须要追加养成目标这个项目，但我们通过页眉的微调、新画面和演出效果的追加、现有画面调度粉丝数表示方法，实现了这个诉求。而且由于事先方案好了信息显示规则，使得我们在变更和追加UI样式的时候，也能做到基本不改变UI布局，就完成这些修正。
下面我们用大略的画面来总结一下“建立信息显示规则”的主要性。下图是不该用信息显示规则而进行的UI布局设计案例，虽然看起来每个画面都挺整洁的，但是细节信息险些都显示在不同的位置，考虑到画面切换的情形，这套UI可以说用起来非常未便利。
然而，事先建立好信息显示规则后，即便画面不同，所表示的信息也是高度统一的，这样就能做出一套画面切换起来很舒畅、用起来很方便的UI。
加上设计好的图标往后，就成了我们游戏中的效果。
以是，通过设定规则，让UI设计思路保持统一性并预留调度的弹性空间，这样就能担保玩家用起来舒畅，开拓者调度起来也方便。
总体来看，事先整理信息，有助于我们对游戏信息特色和关系的精确理解，方案显示规则，能让我们制作出便于利用且便于调度的UI体系。因此在我们看来，开拓过程中融入这两个制作环节，是一件十分主要的事。
文章来源：
https://www.youtube.com/user/CygamesChannel/videos