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 将关闭状态的圆形缩小，并在开启状态中加入对号符号进一步方便用户理解。

这的确是更明确了，代价是牺牲了一点“简洁”。

欢迎关注作者微信公众号：「柴林的设计笔记」