Axure RP--以一个导航为案例介绍如何做鼠标移入时事件

本文通过一个案例详细介绍了如何使用Axure RP制作鼠标移入时展开的动态面板,如常见的手风琴式菜单或电商商品目录。步骤包括将矩形转换为动态面板,创建新的状态,设置鼠标移入事件来切换动态面板的状态,从而实现内容的展开和收起。通过这种方式,可以创建交互式的原型设计,适用于网页和应用的用户体验设计。

鼠标移入时展开面板,在网页常见于鼠标移入在一级导航时展开二级导航,即手风琴式菜单,或见于电商网站的商品目录,鼠标悬停在一级分类时展开二级或更多分类,下面以一个导航为案例介绍如何做鼠标移入时事件。

步骤1:
从部件库拖拽一个矩形到线框图编辑区中,调整大小,输入“基本信息”


 

步骤2:
选中矩形,右击打开快捷菜单,点击“转换为动态面板”


步骤3:
双击新转换来的动态面板,打开“动态面板状态管理”窗口,在“动态面板名称”填写“基本信息”,点击“+”新增一个状态


 

步骤4:
双击“状态2”,打开状态2编辑区,复制状态1的矩形过来,并从部件库中拖拽两个小矩形过来,调整大小,并分别输入“学生信息”、“教师信息

 

步骤5:
回到首页线框图中,从部件库拖拽一个矩形到线框图中,调整成和“基本信息”一样的大小,输入“行政管理”,右击打开快捷菜单选择“转换为动态面板”,并给动态面板命名

 

步骤6:
选中“基本信息”动态面板,在“部件交互和注释”窗口,点击“更多事件”打开“更多事件”列表,单击“鼠标移入时”事件,打开用例编辑器
Axure <wbr>RP--以一个导航为案例介绍如何做鼠标移入时事件

 

步骤7:
第二步:点击新增动作—选择“动态面板”,点击“设置面板状态”;
第四步:配置新动作—勾选“基本信息(动态面板)”,“选择状态”下拉选择“状态2”,勾选“展开/收起部件”,“方向”单选“向下”,点击“确定”


Axure <wbr>RP--以一个导航为案例介绍如何做鼠标移入时事件

步骤8:
制作完成,生成原型,预览效果




 


 

更多axure学习视频,axure快速原型设计案例请登录陪学网:http://www.pexue.com/


 

评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值