粉丝2307
关注 0
获赞 8574
动效交互之美【转载】

[教程] 动效交互之美【转载】

 !heats_icon! [复制链接]
29822 511 3 89 8年前 举报

https://www.cgjoy.com/forum.php?mod=attachment&aid=NDU5Mzc2fGQyM2FlNjQwZjRkYzFhNWFmNTJjZWUyZjI3MzA2NTRkfDE3MTM4ODQ5NjM%3D&request=yes&_f=.mp4

RIOT拳头设计在11月份发布了最近的排位赛新界面Demo视频。本期的KrDesign以此为例,为大家解析动效在交互中的应用。


过渡的艺术

交互动效最基本的功能就是展现界面与界面之接的转换,界面的开启与关闭。而效果就表现在触发与结束的过程中。表现清晰的层级关系,自然的引出与结束,动效有着承上启下的重要作用。

01.gif
在寻求快速高效交互的同时,游戏越来越偏向去告诉玩家内容是“怎么来的”又是“怎么没的”。把整个过程展现给玩家,让游戏的交互体验更加流畅和合理。生硬的出现正在被淘汰。


02.gif
附着在主体上的控件响应主体回弹,可以放大动效的视觉效果。加以动态模糊,也可以突出速度感。


03.gif

多层动画的组合显示,缩短动效总时间,保持动效持续的节奏感,层次感。动效趋向于均匀的展现信息而不是一条一条的展现。拼装组合的方式呈现一块信息,在视觉上感受上会比直接整块竖线来得更酷炫。人们喜欢碎片化物体并组装起来的畅快感。


04.gif
05.gif
这段效果有两种组合来制造良好的节奏感。


06.gif
更多的追求拟物化,更强的代入感和沉浸感是游戏一直追求的要点,交互动效需要根据材质,背景,氛围更好的把握住真实世界中的表现形式,这样才会有精彩自然的过渡。


精彩的指引

复杂的操作流在合理指引下也很容易被玩家短时间接受,并慢慢成为玩家的一种习惯。动效在指引中起着烘托重点,吸引玩家视线的作用,减少了玩家学习的成本。“接下来点这里~”。

07.gif
以光效的运用(亮暗,透明,辉光等)突出重点,让玩家视觉重点的转移。(开启功能,状态转变,突出玩家自身,重要信息提示等)

玩家自身的信息出现在颜色和光线强度上明显有区别,突出了玩家自身的参与感与成就感。


08.gif
玩家选定了第一和第二倾向位置会后,下方的排队按钮瞬间变色发出辉光,告诉玩家此按钮已经被激活,指引玩家点击。


09.gif

以尺寸的变化(回弹,突变等)突出重点,让玩家视觉重点的转移。(突出玩家自身信息,提示信息,鼠标悬停点击状态改变等)。玩家自身的位置,图标更大,同时带有弹出框显示,弹出窗带有回弹效果。玩家会被短时间尺寸的变化所吸引。


10.gif
以位置的变动(快速转移等)突出重点,让玩家视觉重点转移到结束位置。(获得,开启功能,归类等)


细节的亮点

11.gif
微小的动效亮点也会为游戏加分不少。合适的地方对细节把握,加入一些创意,给玩家眼前一亮的感觉。


享受等待

12.gif
几张原画,一根进度条,或者一行倒计时,已经成为了最保守且基本的配置。更佳的方案是动态画面与音效去吸引玩家的视觉与听觉感受,让等待变得有感染力,且让玩家期待即将到来的内容。


在各类游戏中等待时间相对较长的有:登录游戏、转场加载、游戏更新、匹配玩家、刷新界面等。

在回合制游戏中,比较典型的等待是:等待其他玩家操作;

在竞技类游戏中,比较典型的等待是:组队过程、匹配过程、死亡等待等。


指尖动效

手游的动效正在向端游靠拢,但是在手机性能和尺寸的限制下,对动效的重视和感染力还有待提高。目前手游中比较优秀的动效表现,不会让玩家感到“华丽”,而是让玩家感受自然、合理、契合游戏内容。


轻量级快速的转场,不一定就是简单的透明出现,试着增加过渡的内容,让转场亲切自然。

13.jpg
利用上帝视角,岛屿与大地图之间的转场增加云层作为过渡,伴随着缩进效果,使得层次清晰简单,转场自然。《海岛奇兵》


14.jpg
利用盒子的打开关闭,各种界面类似于抽屉抽出的方式来实现转场,配合木质音效,身临其境。《炉石传说》  


在等待的处理上,手游也可以让玩家在等待中有事可以做,在倒计时的基础上不妨加一些可视的元素,增加等待与时间的概念。

15.jpg

很符合游戏元素的雷达作为海岛奇兵中等待状态的提醒,同时玩家可以对已经处于的场景进行缩放移动,让玩家在等待中有事可以做。《海岛奇兵》


引线燃烧的方式增加了玩家对时间的概念,给人以急迫的感觉,“时间不等人!”是倒计时想传达给玩家的信息。炉石在视觉上表达的很到位。《炉石传说》

16.jpg
给玩家不经意的亮点。手游可交互的方式与端游大有不同,利用这一特性,在玩家不经意一个滑动,或者手机的倾斜,触发出一些细节动效,那会让玩家对游戏的友好度上升不少。惊喜永远是乘法!

第一次玩炉石,随便乱点了周围的装饰建筑,触发了动画,给我惊艳的感觉。当时就很佩服设计师对用户心理的把握,之后没事点击建筑成了等待对方玩家操作时的一点小乐趣。《炉石传说》

                                                                         by KrDesign  2015-12-20








3
点赞
0
打赏
89
添加到收藏夹

1

点击复制链接

使用微信扫码分享
一次扣10个券
全部评论511
您需要登录后才可以回帖 登录 | 立即注册

什么奇葩字体颜色
3年前
回复

使用道具 举报

非常感谢,新手刚做动效不久
4年前
回复

使用道具 举报


资源甚好,发帖艰辛,且阅且珍惜!
4年前
回复

使用道具 举报

多谢分享
4年前
回复

使用道具 举报


希望能跟CGJOY一起成长。同时也希望CGJOY越办越好。
4年前
回复

使用道具 举报

谢谢楼主分享~
4年前
回复

使用道具 举报

666
4年前
回复

使用道具 举报

谢谢大佬
5年前
回复

使用道具 举报

666
5年前
回复

使用道具 举报

CG券怎么获得?发帖可以赚3张券,发精华帖,可以获得20张券!发资源,定好价格,用户购买的越多,你得到的就越多!~

5年前
回复

使用道具 举报

数据加载中....
没有更多评论了