首页
学习
活动
专区
工具
TVP
发布
精选内容/技术社群/优惠产品,尽在小程序
立即前往

单选按钮的用户体验设计

单选按钮是表单系统的一个基本元素。它们被使用在当存在互斥的两个或多个选项列表而用户必须选择其中一个。换句话说,点选某个尚未选中的单选按钮,之前的选择就会恢复成未选中。...一、单选按钮的名字由何而来 单选按钮的命名源自于旧式汽车中收音机用来切换频道的物理按键—一个按钮被按下,其他的就会被弹出,留下唯一的按钮处于被选中的状态。...3、选项应该是全面的和分明的 单选钮的最大可用性问题来自于标签模糊,有误导性,或描述的选项令普通用户无法理解。虽然上下文帮助说明可以减少后者的问题,但让用户测试任何重要的交互控制仍然是最好的选择。...如果复选框无法完全清晰的表明意义,则使用单选按钮。在例子中,选项是对立的因此使用单选按钮是更好的方案。 设置向导。你应该在向导页面上使用单选按钮使选项明确,即使一个复选框也是可以接受的。...当你有一个简单的问题而用户只需回答是或否的时候,使用复选框还是正确无误的。 三、结论 设计单选按钮,最重要的是遵循设计标准,因为这能增强用户预测哪个选项能做什么和如何操作它。

6.1K100
您找到你想要的搜索结果了吗?
是的
没有找到

HTML表单和组件

3.表单按钮:包括提交按钮、复位按钮和一般按钮;用于将数据传送到服务器上的CGI脚本或者取消输入,还可以用表单按钮来控制其他定义处理脚本的处理工作。...当我们注册某个网站的用户,就能看到一堆的组件,让我在这些组件里输入、选择相关的信息,然后点击提交按钮后,这些信息就会提交到服务器上,这就是组件的一个主要作用,收集组件里的数据并提交到服务器上这是表单的作用...enctype属性里另一个关键字为:multipart/form-data,这就是指定带有文件提交的类型,所以一般使用到enctype属性也就只会用到multipart/form-data关键字,因为默认就是...以上就是type属性里常用的组件 name属性,数据提交到服务器时会读取这个属性里的数据。...这个属性还有一个作用,在使用单选框要实现单选也需要使用这个属性,如果没有加上这个属性的话,就无法实现单选,示例: ? 运行结果: ?

2.6K60

【译】W3C WAI-ARIA最佳实践 -- 表单

如果菜单收起,设置 aria-expanded 属性,其值应该为 false。 通过激活按钮展开的包含菜单项的元素,具有 menu 角色....在 Menu or Menu bar 中介绍菜单元素所需的附加角色,状态和属性。 单选按钮单选按钮组,是一个可选中按钮的组合,被称为单选按钮,且在该组合中,只有一个按钮处于选中状态。...示例 单选按钮组示例使用动态tabindex 单选按钮组示例使用aria-activedescendant管理焦点 键盘交互 在单选按钮组获取焦点: 如果有一个单选按钮被选中,那么焦点设置在这个按钮上...如果元素提供单选按钮组或每个单选按钮的额外信息,这些元素被 radiogroup 元素或 radio 元素使用 aria-describedby 属性索引。...另一个滑块的范围(如最小值或者最大值)依赖另一个滑块的当前值,当前值改变的时候依赖滑块的 aria-valuemin 或 aria-valuemax 也要更新。

8.2K30

Vue表单输入绑定

文章目录 1、简介 2、单行文本输入框 3、多行文本输入框 4、复选框 5、单选按钮 6、选择框 7、值绑定 7.1 复选框 7.2 单选按钮 7.3 选择框的选项 8、实例:用户注册 1、简介   ...单选按钮被选中,v-model指令绑定的数据属性的值会被设置为该单选按钮的value值。...单选,绑定的是选项的值(元素value属性的值);多选,绑定到一个数组,所有选中的选项的值被保存到数组中。 <!...如下图 7.2 单选按钮   单选按钮选中,v-model绑定的数据属性的值默认被设置为该单选按钮的value值,可以使用v-bind将云南苏的value属性再绑定到另一个数据属性上...  通过选择选择内容后,其值选项的值(元素的value属性的值),选项的value属性也可以使用v-bind指令绑定到一个数据属性上。

7.3K70

AngularDart Material Design 单选按钮

MaterialRadioComponent Selector: 具有材料风格的单选按钮。 通常与material-radio-group一起使用。...选中后,无法通过用户操作取消选中相同的单选按钮。 焦点的键盘交互有点不寻常,因此我们管理自己的流而不是使用FocusItemDirective。...value dynamic  此按钮表示的值,用于具有按钮组的选择模型。 Outputs: checkedChange Stream  按钮选择状态改变触发。...MaterialRadioGroupComponent Selector: 包含多个材质单选按钮的组,强制选择组中只有一个值。...每个辅助功能指南: SPACE选择 箭头键将焦点移至下一个/上一个选项并选择它 CTL +箭头键无需选择即可移动焦点 使用箭头导航,焦点将环绕到第一个/最后一个选项 使用TAB导航,如果未选择任何内容

3.3K20

Python 图形化界面基础篇:添加单选按钮( Radiobutton )到 Tkinter 窗口

Tkinter 的单选按钮( Radiobutton )是一种用于选择一个选项的 GUI 元素。单选按钮通常用于一组互斥的选项,用户只能选择其中的一个。...完整示例代码 以下是一个完整的示例代码,演示如何创建一个 Tkinter 窗口并在其中添加两个单选按钮,并在按钮点击获取用户选择的选项: import tkinter as tk # 创建Tkinter...我们定义一个名为 button_click 的按钮点击事件处理程序,它会在按钮被点击执行。在这个示例中,我们使用 get() 方法获取用户选择单选按钮的值,并根据值更新标签的文本。...我们创建了一个按钮 button ,设置按钮上的文本为"获取选择",并将事件处理程序 button_click 与按钮的点击事件关联。...,我们创建了一个自定义样式的单选按钮,设置字体、文本颜色、背景颜色、选中的颜色和选中的响应函数。

1.1K71

C++ Qt开发:RadioButton单选框分组组件

QRadioButton是Qt框架中的一个部件(Widget),用于提供单选按钮的界面元素。单选按钮允许用户从多个互斥的选项中选择一个,通常用于表示一组相关但互斥的选项。...以下是QRadioButton的一些常用方法,以表格形式概述: 方法 描述 QRadioButton(QWidget *parent = nullptr) 构造函数,创建一个单选按钮,可指定父部件。...toggled(bool checked) 信号,单选按钮的选中状态发生改变触发。参数checked表示是否选中。 click() 模拟点击单选按钮,触发点击事件。...这些方法提供对QRadioButton的一些基本操作,包括设置文本、选中状态、信号与槽等。通过这些方法,可以在应用程序中方便地创建和控制单选按钮。...它为这组按钮提供一些便捷的方法,方便进行管理和操作。 首先我们需要在mainwindow.h头文件中手动增加一个槽函数的声明,该槽函数用于触发后的处理工作。

42110

JavaSwing:JRadioButton-单选按钮开发详解

单选按钮的实现-可以选择或取消选择的项目,并向用户显示其状态。 与ButtonGroup对象一起使用以创建一组按钮,其中一次只能选择一个按钮。...要创建按钮面板,仍然应该创建一个JPanel或类似的container-object,并向其添加javax.swing.border.Border,以使其与周围的component分离。...void setSelected(boolean b) // 判断单选按钮是否选中 boolean isSelected() // 设置单选按钮是否可用 void setEnabled(boolean...enable) // 设置单选按钮在 默认、被选中、不可用 显示的图片 void setIcon(Icon defaultIcon) void setPressedIcon(Icon pressedIcon...): 有多个单选按钮,一般只允许一个单选按钮选中,因此需要对同一类型的单选按钮进行分组,如下: // 创建一个按钮组 ButtonGroup btnGroup = new ButtonGroup()

2K31

之解析练习RadioButton+Fragment+viewpager布局架构

二.RadioGroup和RadioButton简单介绍 RadioButton即单选按钮,它在开发中提供一种“多选一”的操作模式,是Android开发中常用的一种组件,例如在用户注册选择性别只能从...int getCheckedRadioButtonId () 返回该单选按钮组中所选择单选按钮的标识ID,如果没有勾选则返回-1 返回该单选按钮组中所选择单选按钮的标识ID public RadioGroup.LayoutParams...或其子类的实例 public void setOnCheckedChangeListener (RadioGroup.OnCheckedChangeListener listener)注册一个单选按钮组中的单选按钮勾选状态发生改变所要调用的回调函数...listener 单选按钮勾选状态发生改变所要调用的回调函数 public void setOnHierarchyChangeListener (ViewGroup.OnHierarchyChangeListener...listener)注册一个子内容添加到该视图或者从该视图中移除所要调用的回调函数 listener 层次结构发生改变所要调用的回调函数 ---- 三.使用效果 ?

1.3K40

软件测试|超好用超简单的Python GUI库——tkinter(十一)

前言我们在使用音乐播放软件,我们想选择播放模式,我们只能在随机播放,单曲循环,列表循环三种方式中选择一个,这就是我们常见的单选的情况,我们在设计我们的GUI,也有可能遇到单选的情况,tkinter...Radiobutton单选框控件单选按钮控件(Radiobutton)允许用户选择具体的选项值,不过与 Listbox 相比,单选按钮控件仅允许用户选择单一的选项值,各个选项值之间是互斥的关系,因此只有一个选项可以被用户选择...Radiobutton 可以包含文本或图像,每一个按钮都可以与一个 Python 函数相关联。按钮被按下,对应的函数会被执行。...如果设置为 False,则会改变单选按钮的样式,点击按钮会变成 "sunken"(凹陷),再次点击变为 "raised"(凸起)selectcolor设置 Radiobutton 为选中状态的时候显示的图片...variable 选项应该都指向同一个变量,通过将该变量与 value 选项值对比,可以判断用户选中了哪个按钮

1.2K10

UI设计规范:单选按钮 vs 复选框,没那么简单

使用原型工具:Mockplus 单选按钮和复选框的区别 什么时候使用单选按钮? 有两个或两个以上的互斥选项,用户必须且只能从中选择一个。...换句话说,如果你选择其中一个没有被选中的选项,那么原本被选中的选项就自动被取消。 什么时候使用复选框? 有一系列选项,用户可以从中选择选择一个或多个,甚至不选也可以。...一个提供午餐外卖服务的app, 在让用户选择送餐时间,使用了复选框组件。...有一个例外的情况,浏览器中弹出“不要再提示该信息”,类似的选项中可以使用否定词。 错误三:选项的排列不遵循逻辑顺序 ? 图中的选项没有遵循一定的逻辑顺序。...能使用单选按钮,尽量不使用下拉菜单。在所有选项都被清晰地列举出,用户更容易进行比较,做出正确的选择。 2. 使用单选按钮,一定要提供一个已经选中的默认选项。 3.

2K30

Java Swing用户界面组件:复选框+ 滑块+组合框+边界+单选按钮

用户通过点击某个复选框来选择相应的选项,再点击则取消选择复选框获得焦点,用户也可以通过按空格键来切换选择。...单选按钮 在前一个例子中,对于两个复选框来说,用户可以选择一个、两个或者两个都不选。在很多情况下,我们需要用户只选择几个选项当中的一个。当用户选择另一个的时候,前一个就会自动地取消选择。...这样一组框通常称为单选按钮组(radio button group),这是因为这些按钮的工作像收音机上的电台选择按钮按下一个按钮, 前一个按下的按钮就自动地弹起。图9-16显示典型的例子。...复选框为正方形,并且如果被选择,该正方形中会出现一个对钩的符号。单选按钮是圆形,选择以后圈内出现一个圆点。 单选按钮的事件通告机制与任何其他按钮一样。当用户点击一个单选按钮,该按钮产生一个动作事件。...组合框 如果有多个选择项,使用单选按钮就不太合适,其原因是占据的屏幕空间太大。这时可以选择组合框。 当用户点击这个组件选择列表就会下拉出来,用户可以从中选择一项(见图9-18)。

6.7K10

为什么单选按钮和复选框不能共存?

这两种组件通常都用于从列表中选择选项的场景。然而,它们是两种不同的视觉提示,单选按钮的是一个圆里面有一个点,而复选框是一个正方形里面有一个勾选标记。...用户如何知道是单选还是多选? 组件上提供的标签提示通常能告知用户可以进行多选还是单选。当用户可以选择多个选项,标签单词后缀是复数形式。当用户只能选择一个选项,标签单词后缀是单数形式。...它结合单选按钮的外部形状和复选框的复选标记提示,如下图所示。...它还有一个额外的好处就是更吸引人,更容易被识别。 把Check Circles用于列表选项选择,用户就不会被单选按钮和复选框之间的差异分散注意力。他们可以更多地关注选项标签,选择最适合自己的选项。...用户是否只能选择一个或多个选项并不重要。他们将根据选项标签的指示进行选择,而不是组件的类型。 旧的设计实践在不断发展 单选按钮和复选框已经共存很久了。

1.4K20

Qt Style Sheet实践(三):QCheckBox和QRadioButton

单选按钮只允许用户在一组选项中选择一个,且其中一个被选中的时候,按钮组中的其他单选按钮自动取消。复选框则可以让用户同时选中多个选项,这在多项选择的情况下非常有用。...基本实现       单选按钮(QRadioButton)的基本特征是互斥。一个按钮选中,系统自动取消其他按钮的选中状态。当然,前提是这些按钮都要放置同一个父组件(Parent Widget)中。...这样,一个按钮选中的时候其他选中的按钮将被自动取消。但是缺点是:如果我们想要获取当前被选中的按钮是哪一个,不太方便判断。一个简单而粗暴的方法是,循环遍历每个单选按钮的状态进行检查。...另外的一个方法是,将这一组单选按钮全部添加到QButtonGroup中去。...利用不同的伪状态设置单选按钮的::indicator子组件。找图片是一件困难的事情,因此我只准备四张图片。按钮下按时就不设置图片: ?

8.9K60

后台系统设计(上篇:选择

常见类型: ·单选按钮 ·复选框 ·图标切换 ·切换开关 ·穿梭框/列表构造器 ·下拉菜单 一、单选按钮 允许用户从一组相互排斥的选项中选择一个。通常,将一个选项定义为默认选择。 外观 常规: ?...·在用户与单选按钮交互,请提供良好视觉反馈,且按钮本身状态提供良好的能供性(默认、悬停、选中和禁用)。...·在用户与复选框交互,请提供良好视觉反馈,且按钮本身状态提供良好的能供性(默认、悬停、选中、禁用和未全选状态)。 讨论:仅有两个互斥的选项(二元)是选择单选按钮还是复选框?...三、Icon button 图标按钮 图标按钮可以说是结合单选按钮、复选框及命令控件的变形形式,性质上存在互斥(单选)和非互斥(多选)。...最佳用法 ·在较小的空间下,对多个选项进行选择或内容较为次要且不需要一直显示,下拉菜单是不错的选择。若选项较少,考虑使用单选框(进行单项选择)或复选框(进行多项选择)。

9.6K21

如何使用纯 CSS 制作四子连珠游戏

它们都没有被选中,圆孔就被认为是空的,其中一个被选中,相应的玩家就会把他的圆盘放进去。 其中任何一个被选中之后,应该把它隐藏起来,避免出现两者都被选中的状态。...当红色玩家选中 radio 按钮,计数器加 1。黄色玩家选中 radio 按钮,计数器就减 1,以此类推。因此,计数器的值始终是 0 或 1,偶数或奇数。...我的想法是将一个玩家(黄色)的单选按钮连接到左边,并将另一个玩家(红色)的单选按钮连接到共享父容器的右边。...最初,红色的按钮被覆盖在黄色的按钮上,然后容器的宽度变化会导致红色的按钮“消失”,显示黄色的按钮。可以将其比作现实中有两个窗格的滑动窗口,一个窗格是固定的(黄色按钮),另一个是可滑动的(红色按钮)。...我们的目标是检测出黑板上有 42 个 :checked 的单选按钮。这也意味着它们没有一个处于 :indeterminate 状态。这就要求为每个单选按钮一个选择

1.9K20

认识基本的mfc控件

静态文本控件:用来向使用者展示文本,用户无法改变文本的内容,也就是说无法与控件交互,静态文本对用户来说只是一个只读的控件。当然编码者可以通过修改代码方便的改变显示的文本。   ...命令按钮控件:如果用户按下命令按钮将触发一些操作。命令按钮上有一个文本标签用来告诉用户按下按钮会发生什么事,也可以将图片放置在按钮上来传达按钮信息。  ...单选按钮控件:单选按钮是个圆圈用户可以通过单击在其中添加一个黑点。用来一次在一组两个或者更多的值中只选出一个值处于打开状态。 ? 这个就是单选按钮控件。   组合框控件:也叫下拉列表框。...控件是一个带有可用值列表的编辑框。使用组合框提供一系列的选择,用户可以从中选取一个值。有时用户可以在提供的列表满足要求直接输入一个值。   每个控件都有属性的,用来对这个控件进行说明。...Tab Stop:表明当用户使用tab键在对话框中移动,这个控件是否被选中。

3.4K20

Android widget之CompoundButton

大家好,又见面,我是你们的朋友全栈君。 简介 具有两个状态的按钮,已选中或未选中。按下或点击按钮,状态会自动更改。...setOnCheckedChangeListener(CompoundButton.OnCheckedChangeListener listener) 这个按钮的检查状态发生变化时,注册一个回调...RadioButton 单选按钮:是可以选中或取消选中的双状态按钮单选按钮被取消选中,用户可以单击来选中它。 注:单选按钮通常与RadioGroup在一起使用。...多个单选按钮在RadioGroup内,检查一个单选按钮将取消选中所有其他单选按钮。 <?xml version="1.0" encoding="utf-8"?...Switch 开关:是一个双状态切换开关小部件,可以在两个选项之间进行选择。用户可以来回拖动“拇指”来选择选择的选项,或者只需轻按以切换,就像复选框一样。

2.2K20
领券