E5.02.1tab bar item limit设计研究

标签数量上限受宽度与可读性约束

别名: 底部导航数量 · 五标签上限 · tab bar capacity

概念解释

底部标签栏把几个并列目的地横排在屏幕下沿,每个目的地要同时放下图标和短标签。标签数量上限(tab bar item limit)不是记忆广度问题,而是这条固定宽度里,每个目标还能否被认出来、点进去。加到第六、第七个时,不是「选项变多了所以难选」,而是字被截断、图标挤成一团、命中盒窄到相邻两项抢触摸。

机制

底栏的可用宽度等于屏幕宽度减去安全区和分隔。每一项要分配:图标的最小可辨尺寸、文字的最小可读宽度、项与项之间的间隔、以及手指的命中盒。这些需求叠加后,五项在常见手机宽度上已经贴着下限;再增加只能牺牲其中一项——字改成省略、只留图标、或让整条栏横向滑动。省略让两项读起来一样,只留图标把辨认推给图形,横向滑动把「一眼看到全部目的地」这条栏的核心承诺拿走了。

数量增加还会改变扫描方式。三项时人几乎并行看见全部;五项时变成从左到右扫一遍;超过可见宽度后,未显示的项等于暂时不存在。使用率会向仍露在第一屏的那几项倾斜,后加入的目的地不是因为不重要才没人用,而是因为它们不再同时在场。

怎么研究

宽度压缩:同一组目的地,从三变到七,分别在小屏和大屏上测量标签朗读正确率、相邻项误触率、以及「指出某目的地」的时间。自变量是项数、是否显示文字、是否允许横滑。因变量是可辨认项数(不是总项数)、首次命中是否点到目标、以及用户是否报告「还有没看见的入口」。

比满意度更有用的是露出率:有多少目的地无需滚动或打开溢出就能看见。露出率下降时,那些目的地的使用率通常跟着掉,哪怕信息架构上它们仍是「一级」。

边界

平板和桌面底栏或侧栏可以容纳更多项,因为宽度和命中盒都更宽,不能把手机上的五项上限搬过去。只显示图标、文字靠系统名称提供时,项数可以略增,但只对已经学会图标的老用户成立。不同语言的标签长度差很大,英文五项能放下的,德文或中文全称可能四项就截断。一项是「更多」而其余仍露在栏上时,可见项数仍受宽度约束,「更多」只是把溢出接走,并不提高同时可读的数量。

怎么落地

  • 按最窄目标设备的宽度,用真实标签文案排一遍:每项都要同时看得见图标、读得完文字、点得中。排不下就减项,而不是缩小字号。
  • 第五项优先做成「更多」承接其余目的地,而不是把六项都挤进底栏。
  • 不要用横滑底栏充当主导航;需要横滑说明这一层已经不是「同时可见的并列目的地」。
  • 验证:在最小宽度截屏,遮住你自己的记忆,数出不靠滚动就能读完的项。读不完的每一项都不应再声称自己是底栏一级入口。再找人戴手套或用拇指去点相邻两项,误触即命中盒已被数量吃掉。

延伸

  • 同组E5.02.2 标签必须是并列的目的地而非动作 · E5.02.3 切换标签需保留各标签内的位置状态
  • 相邻E5.11 页签 · E5.15 导航项数量
  • 站内检索tab bar item limit · bottom navigation capacity · legibility

同组卡片

快捷操作

分享

分享当前页面

ios_share

https://hci.top/zh/handbook/E5.02.1