Axure RP官方教程翻译(15):发送文本到另一个页面

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

Axure RP官方教程翻译(15):发送文本到另一个页面

STEP 1:设置

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

Axure RP官方教程翻译(15):发送文本到另一个页面

STEP 2:创建变量

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

Axure RP官方教程翻译(15):发送文本到另一个页面

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

  • 单击“Next page”按钮选中它。
  • 在属性标签栏下,双击“单击”来添加一个单击实例。
  • 在左边栏,点击复选框“设置变量值”。
  • 在右边栏,勾选“FirstNameVar”的复选框。
  • 在右边栏底部的“设置变量”部分,使用第一个下拉列表选择“组件上的文本”。使用第二个下拉列表选择“First name”文本区域组件。
  • 对于其他两个变量,你不用添加一个新的“设置变量值”的行为——你在同一个行为下设置多个变量。在右边栏的顶部,选择变量“LastNameVar”的复选框。
  • 在底部“设置变量”区域,使用第一个下拉选项框选择“组件上的文本”。使用第二个下拉选项框选择“Last name”。
  • 回到顶部选择“EmailAddressVar”。
  • 在底部“设置变量”区域,使用第一个下拉选项框选择“组件上的文本”。使用第二个下拉选项框选择“Email address”。
  • 在左边栏,点击行为“打开链接”。
  • 在右边栏,点击“Next page”。
  • 点击确定关闭实例编辑器。

Axure RP官方教程翻译(15):发送文本到另一个页面

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

  • 在页面模块,打开页面“Next page”页面。这个页面有一个带有部分完成信息的段落组件。
  • 在页面审查模块,双击“页面加载”来添加一个页面加载实例。
  • 在左边栏,点击“设置文本”。
  • 在右边栏,点击“Confirmation Message”复选框段落组件。
  • 在右边栏底部,点击“fx”按钮。使用你的鼠标指针来选择第一行文本中的“Firstname”。
  • 点击“插入变量或功能…”,就在这个文本区域的上方。
  • 在出现的下拉选项里选择“FirstName”。变量会以这个形式插入: [[FirstNameVar]]。这个方括号表明这是一个变量。
  • 滑动选择文本中的“Lastname”。
  • 点击“插入变量或者功能”然后选择“LastNameVar”。
  • 滑动选择文本中的“email.address@website.com”。
  • 点击“插入变量或者功能”然后选择“EmailAddressVar”。
  • 点击确定关闭文本对话框。
  • 再次点击确定关闭实例编辑器。

Axure RP官方教程翻译(15):发送文本到另一个页面

STEP 5:预览

点击预览。

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

本文来自Axure.com,经授权后发布,本文观点不代表产品狗立场,转载请联系原作者。

发表评论

登录后才能评论

This site uses Akismet to reduce spam. Learn how your comment data is processed.

联系我们

 

QR code