近期热门
粉丝2694
关注 3
获赞 10662
怎样成为一个给力的游戏UI设计师 (转)

[UI] 怎样成为一个给力的游戏UI设计师 (转)

[复制链接]
3643 1 0 0 10年前 举报
神仙道从网页到手机经验谈之UI篇

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

习惯性的在wikipedia里寻找答案,
不过…,很抱歉这次wikipedia中文里没有现成的答案让我偷懒
好吧,我们用笨一点的方法进行。把“游戏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设计师的视角叙述。)


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


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


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

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


什么,你说这些应该由策划做?
好吧,虽然策划有整理文档,告诉设计师方向。但文档太多,几天内彻底读透几百MB的策划书是不可能的。
万幸神仙道IOS版的游戏UI最初是由神仙道网页版的游戏UI设计师制作。
并且他一直在玩神仙道网页版,也玩各种各样的手机游戏。
所以我们很快重新理清了游戏结构,并且完成了第一版的界面设计。
【插图,第一版手机UI】
001 (2).jpg
001 (3).jpg
001 (4).jpg
001 (5).jpg
UI提交给程序团队的兄弟们。
岁月如梭,开发无日月,时间“咻”的一下就过去了。



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

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


001 (10).jpg 001 (11).jpg
2个月的折腾,我们觉得第一套UI不适合手机。
万幸很快有了新的UI,也就是当前神仙道IOS版的UI,见图:
【插图,手机版新UI】
001 (12).jpg 001 (13).jpg 001 (14).jpg 001 (16).jpg 001 (17).jpg
新UI考虑到,非精准的触摸操作,强度比鼠标低。如果按钮足够大,多一次操作在手机上并不会是绝对的负担。并且由于多了角色选择面板,其他面板的内容变少了,不再拥挤。一切都变得美好。具体的感受,请看视频。

【插入视频】
001 (18).jpg


神仙道IOS版操作演示



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


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


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


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

无办法,游戏UI设计师只能跟策划一起胡思乱想,并且把这些胡思乱想尽可能的描绘出来。之后我们做出了这些系统。
【插图,封灵】
001 (20).jpg
【插图,护送取经】
001 (21).jpg
【插图,吉星高照】
001 (22).jpg



001 (15).jpg
0
点赞
0
打赏
0
添加到收藏夹

0

点击复制链接

使用微信扫码分享
一次扣10个券
全部评论1
您需要登录后才可以回帖 登录

{:7_275:}{:7_275:}
10年前
回复

使用道具 举报

您当前使用的浏览器IE内核版本过低会导致网站显示错误

请使用高速内核浏览器或其他浏览器