为什么尺寸重要
指尖接触面远大于光标,按下时手指还会遮住目标。福格尔与鲍迪施(2007)称之为“胖手指”问题。霍尔茨与鲍迪施(2010)发现意图点与检测点之间存在系统偏差,因此仅靠菲茨定律不足以解释移动端错误。
多大才够
帕尔希等(2006)报告目标小于约9.2毫米时错误上升,亨策等(2011)对一亿次点击的分析也证实小目标和屏幕边缘误差更大。iOS建议约44pt,安卓建议48dp,WCAG 2.2规定最小24×24 CSS像素,增强级为44×44。
间距与布局
间距与尺寸同样重要。应把视觉尺寸与点击区域分开,拇指热区外或角落的按钮要更大,危险按钮要隔开。这对手抖或视力下降的人尤为重要,也是网页无障碍的核心。
常见问题
- 触控目标最小多少像素?
- WCAG 2.2最低为24×24 CSS像素,推荐44×44以上。
- 图标必须很小怎么办?
- 保持图标小巧,用透明内边距扩大可点击区域。
来源核查日期:2026-10-27
参考文献
- Parhi, P., Karlson, A. K., & Bederson, B. B. (2006). Target size study for one-handed thumb use on small touchscreen devices. In Proceedings of the 8th Conference on Human-Computer Interaction with Mobile Devices and Services (pp. 203–210). ACM. 常被引用为约9.2毫米时错误趋于稳定,是最小尺寸的依据。
- Park, Y. S., & Han, S. H. (2010). Touch key design for one-handed thumb interaction with a mobile phone: Effects of touch key size and touch key location. International Journal of Industrial Ergonomics, 40(1), 68–76. 展示尺寸与位置的交互作用,帮助判断边缘按钮是否需要加大。
- Vogel, D., & Baudisch, P. (2007). Shift: A technique for operating pen-based interfaces using touch. In Proceedings of the SIGCHI Conference on Human Factors in Computing Systems (pp. 657–666). ACM. 讨论手指遮挡目标的“胖手指”问题及解决方法。
- Holz, C., & Baudisch, P. (2010). The generalized perceived input point model and how to double touch accuracy by extracting fingerprints. In Proceedings of the SIGCHI Conference on Human Factors in Computing Systems (pp. 581–590). ACM. 揭示用户意图点与实际检测点的偏差,有助理解触控偏移。
- Henze, N., Rukzio, E., & Boll, S. (2011). 100,000,000 taps: Analysis and improvement of touch performance in the large. In Proceedings of the 13th International Conference on Human Computer Interaction with Mobile Devices and Services (pp. 133–142). ACM. 通过游戏应用收集一亿次点击的大规模研究,可见真实误差模式。
- Bi, X., Li, Y., & Zhai, S. (2013). FFitts law: Modeling finger touch with Fitts' law. In Proceedings of the SIGCHI Conference on Human Factors in Computing Systems (pp. 1363–1372). ACM. 量化目标变小时手指误差所占的比重。
- World Wide Web Consortium. (2023). Web Content Accessibility Guidelines (WCAG) 2.2 (W3C Recommendation). 包含2.5.8(最小24×24 CSS像素)与2.5.5(44×44)标准,便于核对无障碍要求。
