做产品的人,都知道AxureRP是一个专业的快速原型设计工具,那么如何用其做动态的导航效果呢,其中就是动态面板的使用了。本经验的例子是当选择不同的导航菜单时,图片显示不同的位置。
工具/原料
axurerp7.0
方法/步骤
1、首先打开Axure,在home中,搭建基本样式。如图在左侧的“部件-线框图”中,选择动态面板图,左键点击拖到工作窗口。调整为需要的大小。
2、在工作窗口的动态面板上双击,弹出“动态面板状态管理”窗口,将第一个状态命名为“11”,点击面板状态的“+”新增一个状态,命名为“22”。
3、状态添加并命名完毕后,在"面板状态"中点击“编辑全部状态”。如图。
4、操作玩步骤三后,如下图,会打开“11”和“22”的相应编辑页面。下面我们就要进行具体的导航页面显示的设计了。
5、首先,“11”的动态面板页面设计,我们设计的目标是,当选择首页时,显示的图片在左边,文字在右边。
6、我们苴煜塑桠来设计“11”,首先我们添加图片,在左侧的部件线框图中,选择图片拖动到工作窗口,然后多行文字拖动到工作窗口,编辑。然后我们来确定我们的导诰胯平怃航按钮---用矩形框来表示,如图。并将第一个的颜色填充为蓝色。填充方法为选中矩形框,在上方的填充图标选择颜色即可。
7、双击蓝色框,命名为首页,并输入文字首页。第二个框,输入”第二页“。下面我们来设计第一个首页擢爻充种的用例状态。选中高酿眚郁“首页”的矩形框,在右侧右上角的“鼠标单击时”双击,弹出窗口如图,按步骤设计“动态面板”---“设置面板状态”--在窗口的第四步中,选中“设置状态至11”.如图。确定。
8、同理,在“11”中,设计第弛阻廖娓二个矩形框的动态。选中“第二页”的矩形框,同设置首页的步骤,在右侧右上角“鼠标单击时”双击,弹出窗口,“动态面板”---“设置面板状态”--在窗口的第四步中,选蒗钰妒蟥中“动态面板”,当前默认是“11”,我们需要改成“22”,如图所示,选择后,确定,第二个面板的就设计好了。
9、第二个设计的方法类似。首先需要复制“11”面板中的按钮矩形框至“22”动态面板,同理拖动图片和多行文字元件至动态工作区。如图。将首页的矩形框颜色改为白色,”第二页“填充为蓝色。
10、选中“第二页”的矩形框,同设置首页的步骤,在右侧右上角“鼠标单击时”双击,弹出窗口,“动态面板”---“设置面板状态”--在窗口的第四步中,选中“动态面板”,当前默认是“11”,我们需要改成“22”,如图所示,选择后,确定,第二个面板的就设计好了。
11、我们来生成原型文件,看下具体的状态。
12、下面是完成后的效果。