1.3 隆重介绍Axure 7

Axure RP是一款制作网页原型图，或者叫作网页线框图的软件（英文叫作Prototyping Software）。大家可以使用Axure RP制作出来逼真的、基于HTML代码的网站原型，用于评估、需求说明、提案、融资、策划等各种不同的目的。更精彩的是，该原型可以响应用户的点击、鼠标悬停、拖曳、提交表单、超链接等各种事件。除了真实的数据库支持外，它几乎就是一个真正的网站。它不仅仅是图片，而是集合了HTML、CSS、JavaScript效果的，活生生的网站。使用Axure RP，能够让你在做出你想象中的网站之前，就先体验和使用你地网站！

Axure 7终于发布了。一个简单的、彩色的新的Axure Logo也恰到好处地总结了新版本的最大特点：简单、直观，如右图所示。

如同Apple的iOS 7操作系统一样。新的Axure 7也有了革命性的变化。不仅界面变得更加友好，执行的效率也有了很大的提高。在制作复杂的、多页面的网站时，运行效率和生成原型的速度都有了很明显的提高。最可喜的是，Axure 7顺应了移动开发的趋势，在原型的制作方面加入了对移动设备（智能手机和平板电脑）的支持。但是一旦你掌握了PC端的原型制作方法，制作移动端的原型就是水到渠成的事情。Axure 7让你几乎不需要花费额外的心思，就可以在移动端原型的制作上达到同样的熟练程度。简单来说，只要你曾经使用过之前版本的Axure软件，那么使用Axure 7就毫不困难。一把更加锋利又更好用的刀，谁不喜欢？

在第一章中，笔者先忍不住介绍了一下Axure 7的一些精彩的新功能。如果你觉得理解起来比较困难，不用着急，在接下来的章节中我们会使用实例进行详细的介绍。

1.3.1 更多的事件支持

如下图所示。对于部件，Axure 7之前的版本仅支持如下3种事件。

▪ OnClick（单击触发）

▪ OnMouseEnter（鼠标进入触发）

▪ OnMouseOut（鼠标移出触发）

而Axure 7极大地丰富了事件库，同时也对一些经常在移动端使用的事件做了很好的支持，如下图所示。对于单一部件，Axure 7新增了对如下事件的支持。

▪ OnDoubleClick（双击时触发）

▪ OnContextMenu（右键单击触发）

▪ OnMouseDown（鼠标按钮按下还未抬起时触发）

▪ OnMouseUp（鼠标按钮按下抬起时触发）

▪ OnMouseMove（鼠标在部件上移动时触发）

▪ OnMouseHover（鼠标在部件上悬停2秒钟以上时触发）

▪ OnLongClick（单击并且持续按住2秒钟以上触发——想象一下长按iPhone的Home键的效果）

▪ OnKeyDown(键盘按键按下还未抬起时触发）

▪ OnKeyUp（键盘按键按下抬起时触发）

▪ OnMove（部件移动时触发）

▪ OnShow（部件展现时触发）

▪ OnHide（部件隐藏时触发）

▪ OnFocus(部件获得焦点时触发）

▪ OnLostFocus（部件失去焦点时触发）

对于页面，除了OnPageLoad（页面加载时触发），Axure 7新增了对如下的事件的支持，如下图所示。

▪ OnWindowResize（页面尺寸发生变化时触发）

▪ OnWindowScroll（页面发生滚动时触发——现在可以捕捉到滚动条触发的动作了）

▪ OnPageClick（页面被单击时触发）

▪ OnPageDoubleClick（页面被双击时触发）

▪ OnPageContextMenu（页面被右键单击时触发）

▪ OnPageMouseMove（鼠标在页面上移动时触发）

▪ OnPageKeyDown（键盘按键按下还未抬起时触发）

▪ OnPageKeyUp（键盘按键按下抬起时触发）

▪ OnAdaptiveViewChange（当自适应视图发生变化时触发——自适应视图变化是指在移动端，例如手机从竖屏浏览变为横屏浏览）该事件能够让我们根据显示设备的尺寸，自适应地加载不同的部件布局以提供最优的用户体验。比如说，如果我们发现用户是在PC上访问网站，那么我们就展示桌面版本的网站；如果我们发现用户是在平板电脑上浏览网站，我们就展示平板电脑版本的网站；而如果我们发现用户是在使用手机访问网站，我们就展现移动版本的网站。之后我们会用实例来具体说明这个事件。

对于Dynamic Panel（动态面板），除了普通部件新增的事件外，Axure 7还额外添加了如下的事件。

▪ OnClick（单击触发——以前居然没有这个事件）

▪ OnLoad（动态面板加载时触发）

▪ OnSwipeUp（向上滑动时触发——想象在iPhone的界面上向上滑动手指）

▪ OnSwipeDown（向下滑动时触发）

▪ OnScroll（滚动时触发——该滚动是指内嵌在动态面板中的内容发生滚动，而不是页面发生滚动）

▪ OnResize（动态面板尺寸发生变化时触发）

这些新增的事件，能够让我们完成几乎所有桌面和移动端的原型效果制作。大家很快就会看到通过组合这些看似简单的事件和部件，我们能够实现强大的、逼真的效果。

1.3.2 快速Preview

Axure 7可以快速地让用户在浏览器中预览当前制作的页面，然后再根据需要动态地生成HTML的页面。而不是像之前的版本，每次都会生成所有页面。这大大减少了加载等待的时间。比如制作一个有上百个页面的原型，Axure 7可以让你飞快地预览当前的工作页面。而之前的版本，在生成原型的时候，要等待所有其他页面加载完成。

1.3.3 文本输入部件的输入提示

我们经常可以在网站的文本输入部件中看到灰色的提示文字。当输入框获得焦点时，该灰色提示文字消失，失去焦点时，如果用户什么都没有输入，则提示文字还会重新出现。之前实现这个功能需要一定的交互设计和高级的Axure功能。但是现在，Axure 7把这个功能做成了一个部件属性。Text Fields（文本输入）和Text Area（多行文本输入）部件都有这个功能。我们只需要选中空间后，在右侧的部件属性区域进行设置就可以了，如下图所示。还可以设置提示文字的颜色和字体。

1.3.4 丰富的输入部件内容

除了输入文本、密码等常规内容，Axure 7对于输入如下的内容同样做了支持。

▪ E-mail：输入E-mail地址。

▪ Number：输入数字，这个时候输入部件会变为如下所示。

▪ Phone Number：输入电话号码。

▪ URL：输入超链接地址。

▪ Search：搜索，这个时候输入部件会变为如下所示。

▪ File：上传文件，这个时候输入部件会变为如下所示。

用户在选择好文件后，“未选择文件”部分会变成选择好的文件名，如下所示。

▪ Date，Month，Time：年月日，年月和时间。选择后输入部件会分别变成如下的样式。

1.3.5 新的部件形状

如下图所示，在Axure 7中，对于类似矩形这样的部件，我们现在可以选择的形状和样式比旧版多多了。例如心形、水滴、五角星、加号等常用的页面形状元素。

1.3.6 动态面板的新属性

大家都知道在Axure中动态面板是一个非常重要的部件。所以，新版本对于动态面板也新增了功能。

动态面板现在可以动态适应内容。也就是说动态面板的大小会随着其中内容的变化而变化。针对动态面板的每个状态，我们可以设置相应的背景颜色和背景图片，如下图所示。

如下图所示，动态面板的宽度可以被设置为100%，也就是说可以设置为整个浏览器的宽度。这样当浏览器的宽度发生变化的时候，动态面板也会跟着变化。

动态面板可以触发其中部件的事件。例如，在动态面板上进行鼠标悬停，那么可以使所有动态面板中的部件显示其鼠标悬停时所触发的事件。这只需要一个简单的设置就可以。

1.3.7 切割图片

除了将图片切片外，新的Axure 7可以让你直接切割图片的某一个部分，如下图所示。

用户可以拖曳选择框，选定后，双击鼠标，选定的区域就被保留下来，图片其他的部分就被删除了。

1.3.8 所有部件都可以被隐藏

在Axure 7之前的版本中，只有动态面板可以被隐藏。但是现在，即使是一个单选部件，也可以被设置为隐藏，如下图所示。

1.3.9 部件可以被设置为圆角、透明、阴影

在Axure 7中，部件可以被设置为圆角、透明、阴影，如下图所示。

1.3.10 新的Widget Manager（部件管理器）

在Axure 7中，Widget Manager（部件管理器）取代了Dynamic Panel Manager（动态面板管理器）。

在同一个管理器中，可以管理包括动态面板在内的所有当前页面中的部件，如下图所示。

1.3.11 跨页面的撤销功能

在旧版的Axure中，你进行了一个操作，然后切换到另外一个页面进行操作。那么这个时候，如果你切换回之前的页面并且企图使用撤销功能（Ctrl+Z），你将会发现你无法撤销上一个操作，因为在跳转到另外一个页面的过程中，Axure丢失了你之前操作的记录。但是在新版中，每个页面的撤销操作都是单独记录的。你可以在页面A撤销页面A中的最近的一次操作，也可以在页面B撤销页面B中的最近的一次操作。完全不用担心因为切换了页面而丢失了操作记录。

1.3.12 全新的部件类型——Repeater（循环列表部件）

Repeater（循环列表部件）可以用来非常方便地生成由重复Item（条目）组成的列表页面，比如说商品列表、联系人列表，等等。并且可以非常方便地通过预先设定的事件，对列表进行新增条目、删除条目、编辑条目、排序、分页的操作。

比如说一个这样的商品列表页面，如下图所示。

再比如类似百度的搜索结果那样布局的列表页面。只要是由重复元素组成的列表页面，Repeater就可以大显神威。

1.3.13 Adaptive View（自适应视图）的支持

对于一个网站，我们可以设定其在浏览器宽度宽于1024像素时，显示桌面版本的视野；在宽度宽于768像素时，显示平板电脑版本的视野，在宽度宽于640像素时，显示手机版本的视野。自适应视图一旦设置成功，系统便会自动根据浏览器的宽度进行选择。下图是某个公司的网站（希望它没有倒闭）在不同的设备浏览器上的样子。

桌面浏览器

平板浏览器

手机浏览器

1.3.14 Axure Share 发布平台

在旧版的Axure中，项目只能被Publish（发布）到本地。如果要将网站原型分享给别人，只能通过发送生成的HTML文件，或者上传到自己搭建的一个Web服务器上去。这样对于有很多页面的原型来说，十分麻烦，而且搭建自己的Web服务器也不是一件很容易的事情。现在有了Axure Share，我们就可以发布到Axure网站提供的服务器上去了。Axure会自动生成一个项目的URL地址。将这个地址发送给其他人，他们就可以访问你的网站原型了。

简单地理解，Axure Share就是一个Axure提供给所有用户的一个免费的Web服务器。免费版本最多支持1000个项目和100M的存储空间。

单击“Publish to Axure Share”，如下图所示。

然后你会看到如下的弹出窗口。

注册一个Axure Share的账户，大概需要耗费2分钟的时间。然后使用该账户登录，选择项目名称，项目的访问密码，项目的目录路径就可以将项目发布到Axure Share了。发布成功后，Axure会提供一个链接地址，如下图所示。

发送这个地址给那些你希望他看到该原型的用户，就可以迅速地分享了。

笔者建议大家每次都给项目加上一个访问密码，防止你的项目或者想法被别人发现。

1.3.15 高亮显示所有有互动事件的部件

在生成原型后的浏览器界面中，我们可以看到如下的一个按钮，“Highlight Interactive Elements”高亮显示所有互动元素。

选择这个按钮后，原本页面中所有添加了事件的部件都会被带有光晕的颜色高亮显示，如下图所示。

这样，我们就可以很清楚地辨别当前页面中哪些部件已经添加了事件，哪些还没有。

1.3.16 Site Map中变量跟踪器

在生成原型后的浏览器界面中，我们可以看到有一个“X=”图标，单击它，就可以看到当前所有变量的当前值，如下图所示。

比如这个时候我们看到“OnLoadVariable”这个变量的值就是“Test”。这对于在复杂页面中调试变量非常有帮助。

1.3.17 界面上的调整

整体来说，Axure 7与6.5相比，在界面上并没有太大的变化，基本保持原状。这样，之前熟悉旧版Axure的用户就可以很快地上手，如下图所示。

在Axure 7中，如下的几个地方发生了一些变化。

1．新的版本去掉了Page Notes这个部分。

2．将部件的属性和样式编辑器从部件互动事件部分分离了出来。

3．将动态面板编辑器变成了部件编辑器。从此我们可以在这里编辑所有的部件，而不仅仅是动态面板。

1.3.18 预置参数的添加

与之前的版本相比，Axure 7增加了许多新的预置参数。当我们打开公式编辑器的时候，可以看到如下界面。

单击“Intert Variable Function...”，就可以看到如下窗口。

这里，Axure预置了很多参数及公式。比如说上图中的Window.width就可以直接获得当前窗口的宽度，而Window.scrollX可以获得当前在水平方向滚动的距离，而Cursor.x则可以获得当前鼠标的横坐标位置。在之后的案例中我们会使用这些预置的参数完成原型的制作。