css - 你如何显示可以切换的项目（UI）

Question

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

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

灯光[开]

当它关闭时，他们看到

灯光[关闭]

我的问题是：应该单击[ON]将灯[OFF]是否明显（明智）？

你怎么做呢？任何想法或想法表示赞赏。

score 4 · Accepted Answer

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

灯亮 -关闭？

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

灯熄灭 -打开？

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

score 2 · Accepted Answer

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

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

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

score 1 · Accepted Answer

一张图说一千个字……

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

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

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

score 0 · Accepted Answer

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

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

另一种选择是尝试实现某种开关按钮，就像在 iPhone 上使用的这样一个：

4 回答 4