開關(guān)雖然只是一個小控件，看起來很簡單，但其實它的設(shè)計也有著大學問。本文和你一起探討一下~

一、開關(guān)是什么

開關(guān)，英文Switch，常被翻譯為開關(guān)、滑動開關(guān)、切換開關(guān)，作為界面中可直接操作的元件，提供兩個互斥選項（如開/關(guān)、是/否、啟動/禁用）供用戶選擇。開關(guān)不同于其他復雜控件，其操作執(zhí)行直觀，用戶選擇一個選項后，系統(tǒng)立即執(zhí)行操作。

按圖索驥，你會發(fā)現(xiàn)產(chǎn)品界面上的開關(guān)控件，其實是對現(xiàn)實生活中實體產(chǎn)品的抽象。

早期擬物化風格盛行時，產(chǎn)品為降低用戶學習成本，直接模仿現(xiàn)實生活中的開關(guān)；后續(xù)隨著擬物化風格退散，扁平化風格盛行，產(chǎn)品中開關(guān)控件逐漸舍棄掉質(zhì)感、陰影等非重要視覺信息，只延續(xù)保留形式和狀態(tài)兩個關(guān)鍵因素。

在設(shè)計開關(guān)按鈕控件時，最重要的一點就是按鈕狀態(tài)的表達一定要清晰直觀，因為開關(guān)按鈕有兩個特點：含有開關(guān)的對象名稱，開關(guān)按鈕兩種互斥狀態(tài)。

然而在當下的iOS控件中，已將這兩種互斥狀態(tài)簡化成不同顏色和不同位置，簡化的過程其實是建立在人們對iOS7之前擬物化按鈕樣式熟知的基礎(chǔ)之上，同時也是擬物化向扁平化發(fā)展的演變過程。

二、開關(guān)有哪些樣式

開關(guān)的具體樣式因為受到Android與iOS兩種設(shè)計規(guī)范的影響，所以大致分為兩種具體樣式。

1）?iOS系統(tǒng)樣式

此處再次列舉了擬物化和扁平化設(shè)計的兩種開關(guān)按鈕狀態(tài)，在iOS7之前，也就是擬物化時代，所有iOS6的開關(guān)按鈕以質(zhì)感和陰影為主并帶有ON/OFF或者開/關(guān)這類提示性文字。

但在iOS7之后扁平化大行其道，人們紛紛厭倦了擬物化的設(shè)計，輕量的信息更容易被大眾所接受，舍棄掉表層的東西，留下了深層的信息。

2）?iOS產(chǎn)品樣式

iOS系統(tǒng)更新迭代至今，對產(chǎn)品中的系統(tǒng)開關(guān)做了明確規(guī)范，即開關(guān)形式不可變更，顏色可稍作更改。

3）?Android樣式

下圖左側(cè)是華為手機恢復默認設(shè)置界面的截圖，右側(cè)是QQ音樂的流暢度設(shè)置截屏。

對比分析后，我們可以發(fā)現(xiàn)，同樣受扁平化設(shè)計的影響，Android系統(tǒng)中開關(guān)在表意無缺陷情況下，樣式也更趨于簡單。但不同于iOS系統(tǒng)，Android系統(tǒng)對產(chǎn)品中的系統(tǒng)開關(guān)未做過多限制，產(chǎn)品可根據(jù)自身的風格、色調(diào)調(diào)整開關(guān)按鈕樣式。

其中受扁平化影響，按鈕樣式主要以顏色和明度來區(qū)分兩種狀態(tài)，理念上和iOS的按鈕設(shè)計是相同的，但開關(guān)按鈕的顏色和樣式可以自定義來匹配產(chǎn)品的調(diào)性。

下圖左側(cè)ePub閱讀器的更多設(shè)置中有個【禁止強制左右對齊】，通常來說開關(guān)的打開有啟用的含義，用戶就能夠清楚地了解選擇開關(guān)后會發(fā)生什么，但在這里用戶會糾結(jié)這個功能是打開還是關(guān)閉了，可能需要通過修改選中的狀態(tài)來判定前后的不同。

所以設(shè)計中應(yīng)該避免使用“不要再發(fā)送郵件給我”這樣的否定語，可以使用正向措辭表述來避免這種情況。

右側(cè)是一組日/夜的切換按鈕，設(shè)計者通過按鈕的樣式及顏色表現(xiàn)不同狀態(tài)和結(jié)果展示了開關(guān)按鈕的潛力。

在設(shè)計過程里，我們可以在開關(guān)按鈕上增加能讓用戶感興趣的視覺效果，一方面給用戶帶來有趣的體驗，另一方面也體現(xiàn)了開關(guān)按鈕狀態(tài)背后的含義。

三、開關(guān)有什么用

開關(guān)最重要的作用就是立即打開或關(guān)閉某個功能，并向用戶清晰的展示開關(guān)狀態(tài)。

在特殊情況下，進行危險操作時還需要二次確認。比如：在iCloud中關(guān)閉通訊錄同步時就需要二次確認，其中具有危險性的行為選項以紅色標注出來，防止用戶進一步誤操作。

四、總結(jié)

雖然，開關(guān)只是一個小小的控件，但從它的演變歷程我們可以感受到設(shè)計的發(fā)展趨勢，即從擬物化到扁平化的進階。

其實設(shè)計走向扁平化，很大程度上是信息爆炸背景下應(yīng)運而生的設(shè)計策略，它通過去除冗余、厚重和繁雜的裝飾效果，讓“信息”本身重新作為核心被凸顯出來，幫助用戶更高效地獲取信息。比如文案設(shè)計中，現(xiàn)在更多地使用正向措辭表述，來減少用戶認知判斷的時間。

以上就是本期對開關(guān)控件的分析，希望對大家有所幫助，明確了它的使用場景，才能更好地滿足設(shè)計意圖。

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

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