figma后退交互效果

哈喽大家好，我是 pbm， 像这种底部图标切换的动画是经常要用到的，这种动画不仅很出效果，而且做起来也非常的简单，今天我就用飞个马给大家演示一下。另外原文件的获取方式我会放到视频结尾。首先我们准备好四个图标，拖出一个图标，然后在他旁边添加文字，然后框选居中对齐，并且 cs 加 a， 创建自动布局，然后给自动布局添加背景， 并且把颜色改为浅橙色。接下来开始设置编剧，上下为十，左右为十五，最后添加原角，然后我们把图标和文字都改为橙色，我们复制一份，把第二个图标拖入自动布局，然后调整文字内容。另外两个也是同样的操作，都是拖入图标，然后调整文字，然后我们选中下面三部分内容，在左边的图层把文字隐藏， 然后把调整好的图标拖入新建的福瑞姆，然后把他们框选居中对齐，并且调整他们之间的间距，让他们间距相等。最后选中后三个图标，在右边把自动布局的背景隐藏，最后一定要选中四 四个内容，在右边把裁剪内容给打开，然后复制三份，分别调整他们的选中状态，也就是图标，文字，背景以及间距，然后切换到圆形模式，开始连线，把每一个未选中的图标都连接到对应的页面，动画的设置都是单机智能动画三百毫秒。最后我们看下效果如何，需要原文件的同学可以关注并在评论区留言，如果今天的内容对你有帮助，可以点赞收藏。

不是 ae 用不起，而是飞哥马更有性价比。给他一次做动效的机会，他直接新建一个画板，并且把高度调整为和身高一样。随后画了一个矩形，随手扣了波六六六，涂层模式改为颜色简单。紧接着复制一层矩形，颜色改为黑色。 他甚至将涂层模式改为颜色，加深，一个浅，一个深，一浅一深，很认真，这两步非常重要，如果没跟上，建议反复观看。 随后将两个矩形锁死，避免被人偷走。紧接着画一个黑色矩形，置于底层，效果给到涂层模糊，数值居然给到了三十。 再画一个正方形，填充白色，效果同样给到图层模糊，再复制一份填充黑色，删除图层模糊并调整大小。 含笑间，他就把提前画好的 icum 复制了进来。调整位置大小后，复制画板，调整黑白正方形的位置、形状和参数，你怎么开心怎么来。最后一个也是同样的操作。随后给 icum 添加交互触发模式为点击 自定义弹琴动画数值，你就超不超白不超。最后打开预览，一个简单太不动效就做好了。 五星评论家麦克阿瑟表示，自从跟着十八学设计，我老婆说我快了不少，我想让他动他就得动，跟着十八学设计，迟早开上！法拉利大型设计纪录片持续为您播出！

点赞的朋友们逢考必过！大家最近有没有用 figma 呢？那今天呢，我想用一个简短的视频来跟大家介绍一下最近比较流行的视觉设计趋势， 以及你该怎么样用飞个马来完成。因为我最近用飞个马用的很多，然后我发现我越用这个飞个马就越喜欢，所以什么 sketch 啊，什么其他的 adobe xd 啊，都已经被我抛到脑后了，就是我真的好喜欢飞个马，我真的是觉得他好才会推荐给你们的。 我今天就想用这个非常非常简短的小视频来跟大家介绍你怎么样用飞马就能非常非常快速的做出最新的视觉设计效果。 好的，那我最近呢又看了个 baby 的，我的一二三就是 despicable me， 我不知道你们有没有看过，我真的好喜欢那个系列的电影，我觉得特别特别的可爱， 然后他真的非常非常的好看，看完之后心情就变得好好。然后前几天我冒着生命危险准备去乐高去买一个迪士尼的那开锁那个赛，就是很大很大的一个乐高的拼图的一个 set， 但是没有买到，然后我就意外的发现了这个噔噔噔 minions， 你看这个是凯文，这个是爸爸，爸爸会有个小熊叫 team， 我觉得超级可爱。还有一个是 stuart， 就是热衷于弹吉他那个，我觉得他们都好可爱，我喜欢里面的每一个人，除了坏人，然后 gru 当然不算坏人了， 所以我觉得真的好好看，然后里面的那个 agnes 真的是太可爱了，总之就是是一个太有爱电影系列了，我就特别特别喜欢，我以前中二期的时候，特别特 特别喜欢看那种别人说是很深奥很深奥的，就是很揭露现实的电影，但是我现在我发现我大了之后嘛，就就越来越喜欢那种卡通，或者说喜欢那种开心的电影了。好的，来进入这个视觉设计的趋势， 那视觉设计呢，其实在 ux 里面也是非常非常重要的，尤其是当你在做一个作品集的时候，可能你进入公司之后呢，你主要考虑的是体验方面的事情，就是怎么样让人家使用的舒服啊。但是呢，在做作品集的时候，视觉设计是非常非常重要，因为它可以迅速 让你 get 面试官的注意，当面试官一一天要看几百份作品集的时候，如果你的视觉设计非常非常的脱颖而出，那你就能让他注意到你，然后可能你就会晋级，晋级到这个 面试的阶段。现在视觉设计趋势有很多种，那我就剪几种跟大家介绍一下。第一种我觉得大家都肯定已经非常非常熟悉了，就是这个扁平化的插图，那你往往在这个很多设计的界面里面，你会发现，哎，这个界面有一个这种 像连环花一样的这个小卡通，然后这个界面里面也有像这个，呃，连环花小卡通，他可能莫名其妙就给你放一个，然后你看上去呢，就会觉得，嗯，很舒服，觉得很 时髦这种感觉，那这个呢，其实已经流行了很多年了。第二个我想跟大家讲的，其实呢就是这个软阴影，这个我发现其实是最近一段时间才开始的，就是在这个扁平环设计之后，很多人你会发现，哎， 这个影子好像似有似无的，这种感觉若隐若现，但是你又会觉得加了这个阴影就会很高级， 这个就是软硬硬，待会呢我会跟大家讲怎么弄这种软硬硬。第三个呢就是 newmorphism， 就是你雾化，这呢其实是很多设计师现在在用的一种趋势，那 他也会被很多交互设计师所垢病，关键呢是要看你怎么用，如果你用的非常聪明的话，那就是一个比较好的视觉设计，如果你用的不是很聪明的话，那 别人就会批评你很浮夸，不懂设计的实用性。好了，那我现在就来现场跟大家演示一下，你在菲格曼里面如何完成这些视觉设计，趋势 非常非常的快。首先就是扁平化的设计，那以前我觉得扁平化设计可能大家都会去，比如说一些嗯免费的资源网站，或者说一些付费资源网站，你去买，或者是去下载一些适合于你的，或者说你自己需要手工去 去画一个扁平画的设计。但是现在呢，我最近突然发现菲克玛里面一个非常非常好用的插件啊，简直可以提高你的效率达到百分之一百五十以上。首先你需要去这个 community， 这个 time， 然后你需要搜索 blush， 你就会看到，哎，有插件，这个就是这个比较可爱的这个 icon 这个，然后你就点击 install 就可以了，这样子的话你就飞速的安装了一个插件，对吧？然后我们回到我们的，比如说设计文件，我现在就随便的装作设计一个 iphone x， 然后我装作我在做一个 y fray， 不管怎么样。然后接着，比如说我要在这个区域放一个扁平化的插图，那我就右击 plugins blush， 比如说我想要搜索这个 people， 然后他就会出现好多好多这样的插图，对吧？那我就找一个比较适合我的，比如说我可能需要这个 teamwork， 然后我点击他，就是比较神奇的地方就在这里了。比如说我现在我想改他背景，我想要把它改成山一样的状况，然后，嗯，比如说我想改这个箭头，我想要改成这种像手绘一样的感觉，我可能要把这个缩小一点， 把它提高到这个上面，然后，嗯，后面呢，我想要改，把它改成一个，就是加了黄色的背景这样子的感觉。接着呢，我还可以改它的植物，就是好的东西都可以 customize， 然后好多箭头都可以，就是把它做的很有意思，比如说这个 object， 你可以，甚至你可以把它变成一个 envelope。 接着呢，你还可以改这个人，这个人你还可以改他的姿势，比如说我现在想让他变成这样的一种衣服的风格，然后我想改他的这个发型，这个 face 我觉得我有点 get 不到，所以我就不加了。另外一个人呢？你也可以改 这个人，你可以改他，比如说你把它改成这样子啊，或者说你把它改成这样子啊， 我觉得非常非常棒，有没有？突然之间就变成了一个你独有的一个扁平化的图案，适合于你自己的 app， 就可以敷 customize， 我觉得特别特别好。那这个 app 呢？是我最近才发现的，我所我发现之后呢，我就觉得我 我一定要推荐给大家，希望大家都觉得非常非常有用。那第二个设计呢，就是软硬硬，软硬硬呢，我也在这里演示一下，那我就随便画一个 frame， 假设我要画一个这样的，比如说这是一个 button， 也就是一个按钮， 然后现在都比较流行圆角矩形，我就把它变得稍微圆一点。接着呢我可能是会稍微给他加一个飞速的渐变，可能把它调成这种对角线一样的感觉， 我现在就画好了这样的一个 button， 对吧？我要给他加一个特别特别软的阴影，怎么加软的阴影呢？直接在这个 effects 里面点击加号，然后我一般会把这个 x y 都设成零，然后在这个 blow， 我就把它 blow 的非常非常大，有没有看到直接这个软 阴影就出来了，瞬间就高级了好多呢？然后他一般会给你的阴影加一个透明度，有的时候我会觉得他的透明度有一点偏低，有的时候我会觉得他偏高，所以，嗯，我一般会稍微的调整一下。然后有的时候，比如说这个是蓝色的按钮吗？我觉得他的阴影可能会稍微带一点蓝光， 所以我就会给他加一点这种蓝色的感觉，那这个就是软阴影。接着呢就是你有 moppy 的，你雾化，你就是把它想象成一个像浮雕一样的感觉， 那浮雕一样的感觉到底是怎么做的？其实他是通过一系列的阴影就是加阴影来完成的。这个呢，其实就是一个非常非常典型的 no movitum 的文件，我是在这个网上随意的下载了一个这样的 numovitum 的文件，你可以看到它这个 button 有没有觉得像 浮雕一样的感觉，那这种东西是怎么做的呢？你稍微点开它，你就可以发现它其实是加了一系列的阴影，你可以看到它其实加了有这个这个这个这个这个其实加了五六个阴影，所以就导致了它给人这种 非常非常真实的像浮雕一样的感觉。其实他就是把这个东西想象成一个凸出来的物体，然后由光打到从这个左边打到右边的时候，这个东西他会产生什么样阴影？那我们假设已经有这样的一个文件，我们自己怎么做这个牛猫 freedom 呢？其实你就可以利用菲格玛他本身的特性， 比如说我现在自己创建一个我属于自己的 frame， 嗯，我先不管它的大小了，比如说我创建了这样的一个矩形，我就想把它设计成这样浮雕的感觉。那这个的原理呢？其实 就是在于你把它的所有的阴影的 effects 给 copy 过来，那我先把它设计成这样的一个圆角的矩形，嗯，比如说我现在想做这种浮雕一样的效果，在这个 figuma 里面右击有一个 copy paste copy practice， 你直接把它复制一下，然后这里右击 copy paste， paste properties， 它直接就会变成这样的效果， 你看是不是已经有这样的感觉了？那可能还会有一点点的不一样，就是因为他需要你这个背景颜色，也需要和这个 他凸出来的按钮是同一个颜色，这样的话他就会显得是同样一种材质，你可以把他想象成渲染，你需要给他同样的一种材质才能让他有这种凹凸的感觉，他是渲染的一种 texture， 一种 质地。那好，我现在就把这个背景颜色呢，也把它改成这个灰灰的 一样的颜色。哎，你现在突然觉得他是不是就已经变成了这个浮雕圆的感觉呢？好，现在我比如说把他的这个圆再拉回来一点。 接着呢？比如说我想要设计这种凹进去的感觉，我直接点这个，这个音谱就是他是凹进去的这种感觉，对吧？我还是一样的 copy practice paste properties， 它直接就变成这种凹进去的感觉，有没有非常非常的快？那赶紧去用 figma 吧，我要去，我要去拼我的乐高啦。那喜欢的朋友们一定不要忘记帮我三连，拜拜，我们下期再见。

哈喽，大家好，今天我们给大家分享的就是我们的交互图怎么去画，那我们现在看到的这样一张图呢，就是我们插在这个需求文档里面的一张交互图， 嗯，对于这个需求文档应该是怎么样的，如果大家感兴趣的话，可以在评论里面回忆，然后我把这个需求文档的链接发给大家。 交互图的这个画法呢，其实是比较多的啊，我们可以用这个飞个马，飞个马是一个圆形和这个 ua 设计的工具，也可以使用墨刀里面的流程图和圆形图两种不同的这个墨刀提供的功能。那其他的工具大家也可以自己去了解， 这里的话我就不再去追述到底都有哪些方法可以画。嗯，大家要记住的就是不管是画圆形图还是画这个交互图吧，我们能够使用各种各样的工具，最终我们找到我们自己使用起来比较顺手的工具就可以。那我们从飞格马开始，飞格马是一 网页应用，所以大家不需要下载任何的这个客户端啊，只需要通过我们的这个网站，然后你去搜索一下这个飞哥们就可以进入注，完成注册就可以开始使用了。然后大家在注册成功之后呢，点击一下那个红框那个创建新的那个文件的位置，就可以进入到飞哥码的这个画布了。 在进入到画布之后呢，我们就需要创建一个新的这个页面，这个页面我们给他取一个名字叫抖音交互图， 后续的话我们就需要在这个页面里面去插入不同的这个啊。屏幕这里我们就选择的是 iphone 四三 pro， 那我可以通过这个复制粘贴把这个屏幕空白的屏幕创建多个，对吧？我们假如说是有六张图，那我们就需要创建六个屏幕， 在创建完这个屏幕之后呢啊，我们就需要去把我们的那个呃图片给他复制粘贴进来啊，在粘贴进来之后，我们看到 这个屏幕的宽度他是三百九，所以我们就把图片的宽度也调成三百九，然后再把这些图片一张一张的给他放进去，再放进去之后啊，我们会看到那个底下会出现一段空白嘛，因为我截图是用的安卓去截的这个图， 所以我们就选中上面的这个页面，这个时候我们需要按住 shift 去选择这个页面，选择完了之后把页面的高度调整为七百九十五，这样我们的这个页面和我们这个图片啊他的比例就一样了，我们通过拖拽呢，可以去把他这个位置变成是我们需要的那个最终的位置。 接下来我们需要去做的一件事情呢，就是要把所有的这个页面选中，然后给他进行一个锁定。我们去这么做的原因是因为我们后续需要在这个图的基础之上去加入我们的点击区域，加入我们这个箭头，那因为我们加入的这些点击区域和这个箭头他实际上并不属于我原 原型图的一个部分吧，所以我们就需要在嗯加入这些箭头和点击区域之前，先把已有的这些页面进行一个锁定。 那锁定的方式呢？就是在我们现在的这个地方点击右键，然后选择呃底下的那个锁定，这样的话我们整个这个已有的这些部分就被锁定，你就无法再对他进行任何的移动和修改了。 接下来我们要做的就是在机械图的上面去给他插入我们所谓的这个点击区域哈，我们就可以通过这种给他画一个框的方式，然后对这个框把他的这个填充给他删除掉，然后变成只有那个空白的填充，只有边框，把边框的颜色和边框的那个 出息调整，然后再去画箭头。那这块我们要做一个判断啊，如果用户没有登录的时候和登录的时候有区别，那要去做这个菱菱形的这个东西，我们就画出一个正方形，然后把他的这个 角度调整四十五度，然后把它拖到这个对应的位置，然后上面加上文字可能是这个用户是否登录，然后通过右边去对这个呃这个区域这个文字的这个行属性进行调整。 然后再接下来的话，我们就需要去给另外一条分支去画这个线，这里的话我们画出来这个箭头本来是直线，那我们就需要选择到其中的那个小点，然后对他进行拖动，让他变成一个直角啊，然后写上对应的这个文字未登录。 嗯，其他后面的这个操作的部分呢，就是比较类似的了，我们都需要去通过这个矩形的这个组建，然后就画出来一个框，然后把这个框的呃填充删除掉，然后给他选择这个对应的颜色的这个这个边框，然后再去加上这个箭头后面的部分的话就 跟前面是一样的了，然后我就不再给大家注意数了，这块的话大家可以慢慢的去学会使用它对应的这个快捷键啊，比如说画矩形是用 r， 然后画这个箭头是用我们的 shift 加上 l， 对所有的这些快捷键你掌握了之后呢，你的这个效率就会相对而言会高很多。 等到我们把所有的这个箭头都画完了之后，我们这张图就已经做完了，接下来我们就要用这个切片的工具，大家可以按这个键盘上的 s， 或者用鼠标去点击这个 slides 的这个位置去选中这个区域， 然后再点击右侧的这个导出，选择三倍图，你看一下这个预览没有问题之后点击这个导出，这个时候你再打开你你你就这张图片就能下载到你的本地了。然后你再打开这张图片看， 基本上就是我们在最初给大家看到的那个呃图片了，大家如果学会了的话可以弹幕一个一，如果学会了的话可以弹幕一个二。

今天教大家怎么利用 figma 做下拉菜单交互效果。首先把下拉菜单的几种状态做好，把三个画框选中，选择组建里面的 create component set， 这样就完成了。第一步，接下来给大家交互命令，选择右边的原型， 拖动鼠标指向你要链接的画框，把点击换成当悬停时，再次拖动鼠标指向你要链接的画框，选择默认的点击。为了可以重复演示，你可以加一个跳转到默认状态， 这样你就做完了。在资产里面找到它，预览看一下效果，鼠标悬停和点击效果都已经生效，这样就做完了，看完了点赞收藏吧！

如何将设计好的界面放到手机上进行操作，达到以假乱真的效果？给各位推荐一款最近比较流行的交流动效软件投入派，不仅能实现基础的动效，比如滑动、点击、缩放，而且还支持调出系统组件，模拟真实的使用场景， 比如键盘、相机、拍照、云识别等等。就像你平时使用手机那样，当你在 big 码或者 master go 里面做好设计之后，可以通过插件导入 potalpi 里面做点击效果。里面的操作逻辑也比较 简单，比如最简单的你想要这个正方形，点击后进行移动，那么触发类型选择单机，然后添加移动效果，输入移动后的位置，再点击预览就完成了。获取 figma 或者 principle， 这里的软件能够做到，但是目前他们能够实现的效果还是有 有线图。图派还支持多屏幕交互和硬件结合等等。这类复杂的场景功能非常齐全，而且不限于单个屏幕的交互。它能够实现智能手表与智能手机的配对，也不需要写任何代码，在实际工作场景中也能快速进行交互体验测试。 除了传统的移动端和网页端，还支持车载交互、智能电视等等，满足了不同的场景需求。 做好之后一个链接就能分享给团队其他成员预览交通效果开发也能在上面查看一些运动参数，从而方便了我们的工作流程。如今动校已经成为设计师的必备技能，你就赶紧学起来吧！

动态原型可以使你的设计方案更真实，并且与静态设计相比，可以与客户或利益相关者进行更多的交流。今天我们就在飞格玛中学习这种弹窗效果，只需三个步骤，一、 切换交互模式。当你绘制好按钮并把弹窗放置在画板外面时，点击右上方的坡头肽，切换到圆形交互模式并框选按钮，把它连接到与之关联的弹窗上。创建完成后就会发现两个参数，左边是触发方式，右边是交互动作。 二、选择触发方式我们可以通过点击拖拽、悬浮、长按按键等操作触发界面上的交互动作。我们选择昂克力克，点击。三，选择交互动作并调整参数。选择 open overa 展开服层位置，选择 menu， 手动调整弹装到想要的位置。为了建立蒙版和方便关闭弹窗，我们需要勾选这两个选项。最后我们选择 moving 移动进入作为入场方式。点击画板旁的播放按钮就可以预览了。 别忘了在这里你还可以复制链接，把它分享给前端开发。

victor 入门教程零三文字交互动校今天教大家快速制作一个文字交互动校。绘制一个画框，放入准备好的文字素材，复制一份框，选注两个画板，点击创建组建局， 将第一个画框的文字下一致画框外区域切换到圆形面板，添加延迟，触发智能动画交互。将画框的背景去除，将制作好的组件集放入素材卡片内。 接下来用同样的方法制作一下另一组文字和图像的组建局。 最后调整一下三个交互不同的颜值，触发时间分别为八百，一千一千，两百。 这样就制作好了，你学会了吗？原文建在标记式公众号，今天就到这里。

哈喽，大家好，这两天做了一款飞哥买的插件，为什么叫他万能插件？因为他借助了这个 gps 的能力，能把你的任何想法变成现实。然后接下来我为大家演示一下，比如说我现在想做一个这个登录的窗口，然后大概随便先换一下，给他一个这个输入用户名的地方，然后再给他一个密码，然后再来一个按钮，给他一个绿色的，然后我来标记一下这边是 用户名，然后这稍微调大点，好，下面是密码，然后再下面是登录的按钮，然后给他一个大一点颜色。 好，接下来的话我们就可以把这个插件打开，这个插件里面应该在社区搜不到，因为还没有上架。我们选中我们想生成的，直接点按钮，然后要稍微等待一下， 好，他这边的话就已经生成好了。那答案，这个啊，可能我们的画的有点差别，这个后期会持续去改进，但是的话这边其实是已经可以交互了，包括我们去输入，哎，你看密码他自动会举报你， 包括这个按钮。点击好，这边是一个简单的演示，然后接下来的话我再做一个稍微难一点，复杂一点的，比如说我这边想让他做一个这个生成图片的一个这个插件，那么我去先打开去改一改啊，比如说这边我想让他去输入输入文字，然后就能去找到对应的图片，然后生成在对应的地方，比如说这边生成在这个地方图片， 然后我们去给他标记一下。嗯，我想图片生成在这，然后我给他大概的去标记一下这个图片的位置，然后好图片生成在这个地方，全是给他改起来有点突兀了。现在好，这边的话就是搜索图片， 搜索图片这边就是钥匙按钮。 好，这边是一个手刷油，给他加个倒角区分一下。好的，然后的话接下来我们就是把这个描述一下，就是我大概想让他做成个什么样子，然后这段话我提前已经打好了，我就直接粘贴。 就是说当我去输入这个文本的时候，那你需要在这个地方去显示生成相应的一个和文本对应的一个图片，然后把这个描述大概写一写好，完了之后的话我们就可以再去生成了，选中之后点这个按钮， 好的，这边的话就已经生成了，然后我们来测试一下，比如说我想搜索一只小狗的图片，然后的话这边就出现了一只小狗的图片。啊，这个图片，然后我再试一下，搜索一个小猫，试一下，哎，这边就生成小猫咪的图片。

接下来呢我们来学习一下如何使用飞挂平台去打造一个基本的页面演示效果， 我们最终所做出来的结果的话呢，是类似这一种，首先呢这个页面你自己设计的时候啊，肯定是长途的这个页面， 但是呢我们在给客户进行展示的时候呢，对方是可以上下进行查看，包括呢左右都可以，还有呢我们点击不同的按钮会跳转到不同的这个页面， 那么这样的话就可以给我们的客户呢带来一个比较好的观看体验。好，我们来看一下具体的操作过程。 我这边的话呢一共有四个页面，我们先看第一个页面，在第一个页面中你这里要怎么去做呢？是不是整体这样上下进行一个运动， 那好那你要记住呢，如果说是整体上下进行运动的话，我们要给这整体呢做一个画框，你看我现在这里啊，就一整个这个画框，然后我拖出来，大家可以看一下， 由于我们在制作的时候呢，下方存了大量的这种数据，所以说呢，你看它下面这里数据还挺多的，然后包括这里啊也是比较多， 来我们来学一下怎么对他进行处理。第一步啊，要把你这种非常长的这个画框给他拉回来， 哎，就拉到我们依平的这个高度，这边还有呢，这边这个区域也找到他，同样的也得给他拉回来，这里一定要拉回来啊，否则的 话呢，那你的数据就不能去滚动，也就是说他的数据实际上已经超出了这个框，但是呢你得给他拉回来，哎，这样才能去进行演示啊，拉回来之后呢，点击我们右上角的圆形， 在圆形中设置他的滚动模式，对于他来讲他就是水平滚动，而对于我们外面的这个整体来讲的话呢，在滚动中给他设置为垂直滚动，哎，把这个给他设置好，设置好之后我们来看一下啊，是否成功， 首先上下没有问题对不对？左右同样的也是没有问题，所以呢关于这个效果看很简单，我们也就把它做了出来，那么这个清楚了之后，我们再看一下如何去切换页面，就让他 跳转这个页面啊，像我们现在这种位置的话呢，点击发现就要让他跳转到发现页面，我们可以呢找到发现的这个组，找到之后鼠标放在这个位置有个加号，点击拖拽给他拖拽到第二个画板上，松手， 松着之后这边是我们的交互魅力，当我们单击时，单击发现时，让他呢导航到第二个页面，哎，这是它里面的一个原理，而动画的话里面支持及时 就是没有效果啊，瞬间出来的这种效果。还有溶解就是慢慢显示啊，这里大家可以多去试一试啊， 我这里的话呢，先选一个溶解好了，先溶解，那选好之后的话呢，这边还可以设置他的一个时间，大家可以多去 尝试，看哪个时间是最符合你的这个效果的。我们来看一下当前的一个演示，这是我们现在这个页面，然后点击这个发现，你看他就过来了，对不对？那同理，我想让他点击首页再回去，那应该怎么去做呢？ 我们需要在第二页面中找到首页，然后点击这个加号，给他拖拽到这个画板上，这样也就完成了我们这个效果，并且里面的设置呢，会和你刚开始的那个设置啊，他是一样的。 好，我们来看一下，点击首页没有问题，然后点击发现，哎又过来了， 然后剩下的话呢，都是一样的啊，就可以不断的去给他呢，比如找到这个消息，然后牵根线，我们牵到这个位置， 那你说我不想去添加这个跳转了，那你呢，就把鼠标放到这个线身上啊，给他松手，拽掉他再松手，这样就完成了线的这个删除，所以添加和删除呢，都非常简单 清楚。这个之后呢，接下来我们再介绍一下啊，他其实还可以加样机，对你点击空白地方，在空白地方中，设备里面可以挑选你的一个样机啊，我们当前是按照三七五乘以八幺二去做的，所以就要选择 iphone 十一 pro 这款设备。 点好之后呢，这个型号什么金色，五叶绿，银色啊，根据自己的喜欢啊，自己去点击就行了。 背景颜色的话呢，他会去决定，你在给别人看的时候就这个背景色，就这边的背景色啊，根据自己设置就行了，你看我现在的话呢，他就已经 生效了，给我们套了一个这个样机啊，我们点击首页这样的观看体验呢，优好了很多。然后在这里的话呢，大家可以通过点击右上角这边，他可以设置全屏， 这样观看体验就更好了啊，如果说大小不合适的话呢，在选项里面，我这里设置的是百分百以完整尺寸显示，然后也可以有这个适应和填充，都可以进行单击都去试一试。 而分享这边的话呢，大家要注意一点的是啊，如果说你在这个页面给他进行分享的话呢，其实对方能看到的是我们所有的这个页面，并非是你刚刚所完成的交互圆形，所以我们不要在这个地方进行点击分享，那在哪里去点呢？你看啊，我先把我 的链接现在关掉啊，关掉之后呢，我们先点击这个播放，就是演示，让他先加载出来这个演示效果， 演示效果加载出来之后呢，在他的右上角有个叫分享圆形，那么这个就是我们发给客户的一个链接， 你可以点击复制链接啊，知道链接的任何人可以查看，然后点击复制链接，那么对方打开之后呢，就可以直接看到我们现在的这个页面，并且呢进行这种拖拽啊，他会自己多去点点进行查看。 那么以上呢，就是关于如何使用飞罐平台制作一个基本的页面交互演示的过程。

逼疯程序员的不一定是代码，还可以是设计师，当他新建花板的时候，程序员就生死难料。随后画一个和花板一样大小的矩形，调整亮一点的渐变，随后画出一个类似八层的按钮，并且添加画框。 他居然还给画框添加秒边，并且圆角值给到最大，随后更改矩形颜色。谈小间他就下了一个蛋，修改颜色添加的阴影，机智的他选择了同类色， 随后又下了几个大小不同的蛋，拼合成云彩的形状。调整大小位置后降低不透明度，复制一层，调整位置并置顶 下。不出蛋的他画一个圆形，改为底色备用，随后用星星工具画出星星，一闪一闪亮晶晶，满天都是小星星。 适当放大后，直接透明度改成零，选中按钮画框，勾选裁剪内容，趁你不注意，他就把画好的 ui 复制了进来。给文字添加画框后，分别原位复制颜色改为白，名称改为一，也可以改成零，但我不是，我就不改。 随后白色文字上移，注意文字图层要在画板内，但文字不要在画板内。随后复制画板，改变背景颜色，将白色文字移入画板，黑色文字移出画板。 回到按钮，把云彩吹走，星星透明度改为一百十档缩小。随后调整第一个蛋的颜色，并且调整顶部的圆形颜色和背景色一致。最后给按钮添加胶糊，触发模式为蛋机 智能动画前后晃动，动画时长居然给到一千。最后打开预览，一个简单的按钮，动画就做好了。五星评论家麦克阿泽表示，当我看见十八座设计的时候，我就知道做设计能赚钱，因为被开发档案可以赔！ 跟着十八学设计迟早开上，法拉利大型设计纪录片持续为您播出！

如何制作扫描动画一个二画一个正方形，去掉填充，加个描边和圆角，再画一个矩形，复制一份旋转九十度，全选居中，去掉顶层， 再画一个矩形，复制一份，加个颜色，将下方举行拉长，添加渐变并修改透明度。全选边组，复制三份，调整位置和大小， 双键足键及连接画板选择 abc d 类延迟修改为一， 选择智能动画，延迟修改为五百。将组建拖入做好的设计， fam 的扫描文件就做好了。