赞
踩
Axure RP是一个专业的快速原型设计工具,是一个专业的快速原型设计工具,让负责定义需求和规格、设计功能和界面的专家能够快速创建应用软件或Web网站的线框图、流程图、原型和规格说明文档。
使用者主要包括商业分析师、信息架构师、可用性专家、产品经理、IT咨询师、用户体验设计师、交互设计师、界面设计师等,另外,架构师、程序开发工程师也在使用Axure。
axure的使用环境通过下图进行说明。
当原图制作好后,可以点击下图所示的图标进行展示:
这里我们通过几个常用的操作来实际地了解Axure工具的使用。接下来主要说明以下几点:
步骤一:如何鼠标移动到一个按钮上,显示该按钮的提示;而当鼠标移开时按钮提示隐藏;
步骤二:从控件面板中选择“文字”,同样拖向线框工作区中,并输入字符,这里输入“按钮提示”,如下图;
步骤三:右键字符控件,选择“Convert to Dynamic Panel”,将该字符控件设置为动态,这在axure中将控件设置成被支配状态时是必要的;
步骤四:双击字符控件,并命名控件,以便后面选择控件时能以此为标记(后面会提到)如下图;
步骤五:选择按钮控件,并在部件消息交互面板中选择“OnMouseEnter”消息,并双击进入事件编辑面板;
步骤六:因为只是需要对字符进行隐藏和显示,所以在鼠标移动至按钮上时选显示就好,并选中前面给字符控件命名的“按钮名字”勾选框(这就是前面为什么要给字符控件命名的原因),而其中的”slide up”为字符出现时的动画效果,可以不选,选好后点击“OK”;
步骤七:有了显示就需要有隐藏,所以再次在部件消息交互面板中选择“OnMouseOut”消息,并双击,进行鼠标移出按钮范围后的处理;
步骤八:选择隐藏操作,并点击“OK”,如下图;
步骤九:右键字符控件选择隐藏,使控件刚出来时不可见,然后点击工具栏中的演示按钮调试,完成!
步骤一:从控件面板中选择“Rectangle”以及“按钮”控件至线框图工作区,如下图所示:
步骤二:选择要控制打开或者关闭的“矩形”控件,右键设置为动态(如上一示例所示),并为该动态控件命名为“开关页面”;
步骤三:选中按钮控件,并在部件消息交互面板选择“OnClick”消息,进行设置;
步骤四:在消息编辑窗口中选择“Toggle Visibility”,选择之前命名的“开关页面”勾选框,并点击“OK”;
步骤五:点击“演示”控件,执行演示即可;
步骤一:同之前一样从部件面板中选择勾选框和矩形控件,并将矩形控件设置成动态,同时命名为“会变色的矩形框”(命名意思请忽略),并右键将矩形框设置为“隐藏”;
步骤二:选择勾选框控件,同时在消息交互面板中选择“OnCheckChange”消息,并点击“Add Condition”;
步骤三:进入创建条件窗口,而下图中:
这里的功能我们就按下图的选择,点击“OK”即可。
步骤四:回到消息编辑框,选择该动作下需要演示的内容,并点击“OK”。这样就完成了选中勾选框时的显示操作;
步骤五:接下来开始控制取消勾选框时,矩形框的隐藏操作。选择之前的勾选框控件,还是选择“OnCheckChange”,点击”Add Case..”进入消息编辑窗口(这时你会发现此时的时间序号已经变成了“Case 2”),并同样点击“Add Condition”进入创建条件窗口;
步骤六:选择消息条件,这里是取消勾选框时的操作,所以最后的下拉框中选择false,并点击“OK”;
步骤七:回到消息窗口后,这里的判断条件为“如果取消选中勾选框”,接下来就是选择进行什么操作了,这里我们是执行隐藏的操作,点击“OK”;
步骤八:之后就可以执行条件判断的演示了;
步骤一:从部件面板中选择矩形控件拖出,制作成如下图所示的样子。同时将三组模板设置均成3个组合,最后再均设置成动态,同时分别命名成“菜单栏一”,“菜单栏二”,“菜单栏三”;
步骤二:配置每个模板的属性,在“部件属性和样式”中勾选“调整大小以适应内容”,此选项很重要,不然会造成重叠的效果。鼠标分别点击3个模板,并设置“Fit to Content”
步骤三:每个动态模板添加两个状态“state1”和“state2”,其中“state1”状态为隐藏状态,“state2”状态为显示状态。以菜单栏一模板为例进行说明。
(state1)
(这里如果stat2中没有模板,则先从stat1中将模板的图形复制一份过来)
步骤四:如此操作了3个模板后,state1状态和state2状态的转换效果。如果设置从隐藏状态state1到state2效果时,三个模板状态的勾选。模板如果要选择的状态为显示状态,则同时勾选“显示面板(如果隐藏)”和“展开/收起部件”模板如果要选择的状态为隐藏状态,则只需勾选“展开/收起部件”对于该页面内出现的面板都要进行状态设置。
以模板一为例,这里我们的操作是:
1、进入stat1,选中模板中的按钮控件,并选择“OnClick”消息;
2、选择”Set Panel State”,并选中勾选框“菜单栏一”,选择“State2”,并勾选“Show panel if hidden”(显示面板如果隐藏),“Push/Pull Widgets”(展开/收起控件)。这里是指点击菜单栏时去显示非隐藏的state2,空间为展开/收起控件;
3、选择其他两个模板的相应操作,如下图所示;
4、点击“OK”,至此模板一的state1已经操作完成,同样如此完成其他两个模板的state1,当然这里的“Show panel if hidden”的选择是当前选哪个模板,哪个勾选。
5、接下来执行state2的操作,双击模板一,选择并双击进入state2;
6、选择点击“菜单栏一”矩形控件,并选择“OnClick”消息,并都如下图选择;
7、同样执行其他的两个模板,由此完成3个模板的操作。
步骤五:将设置好后的3个模板相叠排列(注意这里相叠排列,模板与模板之间的接缝处需要“天衣无缝”,不然会出现展开空间排布不正常的情况);
至此折叠菜单栏的制作完成!
有了以上的常用操作认识后,制作一般的图形界面就够用了,当然需要用户进行一定的变通,如何通过显示与隐藏重叠的画面达到开关不同页面的效果等等。
附件中有一整套关于NVR界面想法的制作,可以给初入门的读者进行进一步的参考。当然还有许多在这里未说明的操作,比如变量等等,就需要读者自己去探索了。
Copyright © 2003-2013 www.wpsshop.cn 版权所有,并保留所有权利。