蜜果私塾：axure rp 8.0新功能新特性详解（1） -凯发k8网页登录

文：阿蜜果

日期：2015/11/27

转载请注明出处

     

 

axure rp 8 beta版本也仅限于已授权用户使用。一旦测试结束，所有已购买axure授权的用户都可以免费更新。至于axure rp 8支持的团队项目托管服务，目前还没有定价，敬请期待！

win版下载地址：

mac版下载地址：

         安装axure rp 8.0 beta版本后，感觉主界面得到了简化。大家看一下最新的主界面，如下图所示：

          

         axure rp 7.0的凯发k8网页登录主页面的8个区域如下图所示：
     

         对比可以看出，axure rp由之前的8个主要区域变成了7个主要区域，主要变更在于：

1） 页面属性面板/部件属性和设计面板被合并为“检视面板”（inspector）；

2） “站点地图面板”变成“页面面板”（page）；

3） 部件管理面板变更为“提纲面板”（outview）；

4） 菜单栏和工具栏：工具栏条目变更和调整位置；

5） mac 和 pc 拥有同样的顶部工具栏。

下面分别对axure rp 8.0的7个区域进行详细说明。

1.1菜单栏和工具栏

         菜单栏和工具栏如下图所示：    

         菜单项还是包括file、edit、view、project、arrange、publish、team和help，该区域的变化集中在工具栏，新功能主要体现在：

         （1）钢笔工具和自定义形状

：使用工具栏的钢笔图标可以绘制自定义的形状，如绘制的如下形状：

1.2页面面板

页面面板基本无变化，需要说明的是，对于流程图页面所做的改进，在axure rp 7.0时，只对流程图页面中的流程图部件添加了连接点，而在8.0版本中，对所有加入流程图页面的部件都加入了连接点，使得建立连接更加方便、更大、更容易选中。

1.3部件面板

axure rp 8.0版本的默认部件包括：

         主要改变之处在于：

1） 矩形部件：提供box 1 ～ box 4四种不同颜色的矩形部件；

2） 按钮部件：由之前的一种按钮部件变更为default button、primary button和link button三种按钮部件，参考如下：

3）标记部件：添加若干标记部件，如快照部件、水平箭头、垂直箭头、不同颜色的带阴影的矩形部件、圆形标记和水滴标记。参考如下所示：

1.4母版面板

         该部分变化不大，该面板操作栏的一些操作按钮被删除，如下移、上移、indent、outdent和删除快捷操作。

1.5页面设计面板

         无axure rp 7.0版本对比，无太大变化。

1.6检视面板（inspector）

         该面板替换了在axure rp 7.0版本的页面属性和设置面板，以及部件属性和样式面板。当在页面设计面板选择的是某个部件时，该区域将显示部件属性和样式。

如选择某个box 1部件时检视面板的属性和样式设置区域如下图所示：

              

         在设置边角时，新版本可以设置四个角不同时带有弧度。

当选中的是页面空白区域时，将显示页面的属性和样式。

页面属性和样式设置区域如下图所示：

           

另外针对同一个分组内的部件，在7.0版本中不能设置鼠标点击等事件，而在axure rp 8.0版本中，能设置某个分组的属性和样式，参考页面如下图所示：

1.7提纲面板（outline）

         提纲面板（outline）替换了原来的部件管理面板，与之不同之处在于对于设置为同一分组的部件，可在该区域显示，并可设置分组名称，参考如下图：

         可针对某一个分组设置隐藏/显示操作。

2.1主界面改变

         参考“1、主界面”的讲述，大家可以看到，主界面由之前的8个区域变更为7个区域，更加简洁，而且站点地图面板 -> 页面面板，部件管理面板 -> 提纲面板，页面属性和样式面板/部件属性和设置面板 -> 检视面板。

         在工具栏和菜单栏，图标得到重新规划，并添加了钢笔工具，可以绘制自定义的图形。

2.2更多的部件

axure rp 8.0的默认部件进行了完善，主要包括不同样式的矩形部件，多种按钮部件，并且添加若干标记部件，如快照部件、水平箭头、垂直箭头、不同颜色的带阴影的矩形部件、圆形标记和水滴标记。其中关键的是快照部件。

快照部件的目标就是让大家更快的创建和更新自定义文档。它从页面或者所引用的模板截取图像，你可以移动和缩放快照把焦点放在页面的特定部分。 当页面改变时快照也会自动更新。

我们还可以将操作应用到被引用的页面以截取它特定的状态。例如，可以使用新的热门事件动作去“点击”页面上的按钮，获取按钮被按下后的页面快照。如果你改变了点击（onclick）按钮的交互，快照也会自动更新。这在流程图里是很有用的，可以把一系列事件以缩略图的形式呈现出来。

2.3更多的事件

1、onload：加载事件，可用在所有部件上；

2、onrotate：旋转事件，可用在矩形部件、图像部件、线部件和热区部件上；

3、onselectedchange,onselected, onunselected等事件可用在形状，图像，线，热区，复选框，单选按钮，树状结构上。        

4、onresize：调整大小，可用在box 1、box 2、box 3和box 4矩形部件和动态面板部件等上面。

5、onitemresize ：调整项目大小，可用在中继器部件。

2.4更多的动作

         因为添加了旋转部件（rotate）、调整部件大小（set size）和fire（触发另外一个部件的事件）等事件，与此相对应，矩形部件等添加了旋转动作和调整大小等动作。

动作界面如下图所示：

2.4.1 rotate动作

下面以一个简单的案例讲解onretate事件，rotate（旋转）动作、set size（调整尺寸）动作的使用。

         添加两个矩形部件rect1（被旋转的矩形）和rect2（被修改大小的矩形），一个按钮部件，如下图所示：

     

         设置按钮部件的onclick事件，当点击按钮部件时，将rect1矩形部件朝顺时针方向旋转90度，并带有线性移动的效果：

2.4.2 set size动作

设置rect1部件的onretate（部件旋转时）事件，当rect1部件旋转时，调整rect2部件的宽度和高度，变成原宽度和原宽度的2倍。rect1部件的onretate（部件旋转时）事件设置如下图所示：

 

当部件的尺寸进行调整时使用“anchor”的下拉菜单可以选择部件中的那个点作为位置不变的初始点。在“anchor”中有以下选项可供选择：左上、正上、右上、左、中心、右边、左下、正下和右下。

         点击第一次时的效果图如下所示：

2.4.3 fire event动作

         在axure rp 7.0中，能为母版的部件设置raise event动作为其定义一个新事件，在引用该模板的页面可为该事件定义不同的实现。

         在axure rp 8.0版本中，更进一步，可以为所有部件设置fire event工作，使用fire event动作可以触发另外一个部件的交互行为。比如，大家可以fire另外一个地方的按钮的onclick事件。选择行为列表中的“fire event”，在“configure actions”栏选择将目标部件置于最上层，然后在最底层选择你想要fire的交互事件（如onclick, onshow等）。

在axure rp早期的版本中常用到的“raise event”行为现在被合并到fire event动作里。在“configure actions”栏，大家可以找到“raised event”选项，切换到那个选项可以选择和添加用于fire的raised事件。

         下面看两个案例：

第一个案例看下如何实现之前类似raise event所实现的功能，双击某个母版，打开母版编辑页面，接着点击菜单栏的“arrange”->“manage raise event（masters only）”可新增和管理自定义事件，如下图所示：

         选择母版中的某个部件，如矩形部件，设置其onclick事件，选择“fire event”后，选择该母版，而后选择“raised event”选项卡，选择新定义的事件，如下图所示：

 

         接着在两个不同的页面添加header母版，而后为这两个页面的该母版设置不同的事件效果，可实现axure rp 7.0版本中raise event相关的功能。

         第二个案例实现的功能包括：定义一个按钮部件和一个部件名称为imgpanel的动态面板部件。为imgpanel定义state1（默认）和state2状态，分别导入一张图片。

         定义imgpanel的onmouseenter（鼠标移入时）和onmouseout（鼠标移出时）事件，分别将imgpanel设置为state2和state1状态。

         定义按钮部件的onclick（鼠标点击时）事件，当点击该按钮部件时，触发imgpanel部件的onmouseenter事件，将imgpanel部件变更为state2状态。事件设置如下图所示：

         未点击按钮部件和点击按钮部件的效果参考如下：

    

2.5流程图优化

         流程图优化的一个比较突出的点，是几乎所有在流程图中的部件都有了可以连接的点，更容易实现两个部件的连接。