即时设计怎么做滑动交互

像这样的导航栏交互 ui 是怎样完成的？首先打开软件，创建一个画板，选中矩形工具，画出一个长方形，改变成圆角，填充为自己所需的颜色。之后我们添加图标，然后再画一个矩形放置在图标的底层，这里我们要花点耐心的调整好图标的间距， 将所有准备工作完成后，将画板复制出三份。接着我们选中二号画板，将蓝色的矩形移至到第二个图标，顺便修改图标的名称。其余的画板依次操作。 完成后，我们开始给所有的画板添加圆形交互动画，这里我们要注意是所有的画板的过度动画全部改为缓动。这里为了方 大家，我直接将连接的图放在视频里，大家可以仔细的研究一下交互的规律，完成后点击预览播放好了，一个简单的导航栏交互 ui 就完成了。关注我，从小白到大师，拯救你的设计之路！

今天一分钟来做个这样的交互小动画，首先打开我们的国产软件，从我们的插件库中找到插画插件，选张合适的插画素材放到我们的引导页上，然后把第二张和第三张的插画放到第一张上面， 关注加接边组，再依次排开，在第一个画板上画个句型，颜色和背景一样，选中这两个图层，右键设置为蒙版，这样就只显示当前图片了。然后按照 alt 键复制到第二个画板上，通通显示第二张插画，同样的方法， 找出第三张，然后选中右上角的圆形拖动这里的加号到第二个画板类型，选拖拽过度动画，选智能动画， 续时间七百毫秒。同样的操作，做后面两个的交互，最后点击预览，拖动画面就有交互效果了，也可以给下面的按钮加上交互，记得这里要选，点击预览一下，悄悄就搞定了， nice！

各位观众老爷好，我是及时设计的月月，今天的视频是一个小教程，我来给大家演示一下如何用及时设计实现灵动岛的交互动效。在教程开始之前，我们先来看看最终能实现的效果吧， 有没有心动的感觉呀？看完下面的教程，视频中的动向你也能轻松完成哦！ 首先我们要了解一下在及时设计中制作动画的基本原理，先绘制关键针，再给每一个关键针添加交互事件 和动画效果，这样我们在预览模式下触发交互的时候，画面会从一个关键针跳到另一个关键针，动画就产生了。我们以灵动岛的来电动效为例，在这段动画里，灵动岛一共经历了三次变化，需要画出三个关键针，为了节约时间， 页面这一步我就省略了，这些素材我都会放在评论区分享给大家。先选中第一个关键针的时间条，再点击界面右上角的圆形，添加交互，设置交互类行为，点击行为是跳转画板，跳转目标是关键争二。过度动画，选择智能动画缓动 副以上操作，让关键争二跳到三。选择跳转目标时，除了在右侧列表里选，还可以直接拖动这个小圆点进行连线设置完成后，我们点击右上角的小三角右栏动画效果，现在左侧选择关键争一，鼠标移动到离动挡上，点击出现了放 大动画，这时候看左侧的列表，我们已经跳到了关键真二，再点出现了缩小动画，跳到了关键真三，这就是制作动效的基本原理了。 回到编辑页面，现在一个来电状态就要做三个画板，做完所有的动效岂不是要几十个画板？可以这样做，但是没必要啊，这里我再介绍一个干简便的方法，只需要准备一个关键真的画板。将三种灵动档的状态分别设为引用组件，选中所有组件创建变体。 给第一个时间条添加交互事件，连接到第二个交互事件。这次选择定时时长四百，这样无需点击就可以自动跳转播放动画。 仍然是智能动画，这次选择自定义时长六百，自定义设置里的缓动曲线参数按照我这个来填，这样设置会让动画效果更加顺滑。同样的操作呢，让第二个跳转第三个，第三个跳转第一个，形成循环。 最后一步，把画板上原有的时间条删除，变体里的时间条复制一个移动到画板顶部，这样在变体里制作的动效就可以在画板上演示了。预览一下效果，无需点击动画就自动循环播放了。 回到编辑页面，除了来电状态呢，我们把音乐播放、连接、耳机导航、人脸识别、秒表，这几个状态的灵动导关键针都做出来，分别设置为引用组件。整体添加变体 是故意让变体中每一组的命名都相同的，因为这样会方便工具计算动效效果。按照我们刚刚讲的方法，逐个添加交互动效。从第一列的第一个开始，依次向下跳转，每一列的最后一个跳到第二列的第一个，最后一列的最后一个 跳转会第一个事件类型统一设置为定时四百。每一列的过渡动画设置上稍有差别，按照我图上标注的设置即可，全部 设置完成后，我们就得到了一个完整版的灵动导动效。 最后是福利时间，现在进入及时设计官网的设计社区，每周零磨页面，参加最新一期的零动导动效零磨活动，跟着详细的图文教程进行练习，上传自己的练习作品，就有机会获得丰富的食物和现金奖品。 好啦，今天的视频就到这里，我是月月，我们下期再见哦！

大家在做这种交互图展示的部分，是不是也经常为了两个图片之间的连接线而烦恼？还在一根一根的画或者复制粘贴吗？现在已经可以通过插件实现了，即使已经更新了一款插件，叫做流程连接插件，只需要在插件广场安装即可。 用法十分简单，只需要排列好圆形图，按住 shift 多选图层即可，并且可以随意修改线条的一些常用属性， 还可以一键添加备注，清晰的展示你的交互逻辑。想要使用这样一款好用的国产工具，点击置顶评论关注我，了解更多！

大家是不是觉得这样一个微交互动画需要用 ae 才能做，其实在线就能完成。首先我们需要打开设计软件去画两个画板， 然后在两个画板中绘制好菜单图标，注意两个画板中的菜单图标需要名字保持一致，因为动画的原理是两个画板之间相同名称的元素自动进行补建动画， 那么现在我们就需要对画满二的菜单图标进行一些改变。首先我们需要对中间的圆角矩形添加一个等比缩放，缩放数值选择百分之一， 在为上下两个人道举行添加旋转四十五度与负四十五度，并上下居中。现在两个画板的元素就制作完成，可以为他添加交互动画。我们 选择右上角圆形设计界面，选中图标，点击加号为他添加一个，点击事件行为，选择跳转画板，跳转至画板二。过渡动画，这里选择智能动画， 缓动的话可以根据自己的喜好，我这里就选择默认的缓动。好，现在动画就制作完成，我们可以来预览一下效果，下期继续给大家带来一些微交互动画的制作教程，关注我了解更多。

ui 微交互动画案例二这样一个进阶版的动画案例教程来了。首先打开设计软件，老规矩画两个画板，然后在画板内分别画好两个切换后的图标，运用的方式和上期内容基本一致， 只是新增了一个位置移动，这次发生变化的是点击前的图标，我们对他进行一些改变，首先旋转与上期内容一致，然后三个图标实际上是藏在绿色的大图标下面，所以我们只需要用位移把三个图标依次放入大图标下面， 再为两个画板添加交互。现在动画制作完成，关注我了解更多。

像这样的导航栏交互动画是如何实现的？首先打开及时设计，我们直接将导航栏的画板复制出四分出来， 接着选中第二个画板，将矩形拖拽到第二个图标上，并修改文字。之后第三个画板也是一样的操作，所有的画板完成后，点击圆形按钮，给他们添加交互逻辑。这里我们选中智能动画线性五百毫秒的参数。 为了节省时间，我就不再一一讲解，直接放一张交互的图，大家可以保存自行研究。将所有的交互全部添加完成，我们点击预览按钮。好了，一个简单的导航栏交互动画就完成了，你学会了没？我们下期见！

mocab 样机是设计师输出设计方案，这个作品及必不可少的视觉人数，可以极大地提升展示效果。而设计师们往往苦于查找样机素材费时费力，不是价格太高就是角度不够理想，且优质的素材往往都是 psd 文件，文件动者上句下载、修改和导出都费时费力。 而近期计时设计发布了一款叫做 readybox 三 t 的插件，很好的弥补了这个痛点。首先，在计时设计的界面中打开插件菜单并选择社区，就可以在下方找到 readybox， 点击标题并安装就可以在弹窗中运行。开插件 界面的左侧是样机列表，可以点击切换不同类型并选择想要的样机。右侧是预览视图，可以使用鼠标左键旋转，右键平移滚轮缩放获得想要的角度。选中摩卡不字样的白底图，并在计时画布中选择相应画板， 点击贴到模型即可实现画板导入。然后再点击下方导出的画板，即可生成一张透明底的 png 样机，置入画布中进行使用。除此之外，插件中还提供了有效的自定义操作功能，包括调节环境、选择环境类型、设置光源强度和光源角度， 以及可以手动选择相应的图层，编辑它的材质和颜色。如果不知道怎么输出好的效果，那就再给大家分享一些额外的小技巧。第一，找到优秀的样机使用案例，对照它进行角度和参数的调整，就可以获得基本一致的效果。 第二，应用一些没有主体的背景素材，根据画面特征调整样低角度，自入后并添加简单的投影效果进行融合， 是不是发现从此以后再也不用担心项目包装的样机素材找不到了？建议各位同学快点上手，尝试并解锁更多有趣的玩法和应用场景。

十种海报构图技巧六、倾斜构图把画面中的元素或文字呈现出倾斜或旋转的状态，打破了横平竖直的视觉思维，同时也是画面更富有饱满的律动感，让画面显得更有创意性，是一种很出效果的设计手法。七、三点构图 将画面中的重要元素像星星散布在板面里，需要注意大小、熟密、位置等的排列和谐元素之间的关联性要高，不然画面容易显得凌乱，没有侧重。这种方法用于内容较多的设计中。 八、对称构图将画面分为两部分进行排布，画面具有均衡性。对称的画面具有相同的元素特点，所以让人感觉有一致性。有时为了避免过于死胆沉闷，不是所有的元素及文字必须是绝对对称，只要对称的两部分拥有着相似的比重即可。 球居中构图将主体和信息垂直摆放在画面中心，使主体明确突出，目的是为了快速吸引眼球，占据视觉的焦点。居中构图办事简洁，给人稳重的整体感受。这种方法一般用于单个或细节丰富的主视觉。 十、上下构图上下构图法的海报设计将主体元素摆放在板面的上方或下方时，可以构建起从上往下的阅读顺序，起着引导性作用。上下对称式构图具有平衡、稳定相呼应的特点。