状态开关控制：臭名昭著的“静音”按钮

在最近一次WebEx与一位客户的会面中，我一想到自己无法打开麦克风就惊慌失措。我本来要做一个6小时的演讲——如果我连静音都不能，我该怎么做呢？我一直点击交叉话筒图标，但无论我做什么，话筒都保持交叉。

以下是一个屏幕截图：

在慌乱中，我完全没有注意到图标颜色的变化!最后，我发现，尽管两个州的麦克风都是交叉的，但图标的红色意味着按钮是激活的，而我是静音的。

我见过很多次用户成为这个问题的牺牲品哑巴按钮用于在两种系统状态之间切换(柔和的和无声的)，但问题是用户不能很容易地知道当前状态是什么，以及他们要切换到什么。(另外,相反图标设计的最佳实践，在WebEx实现中，没有用于哑巴按钮。）

两条信息，两个控件

在一种情况下，用户可以在两种可能的状态之间移动(让我们称之为在…上和关为简单起见），有两位信息与用户相关，虽然相关，但并不完全相同：

1. 系统的当前状态(在…上或关；在麦克风示例中，柔和的或无声的)
2. 如果用户按下按钮会发生什么情况-这是下一个状态，可能是关或在…上，取决于当前状态(在麦克风示例中，静音状态或哑巴)

实现它们的一个明显方法是使用两个不同的UI元素：状态指示器和更改状态按钮控制屏幕采用这种方式：您既有一个状态指示器显示您的汽车已锁定，也有一个解锁按钮轻敲状态指示灯不起任何作用，但轻敲控制按钮可解锁汽车。

两条信息，一个控件

然而，如果你有一个2状态系统，当前状态和下一步将发生的事情是互补的。换句话说，你可以假设这两条信息（状态和下一步发生的事情）可以通过一个单独的控件（开关状态按钮）来传递。这是因为，如果用户知道一个（至少在理论上）他们可以推断出另一个（如果你知道你的下一个州将是关然后你可以推断当前的是在…上；或者，如果你知道你现在的状态在…上，你可以推断你的下一个是关）.

但是，请记住任何类型的推理都需要时间和认知努力，人们往往在时间压力下做出快速反应。如果我试图解除静音，每个人要么在等我，要么无视我，继续谈话，所以我没有时间停下来思考界面或做出推论。

然而，有时可以很容易地根据其他信号确定状态。例如，在视频播放器中，只有一个控件玩按钮），指示未来状态。虽然有足够的信号来判断视频是否正在播放-用户可以听到视频或看到屏幕上图像的变化。

如果您决定使用一个控件来指示状态和下一步将发生什么，那么应该如何标记该控件？

在这种情况下，可以考虑两种备选方案：

1. 按钮标签传达系统将移动到的状态，也就是说，它会告诉用户接下来会发生什么。

   这是按钮设计的标准建议。具体来说，将调用一个站点注册按钮登记电子商务结账表单的提交按钮将被调用购买或放置订单.

   如果使用按钮在两种状态之间切换，要遵循这个建议，它还应该更改标签，就像上面的特斯拉例子或下面的OBS例子。

   

   如果没有文本标签(大概是因为图标足够清晰)，那么图标应该根据它将系统移动到的状态而改变。一个经典的例子是玩和暂停在上面的YouTube例子中看到的图标，并出现在大多数视频播放器中。

   2.该按钮使用阴影来传达活动状态在现实生活中，开/关类型的按钮通常会出现这种情况：当你按下按钮时，它们不会改变标签，而是“下沉”。在UI设计中，为了捕捉这种隐喻，设计师通常会添加一个阴影，表示按钮已按下，现在处于活动状态。

   

   理解这种设计显然依赖于阴影被识别为激活状态的符号。此设计不应依赖用户在两种状态下记住按钮的颜色知道哪种颜色代表活动-为了让它工作，应该绝对清楚的是，活动状态是一个按下的按钮，这一壮举有时很难在短时间内实现平面设计世界。

让我们回到WebEx示例。回顾过去，我们可以看到WebEx使用单个控件来指示当前状态和下一步将发生的情况，并实现了第二个设计解决方案-向活动状态发送信号。不幸的是，红色作为活动状态的标志是一个糟糕的设计选择，原因如下：

1. 在界面中可以任意使用红色-例如X(离开)按钮也是红色的，这并不意味着它处于活动状态。（如果红色代表活动状态，红色代表什么X的意思吗?我已经离开会议了?)
2. 另一种颜色（蓝色）用于指示其他按钮的活动状态，例如视频和闲谈，聊天(例如，蓝色的视频图标表示视频打开了)。

如果没有活动状态的明确指示器，用户就只能依靠按钮标签来决定发生了什么，而在图标标签不变的情况下，这只会导致混乱。

顺便说一句，iPhone上的手机应用程序使用了相同的实现——唯一的区别是它比WebEx更加一致，并部署了白色填充以指示活动状态。即使进行了这些调整，也很难推断按钮的活动状态。

建议

那么，对兼作状态指示器的状态切换按钮的总体建议是什么？最安全的解决方案是使用2个UI元素，一个用于当前状态，另一个用于切换状态操作，如特斯拉示例中所示。

如果你愿意，你可以像Zoom一样将两者合并到一个控件中。它的哑巴控件有两个单独的组件：

1. 一个文本标签，表示如果用户点击该控件将会发生什么
2. 指示当前系统状态的图标

点击其中任何一个都会改变状态。

新版本的WebEx也采用了相同的设计。

请记住，使用开关控制的目标是确保用户快速理解以下两个方面：

• 当前状态，和
• 如果他们按下控制按钮会发生什么

评估系统将经历的两种状态。

1. 这两种相反的状态是什么，这很明显吗？
   • 如果否，则表示支持2控件设计：一个用于当前状态，另一个用于移动到另一个状态的操作。
   • 如果是(可能是因为有严格的约定和标准化的设计)，您可以考虑使用一个设计元素来简单地说明命令将做什么。
2. 是否有外部线索(例如，噪音，环境中的视觉变化)可以帮助用户确定当前状态?
   • 如果没有，则使用2控设计，带有一个状态指示灯(以清楚地传达当前状态)和一个切换状态的按钮。
   • 如果是，那么您可以考虑单个设计元素——状态开关按钮。
3. 用户是否需要快速确定状态并进行更改（如哑巴按钮）？
   • 如果是，则只需有一个图标来指示状态，并有一个按钮来更改状态。
   • 如果没有，可以考虑状态开关按钮。