108km创始人梁伟国：Unity3D游戏UI开发经验谈

6月29日，由9Tech社区、51CTO、开源中国社区、SegmentFault主办的2013中国开发者大会于在广州白云国际会议中心隆重召开，本次大会围绕“移动·游戏·2013”展开。此外，还设有HTML5、Android、iOS、Unity、Cocos2d、Flash六大技术分会场。大会历时1天，邀请到全国IT领域专家40余位，内容涵盖当前最热门的移动、游戏开发技术及相关工具和平台的使用经验分享，是当下不容小视，首屈一指的技术盛宴。开发者将在此了解当下IT行业发展动态、技术发展趋势及技术专家们的经验分享。

在Unity专场上，108km创始人梁伟国发表了《Unity3D游戏UI开发经验谈》主题演讲。他以公司团队为案例，从流程方面介绍了从UI制作、设计到编程，并展示了UI布局和美术制作框图。他强调做技术产品一定要考虑开发和研发的区别。

108km创始人 梁伟国

以下是文字实录：

各位广州的朋友大家好！我是梁伟国，今天由我给大家讲讲Unity3D游戏UI开发。我之前是做Web的，是程序员出身，做过游戏设计师，现在是一家创业公司的创始人。从2006年到2009年，我在IBM公司工作。09年后自己做过一段时间的自由职业者，到最后才做Unity3D。从2006年后就跟朋友做了一个工作室，我最长的工作时候是在IBM，在IBM里技术方面不一定提高很多。但在同事聚会时，在里面学到最大的收获是流程和标准化的管理，500强公司的流程很严谨。之后我自己出来开公司，发现自己的工作室流程很混乱，所以今天很多是从流程方面跟大家探讨UI的经验。

首先跟大家简单介绍一下UI展示终端。最直观的是屏幕不一样，拿iPhone4、iPhone4s、iPhone5就代表了三个不同的屏幕，iPad1和iPad2也是两种不同的屏幕。跨平台第一直观就是多分辨率。

今天跟大家分享的是从UI制作、设计到编程。从设计角度开始，首先我们会考虑应该怎么做，怎样使成本降低。

UI设计三大原则

第一个设计的原则是居中布局，在2002 年、2003年像网易、新浪的网站是全屏铺满，从2005年开始就是居中，为何会有这种变化呢？是因为宽屏普及率很高，所以就会变成居中。在屏幕千变万化的情况下，我们考虑居中布局。

它大部分的功能都是通过居中的对话框来实现。因为要考虑到多分辨率，就得考虑UI的背景。如果用居中，UI的背景可以选择是否使用3D背景。大家如果玩过这个游戏，他们居中就是这个区域。

第二个原则九宫格浮动布局，这种情况下我们做了UI后就是为了在不同的分辨率上，这种九宫格的布局使用功能按钮、图表、血条等。这种浮动设计是任凭屏幕变化多大，都始终保持相对合理的位置。

第三个原则自适应尺寸，刚才两种布局是不能完全解决我们的需求，对话框按钮就是要根据屏幕拉伸。顺便提一下，Unity并没有区别iPhone、Android，全部都是自适应尺寸。

UI美术制作

上面三种方式就是UI的原则。设计的思路定下来后，就要开始美术制作，现在分享一下我做的美术框图。美术制作由草图再变成一个框图，我们游戏的框图用了AI，我可以告诉大家用AI更简单，好处更多。因为它很容易上手，任何一个策划用一天时间就能掌握基本操作。

我们在画框图时，就能很明确知道界面能够知道放下多少个按钮。画完草图后，让美术根据草图、尺寸做美术效果图，UI成品图也是在AI制作，PS也是挺好，国内的美术更喜欢用PS，画起来很简单，也很直观，国内AI高手没有那么多，游戏用AI用得不多。我们之所以用AI不用PS主要是AI是矢量，PS每个按钮还得画一次，效率太低了。整个游戏从开始到进入地图到对话框等，每一个都是可以用不同的画板、不同的分辨率，还有一个优点是导出图片很方便，用PS的话很可能一个按钮十几个图层，光选择十几个图层就很费劲。现在显示的图大概花费了两周不到，很方便。

下一步就是导出UI效果图，以前搞房地产、建筑之前，房子还没有盖，就找人喷一些效果图，让大家有直观的感觉，知道房子做出来是怎样，美术也是一样，当把AI画出来后，都有一个效果图，效果图出来后有很大意义。我们要求每一个UI页面导出效果图，存放到Unity项目文件夹，这是我们团队的规范，必须要保存到规定的文件夹里。

UI程序的实现

一个游戏的一线员工主要是策划、美术、程序三种工种组成，刚才的流程里为何要有草图和效果图，原因是草图是策划和美术之间沟通，之后用程序与美术用效果图沟通，让程序在Unity在程序中摆放。我们定了这个流程是减少策划、美术、程序之间的沟通成本，策划把草图交给美术，美术跟草图沟通好，然后程序跟美术就不会有什么纠纷。关于导出产品图，UI分了四种图片分类，普通切片、九宫格切片和填充整个区域的切片。

最后一项是讲程序，程序员拿到成品导出后，按照我们团队，就由程序员去摆放。我们程序员跟我们讲希望美术摆好再给他，但尝试过之后更麻烦。之后导出UI效果图，分层次、分组，用00_、 01_、02_序列号命名，这样会看得比较舒服，虽然这时命名多花一点时间，但是以后能节省很多工夫。接下来很重要的是程序放在哪里。整个UI对象有时比场景还多，要是自己写的程序把一段程序放在其中一个对象里，这时项目交给另一个人，他根本就不知道在哪里。我们专门用一个对象控制菜单的主逻辑，就把菜单 主逻辑绑到他身上。有时候有一些UI迫不得已还是需要那种单独把一个代码绑定在一个特定的UI对象。关于UI的布局摆放，只能靠场景组合来摆。

UI自动缩放

关于UI自动缩放程序，在这种情况下我们要设计一个UI自动缩放，我们是以iPhone4为基准，iPhone4是最中间的比例，变成iPad就会竖向拉长，iPhone5就横向拉长，实践之后效果不好，我们就按照iPhone4的长宽比来做。我们的对话框主要是以iPad的框来做，经过程序进行缩放按照比例，保证在iPhone4、iPhone5里都看得很束缚。

创业团队只需开发

关于性能问题，就是耗内存。如果确实占很大内存，可以使用动态加载、动态销毁。将独立的UI对话框制作成prefab。我作为过来人，大家做技术产品一定要考虑开发和研发的区别，特别是创业，研发是没有时间保障，开发是有明确的时间及产量保证，我们要做一个产品，产品用多少时间做是要有明确的。在北京，很多同行、团队用18个月、22个月开发一个开品，他们就是没有搞清楚开发和研发的区别。我们团队就是不太愿意要技术员研发很多时间，虽然很有帮助。但是考虑时间，目前的准则，做一款新产品研发的比例在30%以下，这样就保证了70%的工作是有时间保证。