E3.05.2expand few select options设计

选项少于阈值时展开陈列更优

别名: 少量选项展开 · radio instead of select · 阈值

概念解释

当下拉里的候选项少到可以一次性看完——通常大约七项以内,且标签短——就应改成展开陈列(exposed list):单选按钮、分段或一列可见项,而不是再收进一次点击。阈值不是审美,是比较窗口:少到能并行看见时,隐藏变成纯损耗。三种配送、两个币种、四个可见性级别,打开下拉的那一下买不到任何新信息,只买到一次额外决策。

这条讲的是下拉该不该收起,不是「选项一多就上搜索」——数量很大时的结构是另一组问题。

机制

展开把点击从「召回集合」里删掉,比较成本只剩阅读。短列表的阅读成本本来就低,再加一次打开,总时间被固定开销主导:定位控件、等待面板、再定位目标项。空间上,三到五条短标签所占高度往往小于下拉面板本身,所谓省空间在局部并不成立。

少项下拉还会伪装成「这里很复杂」。收起的外形暗示集合很大或需要专业选择,用户会高估决策重量,或反过来因为懒得打开而锁死默认。展开把重量还原成它本来的样子:就是几个并列的词。

边界

标签很长(含解释性从句、价格明细)时,即便只有四项,纵向展开可能撑破一屏,此时下拉或逐项卡片比硬排成一列更合适。宽度极窄的工具栏里,两项也可能放不下一组单选,分段或下拉是布局逼出来的。专家在重复操作里用键盘字母跳转长下拉,短列表的展开优势会被键盘路径追平。阈值随字号和语言变:德语复合词四项就可能超出「一眼看完」。不要把阈值写成绝对数字写进产品里,而要在实际字号下数「不滚动能看见几条」。

怎么落地

  • 在真实字号下数选项:不滚动就能读完的短标签,优先单选或分段,而不是 select。
  • 需要对照的短列表把关键差异(价格、时限)直接写在展开项上,不要再藏进面板。
  • 工具栏等窄槽位允许例外,但同一字段在表单宽布局里应改回展开。
  • 验证:把下拉强制展开截一张图,看高度是否明显大于收起控件。若差不多或更矮,收起就是在收费。

延伸

  • 同组E3.05.1 下拉隐藏所有选项,需先点击才可比较 · E3.05.3 下拉的当前值必须始终可见
  • 相邻E3.10 选项数量与控件匹配 · E3.02 单选按钮 · E3.07 分段控件
  • 站内检索exposed radio · select threshold · seven plus or minus

同组卡片

快捷操作

分享

分享当前页面

ios_share

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