Axure RP 9 开关转换 设计&交互

在数字设计的世界里，一个简单的按键开关可能包含着复杂的设计和交互逻辑。在这篇文章中，我们来看看如何 Axure PR 9 开关切换按钮设计并实现美观和强大的功能。

本期内容，我们将讨论 Axure 按键开关设计与交互技巧。

建立转换开关所需的元件

1. 打开一个新的 RP 并在画布上打开文档 Page 1。

2. 将“圆形”元件拖到画布上，在风格窗格中将高度和总宽度设置为 线段总宽设置为35。 颜色设置为灰色，设置内部阴影。 Y 轴为 2，模糊 3。

3. 将“矩形”元件拖到画布上，将高度设置在风格窗格中。 将总宽度设定为37 线段总宽设置为80。 颜色设置为灰色。

4. 下一步，用顶部工具栏中的对齐选项将拖动矩形顶部的圆形左右对齐。

建立交互

1. 建立转换开关“圆形”的交互状态

1. 选择“圆形”元件，在交互窗格点击新建交互，选择点击时，启用情况判断

情况 1：单击添加条件，选择正确的状态，“矩形”， == "，当值为“假”时，设置选定矩形为“真”，“线性” 100 "ms移动圆形元件通过(45,0)坐标。

情况 2：单击添加条件，选择正确的状态，“矩形”， == "，当值为“真”时，设定选择矩形为“假”，“线性” 100 "ms移动圆形元件通过(-45,0)坐标。

2. 单击新建交互，选择载入时选择的矩形为“真”、“线性” 100 "ms移动圆形元件通过(45,0)坐标。

2. 建立转换开关“矩形”的交互状态

1. 选择矩形元件，在交互窗格点击新建交互，选择点击时，启用情况判断

情况 2：单击添加条件，选择正确的状态，“矩形”， == "，当值为“真”时，设定选择矩形为“假”，“线性” 100 "ms移动圆形元件通过(-45,0)坐标。

2. 选择矩形元件，设置形状特征窗格，选择元件选择的款式，设置填充颜色为蓝色。

浏览交互

单击浏览页面，单机转换开关打开并关闭浏览页面

转换开关二次确认弹窗

在上述基础上，建立弹窗和遮盖交互元件。

建立二次确认弹窗

1. 将动态面板拖到画布上，在风格窗格中设置总宽度。 300，高度 170。

2. 双击动态面板，将一个“矩形”拖入动态面板状态窗格，将总宽度设置在风格窗格中。 300 "，高度" 124 "，线段窗格设置线距为" 1 "，颜色为灰色，底线可见，圆角半径为圆弧窗格设置" 10 "，左右上方可以看到，在矩形中输入主标题，副标题文案，设置文案居中。

建立撤销，确认按钮。

3. 将一个矩形拖入动态面板状态窗格中，将总宽设置在风格窗格中。 150 "，高度" 46 "，圆角半径设置在圆弧窗格上" 10 "，左下方可以看到，在矩形中输入“撤销”，设置文案居中。

4. 复制取消按钮，在弧形窗格设置右下方可见，在矩形中输入确定，在排版窗格中将字体设置为蓝色。

5. 将二次确认弹窗设置为风格位置和尺寸窗格中的隐藏。

建立转换开关覆盖元件

1. 将矩形元件拖到画布上，在款式窗格中设置总宽度" 375 "，高度" 815 "，在添加窗格中设置填充颜色为灰色，透明" 30% "，弧形窗格半径设置为" 15 "。

2. 将遮罩设置为风格位置和尺寸窗格中的隐藏。

建立转换开关“圆形”的交互状态

1. 选择圆形元件，在交互窗格点击新建交互，选择点击时，“渐进” " 200 "ms显示屏蔽 "逐渐" " 200 "ms显示弹窗的二次确认。

建立转换开关“遮盖”的交互状态

1. 选择遮盖元件，在交互窗格点击新建交互，选择点击时，“渐进” " 200 "ms隐藏遮盖 "逐渐" " 200 "ms隐藏了二次确认弹窗。

建立“二次确认弹窗”转换开关的交互状态

撤销

1. 双击确认弹窗动态面板，选择取消按钮，在交互窗格中点击新建交互，选择点击时，启用情况判断。

情况 1：单击添加条件，选择正确的状态，“矩形”， == "，当值为“真”时，设定选择矩形为“假”，“线性” 100 "ms通过(-45,0)坐标移动圆形元件"渐进" " 200 "ms隐藏遮盖 "逐渐" " 200 "ms隐藏了二次确认弹窗。

情况 2：单击添加条件，选择正确的状态，“矩形”， == "，当值为“假”时，"逐渐" " 200 "ms隐藏遮盖 "逐渐" " 200 "ms隐藏了二次确认弹窗。

2. 选择矩形元件，设置形状特征窗格，选择鼠标悬停风格，设置填充颜色为“灰色”。

确定

1. 双击二次确认弹窗动态面板，选择确认按钮，在交互窗格中点击新建交互，选择点击时，启用情况判断。

情况 1：单击添加条件，选择正确的状态，“矩形”， == "，当值为“假”时，设置选定矩形为“真”，“线性” 100 "ms通过(-45,0)坐标移动圆形元件"渐进" " 200 "ms隐藏遮盖 "逐渐" " 200 "ms隐藏了二次确认弹窗。

情况 2：单击添加条件，选择正确的状态，“矩形”， == "，当值为"真"时，"逐渐" " 200 "ms隐藏遮盖 "逐渐" " 200 "ms隐藏了二次确认弹窗。

建立转换开关“矩形”的交互状态

1. 选择矩形元件，在交互窗格中点击新建交互，选择点击时，启用情况判断。

情况 1：单击添加条件，选择正确的状态，“矩形”， == "，当值为“假”时，设置选定矩形为“真”，“线性” 100 "ms移动圆形元件通过(-45,0)坐标，"线性"" 100 "ms移动圆形元件通过(45,0)坐标。

情况 2：单击添加条件，选择正确的状态，“矩形”， == "，当值为“真”时，设定选择矩形为“假”，“线性” 100 "ms移动圆形元件通过(-45,0)坐标，"线性"" 100 "ms移动圆形元件通过(-45,0)坐标。

2. 选择矩形元件，设置形状特征窗格，选择元件选择的款式，设置填充颜色为“蓝色”。

点击浏览，点击浏览页面上的切换开关元件，会弹出二次确认开启或关闭提醒弹出窗口，点击确认电子开关处于开启状态，点击取消电子开关处于关闭状态。

浏览地址：https://6dd8ys.axshare.com

本文由 @PM 大明同学 每个人都是原创产品经理。未经作者许可，禁止转载。

题图来自 Unsplash，基于 CC0 协议

这篇文章的观点只代表作者本人，每个人都是产品经理平台，只提供信息存储空间服务

本文仅代表作者观点，版权归原创者所有，如需转载请在文中注明来源及作者名字。

免责声明：本文系转载编辑文章，仅作分享之用。如分享内容、图片侵犯到您的版权或非授权发布，请及时与我们联系进行审核处理或删除，您可以发送材料至邮箱：service@tojoy.com