界面触点-动效展示助攻神器【附aep】

想必大家已经常看到这种DIY触点的UI动效展示了,可能因为太简单尚未发现类似教程哈哈

趁机奉上我的教程处女作,希望对新手有帮助

动效展示早已成为UI设计师们在各大设计平台上传作品时的标配,触点在展示时可以有效地提供界面操作说明和视觉引导。像Principle,Flinto,ProtoPie这些轻型的软件在动效导出时都有现成的触点,可以说十分方便,不过只有默认样式,并且一些特殊的手势并不容易直观表现(比如二指缩放)。想要得到更有趣味性、更符合界面风格的触点,还需要设计师们自己来。

今天带来一篇AE制作界面触点,模拟手指与屏幕交互常用方式的小教程。

一、单击 Tap

Step1新建合成,命名为触点,其他参数可随意

Step2按住Shift用矩形工具画一个正方形,去掉填充,描边随便给个颜色

Step3用锚点工具将缩放/旋转中心移动到图形中心,调整正方形边长40px,圆度为边长一半时正方形变为圆形(为什么不直接画圆形?后面会说~)

Step4描边宽度打上关键帧,第0帧宽度0,第10帧宽度12,第18帧宽度0,可以直接把第1个关键帧粘过来

Step5为方便观察,按U键显示仅有关键帧的属性,Shift+S键调出缩放,回到第1帧打上关键帧,缩放120%,按K键跳到下一关键帧,缩放70%,下一关键帧缩放200%

Step6单击效果的雏形就算做完了,移动时间指示器到合适的位置按N键,卡出时间轴的播放范围,空格键预览

Step7增加细节,让触点在扩散消失的过程中不只是描边宽度变化,Shift+T调出不透明度,扩散时从100降到0

Step8 继续增加细节,Command+D复制一层形状,将描边颜色复制给填充颜色,并关闭描边

Step9U键打开形状2的关键帧属性,关闭描边宽度关键帧,将最后一帧的0%不透明度复制到第8帧,并将缩放的变化范围改为30%到120%

Step10 单击效果完成,将两个形状分别命名为单击触发和单击,复制到已经做好的动效合成中,调整合适的位置和时间轴后预览

举一反三,可以很快做出长按效果

二、长按 Long Press

Step1复制单击的两个形状图层,Command+Shift+]移到最上面,分别命名为长按触发和长按,隐藏单击

Step2调整形状1最后一列关键帧,描边宽度3,不透明度70%,后移10帧后将它的末态关键帧复制一遍,再后移8帧,调整描边宽度0,缩放250%,不透明度0 

Step3将长按效果复制到做好的界面中,调整到合适的位置和时间后预览

三、滑动 Scroll

Step1复制单击图层重命名为滑动,在第0帧关闭缩放关键帧,描边宽度4,删掉描边的后两个关键帧,将不透明度的0%关键帧移到第5帧

Step2按K键跳到第10帧,给形状的大小和位置(Shift+P)属性打上关键帧,注意点开大小属性的约束比例

Step3后移8帧,大小的高度属性改为80,上移200px,可以在位置的Y轴属性原数值后面输入减200,再后移8帧复制大小属性的初态关键帧,把描边宽度的关键帧拖到这里,5帧后调为0

因为最初是画的正方形,改变圆角得到的圆形,所以这里调整单个轴的大小将得到圆角矩形的拖尾效果,如果一开始画的圆形,调整后就比较尴尬了~

Step4预览后发现动效节奏可以更紧凑,将不透明度关键帧整体后移2帧,描边宽度关键帧整体前移2帧,位置关键帧选中后按F9增加缓动效果

Step5 将滑动复制到做好的界面中,调整到合适的位置和时间后预览

根据上面几种手势,可以组合出其他的交互方式来,只需要调整细节即可

比如,长按+滑动可以得到拖拽 Drag

两个反向滑动可以得到缩放 ZOOM

以上教程中的各种参数仅供参考,更多情况下还是要根据界面动效来调整关键帧的位置和节奏,因为往往都是先做界面动效再做触点画龙点睛。当然,触点也不易做的过于复杂,抢了页面的风头就本末倒置了

好了,教程就到这里,感谢阅读~

我来评几句
登录后评论

已发表评论数()

相关站点

+订阅
热门文章