Axure设计之左右滚动组件教程(动态面板)

很多项目产品设计经常会遇到左右滚动的导航、图片展示、内容区域等,接下来我们用Axure来实现一下左右滚动的菜单导航。通过案例我们可以举一反三进行其他方式的滚动组件设计,如常见的上下滚动、翻页滚动等等。

一、效果展示:

1、点击"向左箭头"菜单导航向左移动,继续点击直到右侧显示全最后一个菜单时结束移动;

2、点击"向右箭头"菜单导航向右移动,继续点击直到左侧显示全第一个菜单时结束移动;

3、点击菜单,菜单置为选中状态,相应内容区域根据菜单切换;

效果预览:http://左右滚动菜单导航

二、设计思路

1、使用动态面板来控制菜单导航的显示区域;

2、左右滚动是通过元件动作"移动"来实现,通过设置"向左/向右箭头"控制移动对象的坐标;

3、设置好"移动"动作,还需要设置边界来控制移动的范围。

知识补充:

  • 移动的方式可以选择:
  1. 到达:指定移动到某个位子,这就需要在后面输入移动到的坐标。
  2. 经过:指定移动的距离,最后移动结果是当前元件的坐标位置(左上端点的坐标)加上后面设置的坐标值。
  • 无论偏移、尺寸都是以坐标值来展示,坐标值可正、可负。X轴为负则向左移动,Y轴为负数则向上移动。
  • 设置边界,是设置可移动范围,边界设置后,元件不能移动到边界之外。

三、关键步骤

1、添加好全部菜单导航并添加组合,将组合转换为动态面板命名为"内部动态面板",设置如下图:

2、再次将"内部动态面板"转换为动态面板命名为"区域面板",这一步为了控制菜单导航的显示范围,设置如下图:

3、给"向左/向右箭头"添加单击时交互,设置移动"内部动态面板"的坐标和边界,设置如下图:

End·往期推荐

大屏可视化:舞动数据与美观的"设计秘籍"

Axure科技感大屏系统设计:智慧农场管理平台

智慧水务:解锁供水行业的未来密码,引领数字化转型新篇章

Axure原型设计秘籍:解锁高效设计与开发的宝藏工具

Axure Web端交互元件库:从Quick UI到700+组件的飞跃

相关推荐
梓贤Vigo3 小时前
【Axure视频教程】自制上传按钮
交互·产品经理·axure·原型·教程
招风的黑耳2 天前
Axure智慧社区数据可视化大屏模板
axure·数据可视化·智慧社区
PM大明同学2 天前
Axure PR 9 穿梭框 设计&交互
ui·交互·产品经理·axure·photoshop
招风的黑耳4 天前
Axure设计之日期时间范围选择器
axure·元件库·日期时间选择
招风的黑耳4 天前
Axure设计之文本编辑器制作教程
axure
招风的黑耳7 天前
智慧社区可视化解决方案:科技引领社区服务与管理新篇章
axure·数据可视化·智慧社区
梓贤Vigo7 天前
【Axure视频教程】多选按钮控制网格展示
axure
梓贤Vigo7 天前
【Axure原型分享】轮播表格_开始暂停效果
交互·产品经理·axure·原型·中继器
我码玄黄8 天前
交互新体验:Axure动态面板下的图片拖动技巧
交互·产品经理·axure·交互设计
默林工作室9 天前
Axure网络短剧APP端原型图,竖屏微剧视频模版40页
axure·网络短剧