你如何显示可以切换的项目（UI）答案

【问题标题】：How do you display items which can toggle (UI)你如何显示可以切换的项目（UI）
【发布时间】：2010-10-18 12:40:40
【问题描述】：

假设我有一些用户可以切换的状态，例如 [ON] | [关闭] .

通常，我使用 ONE 开关 (BUTTON)，当它打开时，用户会看到：

灯光[开]

当它关闭他们看到

光线[关闭]

我的问题是：是否应该点击[ON]来打开灯[OFF]是否明显（明智）？

你是怎么做到的？任何想法或想法表示赞赏。

【问题讨论】：

【解决方案1】：

我会使用标签和按钮来显示操作。

灯亮 - 关掉？

单击该按钮会将标签和按钮更改为：

灯已关闭 - 打开？

此解决方案清楚地说明了状态和可用的操作。

【讨论】：

【解决方案2】：

如果您关心的是清晰度，我肯定会包含类似复选框的控件的概念。这是一个被广泛接受的界面组件，大多数人都理解。

在任何情况下，您都可以使整行可点击，这样当我点击文本时它也会切换（就像 HTML 标签元素一样）。

显示仅带有“ON”文本的按钮可能会让用户感到困惑，无论它是打开灯还是当前状态为“on”。

【讨论】：

【解决方案3】：

一张图片说出一千个单词...

根据应用程序的类型，显示可以单击的电灯开关图像设置字段的状态可能更直观？

然后你可以有一个灯泡打开和灯泡关闭的图像来显示状态。

不是每个人都知道复选框是什么；）

【讨论】：

【解决方案4】：

您可以使用单选框，这是相当标准的控件，不会让大多数人感到困惑。

<input type="radio">Light on<br>
<input type="radio">Light off

另一种选择是尝试实现某种开关按钮，类似于 iPhone 上使用的这个按钮：

【讨论】：