基于流程的游戏UI界面设计教程

作者:课课家教育更新于： 2016-04-06 15:00:45

    现如今参与游戏设计的人越来越多，设计方法也越来越多样化，其中有基于流程的游戏设计和通过UI设计手机游戏，两者都有什么不同呢以及分别是如何实现的呢？我们一起学习。

      基于流程的手机游戏设计指的是这样一个概念：规划玩家在手机游戏中点击操作的所有界面，即“玩家操作流程设计”。当诸如Zynga或者GREE这样的大型手机游戏工作室在基于“流程”进行UI/UX（用户界面/用户体验）的常规设计时，许多手机应用设计师仍然在按照功能来设计独立的界面。

　　在本文中我将介绍以下内容：

　　界面VS流程概念：基于界面VS基于流程的设计概念，以及为什么流程在游戏设计中如此重要。

　　推荐方法：使用Google Docs Drawings，我认为优于当前许多工作室现有的设计方式

　　1、界面VS流程

　　在过去的几年里，我有幸和各种游戏设计师共事，我注意到许多设计师依然通过界面来设计手机游戏。这意味着什么？

　　我看到的典型流程是这样的，先列出一个囊括全部功能的游戏设计文档。然后，游戏设计师和UI美术师分解这些功能并设计出每个功能的游戏界面。小型工作室一般都使用这种方法，特别是工作室有来至于主机和PC平台的游戏设计师。手机应用常常都是一大串界面，这让主机和PC游戏设计师很不习惯。在《使命召唤》的“核心循环”中玩家才看到几个界面？

　　基于界面的UI/游戏设计

　　这种游戏设计方法，对于整体设计来说是非常原始的。他忽略了玩家和游戏交互的所有形式，即玩家操作流程，而这构成了全部的用户体验。

　　一个更好的方法是，在设计时仔细斟酌玩家在游戏中的操作流程，以及玩家在所有界面间的切换方式。

　　基于流程的UI/游戏设计

　　这个方法有2点好处：

　　了解用户体验：这样更容易了解玩家在手机游戏中的体验。

　　避免功能迸发：通过规划出所有的流程，而不是局限于界面层面，游戏设计师就不会因为没预料到的新功能和意外事件而措手不及。

　　根据我的个人经验，我敢说存在许多没有规划好所有的流程而导致出现意外事件和追加功能需求的情况。对于每一个按钮和可点击的图标，试想一个问题：“如果玩家点击它会发生什么事情？”，这样你会经常意外地发现某些地方缺失功能。

　　很多时候，我们预估开发X功能需要10天时间，但是因为遗漏了功能，导致我们需要额外追加5天时间。当需要新增美术资源和UI时甚至会进一步加剧开发迟滞。

　　基于流程的设计方法能帮助你制定更精确的开发计划。

　　2、推荐方法：GoogleDrawing->大纲视图

　　以我的经验，设计游戏的流程通常使用以下2种方法中的一种

　　（1）巨型AI文件：用这种方法，ui设计师会用AI（Adobe Illustrator：美国ADOBE公司推出的专业矢量绘图工具）画出整套的界面和流程。最后会产生一张有甚至30多个界面的巨大图片，有时还会充满箭头和注释。当然也可以把它按照功能进行分解，但是依然会产生一堆界面，而且这样你很难看到当前功能之外的内容。

　　（2）大纲视图：另一种方式是在网页或者图片上有序的排列所有界面，比如排成3-4列。这个方法让查看界面和一般流程变得简单明了。

　　当然了，这两种方法都有弊端：

　　巨型AI文件：

　　¡太复杂了，让你难以看清这张大图的脉络，因为图片太大了，诸多的细节会让你晕头转向。

　　大纲视图：

　　¡在网页格式中会缺少流程的注释和箭头

　　两个方法的共同弊端：

　　¡缺乏个体和群体保障

　　¡不能分享、协作、允许多名用户一起制作流程文件

　　¡很难添加并分享评价

　　¡没有记录修改历史的版本控制

　　¡缺少诸如编辑、插入图片、复制之类的关键功能

　　那么有更好的解决方案吗？

　　上述的这些内容都可以通过GoogleDocs实现！在GoogleDocsDrawing中，采取编辑3列大纲视图的方法，不仅可以添加注释和箭头外，还能协作，和使用Google内置的漂亮功能。

　　方法是：

　　1、工具：前往GoogleDocs然后新建一个绘图

　　1）点击“文件”->“页面设置”，将宽度修改为12”，长度则取决于你想设计多少界面

　　2）点击“视图”->100%

　　3）点击“视图”->“对齐”->“网格”（我发现按照网格布线很方便）

　　2、调整结构：把画布规划为3列（因此每列会略小于3”）

　　3、拖放：选中任意线条或定型界面，拖放到适当的地方

　　4、注释和箭头：适当地添加注释和界面标题。用箭头指引按钮触发事件或者后续界面。

　　5、编辑区：关联界面流程，然后把编辑区移到尚未设计完成的界面处。保持所有内容都是最新的。

　　6、安全和协作：设置安全许可，然后分配给能够和你协作的人。你还能给他留些备注。

　　方法总结：

　　1、GoogleDrawing:在游戏设计初期，用简单的黑白元件创建一个包括所有流程的文件

　　2、不断优化核心设计：和你的设计团队一起不断优化所有主体流程，直到确定核心设计。使用GoogleDrawing的协作和编辑功能会让优化工作变得简单很多。

　　3、转向大纲视图：一旦完成核心设计，你就可以根据需要添加功能和优化设计。为了更容易掌握游戏整体设计，用最新的界面或元件创建一个大纲视图模拟页面，并即时更新。

　　1）在宏观层面会丢失一些注释/评价/评论，但是你可以在具体的功能设计或优化时添加这些内容。

　　2）先考量一下新功能的复杂度和规模，然后使用GoogleDrawing制作具体的功能流程文件，当做好后就可以添加到大纲视图里。