在數(shù)字化設(shè)計(jì)的世界里，一個(gè)簡(jiǎn)單的開(kāi)關(guān)按鈕可能蘊(yùn)含著復(fù)雜的設(shè)計(jì)和交互邏輯。這篇文章我們一起來(lái)了解如何在Axure PR 9中設(shè)計(jì)和實(shí)現(xiàn)一個(gè)既美觀又功能強(qiáng)大的開(kāi)關(guān)切換按鈕。

這期內(nèi)容，我們來(lái)探討Axure開(kāi)關(guān)按鈕設(shè)計(jì)與交互技巧。

創(chuàng)建切換開(kāi)關(guān)所需的元件

1.打開(kāi)一個(gè)新的 RP 文件并在畫(huà)布上打開(kāi) Page 1。

2.將“圓形”元件拖到畫(huà)布上，在樣式窗格中將高度和寬度設(shè)置為35，線段寬度設(shè)置為1，顏色設(shè)置為灰色，設(shè)置內(nèi)部陰影Y軸為2，模糊3。

3.將“矩形”元件拖到畫(huà)布上，在樣式窗格中將高度設(shè)置為37，將寬度設(shè)置為80，線段寬度設(shè)置為1，顏色設(shè)置為灰色。

4.接下來(lái)，將拖動(dòng)矩形頂部的圓形并使用頂部工具欄中的對(duì)齊選項(xiàng)將其左右對(duì)齊。

創(chuàng)建交互

1. 創(chuàng)建切換開(kāi)關(guān)“圓形”的交互狀態(tài)

1.選擇“圓形”元件，在交互窗格點(diǎn)擊新建交互，選擇單擊時(shí)，啟用情形判斷

情形1：點(diǎn)擊添加條件，選擇選中狀態(tài)，“矩形”，“==”，值為“假”的情況下，設(shè)置選中矩形為“真”，“線性”“100”毫秒移動(dòng)圓形元件經(jīng)過(guò)（45，0）坐標(biāo)。

情形2：點(diǎn)擊添加條件，選擇選中狀態(tài)，“矩形”，“==”，值為“真”的情況下，設(shè)置選中矩形為“假”，“線性”“100”毫秒移動(dòng)圓形元件經(jīng)過(guò)（-45，0）坐標(biāo)。

2.點(diǎn)擊新建交互，選擇設(shè)置載入時(shí)選中矩形為“真”，“線性”“100”毫秒移動(dòng)圓形元件經(jīng)過(guò)（45，0）坐標(biāo)。

2. 創(chuàng)建切換開(kāi)關(guān)“矩形”的交互狀態(tài)

1.選擇矩形元件，在交互窗格點(diǎn)擊新建交互，選擇單擊時(shí)，啟用情形判斷

情形1：點(diǎn)擊添加條件，選擇選中狀態(tài)，“矩形”，“==”，值為“假”的情況下，設(shè)置選中矩形為“真”，“線性”“100”毫秒移動(dòng)圓形元件經(jīng)過(guò)（45，0）坐標(biāo)。

情形 2：點(diǎn)擊添加條件，選擇選中狀態(tài)，“矩形”，“==”，值為“真”的情況下，設(shè)置選中矩形為“假”，“線性”“100”毫秒移動(dòng)圓形元件經(jīng)過(guò)（-45，0）坐標(biāo)。

2.選中矩形元件，在設(shè)置形狀屬性窗格，選擇元件選中的樣式，設(shè)置填充色為藍(lán)色。

預(yù)覽交互

點(diǎn)擊預(yù)覽，在預(yù)覽頁(yè)面單機(jī)切換開(kāi)關(guān)以打開(kāi)和關(guān)閉它

切換開(kāi)關(guān)二次確認(rèn)彈窗

在以上基礎(chǔ)上，創(chuàng)建彈窗和遮罩交互元件。

創(chuàng)建二次確認(rèn)彈窗

1.將一個(gè)動(dòng)態(tài)面板拖到畫(huà)布上，在樣式窗格中設(shè)置寬度300，高度170。

2.雙擊動(dòng)態(tài)面板，在動(dòng)態(tài)面板狀態(tài)窗格中拖入一個(gè)“矩形”，在樣式窗格中設(shè)置寬度“300”，高度“124”，在線段窗格設(shè)置線寬為“1”，顏色為灰色，底線可見(jiàn)，在圓角窗格設(shè)置圓角半徑為“10”，左右上角可見(jiàn)，在矩形中輸入主標(biāo)題，副標(biāo)題文案，設(shè)置文案居中。

創(chuàng)建取消，確認(rèn)按鈕。

3.在動(dòng)態(tài)面板狀態(tài)窗格中再拖入一個(gè)矩形，在樣式窗格中設(shè)置寬度“150”，高度“46”，在圓角窗格設(shè)置圓角半徑為“10”，左下角可見(jiàn)，在矩形中輸入“取消”，設(shè)置文案居中。

4.復(fù)制取消按鈕，在圓角窗格設(shè)置右下角可見(jiàn)，在矩形中輸入確認(rèn)，在排版窗格中將字體設(shè)置成藍(lán)色。

5.在樣式位置和尺寸窗格中將二次確認(rèn)彈窗設(shè)置為隱藏。

創(chuàng)建切換開(kāi)關(guān)遮罩元件

1.將矩形元件拖到畫(huà)布上，在樣式窗格中設(shè)置寬度“375”，高度“815”，填充窗格中設(shè)置填充顏色為灰色，透明度“30%”，圓角窗格半徑設(shè)置為“15”。

2.在樣式位置和尺寸窗格中將遮罩設(shè)置為隱藏。

創(chuàng)建交互

創(chuàng)建切換開(kāi)關(guān)“圓形”的交互狀態(tài)

1.選中圓形元件，在交互窗格點(diǎn)擊新建交互，選擇單擊時(shí)，“逐漸” “200”毫秒顯示遮罩 “逐漸” “200”毫秒顯示二次確認(rèn)彈窗。

2.點(diǎn)擊新建交互，選擇設(shè)置載入時(shí)選中矩形為“真”，“線性”“100”毫秒移動(dòng)圓形元件經(jīng)過(guò)（45，0）坐標(biāo)。

創(chuàng)建切換開(kāi)關(guān)“遮罩”的交互狀態(tài)

1.選中遮罩元件，在交互窗格點(diǎn)擊新建交互，選擇單擊時(shí)，“逐漸” “200”毫秒隱藏遮罩 “逐漸” “200”毫秒隱藏二次確認(rèn)彈窗。

創(chuàng)建切換開(kāi)關(guān)“二次確認(rèn)彈窗”的交互狀態(tài)

取消

1.雙擊二次確認(rèn)彈窗動(dòng)態(tài)面板，選中取消按鈕，在交互窗格中點(diǎn)擊新建交互，選擇單擊時(shí)，啟用情形判斷。

情形1：點(diǎn)擊添加條件，選擇選中狀態(tài)，“矩形”，“==”，值為“真”的情況下，設(shè)置選中矩形為“假”，“線性”“100”毫秒移動(dòng)圓形元件經(jīng)過(guò)（-45，0）坐標(biāo)，“逐漸” “200”毫秒隱藏遮罩 “逐漸” “200”毫秒隱藏二次確認(rèn)彈窗。

情形 2：點(diǎn)擊添加條件，選擇選中狀態(tài)，“矩形”，“==”，值為“假”的情況下，“逐漸” “200”毫秒隱藏遮罩 “逐漸” “200”毫秒隱藏二次確認(rèn)彈窗。

2.選中矩形元件，在設(shè)置形狀屬性窗格，選擇鼠標(biāo)懸停的樣式，設(shè)置填充色為“灰色”。

確認(rèn)

1.雙擊二次確認(rèn)彈窗動(dòng)態(tài)面板，選中確認(rèn)按鈕，在交互窗格中點(diǎn)擊新建交互，選擇單擊時(shí)，啟用情形判斷。

情形1：點(diǎn)擊添加條件，選擇選中狀態(tài)，“矩形”，“==”，值為“假”的情況下，設(shè)置選中矩形為“真”，“線性”“100”毫秒移動(dòng)圓形元件經(jīng)過(guò)（-45，0）坐標(biāo)，“逐漸” “200”毫秒隱藏遮罩 “逐漸” “200”毫秒隱藏二次確認(rèn)彈窗。

情形 2：點(diǎn)擊添加條件，選擇選中狀態(tài)，“矩形”，“==”，值為“真”的情況下，“逐漸” “200”毫秒隱藏遮罩 “逐漸” “200”毫秒隱藏二次確認(rèn)彈窗。

2.選中矩形元件，在設(shè)置形狀屬性窗格，選擇鼠標(biāo)懸停的樣式，設(shè)置填充色為“灰色”。

創(chuàng)建切換開(kāi)關(guān)“矩形”的交互狀態(tài)

1.選中矩形元件，在交互窗格中點(diǎn)擊新建交互，選擇單擊時(shí)，啟用情形判斷。

情形1：點(diǎn)擊添加條件，選擇選中狀態(tài)，“矩形”，“==”，值為“假”的情況下，設(shè)置選中矩形為“真”，“線性”“100”毫秒移動(dòng)圓形元件經(jīng)過(guò)（-45，0）坐標(biāo)，“線性”“100”毫秒移動(dòng)圓形元件經(jīng)過(guò)（45，0）坐標(biāo)。

情形 2：點(diǎn)擊添加條件，選擇選中狀態(tài)，“矩形”，“==”，值為“真”的情況下，設(shè)置選中矩形為“假”，“線性”“100”毫秒移動(dòng)圓形元件經(jīng)過(guò)（-45，0）坐標(biāo)，“線性”“100”毫秒移動(dòng)圓形元件經(jīng)過(guò)（-45，0）坐標(biāo)。

2.選中矩形元件，在設(shè)置形狀屬性窗格，選擇元件選中的樣式，設(shè)置填充色為“藍(lán)色”。

預(yù)覽交互

點(diǎn)擊預(yù)覽，在預(yù)覽頁(yè)面單擊切換開(kāi)關(guān)元件，會(huì)彈出二次確認(rèn)開(kāi)啟或關(guān)閉提示彈窗，點(diǎn)擊確認(rèn)開(kāi)關(guān)元件為開(kāi)啟狀態(tài)，點(diǎn)擊取消開(kāi)關(guān)元件為關(guān)閉狀態(tài)。

預(yù)覽地址：https://6dd8ys.axshare.com