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

动效展示早已成为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复制一层形状，将描边颜色复制给填充颜色，并关闭描边

Step9  U键打开形状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

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

好了，教程就到这里，感谢阅读～

Powered by Froala Editor