恭喜你成为UI中国推荐设计师 (详情)
//百度统计 20220402 uicn

您的意见是我们 UI 中国进步的动力!
点击立即反馈按钮,发表您的意见!
立即反馈
QQ群反馈
您也可以加入UI中国官方反馈群进行反馈!
群号:302892100
备注:反馈问题后@管理员能让我们及时了解您的意见

提交需求

赛事与广告咨询合作,请填写需求表单,我们会在第一时间与您联系!

0/20
0/200

设计大赛

  • 设计大赛
  • 发布广告
  • 发布招聘
  • 其它需求

提交完成
感谢您对UI中国的支持和信赖!
界面触点-动效展示助攻神器【附aep】
0.0°
2020-02-01 原创文章 教程 举报 2972 75 47 4

想必大家已经常看到这种DIY触点的UI动效展示了,可能因为太简单尚未发现类似教程哈哈,趁机奉上我的教程处女作,希望对新手有帮助

Image title


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

Image title




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




Image title

Image title




一、单击 Tap


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

Image title



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

Image title



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

Image title



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

Image title



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

Image title



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

Image title



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

Image title



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

Image title



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

Image title



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

Image title

Image title




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




二、长按 Long Press


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

Image title



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

Image title



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

Image title

Image title




三、滑动 Scroll


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

Image title



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

Image title



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

Image title



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

Image title



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

Image title



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

Image title

Image title




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




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

Image title




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

Image title




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

Image title

Image title




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

















Powered by Froala Editor

更新:2020-02-01

下载
收藏

75人已收藏

咖喱l波特

我是练习时长两年半的美工练习生,喜欢抠图p章外发光

  • 20

    作品

  • 513

    粉丝

  • 54

    关注

  • FUI可视化实验室-01
  • 可视化项目合集-Part 2
  • AE粒子波纹动效教程
  • 可视化项目合集-Part 1

    猜你喜欢

      2020-02-01 原创文章 教程 举报 2972 75 47 4

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

      0.0°

      你确定要举报界面触点-动效展示助攻神器【附aep】

      如果查出恶意举报,十天内禁止提交任何举报申请。

      0/200

      上传证据: 超过10M的附件请使用网盘地址

      点击上传附件

      对谁可见:

      全部设计师
      • 全部设计师
      • 推荐设计师和认证设计师

      您确认要推荐?

      该作品发布时间:2019年06月16日

      评分

      完整度

      启发性

      勤奋性

      排版布局

      推荐心得

      建议20-200字以内

      0/200

      47
      75
      4

      账号或密码错误,请重新输入

      账号或密码错误,请重新输入

      登录

      手机号

      发送验证码 120s 验证码错误

      登录
      第三方账号登录