it-swarm.cn

为什么单选按钮不能填充整个外圈?

我的问题很简单:

为什么大多数单选按钮不能填充整个外圈?

标准单选按钮的示例:

Example of standard radio button

(不寻常)单选按钮完全填充的示例:

enter image description here

这是出于某种拟态推理还是完全不同?

奖金问题:使用完全填充的单选按钮在界面或设计系统中是否可以接受?

47
RobbyReindeer

尚不清楚黑圈表示“是”或未选中,而白圈表示“否”或未选中。根据用户认为前景和背景的不同,它可能会以任何一种方式出现。考虑以下(人为的)示例:

Simply a black and white circle on a gray background

选择哪一个?像灯一样“点亮”的那个?还是“充满墨水”的墨水?

有一个隐含的假设,即被选择应包括某物的图形添加。因此在圆内增加了一个圆。可能还想过类似复选框的想法,在其中您将一个复选框添加到正方形以显示选择。

即使我们违反标准并反转颜色,这也“有效”:

White filled circle for selected

这意味着当用户不知道颜色时它也可以工作,这在今天尤其重要,当我们不局限于灰度时,这一点尤为重要。因此,除了只是非标准之外,我总是避免使用完全填充的单选按钮。

就我个人而言,我认为“单选按钮”一词在隐喻上是指行为(这是一项选择),而不是指外观。 其他历史因素可能决定了外观 。在1970年代和1980年代发明GUI的时候,最常见的单选按钮是车载收音机中的预设。虽然我确定您可以找到一个例外(我有),但这些例外通常是(1)矩形而不是圆形,而(2)确实是not表示已选择状态-按下后,它们会弹出并没有显示机械标志或指示灯。因此,我认为拟态与它无关。

97
Michael Zuschlag

我猜一个完整的单选按钮可以很容易地与项目符号文本混淆:

enter image description here

而一个空的圆圈在感知上给人不完整的感觉:需要填充或必须填充:

enter image description here

即使在许多情况下,这些环之一也已被填充,这增加了它们必须被填充(选中)的感觉:

enter image description here

34
Danielillo

除了其起源的物理按钮之外,我认为可访问性也是这种单选按钮样式的原因之一。

当按钮完全填满时,您将依靠按钮的颜色来表示其状态。这会使很多人感到困惑,尤其是在使用非标准颜色时。


Radio button styles

在第一行图像中,其中一张图片本身未传达有关按钮状态的信息。也许使用黑色和白色,您可以假定一个状态,但是对于其他颜色,这将失败。

在第二行图像中,内圆的状态清楚地表示按钮的状态。

30
Sinstein

单选按钮的灵感来自物理单选按钮(显然足够了)。按钮从框架弹出或为“ 3d”。我认为这些是指。这些指示符进入了第一个界面。实际上,从框架弹出的按钮会在被按下时取消所有其他按下的按钮。

从今天起,即使选中该单选按钮,也应该可以识别它。因此,按照“标准”拥有它是最好的。即使我看到了像您的示例这样的单选按钮示例,并且在上下文中我确实将它们标识为某些用户的单选按钮,但这可能会引起一些混乱,也可能不会,但是可能需要进行一些用户测试。

22
Cristian Negraia

这是一篇有关单选按钮历史的不错的文章: https://www.jitbit.com/alexblog/242-the-history-of-a-radio-button/

如文章所述:

单选按钮以旧收音机上用于在无线电波和有时是预设频率之间切换的实际按钮命名。当按下一个按钮时,所有其他按钮都会弹出。

因此,这是一个拟态的原因。

我相信,根据“系统与现实之间的匹配”的原则,完全填充的单选按钮会使用户感到困惑。它指出:

遵循现实世界惯例并使信息以自然和逻辑顺序显示的界面向用户展示了同理心和认可。

用户习惯于在其他网站中使用这种格式的单选按钮,因此,除非您有充分的理由进行更改,否则我认为您应该使用该标准。

16
Aline

因为如果选中的单选按钮将被完全填充,则很难分辨出实际上选择了哪个按钮,特别是如果只有2个单选按钮时。您可以轻松地认为“白色填充”按钮处于活动状态,而不是“黑色阴影”按钮处于活动状态。

7
kajacx

尽管其他答案非常有效,但我认为它们没有抓住重点:完全填充的单选按钮在黑色背景上不可见。通过在单选按钮内强加对比度,可以在所选项目上使用多种颜色来防止这种情况。

2
Kgee

这不是直接回答您的问题,而是有关整个主题的一些有趣信息。

拟态化是人机交互的一个方面-它是一种将具有已知功能的现实对象与具有类似功能的数字对象相关联的设计选择。这通常是有效的,因为人们开发了关于事物运作方式的思维模型,因此当我们以相似的功能数字化复制项目时,其目的会自动传达。

单选按钮的思维模式是可以按下单选按钮以进行单个选择。从这种理解出发,多选保留给复选框使用,因为思维模型是列表中某项旁边的勾选表示选择。

依赖skeumorphsim和心理模型存在一些问题,例如,如果您的用户在现实世界中从未遇到过单选按钮,该怎么办?在那种情况下,他们将没有思维方式来运作。这种可能性变得越来越大,因为用作各种数字构造基础的现实世界中的某些物品来自1960年代和1970年代。我认为这就是您所涉及的内容;单选按钮是今天用作列表中单个可选项目的拟态化基础的正确对象吗?也许。

即使人们不太可能接触到旧收音机,数字形式的单选按钮选择器的普遍使用也使大多数人有了其功能的心理模型。如其他答案所述,一个好的设计应该能够表明哪个选择是由两个具有不同心理模型的用户做出的。话虽如此,单选按钮不一定是这种选择的基础。请记住,违背大多数人的思维模式可能会很困难。用户测试可以帮助您确定建议的更改是否可以很好地转化为目标受众。设计方面取得了一些不错的进步,因为有人愿意尝试一种新方法,并通过测试磨练了他们的设计。

2
AxGryndr

我可以记得曾经看到带有机械按钮的收音机,那里有一个视觉指示器,显示按下了哪个按钮。我记得有一个黑色的按钮,里面是活动部件,形状像一种喙,当按下按钮时就会打开,在按钮顶部中央显示白色指示器。看起来与您的插图相同,只是颜色相反。

0
user124640