Hilly 视觉设计 《幻城ol》悬疑站项目回顾 页面完整动画展示： 上线地址：if.baidu.com 项目背景 《幻城ol》是由郭敬明同名小说改编，百度游戏独家代理，由云南天游全力开发的一款精品MMORPG游戏，是一款中西结合的魔幻3D次时代MMORPG。 《幻城ol》悬疑官网的上线是为了配合游戏的宣传及首测前的预热,同时也都希望能够吸引更多用户的关注。 项目过程 需求方给了一个很简略的网站构思：用魔法球作为钥匙，当魔法球进入书本里后，这本书会展示网站主要内容，最后当用户浏览所有内容后，这本书会被冰封。在除了LOGO之外就没有其他游戏素材的情况下，要怎么确立整体网站风格及到最后做出整个完整的网站呢？ 前期准备 提炼关键词 《幻城ol》是根据郭敬明同名小说改编的精品游戏，所以在原著小说的影响下，部分读者会成为潜在玩家。 《幻城ol》的游戏风格为魔幻类，需求方也是给出魔法书的简略想法，且年轻人比较喜欢魔幻、玄幻、魔法、中二等主题的事物，所以网站的初定风格为神秘，魔幻。 在经过详尽的思考及项目组组员的热烈讨论后，根据游戏风格、目标受众、网站定位等提炼出关键词： 确定网站风格 根据提炼的关键词去寻找各式各样的参考。 最终确定网站风格为神秘及带有魔幻感觉，主色调为紫色。在材质上，以欧洲中世纪时期的物品做参考，以古金属及古旧的羊皮纸为主。 进行设计 分镜稿： 以下为网站各个部分的设计： 网站背景设计 根据网站整体风格，背景用紫色、黑色的暗沉颜色作为底色，用零碎的大小不一的石块制做出前后景深，搭配上淡淡烟雾，从而营造出神秘、未知的视觉气氛，宏大广阔的立体视觉感受。 Loading设计 loading的设计，我们运用了富含魔法色彩的魔法阵，再加上阵法旋转的动画，配上光效，在用户等待页面加载的时候能感受到网站的气氛。 书本设计 最后用中世纪欧式金属质感来装饰书本的封面，而无论是原著小说还是游戏设定里面都均有与冰雪相关的场景，所以使用了雪花作为主要图案，同时为配合魔幻的主题并加强立体感，在书本中间加上蓝宝石，增加书本魔幻的感觉。 在原画稿出来后，为了使翻书的动画看起来更加逼真及流畅，我们决定利用3D模型调动作来实现书本翻页这一动作。 根据设想建好模型,根据材质贴上贴图： 根据动画分镜调好每一步动作： 把书放在做好的大环境中。 在属于魔幻的各种元素中，光是不可少的元素。 我们在书页之间的缝隙中，设计了透出向外放射的冷光，翻书时更是发出耀眼的光芒，加重魔幻感觉，渲染出一种神秘、仿佛不可预测的氛围。 Menu设计 Menu的设计根据网站整体设定，用金属质感。参考欧式花纹的边缘，光滑又不失尖锐感觉。我们用冰来点缀，更是通过冰这个元素来连通网站各部分。 三角碎片概念 魔幻这个如此虚空的词，要怎样令用户有更加强烈的风格感受呢？在网站中，在魔法阵旋转、水晶球嵌入书本里以及菜单栏旁边都有一些三角碎片的存在。因为在很多时候，在我们印象中魔幻力量运作时都会带起一阵风，引入这些随风而动的碎片是为了加强魔幻感觉，把魔幻这种无实质感的感觉转化为看得见的物体。 项目展示 项目总结 1.整个网站以书本承载主要内容，而既然有顺着翻书本，当然也应该有反着翻，如果做反着翻书，在制作时间 上必须要多花一倍的时间，但由于项目时间的已经定好且网站赶着上线，所以只做了顺着翻书的交互,这也是 这个网站需要有menu的原因。 2.作为一个网站，要保证在显示最低分辨率下能够让用户看到主要内容，既然整个网站中书本是主要内容的承 载体，那么必须保证任何分辨率下书本能够被完整看到，所以我们把书打开后的宽度设为1000，书本和网站 背景分离，菜单做了响应式，这样就能保证在任何分辨率下用户都能看到网站内容了。 最后感谢参与项目的各位成员，继续努力加油！ Blog Prev Next 2015年3月10日 0 4
《幻城ol》悬疑站项目回顾
页面完整动画展示：
上线地址：if.baidu.com
项目背景
《幻城ol》是由郭敬明同名小说改编，百度游戏独家代理，由云南天游全力开发的一款精品MMORPG游戏，是一款中西结合的魔幻3D次时代MMORPG。 《幻城ol》悬疑官网的上线是为了配合游戏的宣传及首测前的预热,同时也都希望能够吸引更多用户的关注。
项目过程
需求方给了一个很简略的网站构思：用魔法球作为钥匙，当魔法球进入书本里后，这本书会展示网站主要内容，最后当用户浏览所有内容后，这本书会被冰封。在除了LOGO之外就没有其他游戏素材的情况下，要怎么确立整体网站风格及到最后做出整个完整的网站呢？
前期准备
提炼关键词
《幻城ol》是根据郭敬明同名小说改编的精品游戏，所以在原著小说的影响下，部分读者会成为潜在玩家。 《幻城ol》的游戏风格为魔幻类，需求方也是给出魔法书的简略想法，且年轻人比较喜欢魔幻、玄幻、魔法、中二等主题的事物，所以网站的初定风格为神秘，魔幻。 在经过详尽的思考及项目组组员的热烈讨论后，根据游戏风格、目标受众、网站定位等提炼出关键词：
确定网站风格
根据提炼的关键词去寻找各式各样的参考。
最终确定网站风格为神秘及带有魔幻感觉，主色调为紫色。在材质上，以欧洲中世纪时期的物品做参考，以古金属及古旧的羊皮纸为主。
进行设计
分镜稿：
以下为网站各个部分的设计：
网站背景设计
根据网站整体风格，背景用紫色、黑色的暗沉颜色作为底色，用零碎的大小不一的石块制做出前后景深，搭配上淡淡烟雾，从而营造出神秘、未知的视觉气氛，宏大广阔的立体视觉感受。
Loading设计
loading的设计，我们运用了富含魔法色彩的魔法阵，再加上阵法旋转的动画，配上光效，在用户等待页面加载的时候能感受到网站的气氛。
书本设计
最后用中世纪欧式金属质感来装饰书本的封面，而无论是原著小说还是游戏设定里面都均有与冰雪相关的场景，所以使用了雪花作为主要图案，同时为配合魔幻的主题并加强立体感，在书本中间加上蓝宝石，增加书本魔幻的感觉。
在原画稿出来后，为了使翻书的动画看起来更加逼真及流畅，我们决定利用3D模型调动作来实现书本翻页这一动作。
根据设想建好模型,根据材质贴上贴图：
根据动画分镜调好每一步动作：
把书放在做好的大环境中。
在属于魔幻的各种元素中，光是不可少的元素。
我们在书页之间的缝隙中，设计了透出向外放射的冷光，翻书时更是发出耀眼的光芒，加重魔幻感觉，渲染出一种神秘、仿佛不可预测的氛围。
Menu设计
Menu的设计根据网站整体设定，用金属质感。参考欧式花纹的边缘，光滑又不失尖锐感觉。我们用冰来点缀，更是通过冰这个元素来连通网站各部分。
三角碎片概念
魔幻这个如此虚空的词，要怎样令用户有更加强烈的风格感受呢？在网站中，在魔法阵旋转、水晶球嵌入书本里以及菜单栏旁边都有一些三角碎片的存在。因为在很多时候，在我们印象中魔幻力量运作时都会带起一阵风，引入这些随风而动的碎片是为了加强魔幻感觉，把魔幻这种无实质感的感觉转化为看得见的物体。
项目展示
项目总结
1.整个网站以书本承载主要内容，而既然有顺着翻书本，当然也应该有反着翻，如果做反着翻书，在制作时间 上必须要多花一倍的时间，但由于项目时间的已经定好且网站赶着上线，所以只做了顺着翻书的交互,这也是 这个网站需要有menu的原因。
2.作为一个网站，要保证在显示最低分辨率下能够让用户看到主要内容，既然整个网站中书本是主要内容的承 载体，那么必须保证任何分辨率下书本能够被完整看到，所以我们把书打开后的宽度设为1000，书本和网站 背景分离，菜单做了响应式，这样就能保证在任何分辨率下用户都能看到网站内容了。
最后感谢参与项目的各位成员，继续努力加油！