wordpress企业站主题下载地址,网站开发流程甘特图,长沙公司建设网站,微信可以怎么创建账户网站很多项目产品设计经常会遇到左右滚动的导航、图片展示、内容区域等#xff0c;接下来我们用Axure来实现一下左右滚动的菜单导航。通过案例我们可以举一反三进行其他方式的滚动组件设计#xff0c;如常见的上下滚动、翻页滚动等等。 一、效果展示#xff1a; 1、点击“向左箭…很多项目产品设计经常会遇到左右滚动的导航、图片展示、内容区域等接下来我们用Axure来实现一下左右滚动的菜单导航。通过案例我们可以举一反三进行其他方式的滚动组件设计如常见的上下滚动、翻页滚动等等。 一、效果展示 1、点击“向左箭头”菜单导航向左移动继续点击直到右侧显示全最后一个菜单时结束移动
2、点击“向右箭头”菜单导航向右移动继续点击直到左侧显示全第一个菜单时结束移动
3、点击菜单菜单置为选中状态相应内容区域根据菜单切换
效果预览http://左右滚动菜单导航
二、设计思路
1、使用动态面板来控制菜单导航的显示区域
2、左右滚动是通过元件动作“移动”来实现通过设置“向左/向右箭头”控制移动对象的坐标
3、设置好“移动”动作还需要设置边界来控制移动的范围。
知识补充
移动的方式可以选择
到达指定移动到某个位子这就需要在后面输入移动到的坐标。经过指定移动的距离最后移动结果是当前元件的坐标位置左上端点的坐标加上后面设置的坐标值。
无论偏移、尺寸都是以坐标值来展示坐标值可正、可负。X轴为负则向左移动Y轴为负数则向上移动。设置边界是设置可移动范围边界设置后元件不能移动到边界之外。
三、关键步骤
1、添加好全部菜单导航并添加组合将组合转换为动态面板命名为“内部动态面板”设置如下图 2、再次将“内部动态面板”转换为动态面板命名为“区域面板”这一步为了控制菜单导航的显示范围设置如下图 3、给“向左/向右箭头”添加单击时交互设置移动“内部动态面板”的坐标和边界设置如下图 End·往期推荐
大屏可视化舞动数据与美观的“设计秘籍”
Axure科技感大屏系统设计智慧农场管理平台
智慧水务解锁供水行业的未来密码引领数字化转型新篇章
Axure原型设计秘籍解锁高效设计与开发的宝藏工具
Axure Web端交互元件库从Quick UI到700组件的飞跃
