CampusDownWiki
累计引用 15,834한국어KO 2,696EnglishEN 10,825日本語JA 771中文ZH 1,542
CampusDown(韩语)↗
简体中文

视觉层级

⚙️ 工程与技术 作者 CampusDown 维基编辑部 最后更新
视觉层级是利用尺寸、色彩、对比、位置和留白呈现界面元素的重要性顺序,使视线按预期顺序移动的设计原则。
目录
  1. 1. 视线需要顺序
  2. 2. 留白与分组
  3. 3. 移动端:一屏一主角
  4. 4. 常见问题
  5. 5. 参考文献

视线需要顺序

Gordon(2021)将其定义为通过色彩、对比、尺寸和分组传达重要性。单一特征不同的元素会立即突显(Treisman & Gelade, 1980; Wolfe, 1994)。五处强调等于没有强调。

留白与分组

接近原则(Wagemans et al., 2012)让留白本身显出结构。视觉复杂度会降低第一印象(Reinecke et al., 2013)。文字多的页面要考虑F型模式。

移动端:一屏一主角

每屏只有一个实心主按钮,次要操作用描边按钮。次要文字可变淡,但仍须满足色彩对比标准。层级清晰的界面也受益于审美可用性效应。

常见问题

如何快速检查?
把屏幕看模糊,看最先注意到的是否为重点。
强调色用几种?
一个主操作色加状态色即可。

来源核查日期:2026-10-27

参考文献

  1. Gordon, K. (2021, January 17). Visual hierarchy in UX: Definition. Nielsen Norman Group. 定义通过色彩、对比、尺寸、分组建立层级。
  2. Treisman, A. M., & Gelade, G. (1980). A feature-integration theory of attention. Cognitive Psychology, 12(1), 97–136. 单一特征如颜色会被前注意地突显。
  3. Wolfe, J. M. (1994). Guided Search 2.0: A revised model of visual search. Psychonomic Bulletin & Review, 1(2), 202–238. 视觉搜索由特征引导的模型。
  4. Wagemans, J., Elder, J. H., Kubovy, M., Palmer, S. E., Peterson, M. A., Singh, M., & von der Heydt, R. (2012). A century of Gestalt psychology in visual perception: I. Perceptual grouping and figure–ground organization. Psychological Bulletin, 138(6), 1172–1217. 综述接近、相似等格式塔分组原则。
  5. Reinecke, K., Yeh, T., Miratrix, L., Mardiko, R., Zhao, Y., Liu, J., & Gajos, K. Z. (2013). Predicting users' first impressions of website aesthetics with a quantification of perceived visual complexity and colorfulness. In Proceedings of the SIGCHI Conference on Human Factors in Computing Systems (pp. 2049–2058). ACM. 大规模研究表明视觉复杂度降低第一印象。
  6. Buscher, G., Cutrell, E., & Morris, M. R. (2009). What do you see when you're surfing? Using eye tracking to predict salient regions of web pages. In Proceedings of the SIGCHI Conference on Human Factors in Computing Systems (pp. 21–30). ACM. 用眼动预测网页显著区域。
  7. Lidwell, W., Holden, K., & Butler, J. (2010). Universal principles of design (Rev. ed.). Rockport. 简明介绍层级、对齐、接近原则。

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

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

查找更多报告 · 查看“시각적 위계”搜索结果 →

推荐阅读的理论

最新文章查看全部 ›

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

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