一、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界面想法的制作，可以给初入门的读者进行进一步的参考。当然还有许多在这里未说明的操作，比如变量等等，就需要读者自己去探索了。

原型设计工具——axure认识与使用相关推荐

原型设计如何直接生成html,使用原型设计工具 Axure RP创建一个web页面框架
前言什么是原型呢? 原型设计是交互设计师与PD.PM.网站开发工程师沟通的最好工具.而该块的设计在原则上必须是交互设计师的产物,交互设计以用户为中心的理念会贯穿整个产品.利用交互设计师专业的眼光与经 ...
快速原型设计工具-Axure
快速原型设计工具-Axure sf2gis@163.com 2016年1月5日 2016年1月7日添加闪烁效果 2016年1月15日增加团队项目 1 目标:快速构建GUI,具备基本演示功能,帮助确定 ...
网站app原型设计工具:axure,Mockups,墨刀
网站app原型设计工具:axure,Mockups,墨刀 Balsamiq Mockups 3 网站原型设计工具非常高效,非常简单,几分钟就能搞定比axure好用很多墨刀 - 免费的移动应用原型 ...
软件原型设计工具Axure RP安装教程
http://www.axure.us/1896/ Axure RP是产品经理必备的原型制作工具,因为很多同学是新手,在这里整理一下axure7.0的下载.安装和汉化流程,希望能够帮到大家. Axur ...
原型设计工具Axure RP9下载、中文语言操作说明（赠授权码）
Axure是产品经理.交互设计常用的一款原型设计工具,能实现比较复杂的交互效果.其实在功能上是十分齐全的,并且其交互的样式也比较多样,主要是通过动态面板.函数.中继器等几个模块就几乎可以实现任何常见的 ...
推荐一款界面原型设计工具-axure
Axure RP是美国Axure Software Solution公司旗舰产品,是一个专业的快速原型设计工具,让负责定义需求和规格.设计功能和界面的专家能够快速创建应用软件或Web网站的线框图.流程 ...
快速原型设计工具(Axure)的安装、汉化
〇.一些名词解释: 1. 草图一般主要用于产品整理思路,寻找灵感,或者在产品团队内部互相讨论碰撞火花时使用.画给自己看的,想怎么画就怎么画. 2. 低保真打个比喻来说就像,用于"生产的 ...
[翻译]Axure-Dynamic Panel(Basic)-原型设计工具Axure学习-第2.1节
Hide and show with Dynamic Panel(Basic) Dynamic Panel允许你隐藏,显示,交换和移动wireframe的内容.本章节讲述dynamic panels的 ...
【产品】产品原型设计工具 Axure 和 Mockplus 对比
Mockplus(摩客)做原型,更快,更简单,Mockplus 是更快更简单的原型图设计工具. Mockplus 除用于移动 APP 原型设计,还可以制作 PC.网页的原型设计,它可以帮助 UI 设计 ...
界面原型设计工具 Axure RP开发环境搭建
Axure RP 是一个界面原型设计的得力工具.类似于DreamWare对于网页设计的关系. [下载]:官方下载链接 :http://www.axure.com/ 百度搜索一下Axure RP,也很容 ...

原型设计工具——axure认识与使用