Windows桌面应用程序设计指南(控件篇2-复选框)

用户利用选择框,可以进行“选择/不选择”这两种意义截然相反的操作。复选框的标签为选中状态下的意义,未选中状态下的意义必须与此明确对立相反。因此,复选框只能用来表示打开/关闭或选择/不选择标签选项。

一组典型的复选框

何时使用该控件?

思考以下问题:

  • 控件要用来表示打开/关闭或选择/不选择一个标签选项吗?如果不是,使用别的控件。
  • 选择和不选状态表示的是截然相反的含义吗?如果不是,使用 radio buttons 单选按钮
    drop-down list 下拉列表
    来独立控制各标签状态。
  • 复选框组是否由一组相互独立的选项构成,并允许用户选择零个或多个选项?如果不是,考虑使用单选按钮或树状图等控制单个选项的控件。
  • 复选框组是否由一组相互依存的选项构成,并需要用户选择一个或多个选项?这种情况下,使用复选框组,并在用户选择项为空的情况下报错。
  • 选项少于等于10个吗?为了使屏幕效果与选项集合成比例,控制复选框在10个以内。如果多于10个,使用多选列表框
  • 单选按钮会不会更适用于当前情况?当复选框只能用来表示打开或关闭某一个选项的情况下,单选按钮可以用来表达其他不同的选项。如果两种方法都可用:
    1.当复选框勾选与不勾选的意义并不明显截然相反时,使用单选按钮。
    不勾选landscape的含义不十分明确,所以选择复选框不合适
正确示例,在该例中,选项标签并不是相反的意思,所以按钮选项更合适。

2.在 wizard pages 引导页面上,在复选框也适用的情况下,使用单选按钮能使选项标签意义更明确。
3.当屏幕有足够空间、而内容也需要重点突出展示时候,使用单选按钮。除此以外,还是使用复选框或下拉菜单。

错误示例,内容不太重要,不需要用选项按钮来展示
正确示例,这里使用复选框展示内容更高效
  • 保持形态一致,如果页面上有其他复选框,也可继续沿用复选框形态。
  • 选项展示的是项目选项,而不是数据内容吗? 选项的取值不应该来自于标签文本或其他数据源。如果要对选项取数值,用下拉菜单或者多选菜单multiple-selection list.

应用范例

复选框有以下几种应用类型:

  • 单独选项 单个复选框用来作独立选项的选择动作
    示例
  • 独立选项(不选或多选) 一组复选框用来作任意数量子集选择。和单选按钮这样的单选控件不同,在一组复选框里用户可以选择任意数量的选项。
用来表示一组独立选项的复选框
  • 依存选项(一个或多个)一组复选框用来作大于等于一个的子集选择
    用户需要选择一个或多个与选项组有依存关系的选择项。因为Microsoft Windows没有直接支持这种输入类型的控件,所以最好的解决方案就是使用复选框组控件,并在选项为空时报错。
示例,至少需要选择一项
  • 除了选择和清除选择,复选框也有一个混合态:选项设置对一些对象来说有效用,但不是全部对象。
示例,一个混合态的复选框,表明部分文件只读

设计指南

通用原则

  • 把相关联的复选框项打组。把相关联的复选框合并为项数在10以内的组,不相关的放到一边。有必要的话可使用复合选框组。
示例
  • 思考需不需要用组框来组织复选框组。毕竟这样会需要很大空间。
  • 按照逻辑来排列组织复选框选项,例如把意义相关的选项放在一起,把常见选项放在前面,接下来放置次常见选项。不要按照字母表顺序放置选项,这种做法对不同语言的版本没有通用性。
  • 纵向排列复选框。横向排列的复选框难以阅读。
正确示例
错误示例
  • 不要用混合态来代表除了选中和非选中之外的第三种状态。混合态表示该选项选中且仅对部分子集有效。它只是子集状态的表现,用户无法直接设置一个混合态。混合态不能当做一个选项的第三种状态来进行独立设置,如果要表示第三态,使用选项按钮表示或下拉菜单选择来实现。
错误示例。这个选项的本意是要表示Theme service未安装
正确示例。用户可以选择三种状态中的任意一种
  • 点击混合态复选框会依次循环全选、清除全选和初始混合态。因为混合态复选框对用户可能难以理解或比较陌生,所以必须使得用户能够以这样的方式回到初始混合态。不然就只能清除任务重新来过了。
  • 不要用复选框来作为进程指示。 progress indicator 进度指示器
    来完成该任务。
错误示例,复选框不能用来指示进程
正确示例,使用标准的进度条来显示程序进度
  • 用正确的选择状态来显示不能操作的选项。尽管用户无法操作,但禁用的选择框也传达了信息 ,所以它们表达的含义应与状态一致。
错误示例
  • 不要用复选框来:
    1.陈述命令。
    2.展示其他窗口,例如打开用来获取更多输入信息的对话框。
    3.动态展示和选中控件相关联的其他控件(屏幕阅读器监控不到此类事件)。

不再显示

  • 在没有更好的解决方法的情况下,给出“不要再展示该‘对象’”的复选框,来允许用户阻止再次弹出的对话框。尝试预先判断用户是否需要该对话提示,如无必要,就不做展示。
    查看更多指导示例,请参见对话框Dialog Boxes.

从属控件

  • 将从属控件放在复选框右边或下方(缩进后对齐复选框标签文字)。标签文字以冒号结束。
示例
  • 可编辑的文本框和下拉列表如果也共享复选框的标签,选中即激活控件。当用户输入或者粘贴内容到输入区,也自动选中相应的选项。这样可以简化交互。
示例,输入标题或footer也自动勾选上该选项
  • 如果复选框下设置有选择按钮或其他选择框,在上级复选框选择完毕之前要禁用次级选框的操作。这样能防止次级控件可能造成的歧义。
  • 将次级控件集成为复选框,按标签顺序临近排列在主选择框附近。
  • 如果选择主选项意味着也选择了其下的次级选项,要明确地在次级选项的选择框中显示出来。
错误示例,主选项选择了,次级选框却未选择
正确示例
  • 在一定情况下,考虑用不互斥的的复选框代替设置起来更为复杂的独立互斥的选项组。尽管选项之间都是独立的,但有时候过于严格限定的控件、例如单选按钮设置起来逻辑过于冗余。
准确但是较为复杂的选项设置
更好的选项设置方式

注意:这条规则仅适用于比较少见的极端情况,也就是更多的选项只是让情况更复杂而不是更清晰。就如上例,用户不太可能会既勾选主选项又勾选副选项。当可以这样勾选时,选项就明显是独立而有意义的。

默认值

如果复选框需要用户进行选择,默认设置到最为安全和隐私的状态。如果安全和隐私不是需要考虑的最重要的因素,选择最有可能或最合适的值作为默认值。

建议尺寸和间距

如图所示

标签文字

复选框标签

  • 每个复选框都必须有标签
  • 为每个标签选项分配读取键access key ,分配规则,参见 Keyboard.
  • 使用句式大小写规则。
  • 用短语或祈使语气书写标签,不要加句号。
  • 例外情况:如果标签中还有次级控件,以冒号结束标签。
  • 标签当描述勾选复选框后的选择状态。
  • 复选框组的标签描述最好句式相近,长度相仿。
  • 复选框组的标签描述重在不同和独特的点。如果所有选项都包含相同说明文字标签,把相同部分提取出来作为组的总标签。
  • 使用正向积极行动意义的词汇。不要让用户勾选一个选框以避免这个操作。
  • ** 例外情况:“不再显示”选项框**
  • 标签只用于描述选项。标签要简洁明了,利于表达信息。如果选项需要进一步的解释,用一个装载静态文字的控件以完整句子形式展示。

备注 注意为复选框组中的一个选项作解释并不意味着也要解释其他所有选项。尽量在标签中展示相关信息,只在必要时补充解释。不要只是为了视觉上的一致性重复陈述标签内容。

附有解释说明的标签示例
  • 如果强烈建议用户选择某选项,考虑在标签正文、而不是标签说明文字后加上"(推荐)"字样。
  • 如果不可避免使用多行文本标签,第一行要对齐选择框。
  • 不要在标签的句子或短语中放置需要填写值的次级控件。因为句式和文法会随着应用语言的不同而不同,这样的设计没有普适性。


    错误示例:带有文本框的复选框标签

复选框组标签

  • 组标签的作用不是提示如何做选择,而是说明组选项的含义。默认情况为用户知道如何做选择操作。例如,不要在组标签里写“选择下列任意选项”这样的文字。
  • 标签以冒号结束。
  • 不要为标签分配存取键。这样做没必要,也会对其他的存取键设置造成困难。
  • 对于可以多选几个独立选择项的情况,在标签里最好给出说明。


    在上图中,用户可能会认为只能选择一个选项。
在标签中说明选择规则,这是更好的做法。

说明

在提到复选框时,请注意:

  • 使用确切的标签文本,包括其大小写,但不包括访问键下划线或冒号。也要包含“复选框”这个文字说明。

  • 将复选框引用为复选框(check box),而不是options、checkbox或仅仅是box,因为对于本地化文字的情况,单独的选项框(box)表意是不明确的。

  • 要描述用户交互,请使用 select选择 和 clear清除。

  • 如果可能,使用粗体文本格式化标签。 否则,只有在需要时才将标签加上引号,以防混淆。
    例如:选择下划线复选框。

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 203,362评论 5 477
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 85,330评论 2 381
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 150,247评论 0 337
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 54,560评论 1 273
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 63,580评论 5 365
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 48,569评论 1 281
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 37,929评论 3 395
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 36,587评论 0 258
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 40,840评论 1 297
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 35,596评论 2 321
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 37,678评论 1 329
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 33,366评论 4 318
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 38,945评论 3 307
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 29,929评论 0 19
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 31,165评论 1 259
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 43,271评论 2 349
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 42,403评论 2 342

推荐阅读更多精彩内容