CampusDownWiki
累计引用 15,887한국어KO 2,698EnglishEN 10,874日本語JA 772中文ZH 1,543
CampusDown(韩语)↗
简体中文

手风琴

⚙️ 工程与技术 作者 CampusDown 维基编辑部 最后更新
手风琴是把多个标题纵向排列,每次点击标题就展开或收起相应内容,只显示所需部分的UI模式。
目录
  1. 1. 折叠的好处
  2. 2. 适用与避免
  3. 3. 设计与无障碍
  4. 4. 常见问题
  5. 5. 参考文献

折叠的好处

小屏难以定位(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

参考文献

  1. Loranger, H. (2014, May 18). Accordions for complex website content on desktops. Nielsen Norman Group. 手风琴何时有益何时有害。
  2. World Wide Web Consortium. (n.d.). Accordion pattern (sections with show/hide functionality). ARIA Authoring Practices Guide. 标题按钮与aria-expanded。
  3. Pirolli, P., & Card, S. (1999). Information foraging. Psychological Review, 106(4), 643–675. 线索决定是否展开。
  4. Sweller, J. (1988). Cognitive load during problem solving: Effects on learning. Cognitive Science, 12(2), 257–285. 无关信息加重负荷。
  5. 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. 小屏滚动负担更大。
  6. 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. 一次可浏览项目的上限。
  7. World Wide Web Consortium. (2023). Web Content Accessibility Guidelines (WCAG) 2.2. 4.1.2与2.4.6标准。

运用该理论的报告与资料(韩语)

目前还没有专门讨论该理论的资料,但你可以在 CampusDown 资料库(韩语)中搜索相关报告。

查找更多报告 · 查看“아코디언”搜索结果 →

推荐阅读的理论

最新文章查看全部 ›

大学学习与作业实用新文章(韩语)

本文最后更新于2026年10月27日。内容依据公认的原著和教科书整理;在报告中引用时,请务必核对下方参考文献中的原始出处。