Axure怎么使用中继器制作手风琴效果原型?

作者&投稿:富何 (若有异议请与网页底部的电邮联系)
~

手风琴是一个非常常见的系统原型,但Axure并没有原生的手风琴,所以当我们需要使用手风琴时,我们必须自己制作手风琴。很多同学能做出简单的手风琴效果,却很少用复读机做手风琴模板,这样会导致效率低下。所以作者今天就教大家如何用中继器制作手风琴原型模板~谁说鱼与熊掌不可兼得?选择,Axure理论+实操双向提升~精选多套系统全面Axure自学视频课,综合教学,适合新手0基础入门到进阶,感兴趣有需要都不要错过~

Axure使用中继器制作手风琴效果原型步骤:

一、材料准备标题矩形——用于显示标题文字,适当调整矩形的大小、填充颜色和边框线颜色。

内容矩形——用于显示内容文字,适当调整矩形的大小、填充颜色和边框线颜色,默认隐藏,并设置单项组。

向下箭头——内容展开或收起的标志,让手风琴更加清晰。

中继器——将上面三个元件组合到一块,然后复制到中继器内部摆放。

中继器表格增加2列:

title列——代表对应每个手风琴内的标题;

text列——代表对应每个手风琴内该标题下面隐藏的内容。

如下图所示,在表格内填入内容即可:

注:中继器要取消勾选隔离列表之间的选项组。

二、交互制作1.中继器每项加载时设置文本——中继器每项加载时,我们要把中继器列表里的item.title列的文字设置到标题矩形,把item.text列的文字设置到内容矩形。

设置选中——我们是通过设置内容矩形是否选中来控制内容矩形的显示与隐藏。这部分后续会详细介绍,这里要介绍的是,我们会默认显示第一行手风琴的内容,其余隐藏,所以我们在这加一个条件,如果item.index==1,就是第一行的意思,设置选中内容矩形为真。

2.内容矩形选中时显示——当内容矩形选中时,我们就显示当前元件,即显示内容矩形。由于内容矩形默认是隐藏的,所以在中继器加载第一行时,会选中第一行的内容矩形,这样内容矩形就会显示出来。

旋转——内容矩形显示时,将向下箭头旋转180度,这样向下的箭头就会变成向上。

3.内容矩形取消选中时隐藏——当内容矩形取消选中时,我们就隐藏当前元件,即隐藏内容矩形。

有的同学可能会问,没有看到有触发内容矩形取消选中的事件,其实这里我们不需要写取消选中的事件,因为我们开始的时候对内容矩形设置成单选组,所以当另外一行被选中时,当前选中的状态就会自动取消,这也是单选组的妙用之处。

旋转——内容矩形隐藏时,将箭头旋转180度,这样就可以恢复原来位置了。

4.鼠标移入显示内容鼠标移入中继器内组合时,设置内容矩形为选中状态,这样就可以显示鼠标当前所在手风琴内的隐藏内容了。可以简单地理解为,鼠标移入触发了选中,选中又触发了显示,而又因为是单选组,当这行内容显示时有导致其他内容隐藏。

5.鼠标单击显示内容鼠标单击时中继器内组合时,同样也是设置矩形为选中状态,和上面的是一模一样的,原理也是相同的。一般而言,鼠标移入效果和鼠标单击效果二者选一,你们可以根据实际的需求设置。

三、后续拓展恭喜你已经学会用中继器制作手风琴了,后续你可以根据实际的需要,在隐藏内容里边添加不同大小颜色的文本、图片、链接。原理同时一样的,需要拓展的话在中继器内添加对应列的内容,然后把选中隐藏内容矩形变成需要隐藏组合即可。

最终效果:

以上所述就是“Axure怎么使用中继器制作手风琴效果原型?”的相关内容分享了,希望能够帮助到你!如果你还想要学习更多的Axure技巧,点击Axure相关文章,或者直接跟着我们的专业讲师开始Axure自学视频课学习体验~专业系统视频教程学习,学习收获总会比你零零散散图文学习来得更快速、更有效率~




Axure RP 使用基础教程
基础操作: 从创建元件开始,设定其名称、尺寸、位置、颜色和透明度,构建视觉层次。然后,深入到交互层面,设置各类触发事件,如点击、滑动,让元素生动起来。例如,你可以设置文本框元件的输入验证,下拉列表的选项,单选按钮的选择逻辑,甚至将元件转换为静态图片,通过组合与拆分调整层级。引入条件判断,设置...

Axure母版怎么使用? Axure母版功能详细介绍
1、先正常安装Axure RP工具,并且对该工具有一定的基础,对于一些基本的控件都能够熟悉使用的情况下使用该功能。2、正常打开Axure RP工具,新建一个空白页面,在该页面中我先填充部分内容,该页面在后续的其他页面中都得使用,如下截图所示,页面的内容是我的示例,大家根据自己的需要填充对应 的内容。3、...

如何使用axure在网页中嵌入视频?
1. 首先第一步打开电脑中的【axure】软件,根据下图箭头所指,在【元件库】页面中找到并点击【内联框架】选项。2. 第二步用鼠标将【内联框架】拖动到右侧画布中,并根据需要调整合适的框架大小。3. 第三步鼠标左键双击添加的【内联框架】,在跳出的【链接属性】页面中点击【链接到URL或文件】选项前的...

Axure有哪些使用小技巧?Axure7个使用小技巧分享
不过我们也可以画出泳道图样式,就是使用“表格”,调整一下表格数量就可以了。三、快速表格1.复制表格在之前的第一弹中说过这个,不过这次还是想再说一遍。在做列表需求时,经常需要画列表,不过Axure的表格我用不惯,所以每次都直接在Excel里把列表字段写出来。然后直接在复制到Axure里,就可直接把Exc...

Axure中怎么使用样式编辑器与变量管理?
1、、部件样式编辑器点击主菜单栏-工程-部件样式编辑器,打开部件样式编辑器窗口,编辑部件样式。(详细设置内容请参考:部件属性和样式窗口)2、、页面样式编辑器点击主菜单栏-工程-页面样式编辑器,打开页面样式编辑器窗口,编辑页面样式。3、、新增变量点击主菜单栏-工程-全局变量,打开全局变量窗口,点击...

axure中如何使用圆角矩形?
1、矩形 作用:一般用作要执行的处理(process),在程序流程图中做执行框。在axure中如果是画页面框架图,那么也可以指代一个页面。有时候我们会把页面和执行命令放在同一个流程中做说明,这个时候将两类不同的矩形做色彩区别,然后做说明就好了。2、圆角矩形或者扁圆 作用:表示程序的开始或者结束,在...

怎么使用AXURE画出曲线
很多朋友都不知道其实axure是可以画出曲线的步骤如下 1、拖出一个线条工具 2、然后右键选择变形 3、然后使用ALT+左键在线条上添加锚点 4、然后拖动锚点形成曲线 一起来看看具体怎么添加曲线 画曲线方法 1使用工具拖出一条直线 然后右键直线选择变形 2然后使用ALT+鼠标左键可以在直线上添加锚点 3然后...

Axure怎么使用中继器制作页面切换原型?
Axure使用中继器制作页面切换原型步骤:一、列表制作 这里我们直接引用课程【Axure教程】中继器入门教程-卡片制作中制作的卡片列表,并修改布局【每行项数量】为【2】;二、翻页设置 拖入两个文本标签,编辑为【上一页】和【下一页】,并创建交互:【点击时】分别设置当前显示页面为【上一项】和【下一项...

零基础新手怎么使用Axure中继器做出菜单原型?
零基础新手使用Axure中继器做出菜单原型步骤:步骤一:准备素材。从左侧元件拖出4个矩形,排列成菜单展开的样式;也准备一个中继器,直接从左侧元件处拖到画布上即可。tips:可以使用ctrl+shift,直接将矩形往下拖,同ppt。步骤二:设置菜单框架。双击中继器,把原本的框去掉,将菜单样式放进去,然后点击右...

axurerp原型设计-如何使用AXURE进行产品原型设计
如何使用AXURE进行产品原型设计 AxureRP(AxureRapidPrototyping)是一款快速实现、准确表达、带有交互效果且易于上手的原型设计工具。本人在曾参与某系统需求分析时开始接触AxureRP,初步掌握了一定的开发基础,成功制作出系统需求原型,对需求分析工作产生了积极效应。在此经验的基础上,后续又在其他项目中进行了较为成功的运用,...

温州市19787563708: axure中实现手风琴菜单效果,如何做? -
泰贾路斯: axure做出类似百度经验页面的左侧步骤栏的效果,步骤:1、制作页面 为了体现效果,需要做一个比较长(高)的页面,在Axure工作区中拖入4个矩形,分别为顶部标题、菜单、页面内容、底部.设置矩形宽度和高度,让其看起来像是一个页面...

温州市19787563708: axure原型,在手风琴菜单内嵌套一个手风琴菜单,即本来是2级的菜单,现在要实现3级联动的手风琴菜单 -
泰贾路斯: 你可以尝试使用中继器来完成,我给你一个2级的小案例,你可以按照这个改改 更多地案例可以参考:www.91axure.com axure夜话系列教程:www.iniuche.com

温州市19787563708: axure中继器是什么,怎么用? -
泰贾路斯: 在AXURE中,中继器是一个新的功能亮点,它就是一个数集的容器,中继器一共有11个动作,其中包括6个中继器动作和5个数据集动作.在原型制作中它可以导入图片和数据.在交互上它可以实现新增行、删除行、标记行、排序,筛选等,配合函数使用,中继器可以实现的高级交互效果更多.

温州市19787563708: Axure 7.0 部件里的中继器是干什么用的 -
泰贾路斯: 中继器(英文名Repeater)是Axure RP 7.0推出的新功能,是目前为止Axure最复杂的功能(没有之一),学习它的使用有助于我们快速设计一些复杂的交互界面.下面和大家分享我的使用心得.中继器这个翻译是让人费解的,如果直译成“重...

温州市19787563708: 怎么用axure制作一个简单的游戏 -
泰贾路斯: 无语,AXURE是原型工作,不是游戏制作工具,别本末倒置.是为了更方便,更高效的让团队人员了解产品的意图的工具

温州市19787563708: axure的中继器怎么实现求和传值给另外一个中继器?即:A中继器的数量列的两行相加的值传给B中继器 -
泰贾路斯: 中继器的求和一种是使用中继器的项加载时事件处理,一种是在标记行事件中处理统计 至于传递值需要看你的触发条件. 给你几个关于中继的案例,自己组合使用试试吧 axure夜话中继器系列教程www.91axure.com www.iniuche.com

温州市19787563708: axure怎么制作中继器设置翻页效果 -
泰贾路斯: 在页面中添加中继器 双击中继器,将中继器的样式调整为如图所示,中继器数据集也稍作调整 在中继器项目交互中添加时间,每项加载时对表格中的值进行设置 在中继器 格式中选择分页,将分页做好如图的设置即可 返回页面1,此时该中继器仅可显示三条记录 新增两个按钮,“上一页”,“下一页” 分别添加点击事件 加载后,点击下一页可使中继器显示数据为4,5,6列的数据;点击上一页,可使中继器显示数据为1,2,3列的数据

温州市19787563708: axure7.0中当一部件移动到X=***,Y=***坐标 显示另外个部件该怎么操作? -
泰贾路斯: 设置这个移动的部件的“当部件移动时”事件,设置另外一个部件移动就好了.

温州市19787563708: Axure怎么在不同的两个网页中利用repeater交互? -
泰贾路斯: 可以用REPEATER.不过前提是在一个页面中,通过不同动态面板来模拟A网页和B网页.我自己目前还没尝试出在页面2中可以使用页面1里面中继器的内容的办法.详细的办法你可以搜索下小楼的axure的教程,有详细的中继器的使用方法.

本站内容来自于网友发表,不代表本站立场,仅表示其个人看法,不对其真实性、正确性、有效性作任何的担保
相关事宜请发邮件给我们
© 星空见康网