移動互聯網產品的設計模式-開關

?開關是什麼?

開關，英文Switch，常被翻譯為開關、滑動開關、切換開關，作為界面中可直接操作的元件，提供兩個互斥選項（如開/關、是/否、啟動/禁用）供用戶選擇。開關不同於其他複雜控制項，其操作執行直觀，用戶選擇一個選項後，系統立即執行操作。

按圖索驥，你會發現產品界面上的開關控制項，其實是對現實生活中實體產品的抽象。早期擬物化風格盛行時，產品為降低用戶學習成本，直接模仿現實生活中的開關；後續隨著擬物化風格退散，扁平化風格盛行，產品中開關控制項逐漸捨棄掉質感、陰影等非重要視覺信息，只延續保留形式和狀態兩個關鍵因素。

在設計開關按鈕控制項時，最重要的一點就是按鈕狀態的表達一定要清晰直觀，因為開關按鈕有兩個特點：含有開關的對象名稱，開關按鈕兩種互斥狀態。然而在當下的iOS控制項中，已將這兩種互斥狀態簡化成不同顏色和不同位置，簡化的過程其實是建立在人們對iOS7之前擬物化按鈕樣式熟知的基礎之上，同時也是擬物化向扁平化發展的演變過程。

?開關有哪些樣式?

開關的具體樣式因為受到Android與iOS兩種設計規範的影響，所以大致分為兩種具體樣式。

1） iOS系統樣式

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

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

2） iOS產品樣式

iOS系統更新迭代至今，對產品中的系統開關做了明確規範，即開關形式不可變更，顏色可稍作更改。

3） Android樣式

下圖左側是華為手機恢復默認設置界面的截圖，右側是QQ音樂的流暢度設置截屏。對比分析後，我們可以發現，同樣受扁平化設計的影響，Android系統中開關在表意無缺陷情況下，樣式也更趨於簡單。但不同於iOS系統，Android系統對產品中的系統開關未做過多限制，產品可根據自身的風格、色調調整開關按鈕樣式。其中受扁平化影響，按鈕樣式主要以顏色和明度來區分兩種狀態，理念上和iOS的按鈕設計是相同的，但開關按鈕的顏色和樣式可以自定義來匹配產品的調性。

下圖左側ePub閱讀器的更多設置中有個【禁止強制左右對齊】，通常來說開關的打開有啟用的含義，用戶就能夠清楚地了解選擇開關後會發生什麼，但在這裡用戶會糾結這個功能是打開還是關閉了，可能需要通過修改選中的狀態來判定前後的不同。所以設計中應該避免使用「不要再發送郵件給我」這樣的否定語，可以使用正向措辭表述來避免這種情況。

右側是一組日/夜的切換按鈕，設計者通過按鈕的樣式及顏色表現不同狀態和結果展示了開關按鈕的潛力。在設計過程里，我們可以在開關按鈕上增加能讓用戶感興趣的視覺效果，一方面給用戶帶來有趣的體驗，另一方面也體現了開關按鈕狀態背後的含義。

?開關有什麼用?

開關最重要的作用就是立即打開或關閉某個功能，並向用戶清晰的展示開關狀態。

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

?總結?

雖然，開關只是一個小小的控制項，但從它的演變歷程我們可以感受到設計的發展趨勢，即從擬物化到扁平化的進階。其實設計走向扁平化，很大程度上是信息爆炸背景下應運而生的設計策略，它通過去除冗餘、厚重和繁雜的裝飾效果，讓「信息」本身重新作為核心被凸顯出來，幫助用戶更高效地獲取信息。比如文案設計中，現在更多地使用正向措辭表述，來減少用戶認知判斷的時間。

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

交互設計師

宋辭

喜歡這篇文章嗎？立刻分享出去讓更多人知道吧！