折叠的好处
小屏难以定位(Kim et al., 2015),先显示标题能看清结构并减轻负荷(Sweller, 1988),是渐进式披露的典型。用户凭线索决定是否展开(Pirolli & Card, 1999),标题要准确。
适用与避免
只需部分内容时适合(Loranger, 2014)。几乎都要读则保持展开并用标题建立视觉层级。标题过多(Miller, 1956)时先整理信息架构。
设计与无障碍
整行可点,用箭头显示状态。标题做成按钮并用aria-expanded(W3C, n.d.),符合WCAG 2.2的4.1.2。
常见问题
- 只能展开一个吗?
- 需比较时可多开,顺序内容可一次一个。
- 对SEO不利吗?
- 内容在HTML中即可被读取,但关键内容宜展开。
来源核查日期:2026-10-27
参考文献
- Loranger, H. (2014, May 18). Accordions for complex website content on desktops. Nielsen Norman Group. 手风琴何时有益何时有害。
- World Wide Web Consortium. (n.d.). Accordion pattern (sections with show/hide functionality). ARIA Authoring Practices Guide. 标题按钮与aria-expanded。
- Pirolli, P., & Card, S. (1999). Information foraging. Psychological Review, 106(4), 643–675. 线索决定是否展开。
- Sweller, J. (1988). Cognitive load during problem solving: Effects on learning. Cognitive Science, 12(2), 257–285. 无关信息加重负荷。
- Kim, J., Thomas, P., Sankaranarayana, R., Gedeon, T., & Yoon, H.-J. (2015). Eye-tracking analysis of user behavior and performance in web search on large and small screens. Journal of the Association for Information Science and Technology, 66(3), 526–544. 小屏滚动负担更大。
- Miller, G. A. (1956). The magical number seven, plus or minus two: Some limits on our capacity for processing information. Psychological Review, 63(2), 81–97. 一次可浏览项目的上限。
- World Wide Web Consortium. (2023). Web Content Accessibility Guidelines (WCAG) 2.2. 4.1.2与2.4.6标准。
