如何两步做出超棒的交互动效?快来试试「即时设计」刚上线的智能动画!

Recommand
北京/UI设计师/4年前/770浏览
如何两步做出超棒的交互动效?快来试试「即时设计」刚上线的智能动画!Recommand

交互动效,从未如此简单。



先给大家看一个交互 ↓↓↓


想不想自己也能做出这么自然的动态效果呢?现在在即时设计里就可以轻松搞定了哦~


啊?担心操作太复杂?完全不会!这次上线的「智能动画」让整个操作过程简单到令人难以置信!不信的话,我们一起试着做一下你就明白了!



1. 先准备好设计稿中的两个画板,作为初始和结束状态:



2. 然后切换到「原型」面板,手动添加连线和事件,设置过渡为「智能动画」:



3. 直接 Ctrl/Command+P「预览」,就能看到刚刚做的智能动画效果啦!



怎么样?只用两步,就轻轻松松地做出了一个完整的交互动效,而这么流畅自然的过渡,都是「智能动画」的功劳,自动帮你补全了所有中间帧,我们只要做好一段动画的初始和结束态就可以了,是不是又简单效果又赞?!


有了这个之后,你可以在即时设计里做出各种细腻的动画效果,页面加载、过渡、图形平滑变换等等,甚至还可以用来做 PPT 和表情包……





我们也为大家整理了文中所有动效演示的源文件,直接用电脑浏览器打开链接,下载到自己的工作台就可以用了哦~


https://js.design/yO1MPL



超全的交互事件,完美模拟真实操作效果


那除了最重要的「智能动画」外,我们的交互事件也进行了一波大更新,估计大家也单身……不,单击操作好久了,之前一直显示开发中的,还有各种没有列出来的事件,现在全都支持啦!



尤其是支持了大家最常用也是反馈最多的「弹层」效果,想要实现二次确认弹窗、调取输入法之类的操作演示也都轻轻松松!



不管你是用即时设计做网页还是做 App,丰富的交互事件配合着智能动画,都能让你在设计稿上实现像成品一样的交互操作,完美模拟真实效果,再也不用单独跑到其他工具做动效!



再加上我们的移动端 App,甚至可以在手机上做到以假乱真的真机演示~ 哦对了,还可以在即时设计上实现可交互的作品集,投简历的时候一个链接发过去,想想就带感!



解决痛点


总之,所有想要在即时设计里做交互的小伙伴,现在都可以把自己的交互想法完全付诸到设计稿上,绝对是帮大家解决了一系列痛点:


1. 对自己来说,可以用动起来的预览效果实际测试自己的交互 idea ;


2. 面对客户,可以更有说服力地完整展示自己的产品设计方案,不必再全凭一张嘴去苦口婆心地说明和讲解,甚至对方还有可能 get 不到;


3. 面对开发,可以让对方更直观地了解需要实现的效果,不用文档里一字一句地描述,更不用在效果不对的时候在屏幕前比划个不停。

……


这次更新后,我们的原型功能也彻底补足了,现在设计-原型-开发交付三个版块是一个比一个完善好用,保证让大家的设计协作更加舒适和高效,所以,是时候叫上你的同事们一起,来完整地感受一下在即时设计上最完善的创作体验啦!

5
Report
|
9
Share
相关推荐
评论
in to comment
Add emoji
喜欢TA的作品吗?喜欢就快来夸夸TA吧!
推荐素材
You may like
一楼咖啡
Homepage recommendation
相关收藏夹
ui
ui
ui
ui
作品收藏夹
IP形象及IP内容
IP形象及IP内容
IP形象及IP内容
IP形象及IP内容
精选收藏夹
作品收藏夹
品牌制造社
品牌制造社
品牌制造社
品牌制造社
精选收藏夹
作品收藏夹
电影海报精选
电影海报精选
电影海报精选
电影海报精选
精选收藏夹
作品收藏夹
小家电
小家电
小家电
小家电
精选收藏夹
作品收藏夹
大家都在看
Log in