近期热门
粉丝1745
关注 2
获赞 4857
动效交互之美【转载】

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

 !heats_icon! [复制链接]
25460 511 3 88 9年前 举报

https://newtest.cgjoy.com/forum.php?mod=attachment&aid=NDU5Mzc2fDE2NGI0ZjRkMTc0YmQwZWI1MWFhOGFlOGJmNWZiZTVjfDE3MzU1OTAzNDA%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
打赏
88
添加到收藏夹

1

点击复制链接

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

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

使用道具 举报

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

使用道具 举报


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

使用道具 举报

多谢分享
5年前
回复

使用道具 举报


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

使用道具 举报

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

使用道具 举报

666
5年前
回复

使用道具 举报

谢谢大佬
5年前
回复

使用道具 举报

666
5年前
回复

使用道具 举报

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

5年前
回复

使用道具 举报

数据加载中....
没有更多评论了
您当前使用的浏览器IE内核版本过低会导致网站显示错误

请使用高速内核浏览器或其他浏览器