首页 > 编程知识 正文

axure画原型有哪些功能,axure原型设计工具有哪些

时间:2023-05-05 03:24:59 阅读:278468 作者:93

一、Axure认识 1.1、什么是Axure(发音:Ack-sure)?

  Axure RP是一个专业的快速原型设计工具,是一个专业的快速原型设计工具,让负责定义需求和规格、设计功能和界面的专家能够快速创建应用软件或Web网站的线框图、流程图、原型和规格说明文档。

1.2、Axure使用人群

  使用者主要包括商业分析师、信息架构师、可用性专家、产品经理、IT咨询师、用户体验设计师、交互设计师、界面设计师等,另外,架构师、程序开发工程师也在使用Axure。

1.3、Axure工作界面说明

  axure的使用环境通过下图进行说明。

1、主菜单和工具栏:执行常用操作,如文件打开、保存文件,格式化控件,自动生成原型和规格说明书等操作;2、站点地图面板:对所设计的页面(包括线框图和流程图)进行添加、删除、重命名和组织页面层次;3、控件面板:该面版包含线框图控件和流程图控件,另外,你还可以载入已有的部件库(*.rplib文件)创建自己的部件库;4、模块面板:一种可以复用的特殊页面,在该面板中可进行模块的添加、删除、重命名和组织模块分类层次;5、线框图工作区:线框图工作区也叫页面工作区,线框图工作区是你进行原型设计的主要区域,在该区域中你可以设计线框图、流程图、自定义部件、模块;6、页面属性:这里可以设置当前页面的样式,添加与该页面有关的注释,以及设置页面加载时触发的事件onpageload;7、部件消息交互面板:这里可以设置部件在操作过程中的消息传递;8、元件属性:这里可以设置选中元件的标签、样式,添加与该元件有关的注释,以及设置页面加载时触发的事件;9、部件管理:在这里可以添加、删除动态面板的状态,以及状态的排序,也可以在这里设置动态面板的标签;当绘制原型动态面板被覆盖时,我们可以在这里通过点击选中相应的动态面板,也可以双击状态进入编辑。 1.4、部件说明

1.5、原图实现平台

  当原图制作好后,可以点击下图所示的图标进行展示:

二、基本操作说明

  这里我们通过几个常用的操作来实际地了解Axure工具的使用。接下来主要说明以下几点:

1、如何鼠标移动到一个按钮上,显示该按钮的提示;而当鼠标移开时按钮提示隐藏;2、点击按钮,打开一个页面;3、使用勾选框控制矩形框的显示和隐藏;4、折叠菜单制作。 2.1、如何鼠标移动到一个按钮上,显示该按钮的提示;而当鼠标移开时按钮提示隐藏

步骤一:如何鼠标移动到一个按钮上,显示该按钮的提示;而当鼠标移开时按钮提示隐藏;

步骤二:从控件面板中选择“文字”,同样拖向线框工作区中,并输入字符,这里输入“按钮提示”,如下图;

步骤三:右键字符控件,选择“Convert to Dynamic Panel”,将该字符控件设置为动态,这在axure中将控件设置成被支配状态时是必要的;

步骤四:双击字符控件,并命名控件,以便后面选择控件时能以此为标记(后面会提到)如下图;

步骤五:选择按钮控件,并在部件消息交互面板中选择“OnMouseEnter”消息,并双击进入事件编辑面板;


步骤六:因为只是需要对字符进行隐藏和显示,所以在鼠标移动至按钮上时选显示就好,并选中前面给字符控件命名的“按钮名字”勾选框(这就是前面为什么要给字符控件命名的原因),而其中的”slide up”为字符出现时的动画效果,可以不选,选好后点击“OK”;

步骤七:有了显示就需要有隐藏,所以再次在部件消息交互面板中选择“OnMouseOut”消息,并双击,进行鼠标移出按钮范围后的处理;

步骤八:选择隐藏操作,并点击“OK”,如下图;

步骤九:右键字符控件选择隐藏,使控件刚出来时不可见,然后点击工具栏中的演示按钮调试,完成!

2.2、点击按钮,打开一个画面

步骤一:从控件面板中选择“Rectangle”以及“按钮”控件至线框图工作区,如下图所示:

步骤二:选择要控制打开或者关闭的“矩形”控件,右键设置为动态(如上一示例所示),并为该动态控件命名为“开关页面”;

步骤三:选中按钮控件,并在部件消息交互面板选择“OnClick”消息,进行设置;

步骤四:在消息编辑窗口中选择“Toggle Visibility”,选择之前命名的“开关页面”勾选框,并点击“OK”;

步骤五:点击“演示”控件,执行演示即可;

2.3、选中勾选框,页面出现,取消选中状态页面隐藏(关于条件判断示例)

步骤一:同之前一样从部件面板中选择勾选框和矩形控件,并将矩形控件设置成动态,同时命名为“会变色的矩形框”(命名意思请忽略),并右键将矩形框设置为“隐藏”;

步骤二:选择勾选框控件,同时在消息交互面板中选择“OnCheckChange”消息,并点击“Add Condition”;

步骤三:进入创建条件窗口,而下图中:

1、表示下面这些条件是“&&”的关系还是“||”的关系,all表示“并且”,any表示“或者”;2、表示条件判断的依据,这里选择的是“如果勾选框选中”;3、表示是对哪一个控件进行判断;4、表示控件的值是等于(equals)还是不等于(does not equal);5、表示判断的是控件判断的对象,是比较值,还是比较其他控件,还是比较变量;6、表示最终判断的内容,是值还是其他;

  这里的功能我们就按下图的选择,点击“OK”即可。

步骤四:回到消息编辑框,选择该动作下需要演示的内容,并点击“OK”。这样就完成了选中勾选框时的显示操作;

步骤五:接下来开始控制取消勾选框时,矩形框的隐藏操作。选择之前的勾选框控件,还是选择“OnCheckChange”,点击”Add Case..”进入消息编辑窗口(这时你会发现此时的时间序号已经变成了“Case 2”),并同样点击“Add Condition”进入创建条件窗口;

步骤六:选择消息条件,这里是取消勾选框时的操作,所以最后的下拉框中选择false,并点击“OK”;

步骤七:回到消息窗口后,这里的判断条件为“如果取消选中勾选框”,接下来就是选择进行什么操作了,这里我们是执行隐藏的操作,点击“OK”;

步骤八:之后就可以执行条件判断的演示了;

2.4、折叠菜单制作

步骤一:从部件面板中选择矩形控件拖出,制作成如下图所示的样子。同时将三组模板设置均成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界面想法的制作,可以给初入门的读者进行进一步的参考。当然还有许多在这里未说明的操作,比如变量等等,就需要读者自己去探索了。

版权声明:该文观点仅代表作者本人。处理文章:请发送邮件至 三1五14八八95#扣扣.com 举报,一经查实,本站将立刻删除。