切换开关 | Toggle Switch

为移动端界面制作两种切换开关。

STEP 0:下载移动端练习文件

如果你还没有练习文件,请下载AxureMobile练习文件.rp并在Axure RP中打开它,该文件包含了Axure移动端教程中对应的每个页面。

设置

在移动端练习文件中打开“切换开关”页面,在画布上有两个切换开关,“切换开关1”动态面板和“切换开关2”组合。

切换开关1-无动效

“切换开关1”动态面板有两个状态,一个“关”状态和一个“开”状态,每个状态都包含一个名为“手柄”的椭圆形元件(一个处于“关”位置,一个处于“开”位置),位于“背景”矩形框上面(你可以在概要窗格中,将鼠标悬停在状态名称上,来查看每个状态的样子)。

我们将在这两个状态之间来回切换,以模拟切换开关的效果。

STEP 1:切换交互

在画布上选中“切换开关1”动态面板,在检视窗口中的属性页签下,双击“鼠标单击时”来添加一个新的鼠标单击时用例。

在用例编辑器中,点击左侧“配置动作”栏中的“设置面板状态”,在右侧“配置动作”栏中,选择“当前元件”。

在右侧“配置动作”栏的底部,设置“选择状态”的选项为“Next”,然后勾选“向后循环”的复选框,这样可以使动态面板达到最后一个状态后,再回到第一个状态。

点击“确定”按钮关闭用例编辑器。

STEP 2:预览

预览原型,点击第一个切换开关来切换它的开关状态。

(备注:如果你想在“设备框架”页面提供的设备框架中预览页面,打开“设备框架”页面,双击“内容框架”,然后在弹出的对话框中选择“切换开关”。)

切换开关2-带动效

“切换开关2”元件组合包含两个元件,一个“手柄”椭圆形元件和一个“背景”矩形元件,“手柄”椭圆形元件设置了“选中”的交互样式。(如果你之前没有使用过交互样式,可以查看我们的交互按钮教程来学习。)

我们将通过左右移动“手柄”椭圆形元件,并切换其选中状态来模拟切换开关。

STEP 1:选中组合并将“手柄”移动到右边

在画布上选中“切换开关2”组合,在检视窗格中的属性页签下,双击“鼠标单击时”来添加一个新的鼠标单击时用例。

在用例编辑器的顶部,点击“添加条件”按钮来打开条件设立窗口。

在第一个下拉列表中选择“选中状态”,然后将第二个下拉列表中的“==”改为“!=”,其他的字段保持不变,当组合处于未选中状态时,该条件成立。

点击“确定”按钮关闭条件设立窗口。

在用例编辑器中,点击左侧“添加动作”栏中的“选中”(位于“设置选中”下面),在右侧“配置动作”栏中选择“当前元件”,以这种方式将组合设置为选中状态,同时也将组合中的元件设置为选中状态。

在用例编辑器左侧“添加动作”栏中点击“移动”,在右侧“配置动作”栏,选择“切换开关2”组合下的“手柄”椭圆形元件。

在右侧“配置动作”栏的底部,在“x”后面的文本框中输入“20”(这样可以将元件向右移动20个像素),在动画的下拉列表中选择“摇摆”,然后在“时间”后面的文本框中输入“250”。

点击“确定”按钮关闭用例编辑器。

STEP 2:取消选中组合并将“手柄”移回左边

在“切换开关2”被选中的状体下,在检视窗格中的属性页签下双击“鼠标单击时”来添加第二个鼠标单击时用例。

在用例编辑器中,点击左侧“添加动作”栏中的“取消选中”(位于“设置选中”下面),在右侧“配置动作”栏中选择“当前元件”。

回到左侧“添加动作”栏,点击“移动”,在右侧“配置动作”栏中,选择“切换开关2”组合下的“手柄”椭圆形元件。

在右侧“配置动作”栏的底部,在“x”后面的文本框中输入“-20”(这样可将元件向左移动20个像素),在“动画”下拉列表中选择“摇摆”。(注意“时间”字段的值同样是250,就和我们在上一个“移动”动作下设置的一样。)

点击“确定”按钮关闭用例编辑器。

(备注:注意,即使我们没有为当前这个用例设置条件,它也会显示条件“Else If True”,如果第一个用例没有触发,那么就会触发当前这个用例,也就是当“切换开关2”处于选中状态时,触发该用例。)

STEP 3:预览

预览原型,点击第二个切换开关来切换它的开关状态。

(备注:如果你想在“设备框架”页面提供的设备框架中预览页面,打开“设备框架”页面,双击“内容框架”,然后在弹出的对话框中选择“切换开关”。)

评论(0)

发表评论

电子邮件地址不会被公开。 必填项已用*标注