按钮、状态与设计

按钮是界面设计中最常见的元素之一。比如播放器的“播放”和“暂停”按钮。也正是在使用某一款播放器的时候遇到的问题促使我记录以下文字。

这是Windows Media Player的播放控制区域。在音乐停止时，中间的播放按钮图标显示为一个三角形，这是通用的播放图标，提示用户点击按钮后会开始播放音乐。当正在播放音乐时，按钮图标则显示为暂停，提示用户点击按钮后会暂停播放。

以上设计已经沿用多年，用户也习惯了此类模式，在使用过程中完全不会多想。就如同灯的开关，按一下开灯，再按一下关灯。不过最近在使用某一款视频播放器的时候，播放按钮上图标的设置则是与上面的使用习惯相反：视频正在播放时，图标显示三角形；视频暂停时，图标显示两条竖线。因为这种设计与习惯相反，一开始让我有些不知所措，反复点击了几下按钮才搞明白。细想一下，设计师应该是想用图标表达当前播放的状态。先不说这样的思路对不对，在一个已经成熟的设计模式上做创新挑战用户习惯确实要冒极大风险，且有点不必要。

不过再深入想想，按钮这个简单的东西并不那么简单。

来看看维基百科的解释：按钮，全名：命令按钮。英文：Command Button。程序或网页最常用的一个控件。在程序中，按钮是最常用的用于触发事件的控件，也可以开始，中断，结束一个进程。按钮接受最常用的事件为单击事件（Click），按钮的状态为两种，即：原状态和按下状态。当鼠标单击按钮时，按钮处于按下状态。

按钮需要用户动作触发，然后执行命令。在网页设计中，我们常常会忘记按钮的状态，因为点击网页上的一个按钮后经常会是进入另一个界面，这个按钮已经看不到了，比如“提交”按钮。此类按钮可以叫做单态按钮，或者动作按钮。动作按钮只有一个状态。

在篇首给我带来疑惑的播放/暂停按钮是两态/切换按钮(toggle button)。除了播放/暂停，开/关也是很典型的两态按钮。此类按钮要顺利使用，需要让用户了解当前的状态，同时还要给用户预期，预示点击以后的结果。音乐/视频正在播放时，用户能够感知到，因此不需要在按钮上额外表示当前状态，只需要提供预期即可。因此在播放时，按钮上显示暂停图标预示点击按钮将暂停播放，是正确且符合使用习惯的设计。灯的开关也是如此。

正是因为用户常常可以在不需要额外设计的情况下就可以感知到当前状态，设计师也常常忘记了状态的存在。可以设想以下场景来证明状态的重要性：假如一个房间没有窗户，关上门之后无法看见灯光，灯光开关设置在室外。在关门之后，要求用户在室外开启或者关闭室内灯光。因为无法知道灯当前的状态，如果开关按钮上也不提供状态，用户将无法完成这个任务。如果将开关设计成下面这样，用户就能顺利完成任务了：

因此，在界面设计中常常会看到运用颜色、图形、文字、提示信息等多种方法来达到按钮设计的目的。比如上面说的Windows Media Player播放按钮，当鼠标放在按钮上的时候，就会显示按钮执行动作的提示。而且，就算这样用户也可能需要反复尝试几次之后才能正确使用。

对于两态按钮，目前并没有统一的设计原则，从以往的设计实践中可以总结出以下方法：
1）在当前状态很清楚的情况下，直接预示动作结果。比如播放/停止按钮。
2）显示当前状态，点击后切换至另一状态。比如手机界面常见的WIFI开关。

无论采用哪一种设计方法，都要综合考虑，遵循用户习惯、业界标准、平台原则。

延伸阅读：用户界面设计中“状态”和“动作”的表达