视线需要顺序
Gordon(2021)将其定义为通过色彩、对比、尺寸和分组传达重要性。单一特征不同的元素会立即突显(Treisman & Gelade, 1980; Wolfe, 1994)。五处强调等于没有强调。
留白与分组
接近原则(Wagemans et al., 2012)让留白本身显出结构。视觉复杂度会降低第一印象(Reinecke et al., 2013)。文字多的页面要考虑F型模式。
移动端:一屏一主角
每屏只有一个实心主按钮,次要操作用描边按钮。次要文字可变淡,但仍须满足色彩对比标准。层级清晰的界面也受益于审美可用性效应。
常见问题
- 如何快速检查?
- 把屏幕看模糊,看最先注意到的是否为重点。
- 强调色用几种?
- 一个主操作色加状态色即可。
来源核查日期:2026-10-27
参考文献
- Gordon, K. (2021, January 17). Visual hierarchy in UX: Definition. Nielsen Norman Group. 定义通过色彩、对比、尺寸、分组建立层级。
- Treisman, A. M., & Gelade, G. (1980). A feature-integration theory of attention. Cognitive Psychology, 12(1), 97–136. 单一特征如颜色会被前注意地突显。
- Wolfe, J. M. (1994). Guided Search 2.0: A revised model of visual search. Psychonomic Bulletin & Review, 1(2), 202–238. 视觉搜索由特征引导的模型。
- 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. 综述接近、相似等格式塔分组原则。
- 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. 大规模研究表明视觉复杂度降低第一印象。
- 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. 用眼动预测网页显著区域。
- Lidwell, W., Holden, K., & Butler, J. (2010). Universal principles of design (Rev. ed.). Rockport. 简明介绍层级、对齐、接近原则。
