用途
适合“日/周/月”等同一内容的不同视图(Apple, n.d.; Google, n.d.)。所有选项可见,一次切换。单个开关用开关,表单选项用单选(Kendrick, 2018)。
数量与宽度
选项多则选择慢(希克定律),分段变窄更难点(费茨定律;Fitts, 1954)。按拇指尺寸(Parhi et al., 2006),移动端一般2至4个。
选中状态与无障碍
结合填充、粗体与勾选图标,不只靠颜色(WCAG 2.2 1.4.1),对比度3:1(1.4.11)。网页用tablist或单选组。
常见问题
- 与标签页有何不同?
- 标签页切换不同内容区,分段切换同一内容的视图。
- 分段几个合适?
- 移动端2至4个,最多约5个。
来源核查日期:2026-10-27
参考文献
- Google. (n.d.). Segmented buttons. Material Design 3. 单选多选分段按钮,2至5项。
- Apple. (n.d.). Segmented controls. Human Interface Guidelines. iOS视图切换与分段数量。
- Kendrick, A. (2018, July 29). Toggle-switch guidelines. Nielsen Norman Group. 开关、复选框与单选的选择。
- Hick, W. E. (1952). On the rate of gain of information. Quarterly Journal of Experimental Psychology, 4(1), 11–26. 选项越多选择越慢。
- Fitts, P. M. (1954). The information capacity of the human motor system in controlling the amplitude of movement. Journal of Experimental Psychology, 47(6), 381–391. 目标越小越远越难点。
- Parhi, P., Karlson, A. K., & Bederson, B. B. (2006). Target size study for one-handed thumb use on small touchscreen devices. In Proceedings of MobileHCI 2006 (pp. 203–210). ACM. 分段最小宽度依据。
- World Wide Web Consortium. (2023). Web Content Accessibility Guidelines (WCAG) 2.2. 1.4.1与1.4.11标准。
