在Axure中可以通过母版解决多个页面中重复内容的编辑问题。就像PPT中的母版一样,只需要把每个页面中都有的内容在母版中编辑完毕,然后添加到相应的页面中。当页面中添加了母版的内容时,如果母版中的内容发生了改变,页面中的内容也会同步改变。
我们先来看一下母版的基础 *** 作:新建、编辑与删除。(图7-1)
(图7-1)
点击面板中的新建按钮或者点击面板空白处按快捷键<Ctrl+回车键>完成母版的创建。
创建后可以对母版名称进行编辑,双击母版名称,画布则变成母版的编辑区域。母版画布中可以像组织页面内容一样,放入元件、添加交互等组成模板的内容。
如果需要删除一个母版,需要先将母版从所有关联的页面中移除,才可以删除母版。被删除的母版有下级母版时,下级母版将被同时删除。如果需要查看母版被添加到哪些页面中,可以在母版名称上点击【鼠标右键】,在菜单中选择【使用情况】进行查看。
在母版名称上单击<鼠标右键>,打开右键菜单,在菜单列表中点击选项【添加到页面中】,在d出的窗口中,可以指定将母版放到哪些页面中使用。指定页面的时候软件提供了一些快捷功能给我们使用。(图7-2)
(图7-2)
如果页面上不再需要某个母版,或者将某个母版添加到了无需添加该母版的页面中,我们可以通过在母版名称上点击<鼠标右键>,打开右键菜单,选择【从页面中移除】,在打开的页面中选择要移除的页面后,点击【确定】即可完成移除。(图7-3)
(图7-3)
另外,也可以在页面中,点击母版将其选中,然后按下<Delete>键其删除。
母版除了使用前面的方法添加到页面中,还可以通过点住母版名称拖放到画布中的方式添加到某个页面中。而且为了满足不同情况的需要,软件提供了三种拖放方式。拖放方式的选择可以通过在母版名称上点击<鼠标右键>,打开右键菜单,在【拖放行为】的二级菜单中进行选择。(图7-4)
(图7-4)
允许将母版内容放入画布中的任意位置上摆放。
母版内容放入到画布中并松开鼠标后,母版内容会自动放置到画布中的固定位置上,这个位置与母版中该内容所在的位置一致。
允许将母版内容放入画布中的任意位置上摆放。但是,当拖放结束后,这些内容与母版脱离联系,变成普通元件存在于画布中。母版进行编辑发生改变时,这些内容不会同步发生变化。
圆儿:这样果然很方便!但是还有个问题。母版中的内容,包括交互都是可以重用在任何页面上,并且与母版保持一致。但是,假如母版中有一个按钮,我需要在不同的页面中,点击这个按钮时,显示不同的内容。需要怎么做呢?
小楼:我没太听懂,你举个例子说一下。
圆儿:比如说啊! A、B两个页面中添加了同一个母版,母版中有一个在线客服的按钮。在A页面中,鼠标进入这个按钮时显示客服小张的头像,而在B页面中,鼠标进入这个按钮时则显示客服小李的头像。
小楼:嗯,这么说我就明白了。 我也给你举个例子。我们家里用电,如果只有一个供电总线,那么开关供电总线的电闸会影响家中所有的供电。但是,我们希望每个房间的供电都能单独控制,所以,需要安装一个设备叫“配电箱”,通过配电箱就可以对每个房间的供电进行单独管理,不会互相影响。在Axure中,母版中的每个触发事件添加交互都像供电总线,影响所有使用了这个母版页面。如果在添加了母版的页面上给母版中的某个触发事件单独添加交互,这就需要我们给母版中的这个触发事件接上一个“配电箱”,这个“配电箱”的名字叫“自定义触发事件”。
(图7-5)
(图7-6)
2、创建一个自定义的触发事件,就如同需要购买一个配电箱。
创建自定义触发事件,需要先双击母版名称,打开母版的编辑区域。然后,在导航菜单中,点击菜单项【布局】,选择列表中的最后一项【管理母版触发事件】中进行创建。本案例中,需要对按钮元件的【鼠标移入时】事件进行不同页面的交互设置,就可以点击【+】添加一个自定义的触发事件名称,比如:“MyMouseMove”。(图7-7)
(图7-7)
注意:只有画布中编辑母版的内容时,才能在导航菜单中打开【管理母版触发事件】的选项。否则,该选项为灰色的禁用状态。
为按钮元件的【鼠标移入时】事件添加交互,【添加用例】,并设置动作为选择【引发事件】为“MyMouseMove”。(图7-8)
(图7-8)
将母版添加到PageA和PageB两个页面中。在添加了母版的页面中点中母版,则会在交互的功能界面中出现这个母版中绑定的所有自定义触发事件,就像从配电箱中接出的分线。(图7-9)
(图7-9)
为自定义触发事件“MyMouseMove”,添加用例设置动作为【设置图片】于图片元件“CallCenter”,为客服小张的头像。(图7-10)
(图7-10)
然后,继续设置动作【显示】图片元件“CallCenter”,【更多选项】中选择“d出效果”。d出效果能够让鼠标离开时,显示出来的图片元件“CallCenter”再自动恢复隐藏状态。(图7-11)
(图7-11)
为自定义触发事件“MyMouseMove”,添加用例设置动作为【设置图片】于元件“CallCenter”,为客服小李的头像。(参考图7-10)
然后,继续设置动作【显示】图片元件“CallCenter”,【更多选项】中选择“d出效果”。(参考图7-11)
Axure神奇 *** 作系列 - 循环(第一讲)
众所周知,我们使用Axure不仅仅能够制作原型图,也能在原型图中实现一些复杂的交互。接下来带来第一个神奇 *** 作-循环
循环的实现方式
通过JavaScript提供的LOOPS迭代的方法来实现html中的循环一样,Axure中也提供了不同的方式能够帮助我们来实现循环的 *** 作。在用Axure这么久以来我总结归纳了两种循环的实现方式即: 触发事件 与 动态面板循环 ,其中 触发事件 可以针对元件本身进行 *** 作,而 动态面板循环 则是借助于动态面板的循环来触发循环效果。接下来将针对二者做详细讲解。
触发事件
触发事件原理
其实很多的同学在用Axure很久之后可能都没接触到触发事件这个动作,毕竟触发这个动作在动作库的最后面,对!就在这里!
那么当我们针对一个原件添加触发事件时候,发现动作的配置项和元件的交互有所类似,其实这个就是元件的真实交互,也就是说我们在对一个元件添加交互时候能够通过触发事件去触发一个元件的交互,那么如果这两个元件是同一个而且交互唯一的话?
没错,这就能够不断的去交互—触发事件—交互—触发事件—……,就可以进入到循环事件中了。那么这也就是触发事件的原理,通过元件本身的交互去触发自己的交互完成循环。
使用触发事件完成涟漪效果
那么在了解了触发事件的原理之后,我们通过一个示例来讲解如何通过触发事件来完成一个交互的循环,这里将通过透明度调整+尺寸调整的循环交互来实现涟漪效果,最终将会实现下图的效果:
以下为分析及实现步骤:
(1)涟漪循环解析
首先拿到一个交互,首先我们来分析下具体怎么实现效果 (这也是未来大家在做自己的交互时候需要先考虑的问题,而不是直接上手试错) ,那么一个涟漪实际上就是一个圆在放大自己的过程中降低自己的透明度直至消失,一个完整的涟漪实际上就是很多个这样的圆在放大自己的过程中降低自己的透明度直至消失了,所以,核心元件: 一个圆 ,接下来就是实现了
(2)涟漪效果实现
首先,在Axure中拖入一个圆。设置直径为100,填充颜色看自己喜好,边框取消掉,这样为了出来的效果好看。接下来我们先实现圆形在放大自己的时候降低自己的透明度。
那么在这里我们会遇上第一个问题: 什么时候触发涟漪效果?
一般来说我会习惯于在元件载入时候就触发,这样能够实现页面载入之后就开始我们的效果,当然根据实际情况也可以点击之后触发或者鼠标移入之后触发等等,此处根据自己需要的效果灵活调整即可。那么根据载入时的交互来设计,得到如下交互:
这两步拆分如下:
在2000ms中以锚点为中心将圆的尺寸放大为直径240;
在2000ms中将圆的透明度调整为0%。
需要注意的是,在axure中添加动作时, 动作的先后顺序并不是按照组织动作的先后顺序由上向下进行的 ,在没有碰见等待时间之前,所有的动作同时进行。
所以整合起来就是,在2000ms中以锚点为中心将圆的尺寸放大为直径240 并且 将圆的透明度调整为0%。就这样,我们就能够实现圆的放大效果,接下来我们要考虑如何循环这个过程。
在循环之前,我们需要先将圆还原到放大之前的状态,这里不做细讲,简而言之就是将透明度和尺寸恢复到之前的状态(也可以把透明度再降低点,尺寸在小点,具体效果差异可以自己尝试着看)。那么在这里需要注意上面提到的一句话: 动作的先后顺序并不是按照组织动作的先后顺序由上向下进行的 ,所以中间我们需要加上 等待事件, 这个事件的时间设定为0即可,对于Axure来说,只要有这个事件,那么交互在这里就会停下来。(这里建议可以尝试下不做等待事件看下最终的效果,可以加深理解),然后我们得到这个交互:
这个时候我们F5一下,就可以发现元件放大透明之后返回到自己原始状态了,那么接下来就是如何循环了。
这里直接讲解:添加触发事件动作,选择元件为自己,然后由于我们的交互是做在自己的载入时动作上的,那么,下方选择载入时,这样就完成了一个触发事件了。
F5预览下看下,一个圆就能够自己搁哪儿放大透明然后变回来再放大透明如此循环了。那么至此,其实我们已经完成了一个完整的循环了。
后面就简单了,复制三个相同的圆,然后给另外两个圆的交互加上一个等待事件,把三个圆叠加在一起就完成了!F5一下,看下效果~
小结
通过触发事件我们能够很方便的实现一个循环,通过触发事件我们能够做到闪烁、涟漪、旋转、左右横跳(误)等等各种 *** 作。那么问题来了~
由于触发事件只要开始了就进入了一个闭环,就算在中间插入其他的动作,也只是打断了一会儿,导致这个循环会不听的进行下去,那么, 如何停下来?
反正目前我也没想到好的办法,所以下一期我们来介绍一种通过其他的元件来实现循环并且能够随时停止继续的方法— 动态面板实现循环 。
鼠标单击跳转就是最基本的元件交互事件,可以用于鼠标点击时,也可以用于移动设备上的手指点击时。我们以的主导航(发现/关注/消息)跳转为例,说明元件的交互过程。
=======================================
Axure 9.0元件交互事件
单击时:当元件被点击时。
双击时:元件被鼠标双击时。
右击时:当元件被鼠标右键单击时。
按下时:当鼠标按下左键没有被释放时。
松开时:当元件被鼠标点击,这个事件由鼠标按键释放触发。
鼠标移动时:当光标在一个元件上移动时。
鼠标移入时:当光标移入元件范围时。
鼠标移出时:当光标移出元件范围时。
鼠标停放时:当光标在元件上方悬停时。
鼠标长按时:当鼠标按下超过2秒没有被释放时。
按键按下时:键盘上的按键被按下时。
按键松开时:当键盘上的按键d起时。
移动时:当元件移动时,在页面中的坐标位发生了变化。
旋转时:当元件旋转时。
尺寸改变时:当元件宽度或高度发生改变时。
显示时:当元件通过交互动作显示时。
隐藏时:当元件通过交互动作隐藏时。
获取焦点时:当一个输入项获取焦点时。
失去焦点时:当一个输入项失去焦点时。
选中改变时:适用于下拉框,当下拉框被选中的项发生了改变时,通常作为事件的一个逻辑条件。
选中时:当复选框或单选按钮被选中时。
取消选中时:当复选框或单选按钮取消选中时。
载入时:当元件从一个页面的加载中载入时。
文字改变时:当单行文本框或多行文本框中的文字发生改变时。
状态改变时:当动态面板被设置了“设置面板状态”动作时。
拖动开始时:当一个拖动动作开始时。
拖动时:当一个动态面板正在被拖动时。
拖动结束时:当一个拖动动作结束时。
向左拖动结束时:当一个面板向左拖动结束时。
向右拖动结束时:当一个面板向右拖动结束时。
向上拖动结束时:当一个面板向上拖动结束时。
向下拖动结束时:当一个面板向下拖动结束时。
滚动时:当一个有滚动的面板上下滚动时。
向上滚动时:当一个有滚动的面板,向上滚动时。
向下滚动时:当一个有滚动的面板,向下滚动时。
Axure 9.0元件交互样式
鼠标悬停:当鼠标悬停在元件上时,元件的显示样式。
鼠标按下:当鼠标按下元件时,元件的显示样式。
选中:元件被选中时的显示样式。
禁用:元件被停止使用时的显示样式。
获取焦点:当光标聚焦在元件(如文本框)上的显示样式。
=======================================
*** 作方法
第一步:
添加用例:在设计区域选中元件,在右侧交互面板中点击新建交互,我们会看到该元件可用的事件列表,点击其中的一个事件,点击右侧的用例图标或者直接选择想要添加的动作。
第二步:
插入动作:鼠标点击动作名称,开始添加动作,支持添加多个动作。当我们准备插入第二个动作时,点击用例下方的圆形十字架,开始插入更多动作。
第三步:
配置动作:动作选择完毕后,我们还需要为动作进行一些规则或属性的配置。比如,我们添加的动作是打开链接,在动作配置中,需要添加链接页面并选择页面打开的方式(当前窗口、新窗口/新标签、d出窗口和父级窗口),最后点击完成。
第四步:
设置交互样式:
选中元件,点击新建交互,可以进行悬停、选择、禁用等相关的交互样式设置;
第五步:
在预览或生成的HTML文件进行查看。
参考:https://www.jianshu.com/p/ae12af2a1f43
=======================================
元件交互示例:
(1)鼠标按下效果:
点击按下按钮置灰这样一个静态效果:就不用设置【交互动作】 ,直接设置【交互样式】即可
(2)鼠标选中效果:
希望 “提交”按钮 选中后, 变蓝色+下划线:
1:选择文本输入框,右边 *** 作区选择【交互】-【新建交互】
2:插入动作:鼠标点击动作名称,开始添加动作 「鼠标点击时」
3:编辑动作:动作选择完毕后,选择「设置选中」,设置选中动作细节
注:如果多个按钮,不同效果
法1)给不同的按钮123起名字,设置按钮1交互动作时设置好对应按钮23的动作
法2)全选按钮-右键-设置「选项的组」名称 --->选项组的所有元素默认只能单选
4:选择交互样式:选择文本输入框,-【新建交互】,选择【选中】设置样式
5:发布,预览看设置的样式
=======================================
配置动作细节 :
(一)添加条件
有些时候,我们可能会在页面中表达一些判断逻辑,当xxx时,执行xxx动作。
为了做到这一点,我们可以使用axure提供的条件设置功能,来为一个元件设置条件并添加执行动作。
示例:
如果单击先出现d窗,再单击隐藏d窗
欢迎分享,转载请注明来源:内存溢出
评论列表(0条)