Axure RP - 高级交互

到目前为止，我们已经了解了 Axure 中用于交互的基本功能。但是，在许多现实场景中，原型需要具备智能性。所谓智能性，指的是原型需要检测特定组件的状态，以便执行操作/触发特定行为。

这种交互的一个典型示例是设置按钮的颜色。这要求 UX 工程师戴上思考帽，将原型设计提升到一个新的水平。

在 Axure 中使用变量

变量，根据定义，代表一个可能变化或改变的因素。在 Axure 中，我们可以使用变量来表示或识别组件/交互的状态。

一个典型的例子是在从一个页面传输数据到另一个页面时存储数据值。为了使示例简单明了，让我们考虑一个需要显示特定组件状态的场景。

继续我们上一个示例，让我们考虑一下我们想显示图像显示了多少次。

以下是我们的操作方法：

对于此示例，我们将在动态面板下方创建一个文本。文本将显示为 - 图像已显示 0 次。

关键 - 标签必须分成三个部分。请按照表格中列出的标签名称和文本进行操作。

这是必需的，因为我们希望控制每次单击“显示图像”按钮时 countLabel 的值。

让我们首先定义一个变量。

我们需要一个变量，该变量将在单击按钮时进行控制。在 Axure 的术语中，这个变量称为 - 全局变量。要定义全局变量，请单击菜单栏中的“项目”，然后单击“全局变量”。将打开一个对话框，如下面的屏幕截图所示。

单击绿色加号 (+) 图标以添加全局变量。让我们将全局变量命名为 - varDynamicPanel。其默认值为0。

在“显示图像”按钮交互中，双击“案例 1”。添加另一个操作。如以下屏幕截图所示，操作为将 countLabel 上的文本设置为 [[varDynamicPanel + 1]]。

将文本标签选择为某个值非常简单。让我们看看如何从动态面板获取值。

如上图屏幕截图中步骤 4 所示，单击fx按钮，将打开以下对话框。

在第一个文本区域中，输入以下字符串。

[[varDynamicPanel + 1]]

单击“确定”。

现在，我们需要确保每次单击按钮后变量都会更新。

在案例编辑器对话框中，在操作下，选择变量→设置变量值。

选择 varDynamicPanel 作为变量。

将变量设置为从可用选项中的组件 countLabel 上的文本获取值。

单击“确定”关闭案例编辑器。然后，单击“预览”按钮。

在显示/隐藏图像四次后，以下是预览屏幕上的结果。

打印页面