Axure8系列教程 | Axure预览和发布——Hello Axure！

我们希望最终的原型设计结果能呈现给需求提出人员，向他们展示我们对需求的理解；或者向开发人员解释需求的要点和交互流程等。而他们常常并没有安装axure这样的工具，无法通过打开源文件的方式查看。

Axure很显然会考虑到这一点，设计的原型页面肯定会以某种方式提供给非设计人员查看，目前提供了html导出和生成word文档的方式。而生成html页面是最直观的方式，而且浏览器也是每台机器上的必备应用，因此我们介绍一下关于html页面的导出方式。

1.1.   预览

在设计的过程中我们也需要查看设计的效果，axure提供了页面预览的方式。F5键是预览的默认快捷方式，系统会使用默认的浏览器打开预览页面。预览环境实际由Axure提供了一个简单的内置web服务器，默认打开的url链接为本地IP地址加上随机的端口号，启动自动生成的start.html页面.

        F5预览显示的页面为你当前在axure的页面结构中选中并打开的页面，例如下面打开的Page2页面：http://127.0.0.1:32767/start.html#p=page_2&g=1

在axure设计过程中的改动，不用再次按F5键来预览，只需要在之前打开的浏览器页面上刷新一下即可，避免打开多个页面。而且，你在axure中做的改动你甚至都不用保存，刷新浏览器页面就可以立即看到效果。

1.2.   发布

发布的最终结果是将你的原型设计导出html页面或word文档，供其他人查看。

当你的原型设计完成时，就可以发布了，习惯性地我们通过F8键发布，在弹出的窗口里设置导出的文件夹，打开原型使用的浏览器，以及是否需要输出左侧的面板（axure生成的个性化页面控制区域）：

上面的设置窗口里，除了这个General选项需要设置外，其它选项基本用不到，偶尔需要用到的是Mobile/Device，可以适合于手机上显示。

1.2.1.发布后支持在手机端浏览

我们可以看一下上面所说的，如果我们要在手机端浏览的端话，只需要在Mobile/Device选项里设置就可以了，例如触屏版网厅的页面，最终是在手机上显示的：

这里看起来有很多项，其实我们只需要勾选一下IncludeViewport Tag，即第一个选项，其它都不影响页面的显示效果，所以都可以不设置。

1.3.   Hello Axure!

介绍完预览和发布功能，我们通过一个常用的小小的弹出窗口的例子来体验一下，这种弹出窗口在做原型时使用非常频繁，是必须要掌握的技能。

点击下方阅读原文查看在线演示。

单击Hello Axure!按钮，以淡入方式弹出提示信息框，点击弹出窗口的OK按钮，以淡出的方式关闭弹出窗口。最终的效果图如下：

1.3.1.添加部件

拖动两个box，一个文本段落和一个button。

设置标题栏box：设置蓝底白字，作为弹出窗口的标题，文字大小设置大一点。

设置内容box：使用灰色无边框的box，调整宽带和标题栏的box宽带一样，高度适当。

设置按钮：双击按钮，设置文字为OK。

为了整体实现弹出效果（需要用到动态面板的属性），我们将上面的内容全部选择后，右键从菜单中选择转成动态面板：

给动态面板起个名字popup，目的是在显示/隐藏它是可以通过名字指定。

1.3.2.设置属性

我们希望弹出窗口是在界面上居中显示的，这个可以通过设置动态面板的Pin to Browser属性来实现，它是用来设置动态面板在浏览器窗口中的位置：

在水平和垂直方向设置为居中即可。

1.3.3.添加事件处理

再拖一个按钮Hello Axure!放到设计区域，点击这个按钮后显示弹出窗口，根据这个流程，一开始弹出窗口是默认不显示的，所以我们选择动态面板右键选择Set Hidden，隐藏的部件在设计区域里显示的是淡黄色区域：

选择Hello Axure!按钮，在右侧面板的事件列表里，双击OnClick添加onClick事件，事件内容为显示popup动态面板：

显示里有两个关键属性要设置：

1）  选择动画效果Animate为淡入淡出fade，默认时长为500毫秒

2）  设置MoreOptions为灯箱效果treat as lightbox，下面可以设置弹出窗口的背景颜色，默认是黑色半透明的效果。

在弹出窗口后，我们希望单击弹出窗口的OK按钮后隐藏掉popup动态面板，使用淡出效果：

1.3.4.预览效果

到这里所有要设置的样式，事件都已处理完成，现在就可以F5键预览一下效果了。

如果没有看到效果，检查一下上面的事件和属性设置是否有遗漏的地方。

1.3.5.进一步优化

这个例子有一个可以优化的地方，就是我们希望弹出的窗口可以拖动，即按下标题栏后可以拖动到页面上其它位置，这样可以看看弹出窗口背后的页面内容。

双击动态面板，进入动态面板里，选择标题栏，将标题栏右键再次转成动态面板，目的是为了使用它的OnDrag事件：

双击OnDrag事件，选择移动Move，选择要移动的对象为popup，其它属性默认，单击OK完成：

再次刷新一下预览页面，弹出窗口后，拖动一下弹出窗口的标题栏试一下效果：

1.4.  小结

本节通过对预览和发布功能的介绍，结合一个弹出窗口示例，开始axure原型设计实践的第一步，希望通过这个例子能快速引导原型设计的入门。