初步学习Axure---整理了一下自己两周的学习成果:动态面板

时间:2022-08-27 17:56:52

     自己无意间发现了做原型设计的工具--Axure,所以就自学了一点皮毛。最近时间比较充裕,就把自己现学现卖的东西整一整。

     作品比较简单,没有技术可言,根据用户和开发需求,利用动态面板和一些点击事件完成了一系列流程。

     主要效果是:左侧点击Taxonomy触发对导航栏的管理,可以切换导航栏视图;树状菜单导航栏与右侧数据联动;右侧数据的鼠标点击事件;

     界面效果如图:

初步学习Axure---整理了一下自己两周的学习成果:动态面板

     一.利用树状菜单形成左侧导航栏

步骤如下:

1.选择添加菜单原件:树状菜单。通过拖拽形式插入树状菜单

2.编辑树状结构:右键点击树状菜单,添加其子节点或者同级结点

初步学习Axure---整理了一下自己两周的学习成果:动态面板

二、右侧表单数据及数据操作

     Axure中表格或者表单无合并单元格的操作,在设计绘制时需要结合矩形原件对表格线条进行遮盖,从而达到合并单元格效果。

1.绘制表格

在原件库中选择“表格”,拖拽到位置,编辑数据

2.为数据添加用例,即实现点击数据页面跳转

要实现点击表格数据调整页面的操作,需要给表格数据添加用例即鼠标点击事件。

点击数据单元格,右侧工作区选择“鼠标点击时”,添加用例:新窗口/标签打开链接。

初步学习Axure---整理了一下自己两周的学习成果:动态面板

*添加用例时可以选择链接到本项目或者URL或者文件

三、树状结构与右侧的联动

1.右键点击右侧表格,将表格转换为动态面板。双击动态面板,进入动态面板管理器,添加多个面板状态。如下图:三个动态面板状态:1,2,3.

初步学习Axure---整理了一下自己两周的学习成果:动态面板

2.设置面板状态

在动态面板管理中单击状态,进入状态编辑,对状态内容进行编辑

3.点击左侧树状菜单的菜单项,添加“鼠标点击时”用例,选择动态面板。

初步学习Axure---整理了一下自己两周的学习成果:动态面板

四、发布

     点击Axure中菜单栏里的初步学习Axure---整理了一下自己两周的学习成果:动态面板,对制作的设计进行发布预览。

 

 

以上四步实现了动态面板和树状菜单的联动,步骤比较粗略。