axure怎么做交互

x 九基础知识一、设置互动按钮将按钮小部件拖到画布上，右键选择交互样式， 设置鼠标悬停填充色设置选中填充色， 确定 新建交互，单击时 设置选中当前原件，单击切换选中状态，确定 预览看下效果。鼠标移入时，按钮显示为红色。 鼠标易除时，按钮恢复为蓝色。单击选中显示选中色，再次单击取消选中，恢复为蓝色。

大家好，今天给大家分享一下我们实战中经常用到的一个交互多情形的情况。呃，我们演示一下效果， 我们点击按钮，这边会弹出一个成功和失败两个情形，那当我选择成功的时候，我会提示登录成功，我选择失败的时候，他会提示密码错误， 那这种交互是怎么去实现它呢？我们首先来讲一下 x 九，我们先把这边原件先把它显示出来， 所以我们这边总共会有成功和失败两个情形， 那我们该如何去添加交互呢？嗯，首先我们用另外一个按钮来重新做一下演示，首先我是新建交互单机时，要干嘛呢？去显示我们成功， 那我们还要再加一个等待事件，把它隐藏掉，再复制这个交互，这边设置隐藏好，这样我们交互是不是实现了？ 那我们现在要如何去添加另外一个事件呢？因为他是多种情形，所以我们要 鼠标一到这个单机时，这边会有一个启用情形，启用完以后我们给我们这个情形修改一下命名，我们就写为成功 确定，这样他就产生了一个情形，那我们接下来只要复制他孔处加微，他就粘贴了另外一个情形，那这时候我们再双击他， 我们点击他一下改为失败，那这时候我们再去修改我们的交互原件，现在应该是显示失败这个组合，同样的隐藏也是失败这个组合。确定 好，预览一下，把这两个线隐藏， 点击预览 好，现在我们去看一下看到没有，已经成功了，然后点击成功他就显示登录成功， 点击失败他就密码错误，那这是 x 九他的实现方式，那我们再看一下 x 八里面应该怎么去实现，同样的我们点击他 鼠标单机时去显示这个成功，再添加等待事件，再添加这个隐藏事件，勾选这个成功。 确定好了，现在他已经有了一个交互的， 那 x 八他这边跟球他那边的操作有点不一样，你看我悬浮的时候，他这边是没有一个启用星星的，但是你可以再双击 这个鼠标单机时，你看到没有双击的时候，他这边就产生了一个用力。二，这时候你可以给边改一下，改为失败。同样的我们显示他等待在隐藏， 确定看到没有，他这边就多了两个案例，我们把这个情形案例再给他修改一下，双击他这边是成功， 点击确定，这样的话他就出现了两个交互情形，我们预览一下 啊，这边我们忘记把它设置为隐藏的，选中，他们可以在右上 角这边勾选一下隐藏，点击他，他会提示成功或者失败，我们选择成功，那就是登录成功，选择失败他就会提示失败的提示语。 好的，这就是我们交互多情形的制作，分享到这里，谢谢大家。

今天介绍一下这款圆形软件，这款人就是 x 圆形设计工具，那他的这个主界面就是这样子的，这个很大的空白区域，就是我们设计的区域，就我们做网站是做成什么样，就在这里显示，那左边 这里有个页面啊，圆键啊，还有右边有些交互，这上面就是一个工具栏， 我们一般是按页面来组织这网站结构，页面就是类似这网站的目录结构一样，比如有首页，然后什么内容页，还有详细页，类似这样子，可以新建很多的页面，就可以组织这网站的结构。然后这边原件是什么原件？就是 网站的一些元素，比如有文本呐，有图片呐，你可都可以 拖到这边来点。这个时候他这边有对应这个这个图片的一些交互，比如你可以点击他有什么动作，一到这里要什么动作，就通过这边设计的。比如你看他交互， 新建交互单机时，我可以打开一个链接，单机时可以把它隐藏掉，这边就是做交互用的。然后你做好网站之后，他这里有些菜单，最主要是用到这个发布点，发布预览一下，就 在浏览器中预览这个网站到底是长什么样子，比如我在这个页面，我要拖一些，我在预览一下， 那他就这样子了，你看哎，移到这里，你看还有一个是什么功能呢？你点开一下，他就有这个页面的导航啊，你看下面就用这款眼镜 来说一下怎么做一个网站出来吧。首先这个网站我要放一个 logo， logo 大小这里这里可以设置大小的，一百乘一百吧， 把这个锁关掉，有一百乘一百的像素，我们看到左边有这个标志，还有上面也有标志， 那我可以在左边这里点一下，鼠标拖动，拉一条辅助线，上面也拉一条辅助线，这里刚好排版对齐啊，双击这里打到字板 logo， 就表示我以后可能这里会放一个 logo， 先占个位置，晚上还必须要一些导航， 那我可以把这个文本标签拉到这里，然后把它对齐，这上面有个锤子，还有居中，这样就比比较整齐了，再选中，我要跟这个 logo 对齐，你可以 按住鼠标，然后移移他，他就会有一条红色的线，你看他就表示已经对齐了，然后再放开，然后中间我就想放一个图片，一张大图片，那个尺寸我设置一下吧，尺寸设置成十六比九了， 这也是常见的一个视频的指出来，我按住键盘上四个键，然后鼠标 拖动，用它等比例的去缩放这张图片，再拉一个搜索框，这里有个文本框，把它拉到这里， 他可以接受用户的输入，在这里再加一个按钮叫搜索，点这个就搜索，在这边再加一个 关于，我大概首页是长这个样子，我点首页，然后就选到这个页面，点科技，然后就到科技的页面， 那我在这边页面，这里再建这几个页面呢？这里有个添加按钮，针扎一个页面，两个，三个，四个改善名字。那怎么链接到这页面呢？鼠标点一下首页，看到这边交互，这里有个交互，新建一个交互， 有单机时打开链接就我们就把他这个单机，你看他就选，他就会显示一些页面，这里 我链接到这个首页，再确定，表示我单击这个首页之后，就切换到这个首页这个导航里面，那其他的也类似， 我这这里还有个关于我，那我上面再加一个关于我的吧。对，这个还有个搜索，然后点搜索之后，那搜索有个结果啊，是吧？点右键也可以添加一个纸页面的， 这叫搜索。点搜索就跳到这个搜索一面，也是同样选中，他这里有个交互， 点到这个搜索网站内，本身的链接已经做好了。那如果是要跳到别的网站是怎么做呢？嗯，可以拉一个标签在这里。国内的网站备案成功后，都需要链接到他工信部的那个地址， 我在这里就可以扎进去点这里交互，就连接到 uil 或者文字路径。那工信部的网站是怎么样的呢？他网址是这个 备案成功后，他会给一个备用号你，然后把你的备用号改成他给你的备用号就可以了。做好了之后我们在预览一下，点这里发布预览，你看就是这样子的，我们点一下这里， 哎，点一下怎么会空白呢？因为我们科技这个页面呢，是没有内容的，所以说显示的是 空白啊。现在我想把这个科技啊，摄影这些二级频道全部都有这个导航条，以及这个搜索框怎么做呢？你同样可以把这些全部复制，然后在每个页面去粘贴嘛。 但这样子有一个不好的地方，就是如果要更改某一个名字，那这个地方要同步，要每次都要去更改，那就很麻烦了。这里可以把这个导航条变成一个模板， 以后就叫导航吧，导航栏就是做网站公用的部分，可以把它做成一个模板，每个页面都有，我只要改变这个模板，别的地方如果说是用这个导航的话，其实我全部更改科技，我把它拉到这里 啊，导航栏已经弄好，我们再预览一下，然后我们再点这边导航，看下点柯基，哎，就变成这样子，为什么是这样子？摄影、汽车变成 软件感觉都没变化，是因为我们每个页面都是长得一模一样的。那我能不能在导航这里摘一些东西， 表示我在这个栏目里面的，当然有的这个东西叫动态面板，我们到这模板这里面来，我是把所有导航都进行一更改啊，那我先选中个导航 点，右键这里有一个转化为动态面板，变成动态面板之后，双击进去显示有动态面板，这动态面板是有很多种状态，现在的动态面板只有个状态， 先把这首页状态变出，加出上面有个文本，把它加出，表示我在首页的页面，我可以先标志一下，把它变成首页上面科技、摄影、汽车这些也是当一个状态，我先把它复制一下， 把他这个第二个状态变成科技啊，再双击进去，他还是一样的把科技变成出体，然后把首页变成原来的，表示在科技这个状态里面。同理，把上面这几个的状态也做一样的记， 弄好之后再预览一下首页，你看这里变成出体 科技也是摄影新手编程教程原件都没有错，当然你可以把它变成其他的颜色，反正发挥这想象，万 本站做好了之后，你就可以把它发布出去，生成二级天猫文件，在这里发布生成二级天猫文件， 把这文件保存在我们上次那个网站目录在哪里呢？我们上次安装目录是在第一盘 wh 目录下面有一个这个三 w， 就表示这个网站的所有内容就放在这里面了。 好，宣传一下。 板砖默认是因弟子这个页面作为首页的，所以我们把这个首页改上名字，改完之后再重新生成一下。 哎，这样就可以了。好，做个简单的网站就已经做完了。如果是需要这款软件的话可以私信我，我把这个下载地址发给你们。

首先拖入一个动态面板，制作左侧导航，命名为 left， 将其填充颜色改为蓝色。 然后复制它，将其填充颜色改为黑色。作为顶部导航，命名为 top。 在这里我们勾选百分之百宽度，请适用于浏览器，这样在生成圆形的时候，他的宽度将充满整个屏幕。然后我们制作左侧导航的交互，在页面交互这里，我们设置窗口尺寸改变时 设置尺寸。选中左侧导航，将其高度设置为 window they hate。 这样在屏幕加载和尺寸改变的时候，左侧导航将撑满整个屏幕的高度。 然后我们再拖入一个标题预览原型看看。我们可以看到，在窗口尺寸改变的时候，左侧导航和顶部导航撑满了整个屏幕。

大家好，这节课我们来讲解一下我们的交互面板， 我们可以看到他这边有一个新建家户的按钮，当我们点击他的时候，我们可以看到他这边的家户主要针对的就是我们的页面啊，我们的窗口啊， 当我们的页面单击时，双击时鼠标右击，还有我们的页面按键呢，窗口尺寸改变呢？这些动作就可以去控制当我们的页面载入的时候的一些交互， 是这是针对页面和窗口的，那当我们是针对 页面中的原件的时候，我们就需要选中我们的原件，这时候我们就可以看到我们选中这个矩形的时候，首先这边就可以给我们的矩形去命名，比如这边是取名为按钮， 那我们给这个按钮行。第二个就是新建交互，下面他这边用的就是我们常用的交互，就是单机时打开链接啊，四肢可见性啊，还有我们形状的一些属性， 他的交互样式啊，鼠标闲庭等等交互样式，那这边还有一个我们工具的提示选项组，然后禁用，选 用、引用页面等等一些功能。那我们现在来设置一下交互，我们选中按钮， 然后我们点击新建交互，我们就可以看到我们这边有单机石，双机石，鼠标啊，右击啊，按下还有移动啊等等这些交互功能。 那这些都是叫做触发事件，就是我们这个原件的时候，我们是通过什么来触发他， 比如我们选中单机时，那就是我们的鼠标单击他的时候就会触发，那触发完以， 然后就是选择我们触发的动作，所以我们就可以去添加我们的动作，比如我们这个案例中就是要单击这个按钮，让他去显示隐藏这个矩形，那我们的动作就是选择显示和隐藏， 选择完动作完以后，他就会让我们选择我们的目标原件是哪一个， 这样的话我们就可以去选中我们下面这个矩形， 我们点击他，那我们让他干嘛呢？我们这边要演示切换，切换就是显示一回，显示一回，隐藏就是切换，那我们点击确定，我们可以去伊朗看一下， 单击他他就隐藏了，再单击他他就显示出来的，所以这就是我们的交互的动作，从上到下这就是交互事件，交互动作，交互的对象。 那当我们悬浮到上面的时候，我们可以看到他，我们单机时，我们还可以启用前行去添加一些条件的判断。同样的我们悬浮到这个动作的时候，我们还可以再去添加一些目标， 当我们不需要的时候，我们也可以去删除掉他，比如我们的情形，这现实 哦，当我们不需要的时候，我们可以点击这个删除函，这样的话我们的清新他就可以删除掉，那这边没有选择目标，我们可以删除掉， 那我们有时候除了双击这边，我们可以发现他会弹出一个交互的编辑器，这样也是跟我们刚才这样去添加动作是一样的， 左边就是添加我们的事件，我们可以再切换到我们的动作，然后这边就是自己组织我们的动作， 比如我们这里四字文本，同样的我们可以选择我们这个矩形，选择完以后，这边就可以去四字动作， 他这边我们刚才选择的是这个目标，就是显示隐藏这个原件，我们让他干嘛呢？让他的文本这边还有副文本啊，很多个原件的选项，大家可不可以去试一下？ 那我们让他的文本等于什么呢？爱诗的 我们可以看一下，就是单机的时候，四字文本显示隐藏这个东西的文本等于爱思的 x 峡谷点确定 你再注意呢？单机时隐藏看到没有？他除了显示隐藏，同时他的文本也变了， 同样的我们的按钮我们可以给他去添加一些交互的样式，我们双击他 可以看到总共有鼠标闲庭啊，按下选中啊，获取焦点啊这些样式，那我们就双击闲庭的样式， 要让他干嘛呢？比如我们鼠标一入的时候，我们这个填充式把它改变为另外一个颜色， 确定这就是悬停的样式，我们预览一下看到没有？当我们手表一入的时候，他会变成另外一个演示， 这就是悬停的样式，那其他样式同时也可以去试一下。 那我们的交货面板这个东西我们可以去设置，比如我们给他一些提示，告诉别人这个是个按钮，这是选项组，这是禁用选用，我们可以默认去勾选他， 那我们预览一下看到没有？他这边会有显示一个按钮的调提示， 那我们就可以看到我们的交互面板，总共会有这些功能。好了，这节课就讲解到这里，谢谢大家。

大家好，今天给大家讲解一下我们的 web 端的顶部导航， 在我们的眼镜铺里面拉一个顶部导航，我们首先拉一个响应式的， 然后调整一下位置，把它放到零零的位置，我们预览一下， 我们可以看到虽然在我们的言行里面，我们的宽度只有一三六零， 但是我们预览的效果它是会随着我们的屏幕机制摄影的，那这就是响应式的做法，然后我们悬浮到我们的头像，他还会展开他的二级菜单， 那我们回到原型，我们什么场景下才需要去做这个小意思呢？一般是要看大家的时间， 还有你对这个响应式你掌握到什么程度，如果你的时间比较紧急的话，我们也可以用这个固定的尺寸， 我们调整一下位置，他的哎轴和外轴，那我们现在预览一下， 我们可以看到他会水平居中于我们的屏幕，那我们的尺寸是一三六六，所以他这边也是按固定的尺寸去显示。 那像我们有时候内容高度比较高的时候， 我们可以拉几个矩形来示意一下，假如我们的内容宽度是一二零零，那我们拉几个矩形， 这边给他个其他的颜色。好，我们预拿一下， 我们可以看到当我们的内容的高度超出屏幕的高度的时候，他的右侧会出现滚动条，那我们可以滚动去查看内容 被发现，当我们滚动内容的时候，我们顶部的导航会跟着被移走，那我们正常的应该是要让他吸附在顶部，那这时候 我们就要联想到一个主见，那就是我们的动态面板，因为动态面板他有一个固定到浏览器的一个属性，所以我们只需要把我们的顶部导航右键 转为动态面板，这样的话我们就可以发现在他的样式面板里面有个固定到浏览器的属性，我们把它勾选一下，那我们先按他默认的左侧顶部，我们预览一下， 我们会发现他跑到左边了，那么滚动一下屏幕可以发现他可以一直固定到顶部，那我们要让他居中该怎么设置呢？我们回到他的参数是 你可以发现在水平固定这个里有个居中，那我们确定一下，在预览我们就可以发现他已经回到居中的位置了， 那这就是利用动态面板来实现我们的顶部导航固定在顶部的一个功能。好的，这节课我们就讲解到这里，谢谢大家。

s u 制作点赞交互动效，我们先来预览下效果，单机变成红色，再单机还原白色，新型由大变小再变大。进入 x u 儿选中新型并右键单机 选择交互样式选择，选中选项，设置填充颜色红色并确定。接下来给新型添加单机事件设置尺寸，选择当前原件，三零和二五是原始尺寸等比修改宽为二十二，高为十八。毛点修改为中心动画为线性，时间一百，这是设置心形变小。接下来我们需要还原心形的大小，同样是设置尺寸， 选择当前原件，此时的大小不用修改。毛点选择中心动画为线性，时间一百。最后我们需要变颜色设置，选中交互，选择当前原件，直为操构切换确定完成，我们来预览下效果。

设计的 app 界面如何模拟真机演示？先看看效果， app 长图可以用鼠标滑动查看。 教程开始，先下载个手机模型，按住 ctrl 键，从标尺蓝托条、全局辅助线到屏幕最右侧，再画个与屏幕一样大的矩形 鼠标右键举行选转换为动态面板。在刚转换的动态面板上，再次鼠标右键，还是旋转化为动态面板。划重点，转换两次。 鼠标在右键单击这个选项，目的是把默认设置取消，现在双击动态面板，双击 ct， 一进入内部，同样鼠标右键，再单击这个取消默认在在。在 鼠标右键选滚动条中的自动显示垂直微调宽度，让滚动条显示在辅助线右边，到这里交互设置就结束了。添点素材看看效果。双击内部的动态面板，再双击 sty 时间关系，我直接使用图片了，注意内容要在辅助线左边，预览效果就是这样了，下期在此基础上延伸知识点。

大家好，这节课我们来教大家如何实现我们 bent 图的自动轮廓，涉及到的知识点主要是加载时的一个交互事件，以及我们原件动态面板的一个交互动作。 首先我们可以分析一下我们的 band 图，它是一瓶一瓶的浓薄，那这时候我们就可以联想到用我们的动态面板，那我们先拉一个矩形，代表我们的 band 图的一个内容， 然后给它填充一个颜色，这边写个一，这样代表我们现在是第一屏，然后把它转为动态面板，这时候我们再去给他去复制他的状态， 代表我们现在每一瓶 band 图它的一个内容。好，我们现在去修改一下它的第二个状态，现在已经处于状态二了，然后我们把里面的内容换一下代表一下， 然后再去修改，我们选中我们的状态三，把他的背景是改一下，文案改一下。 好，现在我们可以看到我们这边已经代表的他总共有三个状态， 然后我们给这个 band 图命名一下，我们就命名个一就好。那接下来我们就给这个状态面板去添加交互事件，选中它行键交互，因为我们是载入时， 就要让他自己去自动轮驳，所以我们就采用这个加载时要干嘛呢？我们要让他本身去轮驳，所以我们就设置面板状态，哪一个呢？当前他这自己的这个元件 要干嘛？当前原件状态，我们这个状态是要让他永远的下一个下一个，所以而不是具体的某一个，所以我们这边应该选择下一个， 然后我们是要让他循环的轮廓，那你就要勾选这个从最后一个到第一个的自动循环，这里还有一个更多选项，我们也要勾选一下他循环的一个间隔，假如两秒的时候就切换， 那这边首次状态是我们刚加载的时候，要不要等两秒？那我们 默认他勾选，我们就过去改他确定这样的话我们去预览一下，我们可以看到 他等两秒的时候他会自动的去变化。那我们这边跟上面的区别就是我们少了一个切换的一个动效，我们这边可以再调整一下， 检查这个交互，这里有一个进入蛇的动画还有退出，那我们是要让他向左滑动，那我们勾选一下他这里退出也会自动的选择向左，然后这边是我们动效的时间，我们点击完成再预览一下， 我们就可以看到两秒后我们这个 band 图，它就会自动轮驳，然后会循环的一直向左滑动。好的，这就是我们 band 图的一个自动轮驳，谢谢大家。

好，哈喽，各位亲爱的小伙伴，大家好，我们这次来做一个交互的教程。嗯，交互设计呢是呃，设计两个或多个系统之间的一些行为，适之配合达成某种目的的一种行为设计，叫做交互设计。 嗯，我们现在交互设计当中呢，我们经常会使用到 x 这个软件来进行这个圆形图的一个输出。 好，嗯，在互联网的狭义交互当中呢，我们通常会认为交互设计呢是基于商业目标和用户目标做权衡的一个岗位， 这个我们后会网会提到。首先的话我们先进行一个界面的介绍，我们右侧呢会有样式交互以及说明，在样式当中你可以修改你的画布大小，这样和 ck 十和 ps 会很像。但是，呃，如果你没有的话，你可能用的是 x 八，但是并不重要啊， 这个都可以调。然后我们这边从左下角的元件当中突出两个主键，然后我们可以看到左上角的概要当中会在当前页面显示出来两个图层或类似 ps 的图层，当然你也可以创建多个页面。 好，我们这边的重头题是我们的左下角是我们经常会应用到的东西，就是原件啊，原件呢是一个不太常规的一个翻译啊。嗯，就是它里面会有矩形，圆形，文字模块等等等，会类似于你 ps 当中的一个，点击 t 去输文本，然后去画这个矩形是一样的， 但他这个效率会更高一点。我们这边来创建一个模板，右键一个界面元素可以看到我们，我们就可以在右边的模板当中找到他了。模板呢是一个通用的样式， 嗯，可以把它拽到任何的键盘当中，但是你要想修改的话，你可能需要去修改他整个的一个呃模板样式。好的， ok， 嗯，在接下来呢，我们来做这个轮拨图的教程。 伦布图呢，经常在网页和手机移动 app 当中，我们可以看到是一个重要的广告位入口，他是在头部的，我们先拖拽一个动态面板出来，在左边的元件库里面。动态面板呢，是一个很重要的组件。 好，我们这边切换到盖要当中，给当前状态打一，然后通过右边的加号我们复制三个出来。嗯，动态面板呢，他会有 n 个状态，你可以制定他每个状态当中的样式，所以说我们给一来加 一个样式的矩形，我们可以二来加另外一个样式的矩形，这样我们在切换面板出来的时候就会发现页面会发生一些改变。嗯，动态面板呢，以后我们会经常用到，他是一个重要的桥梁，去撬动一个组件和另外一个组件之间的一个联系。 好，这个是我们的。呃，三个 内容层，我们先做好，把它三个内容做好之后，我们置换到首页上面，我会我们可以看到他默认显示的是第一个状态，我们现在需要定义他的状态转变， 呃，定住在两边呢，我们需要明白交互的三个要素，就是目标行为，或者是目标事件和影响。呃，也或者是动作和影响都可以。 ok， 我们现在来选择右侧的交互，然后点击添加交互，然后选择载入时，他会给我们把面板状态画出来，我们选择载入时，然后选择再往下的一集选择设置面板状态， 就是我们的面板该怎么样动，然后选择我们的面板，我们这边选择的是当前元件，或者是下面这个也可以，因为我们只有一个，然后设置状态为下一个， 我点击向后循环，然后加一个切换的动画，就是他动画，他在一和二之间切换的动画，然后不要忘记我们可以双击到这个 交互当中，双击载入时的那个交互事件，进入到这个详情的编辑器当中，我们要开启向后循环的间隔，这样子的话我们的呃交 就形成了啊，我们的东西呢会自己的进行一个轮廓，而在这个时候呢，我们呃的这一期的基本教程呢就完成了， 我们现在呢，呃把我们的图片进行一个替换，然后大概演示一个呆萌，感谢各位的观看。嗯，在下面的介绍当中你可以看到更多的知识层的内容，感谢各位，拜拜。

如何用 excel 制作开关交互？我们先看一下演示效果吧。 先做好两个样式，然后将样式设置为动态面板，剪切另外一个样式粘贴进动态面板的 state。 二、设置面板状态，在单机时切换到 state。 二、 设置另外一个面板状态，在单机时切换到飞机。最后做好啦，我们预览一下效果吧。

先看看做好的样子，可自动轮波鼠标左滑右滑切换，同时底部三个矩形发生颜色变化。教程开始，基础准备，随便找三张图，画三个小矩形，拖出一个动态面板，做成这样 开始填图。双击动态面板点绿色加号，新增两个 styt， 双击 sty 进入内部，找到一开始准备的图，拖入 stet 并调整位置返回，再进入 c。 二，拖入第二张图，第三张也是如此。 添加交互，选中动态面板点，在入时选，设置面板状态，勾选当前原件状态，选 nice， 勾选这些选项，然后保存。预览一下可以轮播，但效果声音下篇继续完善。

大家好，今天给大家分享一下我们的热区，上一节课我们已经讲解了基本原件，那接下来我们来详细讲解一下我们的热区。 我们的热区呢它主要就是有两个作用，一个就是给图片添加交互，那在我们的实战案例中，主要是用来给高保真界面既添加交互动作，把我们的界面串联起来。 第二个呢就是作为我们的页面的间距，作为我们页面跟底部或者跟其他原件作为间距隔离。那我们的实战中用的最 最多的就是给我们的界面底部去添加日趋，这样我们滑动界面的时候，他滑到底部的时候还有一部分间距， 这主要就是因为我们的热区他有一个透明的属性，看到没有，他是透明的，所以他其实在我们晕染的时候，我们是看不到这个热区的， 正因为他这个特性，所以他就可以用来添加这些交互。 那我们来实战演练一下，假如这边是我们的高保真同学，他已经会治好的视觉稿 just 是首页，然后只有我们换了一个电商的， 然后这是电商界面，那当我们想快速的把我们的界面的交互串联起来，不需要再重新去绘制的时候，那我们这时候就可以采用字曲，我们只需要在对应的位置需要添加交互的位置， 采用这区，然后我们再去给这区去添加交付单机时，让他打开链接， 然后去跳转到这个页面推荐页面，那这时候我们再复制一下这个热，取回到我们刚才的 推荐页面粘贴一下，然后再给他调下位置，那这边我们再把他的跳转页面修改一下，他应该是跳到电商， 这样的话我们就已经把这两个界面他们的交互串联起来，我们预览一下， 我们现在缩小一些，你看当我们现在在推荐页面，我们点击电商的时候，他就跳到了我们的电商界面，那在我们的电商界面，我们点击首页他就回到推荐页面了，所以这就是日趋的一个主要的作用。 那他的第二个作用呢？就是我们作为 间距使用，我们可以发现当我们给界面添加的图片，当擦出屏幕的宽度的时候， 我们界面他所能滑动的距离其实就是我们沿线最底部。比如我们这里添加了四张图片，我们预览一下我们能滚动的界面是不是只能到最后一张图片的底部， 那我们正常是应该还有一段滑动的区间呢？那这时候我们可以用什么来实现呢？我们就其实就可以用日曲来取代这个间距， 给他创建再填充一个间距，比如我们滑到底部的时候，我们再让他再滑动四十个像素，这样的话 我们的界面就看起来他的间距就比较舒服，看到没有？这就是日曲的作用， 那当我们在实战中的时候，我们就可以把这个日曲把它转为模板，这样你就可以定义为事实像素的间距， 确定那以后你就是你就可以给所有的界面都去复制这个是时间距的模板这区， 这样的话你就可以统一给每个页面的底部都添加四十间距，那当你某一天你想把它改为二十的间距，那你只要修改这个字区他所有界面 的底部就统一修改成二十的间距。好的，这就是热区的作用，谢谢大家。

好，本节课呢，我们将进入 x 鼠标操作的交互事件的学习，那本节课的建议学习时长呢是一到三分钟，重要程度呢是一颗星，学习难度呢是一颗星，我们来看一下本节课的学习内容。 首先呢我们来看一下鼠标操作的试卷，这有哪些试卷呢？总共有四个，第一个呢是单机页面，就是当鼠标对页面进行左键单机的操作时，触发一定的反馈，第二个是双击页面， 然后呢第三个是右键点击页面，第四个是鼠标在页面上移动。这四个事件呢，我们基本上啊， 基本上都用不到，就是说在实际的工作中啊，所以说呢，我们就是了解一下，就是说这节课呢，我们就了解一下，我们简单做一些效果，就是说大家知道有这样的一个功能 就可以了。好，我们打开 x 来看一下。 首先呢我们进入鼠标操作这样一个面板，然后我们看一下单机页面，双击页面啊，右键点击页面和鼠标在页面上移动， 这个的话，我们都用这个文本，这个空间呢来给他做显示啊，首先呢我们给这个文本空间命一个名，这个叫 t 一，然后第二个叫做 t 二， 第三个叫做 t 三，第四个叫做 t 四， 好，我们用 t 一， t 二， t 三， t 四分别来，嗯，作为这四个事件的一个反馈。 首先呢我们单击页面，我们这里呢，呃，来在右侧新建交互，当我们页面被单击时怎么样呢？页面被单击时，我们设置文本，设置哪个文本呢？设置我们的 t 一，对吧，设置 t 一文本， 设置它的值，设置它值什么呢？设置它的值为我是 t 一。好， 然后呢？我们再建交互，当页面被双击时，我们怎样呢？我们再设置文本，设置 t 二，文本设置他的指示吗？我是 t 二。 好，然后我们再去第三个试卷，鼠标右击时，右击时我们设置文本 t 三，我是 t 第三。 那么第四个事件呢？是鼠标在页面上移动的时候，鼠标在页面上移动的时候，我们设置文本， 这里的话，呃，我们设置文本就是 t 四，我们设置他，为什么呢？我们这里就是给他设置一个，呃，比特殊一点的，我们来显示这个鼠标实时的一个坐标， 这里的话我们来显示一下鼠标的坐标，我们在函数中找一下这个。 好，这里有一个圆圈，然后这里面有 xy， 代表的是坐标 x， 喂，你把它给哎展示出来就可以了。好，这样的话我们就设置完了，然后我们刷新一下页面看一下， 我们会发现一个现象，也就是说，呃， 我们单机页面的时候，他显示我是 t 一，然后双击页面的时候这个也变了，然后右键的时候他也变了。这三个事件都已经啊成功的啊，被我们实现了，但是我们会发现最后一个事件 他其实并没有达到我们预期的一个效果。我们来看一下原因是什么呢？我们首先是打开这个设置这个面板， 然后我们看一下啊，我们当时选的是什么呢？我们当时选的是这个 x， 这个 y， 但是他这个标题什么是原件的 一个 s 坐标和外坐标，那这个是不对的，我们应该选选什么呢？我们应该选这个鼠标指针的 x 坐标和外坐标，所以说这里我们要重新选一下，把这个给 删掉，这样的话我们再来刷新一下这个啊页面，看一下效果，哎，我们发现这个坐标就变得就是比较真实了，对吧？这样的话就对了。 好，那本节课呢，我们就到这里啊，主要是学习了一下啊页面交互中的鼠标操作啊引起的页面交互。那么到下节课呢，我们将会啊进入到页面交互中的键盘操作。