神仙道UI手机篇

神仙道从网页到手机经验谈之UI篇

如果要做好一件事情，我们必须对它寻根究底。
首先我们需要定义下“游戏UI设计师”。
因为“游戏UI设计师”不是“游戏设计师”，也不仅仅只是“UI设计师”。
我们必须搞清楚它到底是什么，这样才好进行下一步。

习惯性的在wikipedia里寻找答案，
不过…，很抱歉这次wikipedia中文里没有现成的答案让我偷懒
（PS：别问我wikipedia英文里有没有，我E文很烂全靠老婆，不过现在凌晨3点50分，她在睡觉。）
好吧，我们用笨一点的方法进行。把“游戏UI设计师”，拆成“游戏”，“UI”，“设计师”3个词来寻找答案。

游戏，人的一种娱乐活动，也可以指这种活动过程。

UI，（User Interface ，也称使用者界面）是系统和用户之间进行交互和信息交换的媒介，它实现信息的内部形式与人类可以接受形式之间的转换。

设计师，是对设计事物之人的一种范称。

通过上面3个词的定义，我们可以总结得出：
游戏UI设计师，是指通过设计界面让游戏系统和玩家之间能进行互动娱乐的人

好了，理论结束。我是草莽之徒，相比理论更讲究实战。
接下来让我们以【神仙道手机版】的开发过程为例，说说游戏UI设计师。


首先，项目背景：
2011.7 神仙道网页版获得成功
2011.8.23，大家决定移植神仙道网页版到IOS上
2011.12.22，神仙道IOS版 Version1.1发布，坦白说体验并不好
2012.2.18，在神仙道IOS版 Version1.3.4时，大家接受了新的UI设计思路进行调整
2012.5.3 ，发布了神仙道IOS版 Version2 ，效果显著。
2012.5.12，发布了神仙道IOS版 Version2.1，补充了很多游戏内容。
之后神仙道IOS版稳定更新，很快在app store畅销榜爬到第一，并呆了很久。
（PS：光荣属于团队的每个人，这篇文章仅以游戏UI设计师的视角叙述。）


从项目背景可以得知，手机版的需求是在网页版成功后产生的。
这意味着什么呢？
哈，游戏设计之初完全没有考虑过手机版！


好吧，我喜欢的作家九把刀说过“人生就是不停地战斗！”
并且他还说过“因为无所畏惧，即使时不我予，英雄也能逆天而行。”
既然喜欢的作家都这么说了，那没办法，硬上了。


将网页游戏神仙道移植到手机上的第一个问题是“神仙道网页版内容真的太多，而手机的画面太小。”
【插图，网页版与手机版画面对比】


这个问题导致我们必须对内容进行调整，重新省视游戏结构。
只有对网页版的游戏内容进行筛选，保留主干去掉不必要的系统才有可能实现移植。
这要求游戏UI设计师要非常熟悉游戏的结构，特别是对游戏内容的熟悉。


什么，你说这些应该由策划做？
好吧，虽然策划有整理文档，告诉设计师方向。但文档太多，几天内彻底读透几百MB的策划书是不可能的。
万幸神仙道IOS版的游戏UI最初是由神仙道网页版的游戏UI设计师制作。
并且他一直在玩神仙道网页版，也玩各种各样的手机游戏。
所以我们很快重新理清了游戏结构，并且完成了第一版的界面设计。
【插图，第一版手机UI】

更多精彩图片 请登录

之后我们将这版UI提交给程序团队的兄弟们。
岁月如梭，开发无日月，时间“咻”的一下就过去了。



很快我们看到了游戏，不过是这样的：
【插图，手机版最初的实现图】

更多精彩图片 请登录

更多精彩图片 请登录

这时遇到了项目的第二个问题“最初的神仙道IOS版操作起来比我们想像的麻烦，并且痛苦”，为什么呢？
1、因为手机界面比我们想像的还小，许多按钮很难点到。很多时候需要非常精确的猛戳才有概率戳中。
而且最初为了界面美观面板没有全屏，压缩了内容的空间，加剧了操作负担。
2、角色选择的表现不清晰，选择角色的操作困难，要命的是游戏里大部分面板都需要进行角色选择。
以上是主要问题，小问题多如繁星，我们就不数星星了。
（PS：已经凌晨6点25了。脑子有点不清楚了……）
【插图，手机版旧版本人物面板、背包面板关闭按钮】

更多精彩图片 请登录

更多精彩图片 请登录

最终经过将近2个月的折腾，我们觉得第一套UI不适合手机。
万幸很快有了新的UI，也就是当前神仙道IOS版的UI，见图：
【插图，手机版新UI】

更多精彩图片 请登录

更多精彩图片 请登录

新UI考虑到，非精准的触摸操作，强度比鼠标低。如果按钮足够大，多一次操作在手机上并不会是绝对的负担。并且由于多了角色选择面板，其他面板的内容变少了，不再拥挤。一切都变得美好。具体的感受，请看视频。

【插入视频】

更多精彩图片 请登录

神仙道IOS版操作演示
http://v.youku.com/v_show/id_XNTAyMDI0MjA4.html


接下来我们讲讲，项目的第三个问题“游戏实现和设计原稿存在差异”
【插图，实现后的图片】

更多精彩图片 请登录

有很多地方偏差了几像素，偏差了几像素，偏差了几像素……
偏差多了和原设计稿的感受完全不同，看起来略山寨。但这个问题是比较好解决的。
随着持续开发程序团队的兄弟做得越来越细腻，和设计稿的差异越来越小。
有些细节设计也伴随着开发迭代补充。罗马非一日建成，游戏细节也不是一个通宵就能搞定。
我们的游戏UI设计师，在比较空闲时经常会把已完成的文档再拿出来整一整。
当细节调整比较多时再一起更新。


随着项目的持续开发，这时神仙道IOS版，算是结构清晰，操作友好，细节精致
（PS：其实游戏还有很多要调整的…）


在测试稳定后，我们开放了免费下载。神仙道IOS版很快爬到畅销榜第一。
玩家对游戏内容不断的深入，我们不断的开发新的游戏内容。


这时我们遇到了第四个问题“怎么让新系统看起来更有趣”
策划希望游戏UI设计师能设计出又酷又帅并且华丽到爆表的系统，以保持玩家对游戏的兴趣

无办法，游戏UI设计师只能跟策划一起胡思乱想，并且把这些胡思乱想尽可能的描绘出来。之后我们做出了这些系统。
【插图，封灵】

更多精彩图片 请登录

【插图，护送取经】

更多精彩图片 请登录

【插图，吉星高照】

更多精彩图片 请登录

：）
（PS：嗯，早上7点12分，天彻底亮了。老婆要起床骂我了。）

游戏UI设计师与神仙道IOS版的故事就先讲到这里吧。
最后照例，我们需要来个总结。

一个给力的游戏UI设计师，需要：
1、了解游戏，至少是半个策划
2、懂交互，让玩家界面操作无挫折感
3、对细节有追求，1像素的偏差也要调
4、要娱乐，让最生硬的系统也能跳舞

给力！果断回帖！

顶楼主···

谢谢楼主，大好人

这个很实用~~

谢谢楼主，大好人

此帖必火！鉴定完毕！

看了楼主的帖子，我只想说一句很好很强大！

谢谢楼主

很受用，感谢楼主。

感谢楼主分享~  太经典～

给力

我和我的小伙伴们都惊呆了！

膜拜神贴，后面的请保持队形~

膜拜神贴，后面的请保持队形~

非常棒

帅~~~~~~~~~~~~~~~~~~~

多谢分享！！！！！！！！！！！！！