如何显示可以切换的项目（UI）
假设我有一些用户可以切换的状态，例如 [ON] | [关闭]。
通常，我使用一个开关（按钮），当开关处于ON状态时，用户会看到：
LIGHT IS [ON]
当它OFF<时/strong> 他们看到
灯是[关闭]
我的问题是：显然（明智的）应该单击[ON] 来将灯[关闭]？
你怎么做呢？ 任何想法或想法表示赞赏。
Say I have some state which the user can toggle, for example [ON] | [OFF] .
Typically, I use ONE switch (BUTTON) and when the thing is ON, the user sees:
LIGHT IS [ON]
When it is OFF they see
LIGHT IS [OFF]
My question is: is it obvious (sensible) that one should click [ON] to turn the light [OFF]?
How do you do it? Any thoughts or ideas appreciated.
如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱，如果其他用户或者作者回复了您的评论，将不能在第一时间通知您！
发布评论
评论（4）
我会使用标签和按钮来显示操作。
灯已打开 - 关闭？
单击该按钮会将标签和按钮更改为：
灯已关闭 - 打开？
此解决方案清楚地说明了状态和可用的操作。
I would use a label and an button to show the action.
Light is On - Switch Off?
Clicking that would change both the label and the button to:
Light is Off - Switch On?
This solution clearly states the status and the action available.
如果您关心清晰度，我肯定会包含类似复选框的控件的概念。 这是一个被广泛接受的界面组件，大多数人都能理解。
在任何情况下，您都可以使整行可单击，以便当我单击文本时它也会切换（就像 HTML 标签元素一样）。
仅显示文本“ON”的按钮可能会让用户感到困惑，无论它是打开灯还是当前状态为“on”。
I would definitely include the notion of a checkbox-like control if clarity is your concern. This is a widely accepted interface component, that most people understand.
In any case you can make the entire line clickable, so that it toggles when I click the text as well (just like an HTML Label element).
Showing a button with just the text 'ON' might confuse users whether it toggles the light on, or if the current state is 'on'.
一图胜千言...
根据应用程序的类型，显示您可以单击的电灯开关图像
设置字段的状态可能更直观？
然后，您可以使用灯泡打开和灯泡关闭的图像来显示状态。
并不是每个人都知道复选框是什么；）
An image speaks a thousand words...
Depending on the type of application, displaying a light switch image that you can click
to set the state of the field might be more intuitive?
You could then have a lightbulb-on and lightbulb-off image to show state.
Not everyone knows what a checkbox is ;)
您可以使用单选框，这是相当标准的控件，不应让大多数人感到困惑。
另一种选择是尝试实现某种开关按钮，类似于 iPhone 上使用的按钮：
iPhone 中的切换按钮 - 关闭 http://www.poolworksbvi.com/POOL_CONTROL/Pool1_files/iphone_switch.png
iPhone 上的切换按钮 - 在 http://www.poolworksbvi.com/POOL_CONTROL/Pool1_files/iphone_switch+on%20copy.png
You could use radio boxes, which are fairly standard controls and should not be confusing to most people.
Another option is to try and implement some sort of switch button, something like this one that is used on the iPhone:
Switch button in iPhone - off http://www.poolworksbvi.com/POOL_CONTROL/Pool1_files/iphone_switch.png
Switch button on iPhone - on http://www.poolworksbvi.com/POOL_CONTROL/Pool1_files/iphone_switch+on%20copy.png