当前位置: 首页 > 设计教程 > 网页设计教程 > 《剑灵》游戏预告网站设计回顾总结(2)

《剑灵》游戏预告网站设计回顾总结(2)

图3.呈现方式同图1,整体以灰色调为主,动势整齐的硬水墨铺大背景。

图4.摒弃传统的种族/职业交互方式,以大角色形象为主画面视觉元素(相当于二级页的处理),大面积的硬水墨(质感轻盈而形态干脆)叠加高饱和色彩,最大化呈现《剑灵》美术优势,强化整体视觉冲击。

经过与项目组/品牌经理/多媒体设计师等分析及讨论,决定取消最初设定的"种族/职业选择页",采取职业展示为主,种族介绍为辅的呈现方式,即图4方案获得共识。

职业二级页部分

资源支持方面,韩方并未如事先沟通的那样提供带Alpha通道的职业技能序列帧,而直接用"线性色键"做视频抠图提取,黑色边缘明显且粗糙,十分不理想,或将导致二级页的职业技能展示效果大打折扣!

《剑灵》游戏预告网站设计回顾总结

经与动画设计同事沟通,背景特别添加了一笔100%纯黑的泼墨(与首页透明彩墨的处理方式并不一致),同时为了平衡"介绍性图文展示"与"技能视频展示"的面积比例,适当控制了墨的范围大小,视频则采用"滤色"模式叠放在墨上,保证了最大程度还原视频效果。

《剑灵》游戏预告网站设计回顾总结

图1.内容居中,以原定的原画主形象及金色背景做效果展示。

图2.整体灰色调的设计,与图1不同,替换了原尺寸视频帧的效果展示(角色技能的边缘很毛糙)。

图3.技能视频部分,与韩方沟通并提供大尺寸视频帧后的展示效果(视频超出墨迹部分变得透明,不甚理想)。

图4.内容居左,以游戏截图为背景的展示效果(视频超出墨迹部分依然显得透明,但效果可以接受)。

综合考量,显然,图4方案得以优化执行。

五、设计执行与制作

确定风格后,设计执行阶段主要进行了大面积的视觉元素的重新绘制或优化处理,以及各个栏目的表现方式等工作:

1.修饰主要角色素材并进行视觉聚焦处理,为职业角色设定五种色彩及相应的水墨走势,并配套喷溅墨滴的运用。

2.职业二级页的介绍性图文展示进行了较多的排版调整,绘制蛛网图等。

3.其他栏目均在当前页上以80%黑幕遮盖的弹出形式呈现。

最终效果

职业形象展示:

《剑灵》游戏预告网站设计回顾总结
《剑灵》游戏预告网站设计回顾总结

职业详细介绍:

《剑灵》游戏预告网站设计回顾总结
《剑灵》游戏预告网站设计回顾总结

其他部分页面:

《剑灵》游戏预告网站设计回顾总结
《剑灵》游戏预告网站设计回顾总结

动画制作环节:

一个互动站的制作,设计稿的完成或许才仅仅进行了项目进度的一半,动画实现当中的交互逻辑梳理,以及设计配套调整亦是极为关键,《剑灵》预告站在这个阶段进行的较明显的视觉优化约二十条,交互优化则更多一些,此处不再赘述。

六、一些遗憾(或算是收获)

《剑灵》的视觉素材或让很多项目艳羡,但当我们需要整理出一套风格便于整合收纳进这个互动站的素材时,依然捉襟见肘,比如:市面上好评如潮的2D原画等均不能匹配互动站的新意设定。所以,与其他很多网站项目一样,制约——处处可见。

资源制约:

1.职业技能视频的序列帧,韩方未能提供,致使最终上线效果中压缩后的技能视频展示部分显得十分模糊。

2.对应技能视频中的角色形象大图,韩方未能提供,致使职业角色形象与二级页的技能视频角色不对应,十分遗憾。

3.高清游戏截图,韩方未能提供,最终使用的大尺寸截图均为网上搜索的韩国玩家素材处理完成。

4.素材需求中提出的山石植物等组件,韩方未能提供,在游戏截图中抠图+绘制补缺完成,最终效果显生硬。

时间制约:

1.为了赶2011年TGC的档期,原定的"种族版本"的预告站因受限工期未能出炉。

2.职业技能视频对应的技能图标中文名称无法及时确定,最终只能以"技能一/二/三"代替,使技能视频的信息传达略显苍白。

★ 其他:

交互设计中未能考虑周全,在后期需要活动推广等渠道时不能很好支撑。

七、结语

设计《剑灵》互动站的这个过程很艰辛,但于我个人是一次升华,不同于曾效力的《QQ仙侠传》,同为水墨与时尚调性的结合,这次是另一种风格或另一个维度的尝试,亦来的更加酣畅淋漓,学习驾驭水墨的过程,很难忘。

尽管有些微掣肘,但依然希望做到《剑灵》预告站最终感觉能如一位绝世美女,步履姗姗,翩若惊鸿,每一度转身都凌厉而风姿优雅,每一幕切换都璀璨而光华夺目......

她,为你期待,为你而来!

Illustrator使用3D效果制作网页按钮
Photoshop制作透明大气的导航按钮