快好知 kuaihz订阅观点

 

Axure RP官方教程翻译(9-18/18)完结

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

这10篇分别是:

第 9篇:账号登录

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

第11篇:自动点击区域

第12篇:必填区域

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

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

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

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

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

第18篇:滑块

第9篇:账号登录

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

STEP 0:下载培训文档

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

STEP 1:设置

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

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

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

STEP 2:登录成功

如果输入的邮箱和密码都正确,那么“Account Home”页面就会被打开。

选择“submit”按钮,在属性标签栏下,双击“单击”来添加一个新的单击实例。

在实例编辑器的顶部,点击“添加条件”按钮来打开条件创建器。保留第一个下拉选项框的值为“在组件里的文本”。在第二个下拉选项框,选择“Email address”组件。

保留接下来两个控制设置“等于”和“值”不变。

在最后一个区域,输入(不包括方括号)。

点击右边的绿色“+”号图标添加另一个条件。

保留第一个下拉选项框的选项“在组件里的文本”。在第二个下拉选项框里选择组件“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”。

STEP 3:创建交互设置变量和打开下一个页面

单击“Next page”按钮选中它。

在属性标签栏下,双击“单击”来添加一个单击实例。

在左边栏,点击复选框“设置变量值”。

在右边栏,勾选“FirstNameVar”的复选框。

在右边栏底部的“设置变量”部分,使用第一个下拉列表选择“组件上的文本”。使用第二个下拉列表选择“First name”文本区域组件。

对于其他两个变量,你不用添加一个新的“设置变量值”的行为——你在同一个行为下设置多个变量。在右边栏的顶部,选择变量“LastNameVar”的复选框。

在底部“设置变量”区域,使用第一个下拉选项框选择“组件上的文本”。使用第二个下拉选项框选择“Last name”。

回到顶部选择“EmailAddressVar”。

在底部“设置变量”区域,使用第一个下拉选项框选择“组件上的文本”。使用第二个下拉选项框选择“Email address”。

在左边栏,点击行为“打开链接”。

在右边栏,点击“Next page”。

点击确定关闭实例编辑器。

STEP 4:设置Next page的确认信息

在页面模块,打开页面“Next page”页面。这个页面有一个带有部分完成信息的段落组件。

在页面审查模块,双击“页面加载”来添加一个页面加载实例。

在左边栏,点击“设置文本”。

在右边栏,点击“Confirmation Message”复选框段落组件。

在右边栏底部,点击“fx”按钮。使用你的鼠标指针来选择第一行文本中的“Firstname”。

点击“插入变量或功能…”,就在这个文本区域的上方。

在出现的下拉选项里选择“FirstName”。变量会以这个形式插入: [[FirstNameVar]]。这个方括号表明这是一个变量。

滑动选择文本中的“Lastname”。

点击“插入变量或者功能”然后选择“LastNameVar”。

滑动选择文本中的“email.address@website.com”。

点击“插入变量或者功能”然后选择“EmailAddressVar”。

点击确定关闭文本对话框。

再次点击确定关闭实例编辑器。

STEP 5:预览

点击预览。

尝试填入信息然后打开另一个页面。

第15篇原文链接:https://www.axure.com/support/training/pass-text-to-next-page-tutorial

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

添加一张可以自适应浏览器宽度的并且占满屏幕宽度的图片。实现效果如下:

STEP 1:开始

打开培训文档中“Full-width image or banner”页面。

这个页面包含一个叫做“Full-width background”的动态面板。

选择“Full-width background”动态面板,在属性标签栏中,点击选择“百分百宽(浏览器生效)”复选框。

STEP 2:添加背景图片

切换到样式标签栏,在“背景图片”区域,点击导入按钮。然后在本地选择一张图片。(如果不用图片,也可以用“背景颜色”来填充。)

STEP 3:预览

点击预览。

尝试改变浏览器窗口大小。注意当屏幕宽度过大时,一些图片的尺寸会在数值方向上被剪切。这是因为图片为了保持比例而动态面板却没有。

第16篇原文链接:https://www.axure.com/support/training/full-width-image-or-banner-tutorial

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

STEP 1:设置

打开培训文档中的“Scroll-activated sticky header”。

这个页面包括了一个组叫做“Scrolling header”。

右键单击这个组,复制它,然后将它到页面的顶部,设置它的坐标为(20,20)。将它命名为“Sticky header”。

右键单击“Sticky header”将它转化为动态面板。将其依然命名为“Sticky header”,然后隐藏它。

STEP 2:固定Sticky header

依然选中Sticky header,切换到属性标签栏下,点击“固定到浏览器”。

点击复选框“固定到浏览器”。

在横向固定方向上选择“左边”。

在垂直固定方向上选择“顶部”。

点击确定关闭对话框。

STEP 3:添加交互来显示Sticky header和隐藏“Scrolling header”

点击画布空白区域切换到页面的审查面板。

在属性标签栏,双击“窗口滚动”来创建一个新的窗口滚动实例。

在实例编辑器的顶部,点击“添加条件”。

在第一个下拉选项,点击“值”。

点击临近第二个区域旁边的fx按钮。

点击该区域的顶部的“插入变量或功能”。

点开“窗口”部分的下拉列表选择“Window.scrollY”.

点击确定关闭对话框。

在条件创建器,点击中间的下拉选框,选择“大等于”。

保留下一个下拉列表的值为“值”。

在最后一个区域,清除文本输入数字180.

点击确定关闭条件创建器。

在实例编辑器的左边栏,点击“显示”。

在右边栏,点击“Sticky header”动态面板。

在左边栏,点击“隐藏”。

在右边栏,点击“Scrolling header”组

点击确定关闭实例编辑器。

STEP 4:添加交互来显示Scrolling header和隐藏“Sticky header”

在属性标签栏下,双击“窗口滚动”来添加第二个窗口滚动实例。

在左边栏,点击“隐藏”。

在右边栏,点击“Sticky header”。

在左边栏,点击“显示”。

在右边栏,点击“Scrolling Header”。

点击确定关闭实例编辑器。

STEP 5:预览

点击预览

尝试向下滚动页面,Sticky header会显示,然后窗口向上滚动直到它消失。

第17篇原文链接:https://www.axure.com/support/training/scroll-activated-sticky-header-tutorial

第18篇:滑块

创建一个带有一个可拖拽手柄的横向滑块或一个垂直滑块。实现效果如下:

STEP 1:开始

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

这个页面由一个带有两个矩形组件的组组成。一个是滑块的背景,另一个是滑块控制器。

点击组进入滑块控制器并选中它。右键选择“转化为动态面板”。(我们需要用到拖拽交互,而只有动态面板有这个功能。)然后将动态面板重命名为“Handle”。

STEP 2:创建拖拽交互

继续选择“Handle”,双击属性标签栏下的“拖拽”来创建一个拖拽实例。

在实例编辑器的左边栏,点击“移动”。

在右边栏,点击“这个组件”。

在右边栏的底部,使用“移动”的下拉选框选择“拖动X轴”。这个会将组件限定在只能横向滑动。

在这个下面,点击“添加边界”。

在第一个下拉选项选择“左边”。在接下来的下拉选项选择“大等于”,点击“fx”进行编辑。

从编辑值对话框底部的“本地变量”部分开始。你可以保留第一个值“LVAR1”不变。

在一个下拉框,选择“组件”。

在最后一个下拉框,选择“Background”。

移动到对话框的顶部,输入以下文字:[[LVAR1.left]]

点击确定关闭编辑值窗口。

这样第一个边界就设置好了。

在次点击“添加边界”来设置滑块右边的边界。

在第一个下拉选项框中,点击“右边”。在第二个选项框,点击“小等于”,然后点击“fx”进行编辑。

从编辑值对话框底部的“本地变量”部分开始。你可以保留第一个值“LVAR1”不变。

在一个下拉框,选择“组件”。

在最后一个下拉框,选择“Background”。

移动到对话框的顶部,输入以下文字:[[LVAR1.right]]

点击确定关闭值编辑器。第二个边界也设置好了,这个组件现在最远只能够拉到背景的右端。

点击确定,关闭实例编辑器。

STEP 3:预览

点击预览。

尝试拖拽滑块手柄。

第18篇原文地址:https://www.axure.com/support/training/slider-tutorial

相关阅读

Axure RP官方教程翻译(1):交互式按钮

Axure RP官方教程翻译(2):文本链接

Axure RP官方教程翻译(3):显示隐藏的部件

Axure RP官方教程翻译(4-8/18)集合

本站资源来自互联网,仅供学习,如有侵权,请通知删除,敬请谅解!
搜索建议:完结  完结词条  翻译  翻译词条  教程  教程词条  官方  官方词条  Axure  Axure词条  
原型

 Axure教程:原型设计之侧滑菜...

由于移动端的屏幕比较小,所以在APP的设计当中,菜单的设计尤其关键,比如有下方固定菜单,上方吸附菜单,点聚式菜单等等。侧滑式菜单则是APP设计中最常见的菜单设计...(展开)

原型

 如何用Axure设计APP频道页

频道页是APP中常见的页面,那么如何高效率的画出它的原型呢?之前的文章已经讲解了APP常见功能中的页面模板、下导航、上导航、列表页,详情页怎么画出来,请继续关注...(展开)