Design A 首先,我设计了一些添加卡牌,卡牌数量数字变化和鼠标停留在按钮的反馈特效,让玩家知道自己当前的行为,同时也可以烘托整体交互体验的氛围(对于视频来说),可以通过Design A视频看到这些细节
(上图)我试图使用卡牌飞过覆盖屏幕来转场,可以看到UI层的东西还是硬切消失
(上图)UI层的东西已经有淡入淡出了,加上前景的视觉聚焦,背景突兀的问题可以得到很好地解决。前景的卡牌我希望不只是划过屏幕,而是与即将出现的卡组有所关联,因此我想象卡牌从左侧飞出(UI层的卡组列表在左侧),然后汇聚到中间,像是飞进卡组(卡牌容器)
(上图)数量多且速度快的物体(这里是卡牌)会导致玩家视觉失焦,因此我添加一个识别度相对高的金色光,这样做有几点好处 1、光的颜色与卡牌对比强,很容易抓住视觉焦点,引导玩家的视觉路径,同时又与最终卡组的UI用色和光呼应,不会很突兀 2、光的出现增加了画面的空间感(可以从gif中看到),在造型上做了一些近大远小的处理 3、除了造型,光还可以很好的控制节奏,快出、慢绕、停留、飞进。利用起承转合减少动画的生硬和无聊,提升玩家的预期
(上图)这是关于UI层的动画,UI层因为除了视觉元素,还有很多控件,因此动画通常要比较快,不能拖沓 这里我采用整体滑出滑入的方式切换,它们看起来几乎是同时的,这里有几点思考 1、它们不是视焦区域,相反它们应该为了突出前景的动画而被相对弱化 2、弱化的方式尽量柔和,因此淡入淡出是很好的选择,而位移的曲线也尽量平滑 3、方向尽量自然,例如左侧列表向左撤出,右侧区域出场方向全部向下,入场界面的UI元素也是向下运动的,避免冲突而引发错误的视觉误导 4、为此,在左侧卡组列表撤出之后我加入时间短且明度低的黄色光,一是在列表撤出后给予玩家反馈,并让玩家的目光短暂停留于此,二是可以和左侧即将出现的动画起点位置重合产生关联
Design B 在这个设计中,我希望利用分割UI界面来产生区域和层次感,它的感觉就像"拉抽屉"
(上图)首先,根据UI功能,我将整个屏幕分割成3块区域,黄色区域为功能区,玩家只有需要的时候才会查看这里,大多数时间玩家的视线会停留在青色区域和紫色区域,玩家的常规操作是点击按钮Done后即完成卡组构筑的创建,视觉随即从青色区域转移到紫色区域(因为新创建的卡组会在紫色区域显示)
(上图)这里有一个对于动效来说很重要的概念,对预期值的把控 简而言之,不论我们是做UI界面,UX,还是动效,都是为了带给用户体验上的感受,玩家通过视觉会对触觉(交互)听觉(音效)等产生一个预期,因此对于玩家不易预判到的事物我们应该尝试解释和铺垫,以降低玩家预期与实际体验之间的差距 举例说明,现在有一个金属材质的宝箱等玩家开启,玩家通过视觉可以判断出它是个刚体,对它的材质属性,应有的音效类型,运动的基本规律是有一个常识性的认知的,因此对于它的动效呈现也有一定的预期框架 回到动效,在最开始我使用一条金色线条(这个线条特效当时游戏中也有)分割开左右两个界面区域,当它垂直下来的时候,给玩家一个区域分别开来的铺垫和预期,如果没有它,界面同时被滑动难免容易产生一些混乱和失焦。另一个作用是这道光虽然有强度变化,但在下来后并未完全消失,而是低明度的存在一小段时间,它的滞后消失承接了界面滑出和滑入两个部分,并且更容易使玩家的视线在此停留,为后面从左到右的滑出动画做视觉起点
(上图)同样为了顺应界面元素的滑入方向,我使用一个纹理快速飘过,将视觉中心重新引导到卡组区域(紫色区域),使玩家看清新生成的卡组,以强调玩家完成卡组构筑这个行为的反馈和仪式感,同时速度需要比较快,不要阻挡玩家操作
(上图)这里我做了一个拟物化的处理,我把卡组想象成一个实体的卡包或卡盒(事实上我是注意到UI应该是如此设计的,可以看到上面有一个出入口),为此我添加了一个卡片塞入卡包的动画,我希望在一定程度上弥补数字卡牌游戏对于玩家拥有实体卡牌的那种拥有感方面的不足
Design C 这个设计思路比较抽象,想象成卡牌列表中的卡牌以能量的存在方式被抽出汇聚到屏幕中央“炸”出新卡组,然后直接飞到新卡组的位置,整个过程一气呵成 因为这只是个草稿,用来表达idea,因此显得很粗糙,无论是设计上还是制作上都有很多可优化的空间,这里就不过多赘述了
在作品页不方便编辑段落,完整版请看右侧说明链接
白银的作品:
-共22个作品-

符文之地传说艺术测试

原创
这是去年时候我参与的Riot Game的ArtTest,非常高兴能参与它。 对我来说它更像是一段旅途,从中我收获了很多,很感谢在那期间帮助我的任何人。 避免有些小伙伴不怎么逛文章区漏掉白嫖知识点: https://www.magesbox.com/article/detail/id/1505.html
2021-10-27 19:38
56505
44
376
确定
评论(44)
dmt240
大佬,多张卡牌飞入的路径动画是怎么做的,有什么好的方法来做吗
回复
9天前
白银
回复
dmt240
直接撒粒子就完了
回复
7天前
水水水
白银大大 牛逼
回复
450天前
小邋遢
作者找工作吗
回复
718天前
wjp
给个邀请码xdm
回复
733天前
wjp
回复
wjp
还有个没用过ka5lw76SuPel
回复
733天前
养猫画画的舒克
回复
wjp
去哪儿用邀请码 第一天来
回复
531天前
dalei
1FaaTO80D7uu 白银大佬课程的邀请码 需要的自取~
回复
741天前
Weeknd
不懂就问,这是unity做的吗?
回复
864天前
彳余夕丶犬灬
优秀的大佬
回复
876天前
野原新之助
还好我及时转行,现在每天卖煎饼果子,一天可以赚100多,比做特效收入高了好几倍。生活改善了不少,现在人也飘飘然了,改天准备把我的车卖了,二八大杠骑着有点硌脚。下个月要是能多卖几个煎饼果子,冲个小黄车年度vip,实现单车自由。希望网易的员工少吃点食堂,多出来照顾下我的生意,让我早日圆梦,实现单车自由
回复
877天前
0711
这不讲两节课
回复
878天前
老陆
还好我及时转行,现在每天卖煎饼果子,一天可以赚100多,比做特效收入高了好几倍。生活改善了不少,现在人也飘飘然了,改天准备把我的车卖了,二八大杠骑着有点硌脚。下个月要是能多卖几个煎饼果子,冲个小黄车年度vip,实现单车自由。希望网易的员工少吃点食堂,多出来照顾下我的生意,让我早日圆梦,实现单车自由
回复
878天前
Leaf
我希望在一定程度上弥补数字卡牌游戏对于玩家拥有实体卡牌的那种拥有感方面的不足,这句话戳中我了
回复
879天前
爱的战士
舒服!!!!!
回复
880天前
坏熊猫
我的银神 我就等你教程了
回复
881天前
离叹曲
衫哥帅气。。。。
回复
881天前
白银
回复
离叹曲
老同学哈哈
回复
860天前
fatecet
坐等白银大佬的教程
回复
881天前
空仪笑
白银大佬出教程,我一定买,即使我已经不做特效了,买回去烧香供起来,太屌了。
回复
881天前
hank
牛牛牛
回复
881天前
动效菊哥
向您学习!!!
回复
881天前
特效夸夸公司王牌职业夸手
这才是专业级,新出的那个动效教程是什么玩意
回复
881天前
Ademon
这才是UI专业级特效 这网站的UI教程显得就是弟中弟
回复
881天前
特效夸夸公司王牌职业夸手
回复
Ademon
那个就是坑钱的,don't face
回复
881天前
老K
付费的内容能免费看到,谢谢老师分享。
回复
881天前
刺猬
nb
回复
881天前
橘子皮
白银大佬要出教程咯
回复
881天前
京沅
细节丰富,特效与UI融合恰当,不做作,漂亮!
回复
882天前
黑猫
我超,是白银
回复
882天前
Coda
爱了
回复
882天前
224
是那个男人!
回复
882天前
Various
舒服了
回复
882天前
白云
舒服了
回复
883天前
Humphrey
今年我种得一千亩柠檬树结果了,需要购买得请联系我~~谢谢~~
回复
883天前
淡若清风
舒服了
回复
883天前
丶End
舒服了
回复
883天前
大笔兜
大佬做的东西就是丝滑
回复
883天前
没有更多啦~