中文字幕无码av不卡一区,亚洲综合AV永久无码精品一区二区,黑人巨大白妞出浆,黄色高清无码免费看,久久久久免费精品国产,久久无码人妻丰满熟妇区毛片,欧美日韩国产综合草草,久久福利网站,亚洲一区二区三区中文字幕在线,av国内精品久久久久影院

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

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

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

1.打開一個新的 RP 文件并在畫布上打開 Page 1。

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

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

4.接下來，將拖動矩形頂部的圓形并使用頂部工具欄中的對齊選項將其左右對齊。

創(chuàng)建交互

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

1.選擇“圓形”元件，在交互窗格點擊新建交互，選擇單擊時，啟用情形判斷

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

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

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

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

1.選擇矩形元件，在交互窗格點擊新建交互，選擇單擊時，啟用情形判斷

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

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

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

預(yù)覽交互

點擊預(yù)覽，在預(yù)覽頁面單機切換開關(guān)以打開和關(guān)閉它

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

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

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

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

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

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

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

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

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

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

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

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

創(chuàng)建交互

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

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

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

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

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

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

取消

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

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

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

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

確認(rèn)

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

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

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

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

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

1.選中矩形元件，在交互窗格中點擊新建交互，選擇單擊時，啟用情形判斷。

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

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

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

預(yù)覽交互

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

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