⑴ 使用Axure实现切换一级菜单效果
axure版本 :8.0
实现效果 :
原型查看 :
https://u7k6gc.axshare.com/#c=2
实现思路 :
通过动态面板实现菜单选中与未选中的不同效果,在页面烂带加载时,将指定菜单的动态面板状态设置为选中状态。由于菜物嫌单一般会涉及多个页面,可以通过母版来减少重复工作。
本示例只讲解了横放的菜单实现,竖放的菜单与此实现一致,各位童鞋们可以举一反三。
制作步骤 :
1、制作一个未选中的菜单。添加一个文本框,填写好菜单的名称,设置好样式。
2、将其转换为动态面板。并用State1复制一个状态。
3、双击编辑State2,修改该文本的颜色,并添加一个选中的标记条。(各位可根据UI实现效果,添加其中的图标或者图片)
4、复制该动态面板,并修改相关文字,制作其他几个菜单,分别为每个动态面板取上对应的名字。
5、选中刚才制作的所有菜单的动态面板,点击右键,“转换为母版”,将此母版命名为“顶部菜单”。
6、分别为每个菜单制作相应的页面,并在页面顶部同样的位置插入该母版。
7、分别设置每个页面的页面载入时事件,动作添加为“设置面板状态”。
公司介绍页面,将动态面板“公司介绍”的状态设置为State2,其他动态面板的状态设置为state1;
产品方案页面,将动态面板“产品方案”的状态设置为State2,其他动态面板的状态设置为state1;
联系我们页面,将动态面板“联系我们”的状态设置为State2,其他动态面板的状态设置为state1;
8、添加菜单点击事件。
双击刚才创建的母版,进入母版编辑界面。
分别选中创建的菜单动态面板,添加“鼠标单击时”事件
公司介绍菜单,鼠标单击时在当前窗口打开公司介绍页面;
产品方案菜单,鼠标单击时饥蚂芦在当前窗口打开产品方案页面;
联系我们菜单,鼠标单击时在当前窗口打开联系我们页面;
至此,一级菜单的效果已经实现。
⑵ Axure RP8 | 动态面板-多状态
动态面板:能够在一个固定的区域切换显示的内容。能实现很多动态效果。
其本身是一个透明的元件。一个动态面板里有若干个【状态】。“若动态面板是幻灯片的放映机,而状态则是幻灯片。” 打开状态的编辑界面,即可放置各种各样的元件,组成内容。
有几种特性:容器、 多状模饥态 、拖动、循环、适应宽度、相对固定。
动态面板-多状态: 动态面板里的多个状态。可以通过键袜添加交互,让某个状态的顺序切换到首位。
制作搜索框、标签栏(填充为白色或透明,字体为橙色)
三个标签栏都要设置好【选中】状态的样式(填充为橙色,字体为白色),且其中一个标签栏的默认状态为【选中】;然后【设置选项组名称】为相同的,这里是“SearchTab”
( 设置相同的选项组名称: 为了切换标签时,实现唯一选中的效果)
选中需要变化的区域,右键,转换为动态面板
动态面板命名为SearchPanel,并双击,选中State1,并复制两个
双击每个状态,修改每个状态的内容,这里修改了文本框的提示文字和框框的颜色
为每个标签添加两个用例
一是【鼠标单击时】-【选中】-【当前元件】
二是【设置面板状态】-【动态面板】-【选择对应的状态旦亮返】
搞定!
⑶ axure动态面板不同状态怎么切换
首先设置一个全局变量aX的单击事件产生的动作如下:(1)设置a=1,(2)页面跳转到B;Y的单击事件产生的动作如下:(1)设哗敏置a=2,(2)页面跳转到B设置B页面的“页面加载时”事件,在产生结果之前进行一个判断。(1)ifa=1,动态面板切换到State1,(2)elseifa=2,动态面乱仿枝板切换大茄到State2。
⑷ Axure:教你10步用动态面板实现移动端上下滚动屏幕
本文章主要是为需要的人提供教程以及为自我学习的一种复盘方式。
1.从元件库中拖入一个手机模板。
2.在导航栏和标签栏之间拖乎歼搭入一个动态面板,并将面板名称命名为:外改散层动态面板。
3.双击 【外层动态面板】,将state1改为:state1-外层动态面板,并双击进入 state1-外层动态面板里面
4.在【 state1外层动态面板】里,拖入一个动态面板,并命名为:内层动态面板。 内层动态面板的长度为所要展示的内容的长度。
5.同理,双击【内层动态面板】后,将state1命名为:state1-内层动态面板,并双击进入【state1-内层动态面板】里面。并拖入自己要展示的内容
6.返回至主页面,单击【外层动态面板】,给它添加“拖动时”用例
7.双击“拖动时”后,点击“移动”,要移动的元件选择【内层动态面板】,移动选为:垂直移动
8.点击“添加边界”,添加2个边界:(1)顶部<=0(2)顶部>=0。当顶部>=0时,需要为其添加函数,点击>=0时的 fx
9.设置变量,点击“添加局部变量”,panel1=元件 外层动态面板;panel2=元件 内层动态面板。panel1,panel2可按自己喜好命名
10.设置函数,设置函数为:[[panel1.height-panel2.height]] 。设置完成后,按f5预览,如果不能实现效果,请务必检查每一个变量名和函数(特别岁拿易错,我错了三次)。
注:本教程参考: 阿阿小兰兰 发布的(Axure之上下滑动屏幕实现,原文网址 https://www.jianshu.com/p/dd44f5229c32 。ps:阿阿小兰兰写得特别清楚,从她的教程中本人受益良多)
⑸ axure点击下拉列表,鼠标悬浮A选项时候,显示子列表A1,A2...,如何做到
设置A为悄锋动态伏慎面板1
设置动态1鼠标移入时为state1,移出时为state2
在子列表的位置上放动态面板2,隐藏
在动态2state1里放子列表
设置动态1鼠标移入时显示动态2
设置启厅晌动态2鼠标移出时隐藏动态2且设置动态1为state2
再设置BCD选项鼠标移入时隐藏动态2且设置动态1为state2
可能有点麻烦,我一直这么做的
⑹ axure8.0 动态面板的上下级怎么设置
打开Axure8(axure7也一样),默认是新创建的孝扒项目,找到 “动态面板”元件,如下图:
拖动元件到工作区,按照图指示的任意一个地方给动态面板命名:测试面板
双击动态面板元件,出现状态state1,双击进入到state1的编辑:
拖放一个图像元件到state1内,双击并找到准备的图片(红旗),这样第一个状态就编辑好了。
下面编辑乱陆第二个状态,注意看图,在右下方的 “概要”栏目内 找到state1右键“复制状态”,这样里面的元件大小、位置不会发生改变。复制成功后为便于下面的交互用例,将状态分别命名为:红旗、蓝旗巧陪昌。
然后点击蓝旗状态,将图片替换。
以上步骤完成后,开始编辑交互用例。双击红旗图片,出现如下图所示的交互用例,找到:鼠标单击时,并双击出现用例编辑面板。
选择 元件-->设置面板状态 ,然后按照图示选中 “测试面板”,并为其设置选择状态为:蓝旗。同时设定动画效果。
红旗状态编辑完成后,点击确定,按照下图所示在 case1下邮件复制用例,并粘贴到蓝旗状态下。然后按上一步的操作,将蓝旗点击是的选择状态设置为:红旗。
最后F5预览,并点击图像测试效果
⑺ Axure实现两个下拉框的嵌套
要求:需要设计两个下拉框,第一个显示省份的名称,第二个根据键御选择的省份显示某省的城市。
如第一个中有浙江省、江苏省、福建省;第二个中有杭州市和宁波市、南京市和苏州市、福州市和厦门市;若选择江苏省,则第二个下拉框只能选择南京市和苏州市。
首先创建省份的下拉框,并设置三个省份
然后利用动态面板,设置三个state,分别对应这三个省份。
state1-浙江省;state2-江苏省;state3-福建省
然后在每个state中放入下拉框:
添加完成后,回到主页面,在省份的那个下拉框上稿知岩设置交互:选项改变时的交互
点击 新增条件,这里需要先表示选择下拉框中选中浙江省,才能设置动态面板的状态为state1
同样处理状猛塌态2和3