Axure RP官方教程翻译（9-18／18）完结

搜索

APP

起点课堂会员权益

职业体系课特权

线下行业大会特权

个人IP打造特权

30+门专项技能课

1300+专题课程

12场职场软技能直播

12场求职辅导直播

12场专业技能直播

会员专属社群

荣耀标识

发布

Axure RP官方教程翻译（9-18／18）完结

Eugene

2017-07-06

3 评论 10856 浏览 63 收藏

35 分钟

最后10篇（前8篇点击查看）看看是否有自己感兴趣的模块，每个功能都挺有意思的。

这10篇分别是：

第 9篇：账号登录

第10篇：旋转式幻灯放映机

第11篇：自动点击区域

第12篇：必填区域

第13篇：动态设置下拉选项

第14篇：根据下拉列表设置文本

第15篇：发送文本到另一个页面

第16篇：宽度充满的图片或横幅

第17篇：滚动激活固定的头部文字

第18篇：滑块

第9篇：账号登录

建立一个登录表单，这个登录表单使用条件式的逻辑来证实用户的登录资格。在这个原型里，你将会有一个合适有效的邮箱地址<rose@classyharbor.com>和一个合适有效的密码“password1”。（不要用自己的银行密码，朋友们。操练好的密码习惯。请查看 www.passwordsgenerator.net）只有邮箱和密码都正确才能进入页面。实现效果如下：

STEP 0：下载培训文档

如果你还没有培训文档，请点击下载 AxureTraining.rp 文档。这个文档包含了Axure培训网站上每个教程用到的相关页面。我们建议你一直都用我们准备的这个文档来完成教程，但是如果你不用，那也是可以的——即使你没有使用我们的培训文档，我们也总是会告诉你为了完成每一个教程新文件里都创建了什么。

STEP 1：设置

打开培训文档中的“Account login”页面。这个页面包含了一个由一个邮箱区域和密码区域的登录表单，和一个提交按钮。这个页面还包括了错误信息提示组件当有错误登录请求时才会出现。

选择密码区域，在右边的属性标签栏下，定位到“类型”的下拉选项框并选择“密码”。

选择“Error”组件，点击样式标签栏的“隐藏”复选框来隐藏它。

STEP 2：登录成功

如果输入的邮箱和密码都正确，那么“Account Home”页面就会被打开。
选择“submit”按钮，在属性标签栏下，双击“单击”来添加一个新的单击实例。
在实例编辑器的顶部，点击“添加条件”按钮来打开条件创建器。保留第一个下拉选项框的值为“在组件里的文本”。在第二个下拉选项框，选择“Email address”组件。
保留接下来两个控制设置“等于”和“值”不变。
在最后一个区域，输入<rose@classyharbor.com>（不包括方括号）。
点击右边的绿色“+”号图标添加另一个条件。
保留第一个下拉选项框的选项“在组件里的文本”。在第二个下拉选项框里选择组件“Password”。
保留接下来两个控制设置“等于”和“值”不变。
在最后一个区域，输入“password1”（没有引号）。
在条件创建器的顶部，确认“满足”的下拉选项框为“所有”。
点击确定关闭条件创建器。
在实例编辑器的左边栏，点击“打开链接”行为。
在右边栏选择页面“Account home”。
点击确定关闭实例编辑器。

STEP 3：登录失败

如果实例1设置的条件不满足，那么错误的信息则会出现。
仍然选中“Submit button”，再次双击属性标签栏中的“单击”来创建第二个实例，实例2。在对话框的中间，注意文字“否则”。这个实例只会在之前的实例不成立时才会发生。
在左边栏，点击“显示”行为。
在右边栏，点击复选框勾选“Error”组件。
点击确定关闭实例编辑器。

可选：额外的登录账号

你也许希望在你的原型中包含多个有效的登录信息。这非常有用如果你想要让不同的账号显示不同的内容或权限。尝试为submit按钮添加另一个“单击”实例，为他分配不同的邮箱名称和密码。（这里要确认新的实例需要用快捷键[CTRL]/[CMD]+[↑]来将它移动到实例2的上面，否则它无法生效。）

第9篇原文链接：https://www.axure.com/support/training/account-login-tutorial

第10篇：旋转式幻灯放映机

建立一个图片旋转式幻灯放映机，轮换广告或者内容幻灯片。你可以设置成自动前进或者通过点击按钮来实现。实现的效果如下：

STEP 1：设置

打开培训文档中的“Carousel”页面。

在这个页面有两个来自图标库的图标和三张图片。

STEP 2：创建Carousel动态面板

创建一个carousel动态面板，将每一张图片放在它各自的状态里。
在“Image 1”上右键选择“转化为动态面板”，命名为“Carsouel”。
双击动态面板打开动态面板状态管理器。
点击绿色的“+”号两次，使动态面板一共有三个状态。
点击确定关闭对话框。
右键单击“Image 2”选择“剪切”。
双击目录中的”状态2“打开进行编辑。
粘贴“Image 2”到“状态 2 ”的画布里。确定图片的坐标是（0，0）。
重复上面的步骤，将“Image 3”粘贴到“状态 3” 。

STEP 3：创建可交互的后退键

返回“Carousel”页面，选择“Back arrow”组件，在属性标签栏下，双击“单击”添加一个新的单击实例。
在左边栏，点击“设置面板状态”。
在右边栏，点击“Carsousel（动态面板）”。
在右边栏的底部，点击“选择状态”的下拉选项选择“前一个”。然后点击复选框“包括从最后一张到第一张”。这样图片能循环起来了。
给状态应用切换效果，使用“进入动画”和“退出动画”控制。将两个都设置成“向右滑动”（因为这是你的后退键）并且将持续时间设定500ms。
点击确定关闭实例编辑器。

STEP 4：创建可交互前进键

对右边的箭头重复上面的步骤。这个过程大部分是类似的。
在“选择状态”下拉选项框，选择“后一个”代替“前一个”。
在动画设置项选择“向左滑动”代替“向右滑动”。

STEP 5：让Carousel自动轮播起来

选择动态面板。在属性标签栏双击“Onload”来添加一个加载实例。
在左边栏，点击“设置面板状态”。
在右边栏，选择“这个组件”。
在右边栏的下面，点击选择状态的下拉选项框选择“下一个”，点击复选框“包括从最后一个到第一个”和“重复每一个”。这个默认设置是让图片每秒前进一次。你可以在这个区域自主设置时间长短。（尝试4000毫秒。）
如果勾选了“延迟1000毫秒改变状态”，在页面加载时，动态面板会先停留在第一个状态1秒，而不是马上切换到下一个状态。这个时间“1000毫秒”是根据上面“重复每一个”区域的修改而变化的。
设置你的“进入动画”和“退出动画”的值为“向左滑动”和“500毫秒”。

STEP 6：预览

点击预览。

这个旋转式幻灯放映机会自动轮播。

第10篇原文链接：https://www.axure.com/support/training/rotating-carousel-banner-tutorial

第11篇：自动点击区域

当一个输入框的值填写完毕后，自动跳到下一个区域。实现效果如下：

STEP 1：开始

打开培训文档中的“Auto-tab 区域”。
这个页面包含了三个文本区域排列成一个日期。这里有一个月份区域和一个天数区域，他们的数值都采用两位数，而年数区域则采用四位数。这些提示文本是使用提示文本功能。
选择第一个组件“Month”。在属性标签栏下，定位到区域“最大长度”，在这个区域输入2。对“Day”组件进行同样的操作。而对“Year”组件则将最大长度设置成4。

STEP 2：自动从“Month”组件跳到“Day”组件

选择“Month”组件，在属性标签栏下，双击“当文本改变”来制作一个文本改变实例。
单击对话框顶部的“添加条件”按钮，打开条件编辑器。
在最左边栏的下拉选项框中选择“组件值的长度”。保留接下来三个值为默认值。分别是“这个组件”，“等于”，和“值”。
在最右边区域，填入数字2.
点击却低估关闭条件编辑器。
在实例编辑器的左边栏，点击行为“聚焦”。
在右边栏，点击复选框“Day”。
点击确定关闭对话框。

STEP 3：自动从“Day”组件跳到“Year”组件

重复上面的操作应用在“Day”组件上。确定使用“聚焦”行为时将目标改成“Year”组件。

STEP 4：预览

点击预览。

在“Month”区域输入两位数，接着会自动跳到“Day”区域。在“Day”区域输入两位数，会自动跳到“Year”区域。

第11篇原文链接：https://www.axure.com/support/training/auto-tab-fields-tutorial

第12篇：必填区域

在提交表格前检查必填区域是否完成输入。实现效果如下：

STEP 1：建立

打开培训文档中的“Required fields”页面。
这个页面包含了一个文本框用来输入邮箱地址和一个提交的按钮。它也包含了一个带有两种状态的动态面板，“Success”和“Error”。这个邮箱地址区域需要被填入东西才能让“Success”的消息显示出来。如果没有填，则显示“Error”状态。
选择“Submit message”动态面板将它隐藏。

STEP 2：显示错误信息如果邮箱区域是空白的

选择submit按钮组件。在属性标签栏，双击“单击”来添加一个单击实例。
在实例编辑器的顶部，点击“添加条件”打开条件创建器。
保留第一个选项的值“组件上的文本”。在第二个下拉选项框，选择“Email address”组件。接下来两个选项需要设置成“等于”和“值”。
在最后的区域，清除上面的文本以便该区域为空。
点击确定关闭条件创建器。

在实例编辑器中，点击左边栏的“设置面板状态”。
在右边栏，选择“Submit message”动态面板。
在下面栏，使用“选择状态”下拉框选择“Error”状态。然后点击勾选“显示面板如果隐藏”。
在左边栏，点击行为“等待”。
在右边栏，你可以配置“等待”行为的长度。将它改为2000毫秒。
在左边栏，选择“隐藏”行为。
在右边栏，勾选“Submit message”动态面板。
点击确定关闭对话框。

STEP 3：当邮箱区域不为空时则显示成功的信息

再次双击在属性标签栏下的“单击”来创建一个新的实例。
这次不用添加条件，因为如果第一个实例不满足条件不发生，则第二个实例会被触发。
接下来的设置同上，不同的是要将动态面板的状态选择为“Success”状态即可。

STEP 4：预览

点击预览。

尝试点击submit按钮在没有在邮箱区域输入任何文本的情况下。当错误信息消失，尝试在邮箱地址输入文本然后再次点击submit按钮。

第12篇原文链接：https://www.axure.com/support/training/required-fields-tutorial

第13篇：动态设置下拉选项

根据第一个下拉选项的不同，第二个下拉选项框会相应变化，效果如下：

STEP 1：开始

打开培训文档中的“Dynamic Droplist”页面。
页面中的表单是用来为雇员选择职位的。不同的部门拥有不同的职位头衔，基于这个第一个列表的选择，第二个下拉列表可获得不同的选项。
首先，这个页面包含一个“Department”下拉列表带有三个选项：“Operations”，“Sales”，“Development”。每个选项都对应有一个子下拉列表。每个子下拉列表有两个选项。都是那个部门下的职位头衔。

STEP 2：创建动态面板

右键单击第一个“Job Title”下拉列表，就是选项里写着“Administrative Assistant”，然后点击“转化为动态面板”。
在右边审查面板的顶部这个区域，将动态面板命名为“Job title”。
在属性标签栏下，点击复选框“内容适应”。
双击动态面板进入动态面板状态管理器。
点击绿色“+”号两次，现在动态面板共有三种状态。
轻轻双击每一个状态，并将它们按顺序重命名为：“Operations”，“Sales”，“Development”。
最后，将“Sales”和“Development”的下拉列表从主页面剪切／粘贴它们各自对应的动态面板的状态页中，设置坐标为（0,0）。

STEP 3：基于第一个下拉选框的选择设置动态面板的状态

回到“Dynamic Droplist”页面。单击“Department”下拉组件。在属性标签栏中，双击“当选项改变”添加一个新的选项改变实例。
在左边栏，点击行为“设置面板状态”。
在右边栏，点击“Job title”动态面板。
在右边栏底部，找到“选择状态”下拉选项然后点击“值”。
点击临近入口区域的“fx”按钮。
在下面的“本地变量”部分，修改第一个下拉选项为“选中的选项”。
在下一个下拉选项，选择“这个组件”。
在对话框的顶部区域，删除自动插入的数字1，点击“插入变量或者功能”。
在出现的下拉选项里找到“本地变量”，点击“LVAR1”。
点击确定关闭”编辑值”对话框，再次点击确定关闭实例编辑器对话框。

STEP 4：预览

点击预览。

第13篇原文链接：https://www.axure.com/support/reference/droplist-selection-conditional-logic-tutorial

第14篇：根据下拉列表设置文本

根据下拉列表的选项来动态地设置一个组件上的文本。实现效果如下：

STEP 1：开始

打开培训文档中的“Set Text with Droplist”页面。

这个下拉列表是用来选择衬衫的大小的，这个大小会显示在衬衫组件的一个矩形组件上。

点击矩形组件，在审查面板的顶部将其命名为“Size label”。

STEP 2：创建设置文本行为

点击选择下拉列表选项，在属性标签栏下，双击“当选择改变”来添加一个实例。
在左边栏，点击行为“设置文本”。
在右边栏，勾选“Size Label（矩形）”。
在右边栏底部，修改”为其设置文本“下拉选项为“选中选项的”。
保留第二个下拉列表设置不变“这个”。
点击确定关闭实例编辑器。

STEP 3：预览

点击预览

改变下拉选项来修改衬衫上的标签大小。

第14篇原文地址：https://www.axure.com/support/training/set-text-with-droplist-tutorial

第15篇：发送文本到另一个页面

打开培训文档的“Pass text to next page”页面。效果如下：

STEP 1：设置

这个页面包含了三个文本输入框：“First name”，“Last name”，和“Email address”。这里还有一个提交按钮。当点击提交按钮后会将填在三个输入框中的文本发送到“Next page”页面。

STEP 2：创建变量

在Axure RP原型中为了从一个页面发送信息到另一个页面，需要用变量。在这个文件中，我们将需要三个变量：FirstNameVar，LastNameVar和EmailAddressVar。在目录的顶部，点击“工程>全局变量”。
默认情况下，一个文件开始有一个叫做“加载变量”的变量。点击文本“加载变量”将其改为“FirstNameVar”。
点击绿色“+”图标添加一个新的变量，命名为“LastNameVar”
点击绿色“+”图标添加最后一个变量，命名为“EmailAddressVar”。