如何主导一套游戏官网的设计

6年前发布

原创文章 / 多领域 / 观点
donghuili19 原创,如需商业用途或转载请与donghuili19联系,谢谢配合。

关于这次的分享,我将以《黑金》正式版官网为例,给大家讲述下我设计这版官网的一些思路、中间遇到的问题以及解决方案,希望能和大家一起探讨:如何主导一套游戏官网的设计。

关于这次的分享,我将以《黑金》正式版官网为例,给大家讲述下我设计这版官网的一些思路、中间遇到的问题以及解决方案,希望能和大家一起探讨:如何主导一套游戏官网的设计。

1、开工前的讨论

在做上一版的概念版官网的时候,主要是交代清楚了游戏的故事背景、阵营关系、种族职业初步介绍。当时介于游戏开发的阶段,很多东西其实是点到为止。就像是说看一本书看了个序。


在做正式版官网的时候,和市场方面、产品经理做了比较详细的沟通,该版本官网除了满足游戏正常运营所需要的一些功能外,也希望延续概念版的基础,把之前讲到的一些东西铺开来,讲的更详尽。


这几点主要包括:故事背景、种族职业、蒸汽文化。主要以专题方式呈现。

2、设计思路整理

第一版官网方案:

概念:阵营强对抗,强调敌对势力,加强PK代入感。(以下方案为概念模拟稿,借用了其他产品的形象图,敬请谅解。)





第二版官网方案:

概念:时间轴。以黑金各种族出现的年代作为时间轴,讲述该种族出现的时期发生的故事、出现的新事物等等。(以下为DEMO演示)



第三版官网方案:

概念:蒸汽与魔幻。官网分为两个入口,内容上面做区分,画面表现上提供两套皮肤,玩家选择自己喜欢的阵营进入查看相关的信息。(以下方案为概念模拟稿,借用了其他产品的形象图,敬请谅解。)



第四版官网方案:

概念:蒸汽朋克。已经进去到了游戏开测前的阶段,所以在之前和几个概念类型的官网都已经不在适用,要完全按游戏正式的官网来做。经过第三版蒸汽与魔幻的对比后,选择了更能引起人们关注的“蒸汽朋克”风。



3、设计中的思考

1、蒸汽朋克版官网

我们都知道,一般构成网页设计的几个要素:主视觉、背景图、SLOGAN、UI。

主视觉:这方面有较大的选择余地。IP中心提供了几个比较成型的角色。


UI:前期的资料收集非常重要,看看我的文件包吧。



选定了个原型,做出了大致的设定;


提交艺术中心帮忙细化,包括后期的FLASH效果。

SLOGAN:结合整体页面的效果,在SLOGAN的设计上面,没有做过多、复杂的效果。


动画:最终加入了一些蒸汽\气压表针\齿轮转动等效果,起到了锦上添花的效果。


2、专题

所有专题在设计之初有一个构想,官网选择了蒸汽朋克这个元素来设计,是希望人们在脑海中加深对黑金蒸汽文化的印象,既然我们植入了一个符号,为什么不在更多专题里面不断的加深这个印象呢?或许是蒸汽元素,又或许只是一个“符号”。所以在专题设计的时候,我采取了比较具象的、形式感的布局,并且一直延续下去,形成一种风格。



故事专题:

符号:书本。添加蒸汽元素,以书本的形式来进行包装,原本想做成电子杂志,后来种种原因取消了。



种族职业:

符号:旗帜。以旗帜来区分不同的阵营,就像古代的两军对垒,都要扛上自家的旗帜。



这里面顺便要提到一点是素材的前期准备。

有人说里面的种族的图画的很赞,整体结构也比较好。关于这个我要告诉大家的是:在提素材需求的时候,你的脑海中要对画面有个比较清晰的描绘。更重要的是你要对游戏的概论有比较充分的了解。



双面黑金:

符号:圆形。以圆形为视觉中心,左右两边采用对抗的形式,展示不同的“双面”概念:双面魔幻、双面CEO、双面风格、双面阵营、双面玩法。



4、项目总结

黑金项目中值得思考和分享的几个点:


1、引导页头图过高,采用几秒后定位到下面的主界面,这样的交互体验好吗?

2、页面头部未必非要有人物主形象。

3、在做banner的时候,官网、论坛、登录器尽量保持比例统一。

4、不要忽视一些截图素材,其实有时候截图更能让用户直观的感受的游戏内的真实度。

5、论坛、新闻之类的块面,因为有大量的文字信息,尽量不要使用反白的效果,长时间阅读会让眼睛产生疲劳感。当然,也别用很纯、饱和度很高的颜色,会被刺瞎的。



5、一点建议

总结几个点吧:

1、  了解游戏信息:包括故事背景、职业、特色玩法、价值观、……千万不要忽视文字资料。

2、  收集市场信息:竞品游戏的官网,分析他们的优势与劣势。分析我们的用户群,他们的喜好与习惯。了解测试时间、推广计划等市场计划。

3、  原型的讨论:别把自己当个美工,我们不只是一个画画的、美工,积极的去参与到原型的讨论中,你能从中了解到产品经理们的思路,同时也能把你的想法反馈给他们,有时候你的点子或许会给别人一些启发。

4、  巧妇的米:去找项目的主美多要些资源吧,什么花花草草、动物妖怪、NPC大叔、十八般武艺啦,别嫌多,总有用到的时候。如果能说服他给你开个他们内部的共享权限那就更好了。

5、  头脑风暴:能做的都做完了,要是你还没有找到感觉,那就拉上难兄难弟们一起头脑风暴一下吧。总有些帮助的。

6、  上线跟踪:有人说我们是像素眼,其实我们是有一种追求完美的心,上线前看看最终呈现的效果和你预期的有没有差别吧。



最后,做了那么多的工作,别忘了适时做个总结哦! 谢谢!



104
- 位站酷推荐设计师推荐 -

声明:站酷(ZCOOL)内网友所发表的所有内容及言论仅代表其本人,并不反映任何站酷(ZCOOL)之意见及观点。

    没有新消息