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

发表于2015-11-27
评论0 1k浏览

想免费获取内部独家PPT资料库?观看行业大牛直播?点击加入腾讯游戏学院游戏美术行业精英群

167422913

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

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

周末了,祝大家都有个好心情!


神仙道从网页到手机经验谈之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设计的朋友,这篇文章从发现到采集,再到整合到移动端上,也好比他神仙道网页改成手机端一样,多次修改才定稿!希望大家能从中获得点什么,在未来的工作当中,能够少走一些弯路!

原文链接

著作权归作者所有,商业转载请联系作者获得授权,非商业转载请注明出处。

如社区发表内容存在侵权行为,您可以点击这里查看侵权投诉指引

游戏学院公众号二维码
腾讯游戏学院
微信公众号

提供更专业的游戏知识学习平台