免费使用即时设计，请点击右侧链接👉 即时设计
获取海量免费设计资源，请访问👉 资源广场
动效在 UI 场景中的运用，极大的提升了用户的使用体验，也增加了产品的品质感。对于 UI 设计师来说，会做动效，代表着更强的职场竞争力。本期教程，就教大家 5 种常用的交互动效，看完就让你的作品动起来~
详细操作请看文章开头的视频教程演示。
为了让大家能方便地进行操作练习，视频中用到素材源文件，已经上传到即时设计官网的【资源广场】了，在【资源广场】中搜索“案例教程”，获取素材。
第一个动效：通过点击导航栏图标，实现 4 个一级页面之间的切换。
在【原型】面板中，根据各个页面的跳转关系，设置页面之间的交互连线，在此过程中，可以随时使用【预览】功能，查看动画效果。
第二个动效：通过点击，实现首页上，轮播图的切换。
选中【首页1】画板中的【banner 1】，添加交互，跳转到【首页2】画板；选择【首页2】中的【banner 2】，添加交互，跳转到【首页1】画板，我们就实现了轮播图的切换效果。
第三个动效：通过点击【分类】页面的【店铺卡片】，打开【店铺】页面的过程。
在【分类】画板中，选中第一个【店铺卡片】，添加交互，实现跳转页面的效果，再给【卡片加载】画板添加交互，实现页面加载过程的效果。
第四个动效：鼠标指针移动到分类页的卡片上，会出现卡片状态的变化。
依次选中【分类】画板中的两个卡片，添加到【男装】和【女装】画板的交互，同理，通过【男装】和【女装】画板里的两个卡片，也要能跳转另外两个画板。
第五个动效：在购物车页面，选中某一件商品时，底部会出现提示支付的弹层。
给【购物车】画板中的第一个商品，添加交互，实现“选中商品”的效果，再给【选择商品】画板，添加交互，实现“弹出弹层”的效果。
到这里，5 组动效就讲完了，别忘了到即时设计官网的【资源广场】，获取练习素材。
学完这篇教程的人还在学…
非特殊说明，本站 UiiiUiii.com 上的教程均由本站作者及学员原创或翻译，原作品版权归属原作者，转载请联系 @优优教程网 授权。
转载时请在文首注明，来源 UiiiUiii.com 及教程作者，并附本文链接。谢谢各位编辑同仁配合。UiiiUiii 保留追究相应责任的权利。
继续阅读与本文标签相同的文章：
发表评论 快来秀出你的观点