Hilly

《幻城ol》悬疑站项目回顾

 页面完整动画展示:

 

上线地址:if.baidu.com

 

 

33

项目背景

《幻城ol》是由郭敬明同名小说改编,百度游戏独家代理,由云南天游全力开发的一款精品MMORPG游戏,是一款中西结合的魔幻3D次时代MMORPG。 《幻城ol》悬疑官网的上线是为了配合游戏的宣传及首测前的预热,同时也都希望能够吸引更多用户的关注。

2

项目过程

需求方给了一个很简略的网站构思:用魔法球作为钥匙,当魔法球进入书本里后,这本书会展示网站主要内容,最后当用户浏览所有内容后,这本书会被冰封。在除了LOGO之外就没有其他游戏素材的情况下,要怎么确立整体网站风格及到最后做出整个完整的网站呢?

前期准备

提炼关键词

《幻城ol》是根据郭敬明同名小说改编的精品游戏,所以在原著小说的影响下,部分读者会成为潜在玩家。 《幻城ol》的游戏风格为魔幻类,需求方也是给出魔法书的简略想法,且年轻人比较喜欢魔幻、玄幻、魔法、中二等主题的事物,所以网站的初定风格为神秘,魔幻。 在经过详尽的思考及项目组组员的热烈讨论后,根据游戏风格、目标受众、网站定位等提炼出关键词:

 3

确定网站风格

根据提炼的关键词去寻找各式各样的参考。

cankao2

最终确定网站风格为神秘及带有魔幻感觉,主色调为紫色。在材质上,以欧洲中世纪时期的物品做参考,以古金属及古旧的羊皮纸为主。

进行设计

分镜稿:

7

以下为网站各个部分的设计:

网站背景设计

根据网站整体风格,背景用紫色、黑色的暗沉颜色作为底色,用零碎的大小不一的石块制做出前后景深,搭配上淡淡烟雾,从而营造出神秘、未知的视觉气氛,宏大广阔的立体视觉感受。

8

Loading设计

loading的设计,我们运用了富含魔法色彩的魔法阵,再加上阵法旋转的动画,配上光效,在用户等待页面加载的时候能感受到网站的气氛。

9

书本设计

最后用中世纪欧式金属质感来装饰书本的封面,而无论是原著小说还是游戏设定里面都均有与冰雪相关的场景,所以使用了雪花作为主要图案,同时为配合魔幻的主题并加强立体感,在书本中间加上蓝宝石,增加书本魔幻的感觉。

11

在原画稿出来后,为了使翻书的动画看起来更加逼真及流畅,我们决定利用3D模型调动作来实现书本翻页这一动作。

根据设想建好模型,根据材质贴上贴图:

12-1

根据动画分镜调好每一步动作:

14-1

把书放在做好的大环境中。

16

在属于魔幻的各种元素中,光是不可少的元素。

我们在书页之间的缝隙中,设计了透出向外放射的冷光,翻书时更是发出耀眼的光芒,加重魔幻感觉,渲染出一种神秘、仿佛不可预测的氛围。

19

Menu设计

Menu的设计根据网站整体设定,用金属质感。参考欧式花纹的边缘,光滑又不失尖锐感觉。我们用冰来点缀,更是通过冰这个元素来连通网站各部分。

21-menu

22

三角碎片概念

魔幻这个如此虚空的词,要怎样令用户有更加强烈的风格感受呢?在网站中,在魔法阵旋转、水晶球嵌入书本里以及菜单栏旁边都有一些三角碎片的存在。因为在很多时候,在我们印象中魔幻力量运作时都会带起一阵风,引入这些随风而动的碎片是为了加强魔幻感觉,把魔幻这种无实质感的感觉转化为看得见的物体。

23

24

25

项目展示

26

27

28

29

30

31

32

33

项目总结

1.整个网站以书本承载主要内容,而既然有顺着翻书本,当然也应该有反着翻,如果做反着翻书,在制作时间 上必须要多花一倍的时间,但由于项目时间的已经定好且网站赶着上线,所以只做了顺着翻书的交互,这也是 这个网站需要有menu的原因。

2.作为一个网站,要保证在显示最低分辨率下能够让用户看到主要内容,既然整个网站中书本是主要内容的承 载体,那么必须保证任何分辨率下书本能够被完整看到,所以我们把书打开后的宽度设为1000,书本和网站 背景分离,菜单做了响应式,这样就能保证在任何分辨率下用户都能看到网站内容了。

最后感谢参与项目的各位成员,继续努力加油!

发表评论