首页 > 网站 > WEB开发 > 正文

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

2024-04-27 14:50:34
字体:
来源:转载
供稿:网友

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

:更多精彩教程请关注三联网页设计教程 栏目,


发表评论 共有条评论
用户名: 密码:
验证码: 匿名发表