UI 簡史（一）：跨次元的 Switch 開關設計

今天，如果我們追溯數字產品的用戶界面（UI）中的一個個已經習以為常的設計細節，你會發現它們與早期實體產品的概念模型有著底層的、直接的聯系。

現代的數字產品設計從傳統的工業設計中吸收養分，在 Apple 的極簡審美影響下，圓角矩形一統天下，并迅速形成了非常系統并且非常同質化的設計語言。在這樣空前一致的設計語言中，硬件與軟件、數字產品與實體產品的設計邊界越來越模糊。

在實體產品設計中，“Switch 開關”似乎是最容易被理解的交互形式之一。他可以非常明確的進行兩個狀態之間的切換。比如我們開關燈的時候完全不需要思考那個開關到底應該往上按還是往下按，我們非常清楚只要按下去就可以實現開關燈的目的了。

2007 年，iPhone 發布時同時發布的 iOS 1 制定了后續觸屏手機的基本規則。當時受到很多人喜愛的滑動解鎖，也是建立在 iOS 對觸屏交互方式的基本定義之上。隨著 iPhone 閃亮登場的不光有滑動解鎖，還有其他十幾個基礎 UI 控件。Switch 開關就是其中之一。

那是一個擬物化設計盛行的年代。初代的 Switch 開關帶著 ON/OFF 的文本提示，更接近實體產品的設計感受。后來隨著扁平化設計風格的演進，以及大家對“簡單”的孜孜追求，Switch 開關演變成了今天大家所看到的樣子。

Switch 開關不僅在數字產品設計中得到大范圍應用，而且他也被直接應用在了一些實體電子產品的設計中。蘋果鼠標與鍵盤的電源開關設計，與 UI 設計中的 Switch 組件設計如出一轍，體現了現今大公司對自身設計語言的空前重視。

作為普通的蘋果用戶，察覺到這樣的設計一致性，或許不會驚嘆稱贊。但也許會多多少少地感受到蘋果的設計精神：他們如此在意這些細節，并且在不同的產品中傳承自己的設計基因。

這就夠了。

當然，一致性的另外一面是同質化帶來的新問題。一個排滿標準 Switch 開關的設置頁面，看上去簡直無聊透頂。尤其是在一些關鍵功能的的設計中，一個普通的 Switch 控件顯然看上去不夠性感。

Figma Dev Mode 的開關設計對開發者模式的開啟與關閉操作也依賴于一個 Switch 開關。他們把這個開關放到關鍵位置，并加大尺寸、增加 icon，讓這個開關操作控件變成了 Figma 核心功能的一個代表符號。

Kimi 的聯網搜索功能，同樣采用了 Switch 開關控件進行強化。使用 Switch，相較于使用 checkbox 這種常規做法，更能凸顯 Kimi 的功能亮點。

iPhone 15 的發布，取消了經典的靜音開關。仔細看，iPhone Silent Switch 的外形與標準的 Switch 開關也是一致的，只是改變了一下寬高比。同時，因為靜音狀態的特殊性，所以靜音開關的開啟提示色使用了紅色，而非綠色。為了進一步給用戶明確的操作反饋，在你每次撥動靜音開關之后，iPhone 都會在屏幕上顯示你當下操作的狀態反饋。

狀態提示——操作——操作反饋，非常明確。

明確，正是一個好的開關設計所需要的。

當然，設計不能只看 Apple。

為了更加“明確”，為了進一步避免歧義，Google 的 Material Design 對標準的 Switch 開關做了進一步的設計發展。MD3 將關閉狀態的圓形縮小，并在開啟狀態中加入對號符號進一步方便用戶理解。

這的確是更明確了，代價是犧牲了一點“簡潔”。

歡迎關注作者微信公眾號：「柴林的設計筆記」