Axure |导航条的实现

实现导航条

  • 使用Axure RP 9 制作导航条功能
    • 参照物
    • Axure中的操作
      • 新建page页面
      • 制作页面和导航页
      • 设置交互名称
      • 左侧导航条与内容绑定
      • 将导航条转为动态面板
    • 发布,看效果

使用Axure RP 9 制作导航条功能

疫情期间,学学Axure,为以后能将常规数据功能实现产品化准备。

参照物

Axure |导航条的实现_第1张图片在拖动鼠标上下滑动时,右侧的导航栏目是没有变化的,此外点击导航栏中的按钮,也是不会改变导航栏的位置。现在来模仿下吧

Axure中的操作

新建page页面

Axure |导航条的实现_第2张图片

制作页面和导航页

简单拖拽矩形框,制作出基本模型。
Axure |导航条的实现_第3张图片

设置交互名称

点击主题1,主题2,主题3,主题4,分别设置交互名称

Axure |导航条的实现_第4张图片

左侧导航条与内容绑定

Axure |导航条的实现_第5张图片
点击问题一,在交互中选择“单击时”,在空白位置点击,会跳出“交互编辑器”,选择“滚动到元件”,

Axure |导航条的实现_第6张图片选择要跳转的位置,在设置动作中,动画为线性。
Axure |导航条的实现_第7张图片

依次操作问题二,问题三,问题四,就将导航条与内容绑定了。

将导航条转为动态面板

框选住导航栏,鼠标右键,选择“转换为动态面板”
Axure |导航条的实现_第8张图片

发布,看效果

点击 “发布”—>“预览”
Axure |导航条的实现_第9张图片

就简单的实现了导航条元件与组件的绑定。待以后有更为详细的,再来分享。

你可能感兴趣的:(Axure)