編輯導讀：在產(chǎn)品使用中，我們經(jīng)常會看到一個switch開關(guān)，是一種常見的產(chǎn)品交互設(shè)計。那么，如何設(shè)計一個switch開關(guān)呢？只需要用到一個圓和一個橢圓就可以了。本文作者將對如何制作switch開關(guān)進行分析，希望對你有幫助。

在其他的文章中看過比較簡單但是沒有用到函數(shù)的開關(guān)，用兩個模塊做好的關(guān)和開，一個隱藏，本來是顯示的關(guān)，點擊關(guān)，就會顯示開，隱藏關(guān)；再次點擊顯示關(guān)，隱藏開。

今天教大家怎么樣使用一個圓和一個橢圓來制作switch開關(guān)交互。

大致交互流程：點擊圓形，圓形將向右移動，圓角矩形改變填充色；再次點擊圓形，圓向左移動，圓角矩形取消填充色（后面有詳細講解）。

如圖：

這里我使用了一個中間變量來控制當前switch開關(guān)的狀態(tài)，0：代表關(guān)；1：代表開（只是把文字顏色改成了白色，所以就看不到了，實際開關(guān)值在改變ing，如下圖）。

1. 基本元件

圓形：39*39

圓角矩形：90*41 圓角的角度50 ，命名為：關(guān)白藍開（最好先用這個尺寸，理解后可以自己改，因為要根據(jù)圓角矩形的尺寸來將圓形移動到對應(yīng)位置）

2. 先設(shè)置圓角矩形交互樣式

選中圓角矩形（關(guān)白開藍）右擊，如下圖，點擊交互樣式，將“選中”填充藍顏色；

3. 詳細添加交互（關(guān)-開）

將圓形和圓角矩形（關(guān)白開藍）重疊放好，然后點擊圓形，添加載入時，設(shè)置文本，全局變量：NewVariable1 = “0”，NewVariable2 = “1”；默認載入NewVariable1=“0”。

然后添加交互：單擊時，添加情景：如下圖：

在此情景下，添加動作：移動；如下圖，這里用到了函數(shù)[[This.right]]和[[This.bottom]]，函數(shù)[[This.right]]表示：當前的元件的右邊；[[This.bottom]]表示當前元件的底部。

故[[V1.right]]是指圓角矩形（關(guān)白開藍）的右側(cè)，但是圓形不能超出圓角矩形（關(guān)白開藍）的右側(cè)，故要-39，向左移動39個單位，同理[[V2.bottom]]是指圓角矩形（關(guān)白開藍）的底部，但是圓形不能超出圓角矩形（關(guān)白開藍）的底部，故要-40；（可以試一下不-39和-40的效果，就能明白其中的意義了）

3.在給圓形添加動作：設(shè)置選中（目標是圓角矩形（關(guān)白開藍），設(shè)置值為真，然后添加將圓角矩形的交互樣式）

這時候還有添加動作就要將全局變量從“0”改為“1”，為了實現(xiàn)下面步驟的開-關(guān)，如下圖：

以上部分就可以完成switch從關(guān)-開的動作了，可以按F5預覽。

4.（開-關(guān)）

實現(xiàn)開-關(guān)的動作和上面的關(guān)-開是一樣的，關(guān)鍵就是這個全局變量的，上面將圓形的值變?yōu)榱薔ewVariable2，然后添加情景2，用來實現(xiàn)從開-關(guān)。

[[v3.right-89]]和[[v4.bottom]]就是為了讓圓形移動到圓角矩形（關(guān)白開藍）的左側(cè)，圓角矩形（關(guān)白開藍）變?yōu)殛P(guān)，設(shè)置為不選中，這里就不做詳解了。有問題還請積極留言哦，等你們到來。

思考：switch開關(guān)的交互并不一定要點擊圓形，像手機中的WiFi開關(guān)點擊相應(yīng)模塊就會進行交互 開和關(guān)，那這樣怎么實現(xiàn)那，其實道理都查不多，思考一下。

本文由 @汪仔8663 原創(chuàng)發(fā)布于人人都是產(chǎn)品經(jīng)理，未經(jīng)許可，禁止轉(zhuǎn)載

題圖來自?Unsplash，基于 CC0 協(xié)議