今天主要讲解如何使用母版和函数来制作导航。

下图是一个导航栏,“知识中心”、“流程中心”、“用户中心”分别对应三个页面page1 page2 page3。

page1 Axure实战案例4——指针导航

page2 Axure实战案例4——指针导航

page3 Axure实战案例4——指针导航

思路:

三个页面都有统一的导航栏(除了三角符号),所以应该将其做成一个母版,就是抽取出共性出来。那么怎么保证在点击任何一个选项的时候都能切换到正确的页面,并且那个页面也显示正确的三角形位置呢?可以把这个母版用动态面板这个元件来做,设计出三个状态,并且这三个状态的名字要跟页面的名字保持一致。并且在每个页面加载的时候,增加加载的动作“设置动态面板状态”。

母版设计如下:

Axure实战案例4——指针导航

每个选项都设置“鼠标点击动作”

Axure实战案例4——指针导航

设计完之后,如何转化为母版呢?在index里选中所有元件,右键单击,选择“转换母版”,此时就可以在母版窗口里看到新增的母版。可以右击新增的母版,选择“添加到页面”,可以选中page1~page3,让他们都有一样的导航栏。

最后,打开page1~page3,点击“页面加载”事件,选择切换面板状态,如下:

Axure实战案例4——指针导航

到此完成。

相关文章:

  • 2021-12-31
  • 2022-12-23
  • 2022-12-23
  • 2021-07-31
  • 2022-12-23
  • 2021-06-14
  • 2022-12-23
  • 2022-12-23
猜你喜欢
  • 2021-08-21
  • 2021-08-22
  • 2022-01-10
  • 2021-12-12
  • 2021-08-09
  • 2021-07-14
  • 2021-12-11
相关资源
相似解决方案