制作switch開關:只使用一個圓和一個橢圓

5 評論 3661 瀏覽 7 收藏 6 分鐘

編輯導讀:在產品使用中,我們經常會看到一個switch開關,是一種常見的產品交互設計。那么,如何設計一個switch開關呢?只需要用到一個圓和一個橢圓就可以了。本文作者將對如何制作switch開關進行分析,希望對你有幫助。

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

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

大致交互流程:點擊圓形,圓形將向右移動,圓角矩形改變填充色;再次點擊圓形,圓向左移動,圓角矩形取消填充色(后面有詳細講解)。

如圖:

這里我使用了一個中間變量來控制當前switch開關的狀態,0:代表關;1:代表開(只是把文字顏色改成了白色,所以就看不到了,實際開關值在改變ing,如下圖)。

1. 基本元件

圓形:39*39

圓角矩形:90*41 圓角的角度50 ,命名為:關白藍開(最好先用這個尺寸,理解后可以自己改,因為要根據圓角矩形的尺寸來將圓形移動到對應位置)

2. 先設置圓角矩形交互樣式

選中圓角矩形(關白開藍)右擊,如下圖,點擊交互樣式,將“選中”填充藍顏色;

3. 詳細添加交互(關-開)

將圓形和圓角矩形(關白開藍)重疊放好,然后點擊圓形,添加載入時,設置文本,全局變量:NewVariable1 = “0”,NewVariable2 = “1”;默認載入NewVariable1=“0”。

然后添加交互:單擊時,添加情景:如下圖:

在此情景下,添加動作:移動;如下圖,這里用到了函數[[This.right]]和[[This.bottom]],函數[[This.right]]表示:當前的元件的右邊;[[This.bottom]]表示當前元件的底部。

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

3.在給圓形添加動作:設置選中(目標是圓角矩形(關白開藍),設置值為真,然后添加將圓角矩形的交互樣式)

這時候還有添加動作就要將全局變量從“0”改為“1”,為了實現下面步驟的開-關,如下圖:

以上部分就可以完成switch從關-開的動作了,可以按F5預覽。

4.(開-關)

實現開-關的動作和上面的關-開是一樣的,關鍵就是這個全局變量的,上面將圓形的值變為了NewVariable2,然后添加情景2,用來實現從開-關。

[[v3.right-89]]和[[v4.bottom]]就是為了讓圓形移動到圓角矩形(關白開藍)的左側,圓角矩形(關白開藍)變為關,設置為不選中,這里就不做詳解了。有問題還請積極留言哦,等你們到來。

思考:switch開關的交互并不一定要點擊圓形,像手機中的WiFi開關點擊相應模塊就會進行交互 開和關,那這樣怎么實現那,其實道理都查不多,思考一下。

 

本文由 @汪仔8663 原創發布于人人都是產品經理,未經許可,禁止轉載

題圖來自?Unsplash,基于 CC0 協議

給作者打賞,鼓勵TA抓緊創作!
更多精彩內容,請關注人人都是產品經理微信公眾號或下載App
評論
評論請登錄
  1. 點擊圓形,添加載入時,設置文本,這一步不懂在哪里

    回復
    1. 新建交互- -事件中就有“載入時”–元件動作中有“設置文本”,不懂可以關注公眾號:Carrot-xinxiaobao,可以發對應的安裝包和秘鑰

      回復
  2. 產品小包們,不懂得可以關注公眾號:Carrot-xinxiaobao;將會一一解答

    回復
  3. 用一個動態面板是不是更簡單呢

    回復
    1. 動態面板可以,第一次做的時候也用過動態面板,但那樣不是就用不到函數了嗎

      回復