千万流水是怎么办到的—神仙道IOS版的成功秘诀

今天和大家分享知乎上的一篇文章，个人觉得对从未或者正在参与 页游移植到手游的设计狮或者工作团队都是有很大的借鉴和帮助的！

文章很长，不妨找个地方，泡杯咖啡，静下心来慢慢品味

周末了，祝大家都有个好心情！

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

直接进入正题：【神仙道手机版】是如何成功页游转手游的！

首先，项目背景：
2011年7月 神仙道网页版获得成功
2011年8月-2012年5月 神仙道IOS版成功上市 并推出多个版本
2012年6月-至今   持续占领IOS免费榜TOP10  
（PS：光荣属于团队的每个人，这篇文章仅以游戏UI设计师的视角叙述。）

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

好吧，我喜欢的作家九把刀说过“人生就是不停地战斗！”
并且他还说过“因为无所畏惧，即使 时不我予，英雄也能逆天而行。”
既然喜欢的作家都这么说了，那没办法，硬上了。
将网页游戏神仙道移植到手机上的第一个问题是“神仙道网页版内容真的太多，而手机的画面太小。”

                  【看下图】

都教授：哎呀吗呀：这么多东西能挤进一个爱疯4的屏幕？玩家会玩的顺畅，那我就吃翔！

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

设计狮摔桌子：什么，这些应该由策划做吧，老子才拿一份工资？

叶斌：好吧，虽然策划有整理文档，告诉设计狮方向。但文档太多，几天内彻底读透几百MB的策划书是不可能的。
万幸神仙道IOS版的游戏UI最初是由神仙道网页版的游戏UI设计狮制作。
并且他一直在玩神仙道网页版，也玩各种各样的手机游戏。

都教授：这里暂停一下，让我来给没玩过网游神仙道的朋友们解释下：

页游一个屏幕=12个主图标+20几个副级图标+无数人物角色+场景+聊天+地图框+主角信息！

手游一个屏幕=15个主次按钮+场景+若干人物+主角信息+地图框（再多，游戏就花掉了）

所以我说这不可能(继续)

叶斌：所以我们很快重新理清了游戏结构，并且完成了第一版的界面设计。

【插图，第一版手机UI】

主界面控制在15个按钮以内，头像去除，保留关键信息，NPC和场景微调，使得整个主界面在清爽的情况下又保留了游戏的主要玩法！

物品按钮改大，切换武将和背包页面全部换成滑动切换。

放大玄关按钮，全屏显示，只保留体力信息！

继续保留主要信息，剔除其他一切可有可无的元素！

之后我们将这版UI提交给程序团队的兄弟们。

岁月如梭，开发无日月，时间“咻”的一下就过去了。视乎一切都是完美的！
很快我们看到了游戏，不过是这样的：
      【插图，手机版最初的实现图】

等等，  和我设计的有出入！按钮怎么变小了？

                  为毛没全屏

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

都教授：看到这里，我深有同感，实际上设计狮通过完稿之后，很多时候程序和策划，甚至是运营的人都会最终来参一脚，强迫你修改已经定下的方案！结果可能好的东西被改差了，差的地方变得更差了！

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

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

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

有很多地方偏差了几像素，偏差了几像素，偏差了几像素……
偏差多了和原设计稿的感受完全不同，看起来略山寨。但这个问题是比较好解决的。

随着持续开发程序团队的兄弟做得越来越细腻，和设计稿的差异越来越小。

有些细节设计也伴随着开发迭代补充。罗马非一日建成，游戏细节也不是一个通宵就能搞定。
我们的游戏UI设计师，在比较空闲时经常会把已完成的文档再拿出来整一整。

当细节调整比较多时再一起更新。

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

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

这时我们遇到了第四个问题“怎么让新系统看起来更有趣”
策划希望游戏UI设计师能设计出又酷又帅并且华丽到爆表的系统，以保持玩家对游戏的兴趣。
无办法，游戏UI设计师只能跟策划一起胡思乱想，并且把这些胡思乱想尽可能的描绘出来。之后我们做出了这些系统。
【插图，封灵】

             【插图，护送取经】

              【插图，吉星高照】

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

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

     ------------{我是分割线}------------

一口气能看完整篇文章的，都是极有耐心和想学习游戏UI设计的朋友，这篇文章从发现到采集，再到整合到移动端上，也好比他神仙道网页改成手机端一样，多次修改才定稿！希望大家能从中获得点什么，在未来的工作当中，能够少走一些弯路！