思维模型
视觉修辞
通过有策略地运用布局、对比和视觉动线,引导注意力,并借助视觉设计传达意义。
探索一下
1937年,西班牙内战中的共和派急需资金。他们传播了巴勃罗·毕加索的壁画《格尔尼卡》:画面以冷峻而混乱的方式描绘了一场轰炸,充满支离破碎的躯体和嘶叫的动物。画作印刷品中的构图经过刻意安排:中央的灯泡先吸引视线,接着是悲痛的母亲,然后是受伤的马。这一精心设计的观看顺序,从光亮到恐怖,再到苦难,让原本只是观看的人主动捐款。这样的安排为什么如此有说服力?
感知改变的那一刻
你会学着发现并运用身边这些增强说服力的视觉手法。
理解概念
理解概念
视觉修辞是一门安排页面或屏幕元素的艺术,它引导人们先看哪里、再看哪里、最后看哪里。就像作者会按特定顺序组织文字,设计师也会用大小、颜色和位置,带着你的视线读完一个故事。你可以把自己想象成导游:你决定让游客看哪些景点、按什么顺序看,用对比突出重点,用留白给他们喘口气的空间。 请注意:下次打开应用或看到海报时,问问自己,你第一眼看到了哪里,为什么?
详细讲解
详细讲解
视觉修辞主要靠三个要素发挥作用:布局,也就是东西放在哪里;对比,也就是什么最显眼;视觉动线,也就是视线如何移动。布局把最重要的元素放在自然阅读顺序的起点,以此建立主次层级;对于从左向右阅读的语言,这个起点就是左上角。对比通过差异突出重点:大元素比小元素更先吸引注意,鲜艳的颜色在中性色背景上格外醒目,粗体字也比常规字体更显眼。视觉动线则把这些焦点串成一条路线,通过对齐、线条和重复,引导视线从一个元素移向下一个。
这背后的机制与我们的感知方式有关。我们的大脑天生会留意变化、追随规律。灰色页面上的红色按钮,或正文上方的大标题,这些对比强烈的区域就像“视觉磁铁”,会把注意力吸引过去。对齐的元素会形成隐含的路径:一列列文字引导你向下阅读,水平线条则提示你横向浏览。空白区域,也就是留白,起到缓冲作用,让眼睛休息,也让彼此靠近的元素看起来属于同一组。
看看这些原则在不同场景中如何发挥作用。在新闻应用中,一张醒目的照片占据左上角,标题按新闻的紧迫程度从大到小排列,不同颜色标记的栏目帮助读者直接找到感兴趣的内容。在餐厅菜单中,价格较高的菜品可能会加上边框,或放在视线自然落下的位置;甜点则单独占一页,鼓励顾客一时心动就下单。在社交媒体帖子中,网红会把关键信息放在人脸或明亮区域附近,因为他们知道,人们的视线会先被这些地方吸引。从广告牌、选票设计到演示文稿幻灯片,同样的原则随处可见:它们既控制人们看到什么,也控制人们按什么顺序看到。
研究依据
研究依据
视觉修辞以古典修辞学中的“布局”法则为基础,也就是如何安排观点的顺序,让它们产生最大的影响,再把这一法则延伸到空间中的信息表达。研究归纳出三个核心原则:信息值,即在从左向右阅读的文化中,元素放在左边还是右边,会承载不同的意义分量;显著性,即元素通过大小、颜色和清晰度吸引注意的程度;以及框定,即如何通过划定边界和分组来展示元素之间的关系。这些原则共同构成了学者所说的“视觉语法”:一套通过布局而非文字来构建意义的系统。
-
Foss(2005):视觉修辞是一种符号行为,图像通过有策略的安排来说服观众,而不只是再现现实。它的说服力来自视觉元素的组织方式,这种组织方式会引导注意力和理解。 [1]
-
Kress 和 van Leeuwen(2006):布局通过信息值(左侧呈现已知信息,右侧呈现新信息)、显著性(通过大小、颜色和焦点形成视觉上的突出程度)以及框定(元素之间的连接或分隔)来创造意义。 [2]
-
Wagemans 等人(2012):格式塔原则中的接近性、相似性和连续性,解释了为什么人们会把成组的元素看作彼此相关,也解释了为什么对齐的元素会让人感到视线可以顺畅移动。这些感知倾向是有效布局的基础。 [3]
-
尼尔森诺曼集团(2017):眼动追踪研究证实,在文字密集的页面上,F形浏览占主导地位;但精心设计的布局可以通过强烈的对比和清晰的焦点,改变这些自然的浏览模式,有目的地引导注意力。 [4]
适用局限
适用局限
视觉浏览模式因文化而异。阿拉伯语等从右向左书写的语言会让F形浏览模式反转,有些文化中的人浏览图像的方式也与西方读者不同。个体差异同样重要:专业知识、动机和任务目标都会改变人们处理视觉信息的方式。上述原则在通常的观看条件下效果最好;对于色盲或低视力等无障碍需求,还需要额外的策略。最后,如果没有实质内容,却过分依赖布局技巧,可能会适得其反:受众最终会识破并抵制这种操纵。
参考来源
参考来源
- [1] 视觉修辞理论Sonja K. Foss - 2005
- [2] 阅读图像:视觉设计的语法Gunther Kress and Theo van Leeuwen - 2006
- [3] 视觉知觉中的格式塔心理学百年回顾(一):知觉与神经关联Johan Wagemans et al. - 2012
- [4] 文本浏览模式:眼动追踪证据Nielsen Norman Group - 2017
- [5] 视觉修辞:分析视觉文档Purdue OWL - 2018
试一试
检验你的理解
一家非营利组织制作了一个捐款页面,把一个大大的红色“立即捐款”按钮放在右上角,而组织使命则用较小的灰色文字放在下方。这个设计运用了什么原则来引导行动?
查看文章解释
答案: 通过大小和颜色的对比建立主次层级
这个设计利用对比,也就是更大的尺寸和更鲜艳的颜色,让按钮在视觉上占据主导地位,建立清晰的主次层级,把注意力引向期望的行动。这就是通过显著性引导行为的视觉修辞。
你正在为老年人重新设计一本医疗信息手册。当前版本有12个部分,分散在页面各处,标题看起来也很相似。要改善视觉层级,最有效的第一步是什么?
查看文章解释
答案: 把相关信息归到更少、更大的标题下,并让标题大小有明显区别
通过大小建立清晰的层级,例如主要部分用大标题、子部分用小标题,可以引导视线,让复杂信息更容易理解。这运用了一个原则:大小对比能确立视觉上的重要程度和阅读顺序。
两个网站展示的内容完全相同。网站A采用Z形布局,并设置了对比鲜明的视觉焦点;网站B则把元素排成网格,每个元素在视觉上同样显眼。网站A的用户完成注册表单的可能性比网站B高40%。哪个概念最能解释这一差异?
查看文章解释
答案: 网站A利用视觉动线和层级,引导视线按顺序移动
Z形布局建立了一条有意安排的视觉动线:起点 → 视觉焦点 → 次要重点 → 行动号召。这条经过设计的观看路线,再加上用对比突出最重要的内容,让通向转化的路径清晰而有说服力。网站B的元素在视觉上同样显眼,无法提供引导,用户只能自己判断该看哪里、该做什么。
继续探索
为眼前的选择,再找一个有用的想法。
Reframo 的全部已发布文章均可免费阅读。准备好后,随时继续探索。