请选择 进入手机版 | 继续访问电脑版
分享
查看: 1683|回复: 1

[分享] 【转帖】选择类控件设计解析(1)

[复制链接]

【转帖】选择类控件设计解析(1)

发表于 2021-3-8 11:45:47 来自 分享 只看大图 阅读模式 倒序浏览
zzv_icon1683 zzr_icon1 查看全部
本帖最后由 嗨,狗子 于 2021-3-16 18:08 编辑

无论是从个性化内容还是用户体验上来说,为界面内容选择正确的选择类控件可能比想象的要难,全文10,856字 ,预计阅读20分钟, 建议收藏。本文主要研究选择控件的设计细节,虽然是很常见的控件设计,但也有非常多需要注意的地方。能提炼总结常见事物的一般规律,这本身就是对自己已有知识理解加深的过程。
【转帖】选择类控件设计解析(1)
单选框(Radio button,也叫“单选按钮”)—— 用户从一组选项中必须选择一个选项。
复选框(Checkbox)—— 当有一个或多个独立选项时,用户可以选择任意数量的选项,包括零个、一个或多个。
切换开关(Toggle Switches)—— 两个互斥状态(打开和关闭)之间的可视切换
选择标签(Choice chips)—— 是按钮选择的一个替代方案。至少两个选项,用户可以选择一个或多个。
列表选择(List Select)——可以单击容器框中随附的项目,以从列表中选择一个或多个。
下拉菜单(drop-down menu,也叫“下拉按钮)——按钮包括一个单箭头指示符,单击后会显示包含选项列表的菜单。

【转帖】选择类控件设计解析(1)

【转帖】选择类控件设计解析(1)
单选按钮的命名(Radio)来源于旧收音机上用于频率和预设电台之间切换的的实际物理按钮。当一个按钮被按下时,所有其他的按钮都会弹出,使被按下的按钮成为唯一处于“按下”状态的按钮。
后来被用于录音机,盒式录音机和可穿戴音频播放器中,90年代初-用于“播放/暂停/快退/快进”控件。

【转帖】选择类控件设计解析(1)

UI概念是由Xerox PARC的研究首次引入的,Xerox PARC是一家研发公司,几乎涉及到我们现在每天使用的计算机技术,包括:以太网,图形用户界面(GUI),面向对象的编程,计算机鼠标,激光打印等。Xerox Star 8010工作站是第一款在图形用户界面中带有单选按钮的设备。
1.1 单选框
单选框用于对信息的选择,允许用户从一组选项中必须选择一个,通常以2-5组显示,单选框应互斥。单选框的外观一般是一个空白的圆洞,旁边则通常有文字标签。标签的用途除了描述之外,还可以作为操作区域,当用户选中标签,所应的单选框就会被选上。已选上的单选按钮一般会在圆洞内加上一小圆点。单选框仅显示合理和正确的选项。
单选按钮的状态为打开(实心圆圈)或关闭(空圆圈)。

【转帖】选择类控件设计解析(1)

单选框一旦选上,除了选择另一个选项之外,便没法取消。所以有时会有空白的选择、重置或默认选择。
每个单选按钮的标题应清楚地描述选择它的效果,通常句子结束没有标点符号。此外,考虑使用下拉菜单,会比显示所有选项占用更少空间。
1.2 复选框
复选框是一种按钮类型,可用于打开或关闭选项。当存在选项对象时,复选框允许用户从一组对象中选择一个或同时选中多个和全部项目。每个复选框都是单独的个体,因此选中一个复选框不会影响其他复选框的取消选中状态,全选除外。

【转帖】选择类控件设计解析(1)

复选框使操作在两个相反的状态,操作或无操作之间进行选择。复选框在屏幕上显示为一个小方框,选中时,它被认为是“开”,选中的复选框包含复选标记,正方形将充满复选标记。;关闭时,则被认为是“关”,它是空的矩形框。复选框一般放置在可选信息左侧(图片、视频以宫格形式表现的页面除外)。

【转帖】选择类控件设计解析(1)
复选框的数量
复选框可以用作单个元素,也可以组合成一个列表或嵌套式的层级列表以从中选择多个。如果需要将选择项分成几组,则使用多级复选框。

【转帖】选择类控件设计解析(1)

混合状态,仅在多级复选框时出现。如果使用复选框组,全局启用和禁用多个子复选框,当这些子项并非都处于同一状态时,父复选框应显示为混合状态(用短划线表示)。混合状态常在嵌套层级等对多个对象一同操作时使用,以代表该选项下的子选项没有被全选。当半选的复选框被点击时,它便会变成平常的复选框,而它的子选项亦会跟随全选或取消全选。
【转帖】选择类控件设计解析(1)

如果存在多个复选框时,考虑使用分组标签来进行描述。并将标签的基线与组中的第一个复选框对齐。通常,当复选框垂直列出时,更容易区分它们的状态。通常,复选框应左对齐,当您需要表示层次结构,例如当父复选框的状态控制子复选框的状态时,请使用缩进格式



avatar

41

主题

71

帖子

460

积分

中级会员

Rank: 3Rank: 3

积分
460
小短腿 发表于 2021-3-9 09:36:19 显示全部楼层
涨知识了【转帖】选择类控件设计解析(1)
avatar
游客~
您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

130700ppkpl8x3t7tt1b1t