E3.10.2expose small option sets设计

少量选项展开陈列

别名: 少量展开 · visible radios · 不要收起短列表

概念解释

大约三到七个短标签、且需要互相比较时,选项应直接铺在页面上:单选、复选、分段或一列可见项。展开陈列(exposed listing)的对立面是无论多少都先收进下拉。数量少时,隐藏比较是在收费;数量的「少」以一屏能并行读完为准,不是以数据库里的条数为准。这一条是跨控件的匹配规则:短单选用单选铺开,短多选用复选框铺开,短视图用分段——共同的是不要先点开才看见集合。

机制

短列表的瓶颈是对照,不是检索。人要把几个词同时留在视野里估差异(价格、权限、时限)。收起把对照推迟到点击之后,还让默认值在未被看见的集合上白捡优势。展开把对照成本降到阅读,点击只用来选定,不再用来召回「这里有选项」。

空间上,短标签展开所占高度常常小于下拉面板加触发器。所谓「省地方」在局部账上不成立,却在全局习惯上被滥用:设计系统里下拉是默认字段类型,于是三项配送也被做成 select。匹配失败来自组件默认值,不是来自真的放不下。

边界

标签含长说明、插图或价格明细时,七项展开会变成七张卡片,可能需要列表而不是一行圆点;展开仍在,只是行高变了。专家用键盘在下拉里跳转,短列表的展开优势会被快捷键追平,但一次性访客没有那条路径。横向很窄的工具条可以把五项收成下拉,同一字段到了表单宽列应改回展开——匹配跟容器走,不跟字段名走。选项数量会随数据变(三个仓库变成三十个)时,控件要能升级,而不是永远展开到溢出。

怎么落地

  • 数一屏内能并行读完的短标签;落在这个窗口里的集合默认展开。
  • 单选集合用圆点铺开,多选集合用方框铺开,不要因为「表单规范是下拉」就统一收起。
  • 为可能变长的字段准备升级路径:超过窗口就加搜索或改下拉,而不是一开始就按下拉防御。
  • 验证:把当前下拉强制展开,看高度和对照是否更省事。若展开后更短或同样短、且差异一眼可见,就该默认展开。

延伸

  • 同组E3.10.1 二选一用开关或单选 · E3.10.3 大量选项需搜索与分组而非长下拉
  • 相邻E3.05 下拉选择器 · E3.02 单选按钮 · E3.07 分段控件
  • 站内检索exposed options · visible radio list · small set layout

同组卡片

快捷操作

分享

分享当前页面

ios_share

https://hci.top/zh/handbook/E3.10.2