Watch this Getting Started video to get familiar with the basics of Axure RP.

为了学习Axure，毫不犹豫地买了1年的vpn，就是为了能流畅看axure官方教程。（Axure RP 8）

不知道有多少人和我一样，学一个国外的软件，一定要从英文原版开始学。先不说不同的翻译可能会带来不同的名词解释，就算是中文版RP的名词解释，也会带来理解上的歧义与晦涩。囧，可能是一种强迫症。。

不过考虑到以后与人交流需要用到中文的情况，以及英文可能不是那么能理解的同学，之后还会再添加中文解释的。所以请大家不要喷，为神马都是英文呢，因为我也是和你们一样是初学者。（有同学能提供RP8的中文界面截图吗？）

[结尾有视频，音质不太好，ಥ_ಥ 仅供学习，请勿进行商业用途]

TRAINING AND SUPPORT

第一部分：Pages

新建Pages

双击打开Pages里的Home/Page 1/...后，可以在右侧的“Inspector: Page”中设置PROPERTIES、NOTES、STYLE（属性、注释、样式）。

图1

① Pages可以新建Page和文件夹；

② STYLE是用来改变Page的外观。比如我们可以改变Page的背景颜色。

③ 点击“Preview”来看看在浏览器中最终的效果。（请大家自行演示）

图2

第二部分：Widgets部件

Widgets是集合在Libraries中的。你可以根据不同分类选择不同的widgets，比如Default、Flow、Icons（默认、流程图、图标）；你也可以在菜单按钮中选择 官网下载、创建、从文件里导入。

1、拖拽一个Button（按钮）到画布中；双击Button修改文字；选中这个Widget（部件），在“Inspector：Rectangle”→“STYLE”中自定义字体等属性。

2、再以同样的方式，拖拽一个Image（图片）到画布中。

3、最后Preview一下来看看在浏览器中的效果吧。

第三部分：Interactivity交互

我们来做一个交互的案例：当鼠标处于一个按钮的上方时，会出现一张图片；把鼠标移开后，图片消失；点击这个按钮，进入了下一个页面。我见过印象最深刻的这个情景，就是百度手机助手后台上传App的图片时，会同时出现对图片的要求。有其他的例子吗~~？

让我们分解一下这个案例：

①2个widget（部件）：按钮、图片

②鼠标的3个动作：鼠标移到按钮上方、鼠标从按钮上方移开、点击

③2个widget和鼠标的关系：按钮与鼠标的交互动作，引起了图片的变化。

具体场景为：

#1 鼠标 移到 按钮 上方，图片出现；

#2 鼠标从按钮上方移开，图片消失；

#3 鼠标点击按钮，进入新页面。

注意细节：#4 为了出现第一种情况“图片出现”，需要保证Preview时，图片是隐藏的；#5当前是在Page1的设计，需要保证有新页面Page2。

因此，实际上，我们是这样操作的：

1、[对应#4]选中图片，“Inspector：Image” → “STYLE” → 勾选“□Hidden”

图3

2、[#1]交互1：选中Button这个部件，在“Inspector：Rectangle” → “PROPERTIES” → “Interaction” →双击“OnMouseEnter”，创建一个Case

图4

双击“OnMouseEnter”后进入“Case Editor（OnMouseEnter）”， 由鼠标进入这个动作，导致的事件/案例。在第一列“add actions”中选择对Widget（部件）的操作“show”，选择“（Image）

图5

3、[#2]交互2：与上一步相同的方式创建 交互行为

图6

4、[#3&#5]交互3 点击按钮后跳转到下一个页面

请大家对比图6和图4，在图6添加了交互行为之后，图4中的 “Create Link” 这个不见了，在官方视频添加这个交互的时候，官方选择了先“Create Link”，在进行其它交互行为，官方的这种方法更快，而且其实逻辑更好一些（先考虑这个按钮的交互动作结束后的去向，再实现具体的交互流程）。事已至此！那么！我们依旧可以完成使命！对的，就是在交互动作“OnClick”里实现。

图7

最后，让我们看一下效果吧！

第四部分 Notes注释

这部分指出了注释可以在Widget上添加，也可以在Page上添加；二者在Preview中出现的位置不同。直接上视频。

第五部分 PUBLISHING发布

这部分内容童鞋们直接看视频吧~