Axure——动态面板-导航栏

博客概要

     分享利用Axure的动态面板元件制作的一个粗糙的导航栏~

导航栏

Axure——动态面板-导航栏
解释 指位于页面顶部或者侧边区域的
在页眉横幅图片上边或下边的一排水平导航按钮
它起着链接站点或者软件内的各个页面的作用
效果 点击跳转至相应页面
【PS】 1.本次制作,样式简洁,请按需,自行美化
2.有多种制作方式,此次至制作了其中之一,其余后续分享

制作过程

1.整体搭建

Axure——动态面板-导航栏

     利用“矩形”、“图片”、“椭圆形”等元件,整体搭建页面结构。

2.转化

Axure——动态面板-导航栏

     全选页面内容,鼠标右击,选择将其“转换为动态面板”(可以事先“成组”)。

3.面板状态管理

Axure——动态面板-导航栏Axure——动态面板-导航栏

     转换为动态面板后,可发现页面区域明显变色,双击区域,会出现“面板状态管理”弹窗,在里面可以设置“动态面板名称”,在“面板状态”区域,可以对面板进行“新建”、“删除”等操作,双击选择面板,即可进入相应的面板进行编辑。

4.设置交互

Axure——动态面板-导航栏Axure——动态面板-导航栏

     进入相应面板后,按步骤进行相应的交互设置:

  1. 选中相应要进行设置的“导航栏”元件
  2. 在属性一栏选择设置“交互”下的“鼠标单击时”的用例
  3. 选择“添加动作”一栏的“设置面板状态”
  4. 勾选“配置动作”中要设置状态的动态面板
  5. “选择状态”一栏,下拉选择相应面板
  6. 点击“确定”,可以在“属性”的“交互”一栏中看到相应的变化

5.效果展示

Axure——动态面板-导航栏Axure——动态面板-导航栏

     点击相应的数字的导航栏名,即可跳转至对应页面。

6.【PS】过程命名

Axure——动态面板-导航栏

     命名这块的话,其实是蛮重要的,可以为后续的 操作提供查找的依据。


总结

以上= =“动态面板之导航栏”技能点get~