原型设计工具Axure RP入门教程（十）：条款和条件教程

在本教程中，您将学习如何创建一个表单，该表单要求用户选中一个复选框并输入其名称，然后再继续。

在本教程中，您将学习如何创建一个表单，该表单要求用户选中一个复选框并输入其名称，然后再继续。

小部件和页面设置

第1页–条款和条件表格

• 打开一个新的RP文件，然后在画布上打开Page 1。
• 将复选框小部件，标签小部件，文本字段小部件和按钮小部件拖到画布上。
• 将复选框上的文本设置为我同意条款和条件。
• 将标签小部件上的文本设置为请在此处签名，然后将其放在文本字段上方。
• 将按钮上的文本设置为下一页。

第2页–成功页面

• 在项目中添加一个新页面，并在画布上打开它。
• 将标题小部件拖到画布上，并将其文本设置为Success。

取消选中复选框时禁用文本字段

使文本字段默认为禁用

• 打开第1页，然后选择文本字段小部件。
• 在交互窗格的右上角，单击更多选项下拉列表，然后选中禁用框。
• 这将触发文本字段的默认：disabled样式效果，将其变为灰色。它还将阻止用户与Web浏览器中的文本字段进行交互。

选中复选框时启用文本字段

• 选择复选框窗口小部件，然后在交互窗格中单击新建交互。
• 在出现的列表中选择Selected事件，然后选择Enable / Disable操作。
• 在目标下拉列表中选择文本字段小部件，然后在其下方保留启用处于选中状态。
• 单击确定以保存操作。

取消选中复选框时，再次禁用文本字段

• 在复选框小部件仍处于选中状态的情况下，再次在交互窗格中单击新建交互。
• 在出现的列表中选择未选定事件，然后选择启用/禁用操作。
• 在目标下拉列表中选择文本字段小部件，然后在其下方选择禁用。
• 单击确定以保存操作。

取消选中复选框时清除文本字段的文本

• 在复选框小部件仍处于选中状态的情况下，单击未选中块底部的插入动作图标，然后在出现的列表中选择设置文本动作。
• 在目标下拉列表中选择文本字段小部件。
• 将值字段留为空白.（这将清除文本字段的文本。）
• 单击确定以保存操作。

禁用下一页按钮，直到用户签名

使按钮默认为禁用

• 选择按钮小部件。
• 在交互窗格的右上角，单击更多选项下拉列表，然后选中禁用框。

使按钮具有禁用的样式效果

• 在仍选择按钮小部件的情况下，在交互窗格中单击新建交互。
• 在出现的列表的底部，选择：disabled样式效果。
• 在出现的：disabled块中，检查填充颜色属性，然后在颜色选择器中选择一种灰色。
• 单击确定保存样式效果。

当文本字段包含文本时启用按钮

• 选择文本字段窗口小部件，然后在交互窗格中单击新建交互。
• 在出现的列表中选择文本更改事件，然后选择启用/禁用”操作。
• 在目标下拉列表中选择下一页按钮，并在其下方保留启用处于选中状态。
• 单击确定以保存操作。

• 在仍然选择文本字段的情况下，将鼠标悬停在交互窗格中的文本已更改标题上，然后单击右侧的启用案例。
• 在出现的条件构建器对话框中，单击添加逻辑。
• 在出现的条件行中，中间的下拉列表中选择不等于。
• 对话框底部的摘要应显示为：If text on This does not equal “”。只要文本字段不是空白（一旦用户在其中输入文本），就将满足此条件。
• 单击确定关闭条件生成器对话框。

清除文本字段时，再次禁用按钮

• 在仍然选择文本字段小部件的情况下，将鼠标悬停在交互窗格中的文本已更改标题上，然后单击右侧的添加大小写。
• 在出现的条件构建器对话框中，单击确定而不添加任何逻辑。

• 单击新案例标题下方的插入操作图标，然后在出现的列表中选择启用/禁用操作。
• 在目标下拉菜单中选择下一页按钮，然后在其下方选择禁用。
• 单击确定以保存操作。

注意：即使我们没有为这种情况设置条件，它的条件为ELSE IF true。如果没有通过第一种情况（如果清除了文本字段的文本），则将触发这种情况（也称为默认情况）。

将下一页按钮链接到页面2

• 选择下一页按钮，然后在交互窗格中单击Click或Tap →Open Link 。
• 在出现的列表中选择第2页，然后单击确定以保存操作。

预览互动

• 预览第1页，然后尝试单击文本字段和下一页按钮。两者都被禁用，因此什么也不会发生。
• 选中并取消选中复选框几次。文本字段应交替启用和禁用。
• 在文本字段中输入一些文本，然后通过手动删除文本或取消选中复选框再次将其清除。下一页按钮应启用，然后再次禁用。
• 填写表格，然后单击下一页按钮。您应该转到第2页。

想要获得Axure RP更多资源、正版授权的伙伴，请咨询【客服】了解

标签：