《一梦江湖》:节日活动界面动效的“意象”与“造境”

学习委员

2022-11-242989次浏览

6评论

72收藏

33点赞

分享

本文字数在2400左右

图片&GIF偏多,建议在WIFI下阅读

内容干货 金牌独家

阅读时间5-7min

学习委员推荐指数:⭐⭐⭐⭐⭐

《一梦江湖》是由网易研发的一款国民级武侠RPG手游,原作于2018年2月1日公测,2019年7月23日更新至V23.0,并于2019年7月26日正式全面升级为《一梦江湖》。新生版以全新剧情冒险、全新门派、升级重制的美术效果等全面革新内容,带来一个更加自由恣肆的武侠世界,打造更美更真实的江湖。

对于设计师而言,如何快速做出高质量,且具有突破性的界面动效设计呢?

节日活动,可以给予玩家新鲜感,对于保持玩家日活有很重要的作用。节日期间,游戏中处处都有活动的氛围,拿去年端午节举例:

 

(甜心粽粽挂件)

 

(咸系粽粽挂件)  

 

(蒲公英玩具)

 

(蹴鞠玩具)

 

 ( 端午相关坐骑)

 

(端午相关时装)

 

那界面这块要怎么表现才能锦上添花呢?

从界面设计上来说,节日活动独立于其他系统,会根据不一样的活动氛围,做独有的设计,一般情况下会面临的问题是资源量大、开发周期短。

对于设计师而言,如何快速做出高质量,且具有突破性的设计,就非常需要“套路”

 1,畅达通透的空间

 

中国山水画“三远”运动视点的美学观念和观察方法,观者随镜头的运动视点进入画内空间,运动中,时间和空间融为一体,镜头的运动视点是以“我”观物,“我”在运动之中仿佛进入时间和空间隧道,游移之间,物“我”两忘,合而为一。

 

倪瓒《渔庄秋霁图》

 

所谓“三远“,即高远、深远、平远。由此可见,“三远”即是一种将各种视角(仰视、俯视、平视)所见之自然放在同一幅作品中来表现的透视法,因而被称之为“散点透视”。

 

 

元宵节的方案,先展示月圆的闹元宵主题,同样的背景图,镜头拉远表现景深感,树上的花灯移入,依次点亮。带动玩家的运动视点进入主题。

 

(元宵节视频)

 

2,随类赋彩的色调

 

对颜色的把控在动效中也十分重要,个人一直在追求一种淡雅或凝重的色调,沉着隽雅,且根据和随应不同类型的物象,赋予其不同的色彩。

 

 

重阳节在整体黄色调的基础上,去处理出同类色且细腻的的光感。光叠加上界面上,并不会曝光,融入界面且给观者舒适的视觉感受,很好的融入界面的原有色貌。

 

(重阳节视频)

 

 

中元节这样的色调中,更融入一些清冷的色调及聚光的表现,雾气的散开,视觉引导在右下的荷花灯,渲染节日的氛围。

 

(中元节视频)

 

3,虚实相映的光影

 

(端午节视频)

 

 

相同的山水构图及主题,同样的时间线,消夏节作为接着的端午的活动,在表现形式上,也希望呈现不同的视觉感受。那这次怎么办呢?

 

(ori中的一些表现)

 

 (ori中的一些表现)

若是相同的结构,主题,除了色调更能出效果的就是光影了。

 

 

先拉了一层70%的黑色蒙版,重点做了右下角的主题氛围,利用夏夜的萤火虫来带入主题。

 

 

再利用光影效果让每个控件依次亮起,最后由月光的扩散,点亮整个界面。整个光影效果不仅与夏夜主题紧紧相扣,且光影的动态趋势,形成了一个回环。利用动态思维去引导玩家,最后回到视觉中心。

 

(消夏节视频)

 

4,不可或缺的视觉元素

 

 

 

童趣节在设计之初,我就会想着一个怎样的入场。它必定是要符合六一节日主题元素的。那想到的元素也有很多,比如说气球,还有泡泡。  但是真正做出动态效果的时候,会觉得表现形式不够好。

 

 

折腾了很久,最终还是决定,围绕着皮影这个主题,呈现视觉中心的生动。 于是我找了很多皮影相关的资料,视频。去琢磨整个动态的真实性,把设计中心放在了皮影出现时动画的细节上,且模拟一种真实的幕后操纵表演者的感觉。

 

 

(童趣节视频)

 

当每个动画都做到生动十足,在配合上光影及氛围的处理。整个界面完全融入了活动的节日氛围中。

 

红点

 

不知道大家有没有关注过“红点“ 它贯穿整个游戏,且无处不在。 在这一小小细节上,为了让整个氛围更加融入情境当中,设计上也是花了很多心思。

 

(立夏集视频)

 

立夏集的活动,整个界面夏意盎然。当把飞入的蜻蜓作为红点的元素时。很容易就联想到了“小荷才露尖尖角,早有蜻蜓立上头”的诗情画意。加入了蜻蜓的微动效,也在潜意识的引导玩家,打开界面 蜻蜓飞入,落在开启的活动玩法item上,当完成了当日玩法,蜻蜓也会飞走,消失。以此类推,每个界面的红点都能有专属的趣味去表现。

 

5,物象到心象

 

在做界面的时候,经常也会运用到拟物化的表现,那面对拟物像的设计,我们怎么去把表现做到位呢?

以新春的节日活动为例,那反问自己,为什么整个折扇打开的动态很自然?

 

 

 

 

(十二动画法则)

 

(新春视频)

 

因为拟物的表现了实物打开的规律,且更强化了节奏感,基于动画原理中的各个定律,再符合真实折扇打开运动规律的基础上,更夸张了整个惯性及动势的表现力。

 

6,情景交融

 

一个好的节日活动界面动态表现,除了具备上述的各个点之外,还有什么是能更触及人心的呢?

就拿开学季来说,前期拿到需求,和GUI沟通,在前期构图上确定界面的透视,比例,大的框架及元素。

 

 

 

视觉同学迅速找到了美术协助,出了两张带有私塾意境的效果图,这两张图在构图,光源趋向,物件丰富性等综合考量后,我们选择了第二张的构图。

光影的把控,去强化光之间的对比度,把控光的色相,光线冷暖的处理,已及还愿真实的物象表现,光源模拟“丁达尔效应”,真实穿投过胶体的状态。

 

 

摄像机的原理,物件的错位,空间上的位移。(摄像机图层错位的示意图)氛围细节的处理,隐约的光斑,伴随着竹叶和花瓣。

 

(开学季交互视频)

 

情景化的互动,玩家更能带入进界面中,具备小的精喜点。点击不同组件,都会做出相对应的动态反馈,增加更多的互动性和趣味性。

 

(开学季视频)

 

不是通过很强烈刺激的视觉表现,而是通过缓慢节奏,情趣的表现,同样给玩家很唯美的体验 ,想让玩家感觉到进入场景中的感觉。不是单一的图片渐现。 宛如进入到场景中,做了不同物件的位移,会给玩家产生视觉的错位感。有种进入场景的感觉,或者说浏览整个场景的视角。

游戏内整体节日活动的动态表现,除了具备了“造境”的元素之外,更深层次的可以突破“意象”的传达,在动态的视觉造型语言中。同样可以体现格律,气韵,结构甚至是情趣的表现点。 设计师在追求“意”即个人的主观意识审美与“象”的客观规律的结合,运用具有故事性的动态过程,表达设计的独创性去与玩家产生共鸣点。

 

  - end -  

 

评论 (6)

0/1000
网易游学APP
为热爱赋能
扫描二维码下载APP