編輯導(dǎo)語：開關(guān)組件是移動(dòng)端常見的組件類別之一，這一交互方式簡單易懂，用戶可以通過快速切換轉(zhuǎn)換狀態(tài)。然而開關(guān)組件看起來簡單，卻仍有許多方面值得注意。本篇文章里，作者就開關(guān)組件的交互狀態(tài)、設(shè)計(jì)注意事項(xiàng)等做了梳理，一起來看一下。

開關(guān)控件在大家腦海中是一類最簡單的交互設(shè)計(jì)組件，是移動(dòng)端比較常見、同時(shí)新手設(shè)計(jì)師比較喜歡用的一類組件。

但是它真的像我們想象當(dāng)中這么簡單嗎，是不是有哪些細(xì)小的點(diǎn)是我們忽略的，還有哪些小點(diǎn)是我們需要注意的小竅門？今天小編就帶大家抽絲剝繭了解本質(zhì)。

一、「開關(guān)組件」的咬文嚼字

1. 現(xiàn)實(shí)世界的隱喻

產(chǎn)品界面上的概念都是現(xiàn)實(shí)世界事物抽象后的表現(xiàn)形式，所以現(xiàn)在我們先來看看開關(guān)在我們真實(shí)物理世界里是怎么樣的。

「開關(guān)組件」英語原文為“switch”或者“toggle”，其詞語解釋為開啟和關(guān)閉。它還是指一個(gè)可以使電路開路、使電流中斷或使其流到其他電路并即時(shí)生效的電子元件。

2. 界面上交互特點(diǎn)

結(jié)合前文開關(guān)在物理世界當(dāng)中的隱喻，我們很容易給其在界面世界上的交互定義：

1. 允許用戶在兩個(gè)相互排斥的選項(xiàng)之間進(jìn)行快速切換的交互組件。例如，“開/關(guān)”、“顯示/隱藏”。
2. 當(dāng)用戶切換開關(guān)時(shí)，相應(yīng)的操作立即生效。

二、「開關(guān)組件」的交互狀態(tài)

對(duì)于「開關(guān)」組件的交互狀態(tài)其實(shí)市面上爭議比較大，就谷歌Material Design而言他給出五種交互狀態(tài)的定義，分別是：有啟用、禁用、懸停、聚焦和按壓狀態(tài)。

https://material.io/components/switches#behavior

蘋果公司在它的“人機(jī)界面指南”當(dāng)中無論是“IOS”還是“macOS“當(dāng)中對(duì)于開關(guān)狀態(tài)并沒有詳細(xì)的解釋，僅僅簡單的給出了“開”與“關(guān)”兩種狀態(tài)。

https://developer.apple.com/design/human-interface-guidelines/ios/controls/switches/

https://developer.apple.com/design/human-interface-guidelines/macos/buttons/switches/

微軟公司在它的“Fluent ui”當(dāng)中指出三種交互狀態(tài)的定義，分別是：打開、關(guān)閉、禁用。同時(shí)在禁用狀態(tài)中它還區(qū)分“開禁用”與“關(guān)禁用”。

https://developer.microsoft.com/en-us/fluentui#/controls/web/toggle

結(jié)合“谷歌Material Design”、“蘋果的人機(jī)界面指南”、“微軟Fluent ui規(guī)范”以及工作當(dāng)中的實(shí)踐經(jīng)驗(yàn)，開關(guān)組件相對(duì)合理且適用的狀態(tài)為“打開”“關(guān)閉”與“禁用”三類。

這里小編也是查閱大量資料后按自己的理解得出的結(jié)果，如果各位朋友有其他意見或者更加合適的資料來探討，同時(shí)對(duì)hozin老師有關(guān)開關(guān)狀態(tài)的文章也是存疑。

三、開關(guān)的加載狀態(tài)

基于開關(guān)組件的現(xiàn)實(shí)隱喻以及其相應(yīng)操作立即生效的交互特點(diǎn)，這里特別指出加載狀態(tài)的開關(guān)組件是不存在的，處理狀態(tài)也不應(yīng)該通過在開關(guān)上的動(dòng)畫來表示，因?yàn)檫@樣做會(huì)讓用戶難以閱讀和理解。

那么老話說得好，出題不解題就是耍流氓。我們碰到這種實(shí)際狀態(tài)，開關(guān)組件狀態(tài)的改變會(huì)有延遲該怎么處理呢？

谷歌這里給出的建議當(dāng)你設(shè)計(jì)開關(guān)時(shí)碰到延遲加載情況，用加載條的方式去處理這種問題。

其實(shí)小編對(duì)于material design的這種處理方法十分的認(rèn)同，因?yàn)樗鼜谋举|(zhì)上把組件的“操作”與“狀態(tài)”分開去設(shè)計(jì)處理，一件事歸一件事，使得用戶可以簡單明了地看見當(dāng)下開關(guān)組件的樣子與狀態(tài)。

四、開關(guān)組件小注意點(diǎn)

各位觀眾老爺們看到這里估計(jì)想拿起水瓶想把小編趕下臺(tái)去，心里OS：不就一個(gè)開關(guān)么，還有小技巧，故弄玄虛。先別急，聽我細(xì)細(xì)講來。

1. 避免添加標(biāo)簽來描述開關(guān)的值

因?yàn)殚_關(guān)組件的值已經(jīng)明顯得不能再明顯，就是“開”與“關(guān)”，如果再對(duì)于值去設(shè)計(jì)特別的文字描述就顯得十分多余，反而讓用戶覺得迷惑（特別指出：這里是蘋果設(shè)計(jì)規(guī)范里給出的設(shè)計(jì)建議）。

而微軟Fluent UI給出的建議又比較奇特，會(huì)在開關(guān)組件附近給出出當(dāng)下開關(guān)的值，如下圖。

那么至于小編的建議是站邊蘋果，因?yàn)殚_關(guān)組件的值實(shí)在是太簡單太容易判別，也完全符合現(xiàn)實(shí)世界當(dāng)中用戶對(duì)物理開關(guān)的心智模型。

但是這里又要特別爆錘下Antdesign的設(shè)計(jì)，它有一種開關(guān)組件的使用建議是把值或者標(biāo)簽描述放在組件的內(nèi)部，那么請(qǐng)問如果是海外產(chǎn)品，它的標(biāo)簽描述或者值是西文語言，那么開關(guān)組件長度將會(huì)變得非常不可控，甚至于是忽長忽短，這必定不是一個(gè)優(yōu)雅的設(shè)計(jì)。

2. 提供簡潔的、非中性的標(biāo)簽

因?yàn)閺拈_發(fā)角度來看開關(guān)組件的本質(zhì)就是布爾值的選擇，所以說對(duì)它的描述需要簡潔易判斷，模棱兩可的語言并不可取。

3. 僅建議在移動(dòng)端使用開關(guān)組件

在移動(dòng)端產(chǎn)品使用場景當(dāng)中是直接用手指去操作交互組件，并不會(huì)去考慮關(guān)心手指下面按住組件的某些交互狀態(tài)，但是鼠標(biāo)操作的場景就麻煩多了，比如有hover狀態(tài)，那么開關(guān)組件搞個(gè)hover狀態(tài)是不是很奇怪？

4. 對(duì)特殊人群不友好

據(jù)調(diào)查色盲發(fā)生率在我國男性約為5%～8%、女性0.5～1%。那么計(jì)算一下我們有多少用戶患有紅綠色盲，那么它對(duì)開關(guān)的認(rèn)知就如下圖所示的樣子了。

5. 不建議web使用開關(guān)組件

開關(guān)組件具有強(qiáng)烈的隱喻，造成它擴(kuò)展性非常差，只能二選一，同時(shí)web端可供使用的組件有很多比如radio button、check box、下單框等，哪一個(gè)都是開關(guān)組件香。

同時(shí)在web產(chǎn)品當(dāng)中，數(shù)據(jù)向服務(wù)器的提交方式并不一定是實(shí)時(shí)的，而開關(guān)組件的隱喻是即時(shí)生效，那就存在著不可調(diào)和的矛盾，與用戶的認(rèn)知也有不同。假如在你點(diǎn)完開關(guān)組件的一剎那產(chǎn)品崩潰，那這個(gè)時(shí)刻開關(guān)到底是什么狀態(tài)？

6. 開發(fā)存在一定成本

雖然很多前端交互框架都提供了Switch組件，但是碰到要適配各種老舊瀏覽器做各種兼容就比較頭疼。同時(shí)在HTML的代碼邏輯里并沒有Switch的標(biāo)簽，這意思就是開關(guān)組件并不是web端原生的控件，這樣會(huì)讓開發(fā)小哥在處理上花上更多的心思，比較容易禿頭。

五、與各個(gè)組件之間的差異與關(guān)系

有時(shí)候，決定使用交互組件元素：radio button、chech box或switch可能會(huì)很困難。當(dāng)你想知道哪個(gè)選項(xiàng)適合的時(shí)候，請(qǐng)考慮選項(xiàng)的數(shù)量和類型，以及是否有任何明確的默認(rèn)值。

下表總結(jié)了這些常用交互組件的差異點(diǎn)，該表出自尼爾森諾曼集團(tuán)的官方文件當(dāng)中，又是英文又是中文，是小編的翻譯軟件造成的，請(qǐng)各位看官別太介意，英文好的可自行搜索原文。

六、文末小結(jié)

開關(guān)組件這個(gè)小玩意兒能講的點(diǎn)不多，但是小而麻煩的，其實(shí)不太好用。小編查閱當(dāng)下世界級(jí)的三類設(shè)計(jì)語言，其中對(duì)于開關(guān)組件的應(yīng)用規(guī)則與特點(diǎn)描述其實(shí)都存在打架的情況，只有在移動(dòng)端認(rèn)知還算比較統(tǒng)一。

所以我們作為交互設(shè)計(jì)師在工作中使用到開關(guān)組件時(shí)一定要深思熟慮，多加小心才方為上策。

作者：月亮與六便士；公眾號(hào)：月亮體驗(yàn)設(shè)計(jì)坊

本文由 @月亮與六便士 原創(chuàng)發(fā)布于人人都是產(chǎn)品經(jīng)理，未經(jīng)作者許可，禁止轉(zhuǎn)載。

題圖來自Pexels，基于CC0協(xié)議。