什么造就了一个伟大的切换按钮？案例研究，第一部分在这两部分文章的第一部分，我们将分析有效的切换按钮的特征。这些特征作为

在这两部分文章的第一部分，我们将分析有效的切换按钮的特征。这些特征作为视觉线索，帮助用户识别按钮的哪个选项是主动打开的。我们对真实用户进行了全面的研究，以评估各种类别的视觉线索的有效性。作为实验的一部分，我们评估了如果用户有更多的时间来观察视觉线索，那么视觉线索的感知会发生什么变化。

在第二部分，我们讨论了我们的结果：哪些线索比其他线索效果更好，哪些是最好的，哪些是最差的，以及为什么。某些发现挑战了切换按钮设计中的一些传统观念。最后，我们根据我们的发现，提出了一份关于如何创建最佳切换按钮的最佳实践清单。

如何设计一个有效的切换按钮，清楚地显示所选的选项，是UI/UX设计师中一个长期未解决的问题。在这篇文章中，我们讨论了我们进行的一项研究，以找到以下问题的最终答案。

一个好的、清晰的、可读的切换按钮是什么样子的？
切换按钮的哪些视觉特征能使它不出错，并防止用户的困惑和挫败感？

首先，我们来谈一谈切换按钮本身，什么时候是使用它们的正确时机，以及在这样做的时候要记住哪些原则。

让我们来讨论一个常见的场景：想象一下你正在购买一张机票。当你选择日期和目的地时，你突然发现在你的机票细节旁边有这样的东西。

如果你对你的机票是否允许你回家感到困惑，不要担心，你不是唯一的一个。上面看到的这个奇妙的用户界面被称为切换按钮。

什么是切换器？

一个切换按钮。顾名思义，它是指一个用于在两个或多个状态或选项之间切换（或切换）的控件。它的名字和功能都是skeuomorphic隐喻的一部分，意味着它们是基于更古老、更熟悉的东西。在这种情况下，是一个物理先驱。为了更好地理解数字拨动按钮的基础，让我们来谈谈物理拨动按钮的品质--常见的电灯开关。

正如你所看到的，电灯开关可以处于两种状态：开或关，中间没有任何东西。同样地，数字拨动开关是一个具有两种（有时是更多）相互排斥的状态的控件，其中一个总是被设置为默认值。
你可以直接看到与电灯开关互动的结果，因为灯泡会立即亮起或变暗。同样地，一个设计良好的切换按钮应该在系统中执行一个可见的变化--你应该得到直接的反馈，而不需要按另一个（保存或提交）按钮。

什么时候使用切换按钮？

简而言之，在设计切换按钮时，为了你的用户，最好坚持这些基本原则。

只在有即时效果的时候使用，不需要任何保存或提交。
在设置有默认值的情况下使用它们。

在其他情况下，一个复选框或一组单选按钮可能是更好的选择。

拨动开关与拨动按钮

有两种方式可以使用切换型元素。对于二进制选项（主要是开/关，如上所述），你可以使用一个切换开关。这很简单。你只需激活或停用一个功能。

拨动按钮是在对立（甚至多个）选项之间切换的合适解决方案。它由两个或多个按钮组成，彼此相邻。被选中的按钮需要以某种方式 "高亮"，以表示切换的状态。

我们的目标是设计出足够明显的切换按钮，以表明选择和未选择的选项之间在视觉上的差异。同时，这些按钮应该有足够的相似性，以便被认为是同一个整体的两个（或多个）部分。挑战在于如何让人知道哪个按钮是有效的。

对于拨动开关来说，这相对简单。如果有一个直接的标签（开/关），你可以很容易地读出切换状态。然而，切换按钮并不包含 "开 "或 "关 "的文字。它们的标签代表着解释状态的质量，而不是显示状态本身。

因此，当阅读切换按钮时，用户必须依赖其他的视觉线索。这一点，如果使用不当，可能会弊大于利。但有一点是肯定的，应该强调当前的活动状态，而不是改变它的可能命令。这就把我们带到了本文的主要焦点。在UI和UX设计师中，有一个热门问题。如何制作一个好的拨动开关？

当我们问自己这个问题时，我们发现并没有建立在坚实的用户研究基础上的一般规则。这就是为什么我们进行了自己的案例研究来弥补这个问题。

案例研究。基于数据的方法来设计清晰而有效的切换按钮

有了足够的经验和一些可用性测试，你可以确保你的拨动开关设计不是一个问题。但是，如果你能根据全面的研究和冷冰冰的数据，马上就知道什么会或不会起作用呢？此外，什么设计特征可以帮助用户区分哪个切换选项是活动的？你如何结合视觉线索，如颜色、文字大小和框架，使切换的状态能够立即被识别？在我们的研究中，我们已经探索了视觉线索的领域，并着重研究了哪些设计特征是切换对中的一个按钮处于活动状态的信号。

视觉线索

视觉线索是网站上元素的某些方面，它们能吸引用户的注意力，并提供关于如何使用设计的信息。它们帮助用户发现可点击的功能，区分活跃或不活跃的状态，并介绍网站为他们提供的可能性。它们发出的信号应该是清晰的、容易阅读的。

设计切换按钮的研究路径

尽管如何设计切换按钮是设计师们普遍讨论的话题，但（据我们所知）在为切换按钮挑选最有效的视觉线索方面没有明确的指导方针。因此，我们决定仔细研究一下在一个切换对中突出活动按钮的具体方法。

切换按钮的解剖结构通常可以被描述为标签、填充物、轮廓，有时还有一个特定的图标的组合，而不是所有这些组件都必须同时出现。它们中的每一个都可以以某种方式被强调（可以作为一个视觉线索），而且有许多不同的方式将它们组合在一起。

独立的视觉线索

从基础开始，我们把注意力集中在独立的视觉线索上，这些线索涉及按钮的每个可能的组成部分：标签、填充物、框架和图标。基于我们对这些组件如何影响对一个活动/非活动按钮的感知的假设，我们提出了几个具体的研究问题。

为了测试我们的假设，我们设计了一组切换按钮，分别代表我们对视觉线索的研究问题。我们希望在每个切换按钮上只有一个视觉线索，以塑造用户对按钮的在/非在状态的感知。因此，视觉线索应该是唯一能区分这些按钮的东西。

在为研究设计拨动按钮时，我们遇到了一个挑战：选择什么标签？当然，我们希望在网络上复制现实生活中的体验，但同时，我们也不希望参与者被特定的语言含义所影响。因此，我们需要谨慎选择标签。

第一个想法是使用 "选项A/选项B"，但由于字母A和B隐含着字母顺序的含义，这就意味着有可能对参与者的选择产生潜意识的影响。同样，使用诸如 "猫/狗 "这样有意义的词可能意味着个人的偏好会发挥其作用--爱猫或爱狗的人的潜意识可能会参与进来，等等。

为了防止标签的含义影响选择，我们最终决定用没有任何明确联想的无意义的词来标记按钮。**"Racted "和"Blison"。**这样一来，只有视觉特征可以影响用户对按钮的激活和非激活状态的感知。即使用户没有确定一个切换器的状态，他们也需要随机选择答案，而不是默认另一种认知模式。

不多说了，下面是视觉线索的清单和我们与之相关的研究问题。

需要指出的是，**对于有色觉障碍的人来说，一般来说，对比度和颜色是不够的线索。**我们不要忘记，根据NHS（国家健康服务），大约有8%的男性患有呆滞症，这意味着他们不能依赖颜色线索，需要的不仅仅是一种颜色来确定按钮的进入/激活。

研究问题4：文本标签中红色与绿色的文化感知

尽管它引起了与上述研究问题相同的关注，但由于红色和绿色是对比鲜明的颜色，因此对于这一对具体的颜色，在文化上有一个决定性的共识。在西方文化中，绿色与 "开"（或活跃/开放）状态有关，而红色则与 "关"（非活跃/关闭）状态有关。我们预计这一现象会在测试中表现出来。

研究问题5：文本标签中的颜色与黑/白的对比

当把颜色和黑/白结合起来时，我们预计彩色标签会被认为是一个激活的信号，因为它带有更多的视觉重量。

研究问题6：文字标签中的原色与中性色（灰度）的对比

其原理与研究问题5相同。中性颜色的视觉权重较低。因此，我们的期望是，彩色的标签将发出活跃状态的信号。

研究问题7：文本标签中同一颜色的不同饱和度

我们的假设是，颜色的饱和度越高，它的视觉权重就越大。因此，一个更强烈的颜色预计会唤起按钮的激活。

填充物

填充或切换的背景都是关于颜色组合的。我们认为，许多与标签颜色相同的原则也适用于此。

研究问题8：背景中颠倒的颜色的对比度

按钮填充物的倒置颜色之间的关系与切换文本的倒置颜色之间的关系类似。由于倒置的颜色具有相同的视觉重量，我们期望对比的颜色会引起混淆。哪个按钮是活动的将不清楚。因此，我们期望反应是不一致的。

在这项研究中，我们将有深色填充物的按钮标记为活动的，因为深色的阴影可以被认为是活动的状态（然而，我们仍然预计反应大多是不一致的）。

研究问题9：背景中的红色与绿色的文化感知

由于红色和绿色是对比色的一个特殊情况（由于我们对这对颜色的西方文化认知，而不是颜色反转），我们假设绿色按钮将被感知为活动的。

研究问题10：背景中同一颜色的不同饱和度

正如我们在标签着色中所说的，颜色的饱和度具有视觉上的重要性。我们假设**饱和度较高的颜色会被认为是激活的信号。**在灰色等中性颜色的情况下，我们期望填充物的较高价值（来自HSV颜色模型）能起到线索的作用。

我们期望这种效果在饱和度较高的颜色（在这种情况下，橙色）中比在中性颜色（灰色）中更明显，因为饱和的颜色具有更多的视觉重量。

研究问题11：背景中的饱和色和灰度色

我们预计，由于填充了饱和色（黄色）的按钮带有更多的视觉重量，它将被视为被强调。因此，当它站在灰度色按钮的对面时，它将发出一个活跃状态的信号。

此外，我们预测，由于对比度更明显，黄色和饱和度较低的灰色的组合将更容易做出区分。

研究问题12：按钮的倒置设计

设计钮扣的一个常见方法是将背景的颜色与文字的颜色反转。这种视觉线索的问题在于，这一对按钮都带有一部分：左边是彩色的填充物，右边是彩色的文字。蓝色的填充物可能有更强的视觉权重，但我们预计，与其他一些视觉线索（如色彩饱和度）相比，用户更难一致地解释激活和非激活按钮之间的区别。

概要

这一类的研究问题集中于轮廓的存在/不存在，以及它的位置。尽管轮廓可以在几个方面有所不同，比如颜色或厚度，但这些都是与视觉线索平行的，在标签和填充这两个类别中已经涉及。因此，我们将这一类别专门用于确定轮廓的一般效果，以及一些特定于轮廓的线索。

关于颜色，我们已经在前面的章节中讨论了它的影响，我们希望在轮廓上使用时，其效果也是类似的。

研究问题13：突出显示活动按钮的轮廓

我们希望带有高亮轮廓的按钮能被认为是活动的。

这个问题可能看起来很明显，但是检查一下它或者将它的效果与其他视觉线索进行比较，永远不会有什么坏处。

研究问题14：不活动的按钮与背景相吻合

这是一个背景和基于边界的视觉线索之间的混合体。它试图改进一个饱和与灰度的背景颜色线索，正如在RQ11中看到的那样，通过使灰色的按钮更清楚地融入背景，而彩色的活动按钮则与背景分离。然而，我们担心的是，当轮廓消失，不活动的按钮与背景重合时，参与者可能更难决定活动状态，因为不活动的按钮可能根本就不被认为是一个按钮。

研究问题15：压花与压印的按钮

把东西做成浮雕状是在网站上突出某些东西的常见方式。然而，如果我们遵循让切换按钮类似于物理按钮的指导，那么，在这种情况下，应该是反过来的。被按下的按钮（又称压印）是激活的。因此，为了验证这是否属实，我们假设被推入的按钮将被视为 "打开"，而被压印的、因此没有被推入的按钮将被视为 "关闭"。如果有阴影效果的支持，这种被按下的感觉应该更加强烈。

然而，压花的按钮看起来更加 "面对面"，这可能也是其激活的信号。我们希望这种区别是不一致的。

图标

图标提供了另一种突出活动按钮的方式。它们有可能超过所有其他的视觉线索吗？为了证实图标的有效性，这个研究问题类别的设计放弃了所有其他的视觉刺激，而采用了图标。

研究问题16：检查符号

我们期望在一个按钮上出现一个复选标志能唤起一个活跃的状态。

研究问题17：单选按钮

设计切换按钮的一个可能性是把它们和单选按钮结合起来。单选按钮通常是独立存在的，并且在与切换按钮不同的情况下被使用。然而，其标志性的单选按钮圆圈是一种简单明了的传达选择的机制，它可以用来强调切换按钮的活跃面。

我们希望有填充单选按钮的按钮显示为活动的。

测试独立的视觉提示的有效性

我们在一个定量的在线研究中验证了我们的假设。我们需要用可靠的、大量的硬数据来支持我们的发现，而在线研究则是一个简单的方法。 UXtweak工具是获得这些数据的一个简单方法。我们使用了UXtweak的两个版本的 五秒测试.UXtweak允许你根据你的需要调整五秒钟测试的显示时间，所以我们进行了一个测试，向参与者展示了5秒钟的切换，另一个则是20秒的同样测试。我们这样做是为了观察，当参与者在做出决定和回答问题之前有更多的时间来思考切换器时，结果是否会有差异。

我们为每个测试的切换按钮设计了两个变体，其中左边的按钮（Racted）或右边的按钮（Blison）被设计为激活。然后我们将这些变体随机分成两组。一半的参与者用A组的刺激物完成研究，而另一半则用B组的刺激物。我们这样做是为了否定视觉线索在左边还是右边的影响。

五秒测试

在五秒测试中，参与者被逐一展示切换按钮的设计。在每次刺激之前，他们的任务是先看一个切换按钮5秒钟，然后回答一些问题。他们总是被问到同样的两个问题。这是第一个问题。

"哪个选项被打开了？"

答案通过一个单选按钮组给出，可用的选项是Racted（左）和Blison（右），以便于识别。

在我们的研究设计中，我们考虑了这个问题应该如何表述的几种措辞。虽然这看起来微不足道，但错误的措辞可能会影响参与者对任务的理解，并随之影响整个研究。例如，考虑其他建议之一。"哪个按钮被按下了？"当你看那些设计时，通常是活动的按钮在视觉上更有表现力，以某种方式突出。

二维图片的感知心理学，特别是大气透视原理指出，我们认为饱和度较低、某种程度上模糊的物体比更明显的物体离我们远。如果我们问哪个按钮被按下，按照物理世界的说法，这意味着离我们更远，我们可以得到与需要完全相反的答案。

第二个问题旨在验证关于为什么切换选项目前处于激活状态的确定程度。

"你对你的答案有多大把握？"

参与者可以在5点李克特量表上回答，从 "完全不确定 "开始，到 "绝对确定 "结束。这为我们提供了关于视觉线索清晰度的额外信息。由于对第一个问题的一些回答是需要继续的，所以在两个问题中选择预期答案的参与者数量相同的情况下，有一个比较视觉线索的辅助手段是有用的。

为了确保指示被正确理解，在第一个热身任务中（后面没有分析），我们又问了参与者一个问题。"你选择了哪个选项？那个是......"，后面有两个答案选项。"开 "和 "关"。这个问题让参与者思考他们应该做什么，它验证了他们是否会按照自己的意愿进行研究。

第二十次测试

与 "五秒钟测试 "类似，被试的任务是在有限的时间内观察设计，不过这一次，时间是20秒。我们决定也进行这个变体的研究，以检查观察设计的时间越长，表现是否越好。

这个时间段是与5秒变体唯一不同的地方。

研究期间的调查问卷

在研究开始时，每个参与者都被要求填写一份小调查，以帮助我们了解参与者的情况。我们对以下内容感兴趣。

参与者的年龄。
他们的性别。
他们达到的最高教育水平。
他们浏览网络的频率。
他们最常浏览网络的目的。
对他们作为一个网络用户的技能的自我评价。

拥有这些数据可以让我们了解我们的用户样本的构成，但也可以搜索到详细的见解，例如浏览网页的频率是否与测试中的表现相对应，或者对切换器的感知是否与年龄有关（更积极上网的年轻人可能有更多的使用经验）。

测试结束后，我们给参与者一个机会，让他们在研究后的问题中给我们留言。

参与者

总的来说，我们的目标是收集100个回答，以代表一般人群。这个数据背景将使我们在以后的结果解释中能够概括我们的发现。

对于招募，我们使用了 UXtweak的用户小组，这对于需要大量参与者的在线非主持研究来说是完美的。有了用户小组，我们可以舒服地安排参与者，并选择他们应该具备的一些特征。我们的参与者年龄从16岁到75岁，我们选择英语国家的参与者（加拿大、美国、英国和澳大利亚）来进行招募，因为我们的研究是用英语设计的。

结果

请继续关注第二部分，了解我们的发现，以及如何让你的切换按钮让每个人一目了然!

在Smashing杂志上的相关阅读

"按钮何时不是按钮？，"Vadim Makeev
"设计更好的返回按钮用户体验》，Vitaly Friedman
"构建包容性的切换按钮》，Heydon Pickering
"令人沮丧的设计模式。残缺的按钮，" Vitaly Friedman
"幽灵按钮设计。这真的还是一种东西吗（以及为什么）？Suzanne Scacca

什么造就了一个伟大的切换按钮？ 案例研究，第一部分