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

单选按钮的用户体验设计

现代软件中的单选按钮正是仿照的这些物理按钮。 二、单选按钮的最佳实践 1、使用单选按钮仅用来设置 使用单选按钮来更改设置,不是作为操作按钮来执行命令。...同时,改变的设置不应该在用户点击命令按钮(标记为“前进”或“保存”为例)前生效。如果用户点击返回或取消按钮,任何在该单选按钮组所做的更改都应该被丢弃而且回到初始状态。...如果单选按钮被用来影响一个命令的执行,那最好还是用显示命令的变化来取代。这样做允许用户选择单个交互的正确命令。...7、使用单选按钮不是下拉列表 如果可能,就使用单选按钮不是下拉列表。单选按钮认知成本低因为它把所有选项可见从而让用户很容易比较选择。 如果你的选择项少于7个,你应该考虑使用单选按钮。...然而,复选框适合真对一个选项是开启还是关闭,单选按钮则可以被用到完全不同的选项中。 你应该记住如下两种情情况如果两个解决方案都有可能: 替代选项。如果复选框无法完全清晰的表明意义,则使用单选按钮

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

典藏版Web功能测试用例库

先列名排序,再切换,表格列变化后,点击查询,不能报错 ​ 动态匹配结果,最多显示10条 时间日期 ​ 约束条件 ​ 起<=止 ​ 起>止 ​ 输入起 ​ 输入止 ​ 时间>当前时间...,不是所有记录 ​ 导出下钻后的数据 ​ 记录条数>2000,分成多个sheet页 ​ 性能,2000条、65536条 ​ 表样不同,需要拆成多个等价类,都需要导出来看一下 ​ 查询条件不同导致结果内容...新增页面 ​ 界面显示、光标 ​ 所有填写项 ​ 保存按钮 ​ 重置 ​ 默认状态重置 ​ 更改所有项后重置 ​ 重置后光标 ​ 保存后重置,为保存后的值 ​ 返回,返回后的查询条件...重置后光标 ​ 修改后重置,为修改后的值 ​ 修改不保存,退出后再次修改,未保存的数据重置 查看页面 ​ 界面显示 ​ 页面失真 ​ 特殊字符 ​ 编辑控件要做成灰色不可编辑的效果 ​...审核意见,通过/不通过,单选 ​ 审核说明,审核不通过必填,审核通过非必填 ​ 确定按钮 ​ 审核通过,审核状态变为审核通过 ​ 审核不通过,1、审核状态变为审核不通过 2、办理状态回滚为待办理

3.5K20

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

避免使用否定的表达,例如 「同意条款」 不是 「不同意条款」 或是 「打开通知」 不是 「关闭通知」 等等。...复选框和单选按钮之间的主要差别是: 单选按钮给人更加直接的示意,例如开启关闭,复选表达一面信息,因此它的反面信息并不是非常直观,甚至对于某些用户而言,并不清楚勾选和不勾选所表达的含义。...三、Icon button 图标按钮 图标按钮可以说是结合了单选按钮、复选框及命令控件的变形形式,性质上存在互斥(单选)和非互斥(多选)。...·切换状态中使用微动画进行过渡,不是生硬的呈现。 ·在用户与切换开关交互时,请提供良好视觉反馈,且切换开关本身状态提供良好的能供性(关闭、开启、禁用)。...·禁用菜单项,不是隐藏,以提高功能的可发现性。 ·下拉菜单文本保持简洁扼要,文本内容限制为单行。 ·请根据具体情况,定义列表项的最小和最大宽度,以适应其内容。

9.6K21

html邮件签名制作,制作自己的个性化电子邮件签名

制作自己的个性化电子邮件签名 您是不是经常给朋友发E-mail?...2、选择“文件/另存为”,选择要保存的文件夹,将保存类型选为“HTML文件”,输入文件名如“1.htm”,然后单击“保存按钮。重复“另存为”操作,选择保存类型为“文本文件”。关闭“新邮件”窗口。...,在“编辑签名”项目栏中选择“文件”单选按钮,通过其后的“浏览”按钮,选择刚刚保存过的“1.htm”作为签名文件。...5、仍然在“签名”选项卡中单击“新建”按钮,增加“签名 #2”,此时选择刚刚保存过的文本文件作为签名文件,并选中“在所有待发邮件中添加签名”复选框,单击“应用”按钮,再单击“确定”。...当然,如果以HTML签名格式回复未尝不可,但如果对方接收文本格式的邮件,必然会过滤掉图片和声音,所以最好发原邮件格式回复。新邮件签名不要以印章(图片)代替署名,以防对方因过滤掉图片,不知您的姓名。

4.7K20

xwiki功能-版本控制

对文档所做的任何更改都会在版本控制下保存。你可以在文档底部,通过查看“历史记录”选项卡来查看一个文档的版本。例如,在截图下面文档的版本是3.1,最后一次是由“管理员”修改。...保存一个主版本会增加第一部分的数字并把第2部分的数字复位为"1",次版本保存增加第2部分的数字。...单击“历史记录”按钮查看该页面所有以前保存的版本: 除了展示该文档的版本列表,“历史记录”选项卡还可用于执行其它动作: 比较两个版本 对一个旧版本进行回滚;仅当前用户具有对文档的编辑权限 删除某个版本;...比较2个版本,你需要在相应的版本先点击from单选按钮来选择你想要开始比较的版本,然后在相应的版本点击to单选按钮来选择与from相比较的版本。

64720

接口测试平台代码实现150:加密算法继续实现

现在我们来立马实现一下 取消和保存功能: 取消功能很简单,我们写个刷新即可:注意修改俩个按钮的onclick: 好,继续开始,我们去写保存功能: 这个函数并不复杂,但是我依然要按部就班的去实现...注意这个单选框radio,我是怎么命名和设置属性的。以及js里是怎么提取的。 name必须是一样的,value是要获取的值当然不一样,id是由前面相同后面不同。...而我们数据库一开始的时候新增了一个字段。所以这里我们要去变更一下 数据库models.py的字段才行,改成如下: 执行同步命令: 注意,提示是否修改字段,输入y 按回车继续。...首先是表达式部分,改成如下: 然后是 这个单选框,单选框比较麻烦,我们必须要通过js来决定谁被选中。 所以encryption_show()这个函数,此时要继续扩写了。...这里我们仍然用jquery来快速实现这个功能,代码如下: 这里我采用了拼接方案,用数据库的值直接就拼成了 目标选框的id, 这也是我一开始起id的时候故意设计,是不是很讨巧。

53230

Vue表单输入绑定

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

7.3K70

PHP Web表单生成器案例分析

具体实现需求如下: 使用多维数组保存表单的相关信息 支持的表单项包括文本框、文本域、单选框、复选框和下拉列表5种类型 保存每个表单项的标记、提示文本、属性、选项值、默认值等 将功能封装成函数,根据传递的参数生成指定的表单...例如,选择性别时,单击提示文字“男”或“女”,也可选中相应的单选按钮。 使用label标记包裹单选按钮和提示文本,即可实现单击label标记里的内容时,相应的表单控件就会被选中。...// 利用多维数组保存表单元素 [ 0 = [], // 表单项---单选按钮 1 = [], // 表单项 2 = [], // 表单项---文本框 3 = [], // 表单项...radio', 'name' = 'gender'], 'option' = ['m' = '男', 'w' = '女'], 'default' = 'm' ], option利用关联数组保存具体的单选项...若不是,则直接调用属性函数完成表单项的拼接 若是,则通过遍历依次完成多个选项的拼接并返回 ?

10.9K10

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

单选按钮和复选框具有类似的功能,并在相同的上下文中使用,但它们的外观并没有统一之处。 单选按钮和复选框 单选按钮表示相互排斥的选项,复选框表示相互包含的选项。...然而,它们是两种不同的视觉提示,单选按钮的是一个圆里面有一个点,复选框是一个正方形里面有一个勾选标记。 可能有人会觉得它们功能不同,所以它们看起来应该是不同的。...他们关注的是提示上的内容,不是组件功能。因此,互斥性和包容性应该在标签提示中体现,不是组件外观。设计人员和开发人员正在把他们的思维方式强加给用户。 用户如何知道是单选还是多选?...它结合了单选按钮的外部形状和复选框的复选标记提示,如下图所示。...他们将根据选项标签的指示进行选择,不是组件的类型。 旧的设计实践在不断发展 单选按钮和复选框已经共存很久了。然而,由于对用户体验渐渐有了更好的理解,过去许多旧的设计实践也在不断发展演变。

1.4K20

Flutter | 常用组件

ImageRepeat.noRepeat, //重复方式 ... }) width ,height :设置图片的宽高,若不指定,图片图片会根据当前父容器的限制,尽可能的显示其原始大小,如果设置了其中的一个...Icon(MyIcons.book,color: Colors.purple,), Icon(MyIcons.wechat,color: Colors.green,), ], ) 复制代码 单选按钮和复选框...Material 组件库中提供了单选开关 Switch 和 复选框 Checkbox,他们本身都是继承自 StatefulWidget ,他们本身不会保存当前选择状态,选中状态都是由父组件来管理的。...总结 Switch , Checkbox 和 Radio 本身不会维护状态,而是需要父组件来管理状态,当用户点击时,通过事件将状态通知到父组件,因此是否选中就会和用户数据发生关联,而这些用户数据也不是他们的私有状态...是根据所指定 context 向根去查找, FormState 是在 InputText 的子树中,所以不行。

11.4K30

表单常用的控件有哪些_html表单控件样式修改

H5新增表单特性 placeholder   输入框提示信息   autocomplete 是否保存用户输入值(默认为on,关闭提示选择off)   autofocus    指定表单获取输入焦点...  required    此项必填,不能为空   pattern   正则验证 pattern=”\d{1,5}”   formaction  在submit里定义提交地址 (在opera...image 定义图像形式的提交按钮。 password 定义密码字段,该字段中的字符被掩码 radio 定义单选按钮 reset 定义重置按钮。...重置按钮会清除表单中的所有数据 submit 定义提交按钮。提交按钮会把表单数据发送到服务器 text 定义单行的输入字段,用户可在其中输入文本,默认宽度为20个字符。...H5新增控件 email 电子邮箱文本框,跟普通的没什么区别(当输入不是邮箱的时候,验证通不过; 移动端的键盘会有变化) tel 电话号码 tel的主要功能在移动端,一个键盘切换 url

3.9K20

7-2.表单-HTML基础

单选框示例name属性取值不一.png 若name属性取值不一样,我们也可以在单选框中选择多个选项,这就和单选框的用意相违背。...两者均设置name属性,单选框只能选中一项,复选框可以选择多项,这是因为浏览器会自动识别这是“单选框组”还是“复选框组”(这是根据type属性取值来识别如果是单选框组,就只能选择一项;如果是复选框组,...文件上传示例1.png 当我们点击 ”选择文件“ 这个按钮时,是上传不了文件的,需要结合后端技术。 十、多行文本框 单行文本框只能输入一行文本,多行文本框能输入多行文本。...在HTML中,多行文本框使用textarea标签,不是input标签。...1.语法格式 默认内容 (1)说明 多行文本框默认显示文本是在标签内部设置,不是在value

2.2K21

Android之AlertDialog的基本使用

与TextView、Button这些控件稍有不同,AlertDialog并不是初始化(findViewById)之后就直接调用各种方法了。...当然,这些设置并不是非要不可,而是根据自己需要而定。比如标题、图标这些就可要可不要。 效果图如下: ?...3、单选对话框 单选对话框的内容就是一个单项选择列表,需要用到setSingleChoiceItems方法,参数一是列表数据,参数二是默认选中的item,,参数三则是点击监听接口,我们要实现这样一个小功能...仔细阅读谷歌的API文档就知道了,setSingleChoiceItems 方法中实现的onClick方法中which表示的是当前选中的列表中的item下标,setPositiveButton和setNegativeButton...例子中的保存选中item的方法有问题的,当Activity被销毁之后重新创建的话数据就会丢失,要想持久化保存的话要用sharedpreferences或者数据库。

1.4K20

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

但是在很多情况下,可能更加愿意给用户几种选择不是让用户在文本组件中输入数据。给一组按钮或者一列选项让用户做出选择。(这样也免去了检查错误的麻烦。)...单选按钮 在前一个例子中,对于两个复选框来说,用户可以选择一个、两个或者两个都不选。在很多情况下,我们需要用户选择几个选项当中的一个。当用户选择另一个的时候,前一个就会自动地取消选择。...单选按钮是圆形,选择以后圈内出现一个圆点。 单选按钮的事件通告机制与任何其他按钮一样。当用户点击一个单选按钮时,该按钮产生一个动作事件。...注意:如果希望持久性地显示列表不是下拉列表,就应该使用JList组件。在卷II的第6章将介绍JList。...所谓单元值就是滑块值,不是像素值。 这些代码只是设置了标尺标记。要将它们实际地显示出来,还需要调用: slider.setPaintTicks(true); 大标尺和小标尺是独立的。

6.7K10

文档和元素的几何滚动

一般来说,当按钮表单元素激活(甚至当通过键盘不是鼠标)都会触发click事件。当用户改变其他表单元素所代表的值时会触发change事件。...click事件 当按钮表单元素激活的时候,将会触发click事件。(即使是通过键盘不是通过鼠标,该事件都会触发)。单选框和复选框也具有click事件。...开关按钮 复选框和单选元素为开关按钮,或称之为有两种视觉状态的按钮。即选中或未选中。通过对其单击,用户可以改变其开关状态。...单选元素为整组有相关性的元素而设计的,组内所有按钮的HTML属性name值都相同。按照这种方式创建的按钮为互斥的。利用表单属性的名字选中元素时,它返回的一个类数组对象不是单个元素。...当用户单击按钮,会触发onclick事件,由于改变状态会触发onchange事件,但是,当用户单击其他单选按钮导致这个单选按钮状态的改变,后者不触发onchange事件。

5.2K00

在 Vue 中创建自定义输入

单选按钮 那么,单选按钮呢?...它仍然在 change事件的处理程序中做同样的事情(尽管现在是 change 不是 input),但是现在根据 picked是否与该单选按钮的值相同来确定 checked 是 true 还是 false...它将使用在 prop 指定的属性,不是侦听 input 事件,它将使用在 event中指定的 event。...还可以通过添加WAI-ARIA属性 ,以及使用slots 添加内容,不是像上面在 label 里的 props。 由于本示例中没有包含 name,可以认为一组单选框之间将不会实际上彼此同步。...因此,代码将按照自定义单选按钮的代码进行结构化,但是在内部的 shouldBeChecked 和 updateInput 将根据是否是一个数组进一步细化。

6.3K20
领券