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

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

- END -

注：交互设计学堂公众号接受投稿啦，如果你有好的原创设计类文章，可联系客服。别让灵感溜走，快来投稿吧~~