1. 爱猫说设计狮网首页
  2. 资讯

用 “完形心理学”,增加界面设计有感度!

说服客户与老板、跟工程师沟通、强化设计概念的有感心理学

情况 1 : 为何要留那么多空白? 害我还要滚动鼠标 (掀桌)

情况 2 : 为什么不能直接用一页展现? 把客户的需求塞满不就完工啦! (无言)

情况 3: 这种设计好像不错,但是为什么要这样做? (直觉大神告诉我这样设计,但我说不出来为什么..)

虽然世界上有许多 GUI 已经走得又长又远又厉害,但别以为这种古代人对话不会出现,一直以来我们只是习惯这些 GUI 被如此呈现,但为何要这样设计我们却不一定知道。

由于完形心理学归纳出人类大脑认知之普遍性的规则,因此无论是不是 UI/UX 设计师都很适合阅读本篇文章。但还是想特别强调,若任职于传统科技公司,需要对上说服老板,需要平行说服 (资深) 工程师,那请把它收进最爱;而习惯套用设计好的 UI 套件,但不知道为何这样设计的 IT 工程师,也可以透过本文来强化自己的产品说服力。

那就开始吧~(击掌)


完形心理学,又称作格式塔 (Gestalt) 心理学,于二十世纪初由德国心理学家提出 — 用以说明人类大脑如何解释肉眼所观察到的事物,并转化为我们所认知的物件。它可说是现代认知心理学的基础,其贯彻的概念就是 “整体大于个体的总合 “The whole is greater than the sum of the parts.” — Kurt Koffka”。

若深究完整的理论将会使本文变得非常的艰涩,因此笔者直接抽取个人认为与 UI 设计较为相关的 7 个原则 (如下),并搭配实际案例做说明。有兴趣了解全部理论的话可以另外 Google。


1. 相似性 (Similarity) — 我们的大脑会把相似的事物看成一体

如果数个元素具有类似的尺寸、体积、颜色,使用者会自动为它们建立起关联。这是因为我们的眼睛和大脑较容易将相似的事物组织在一起。如下图所示,当一连串方块和一连串的圆形并排时,我们会看成 (a) 一列方块和两列圆形 (b) 一排圆形和两排三角形。

用“完形心理学”,增加界面设计有感度! 1

对应用到界面设计上,FB 每则文章下方的按钮图标 (按赞 Like / 留言 Comment / 分享 Share) 虽然功能各不相同,但由于它们在视觉上颜色、大小、排列上的相似性,用户会将它们视认为同一级别的按钮。设计师如果能善用相似法则,也可借由外观的一致性来达到更有效地传达信息、暗示类似功能和节约页面空间,从而为用户提供更好的使用体验。

用“完形心理学”,增加界面设计有感度! 2
在股市分析 APP 上也很常看见相似色彩的应用: 以绿色标示股价上扬,以红色代表股价下跌 (国外与台湾的标示方式相反)。无须多余的使用说明,仅利用色彩群化让使用者能迅速进行分类并判读股市趋势。同样,我们常见的色盲检测卡也是利用颜色的接近性来测验是否色盲。
用“完形心理学”,增加界面设计有感度! 3
用“完形心理学”,增加界面设计有感度! 4
2. 接近性 (Proximity) — 我们的大脑会把把靠近的事物看成一体

让我们先来观察 (a),它是由 6 条直线均等分布,也因此我们的大脑很容易将六条直线视为一组。但很神奇地,若我们将 (1)(2) 靠近,(3)(4) 靠近,(5)(6) 靠近,是不是觉得直线们从一组变为三组呢?

用“完形心理学”,增加界面设计有感度! 5

再回过头对照之前的例子,只因为我们把 (c) 上下排的距离拉近, (d) 左右排的距离拉近,我们会因接近性的影响,而认为 (c) 圆圈+方块+圆圈 是一组、(d) 三角形+圆圈+三角形是一组。由此可知,当画面上的物件同时出现相似性&接近性时,接近性的影响往往大过于相似性

用“完形心理学”,增加界面设计有感度! 6

在界面设计上,我们不难发现接近性与相似性这个两种法则常同时出现:以 Gmail 来说 (图 e),大脑应该会因为相似性而将圆形的头像视为一个群组,将其后的文字描述视为一个群组 (图 f),但因为使用了近接概念并隔以适当空白,使得原先不同类型的元素,因为距离接近而让使用者更易于联想两者间的关系,将头像与后面的文件标题及内容视为一个信件群组 (图 g)。

用“完形心理学”,增加界面设计有感度! 7
左图: 眼睛看到的 / 中图: 根据相似性我们以为会看到的 / 右图: 经过转换后大脑看到的

这种作法也常见于线上表格的填写,我们会把相关的标题、功能、按钮等排列在一起,或是表单的选项放在邻近处。这不仅仅是方便使用者操作,更可以明确的告诉使用者:hey~这些功能 or 选项是互相有关联性的。

用“完形心理学”,增加界面设计有感度! 8
左图: 眼睛看到的 / 右图: 大脑看到的 。

3. 连续性 (Continuity)-我们的大脑会把事物看成连续的形体

如下图示,我们不会将 (a) 图看成两个相碰的尖角,而是交叉的两个直线。不会将 (b) 图看成两个相碰的尖角,而是交叉的直线与曲线。同样地在 (c) 图与 (d) 图,并不会因为中间有横切一条直线而阻碍我们辨识它为一条连续的波浪型。

用“完形心理学”,增加界面设计有感度! 9

我们以当红修图 APP“美图秀秀” 来说明连续性在 UI 设计上的应用。进入美图秀秀后可见许多不同产品被排列为跳板式(宫格式)导航聚集在中心页面,若将产品以一页四个整整齐齐地放置于正中央又无左右滑动提示,使用者很有可能不知道还有其他产品。

于是美图秀秀将其他页的产品宫格微露一角,由于连续性的影响,大脑并不会因为宫格被裁切或是只露一部分而阻碍我们辨识它,借由这样的设计来触发使用者往左滑以察看后面产品的动作。用“完形心理学”,增加界面设计有感度! 10

左图: 眼睛看到的 / 右图: 大脑看到的

连续性概念的应用也常见于瀑布式网站布局。即便区块式的卡片内容因页面高度被截断,我们的大脑还是会自动连续其型体并判断为” 内容未完” 而往下浏览。

用“完形心理学”,增加界面设计有感度! 11
左图: 眼睛看到的 / 右图: 大脑看到的。

4. 封闭性 (Closure) — 我们的大脑在观察事物的时候,会将许多个独立的元素视认为一个完整封闭的图形。

如下图所示,我们的眼睛先观察到一连串的圆点 (1),此时大脑开始填补圆点与圆点间的空白 (2),最后把它辨识为一个完整的圆 (3)。

用“完形心理学”,增加界面设计有感度! 12

我们的大脑会自动填补元素和元素间的空白部分,将复杂的元素简化,尽管中间没有接续的关系,我们仍然会倾向于看成一个完整的图形,以节省我们的记忆空间并快速辨识物件。而这种视觉特性称为封闭性。

封闭性其实就是 “具体化” 的体现。设计师可以利用这个概念去创作貌似残缺不全的图形,例如中华电信 & IBM 的 LOGO 设计。

用“完形心理学”,增加界面设计有感度! 13

界面设计上,虽然 Abduzeedo 首页内容之间并没有明确的界线,但借由图片的排列方式和说明文字靠边线所带来的稳定感,让观看者在大脑中自动形成了某种 “网格”- 将页面内容看成是有规则的区块,而不是一个混乱的整体。

用“完形心理学”,增加界面设计有感度! 14
左图: 眼睛看到的 / 右图: 大脑看到的。图片来源:http://abduzeedo.com/

5. 图地原理 (Figure-Ground) — 我们的大脑会把图案视认为图 (前景) 与地 (后景) 的结合

图形对我们来说有着前景跟背景之分,因为人的知觉具有组织性,会想办法将视觉对象由背景中独立出来,这个独立出来的部分即为 “图”,周围的部分则是 “地”。

据研究发现,通常面积小、水平或垂直、位于下方、单纯的形、反复的、被包围的、有动感的、对称的、密度高或有质感者易被视认为图,且往上突出比往下垂直容易被视认为图。但很多时后前后景会依照我们所关注的对象不同而有不同的效果。

(a) Martin Newcombe Property Maintenance logo 房屋修缮公司,若以黑色为图,白色为地,可以清楚辨识为一个修缮的板手。若反之,也可辨识出房屋图案,这是一个成功结合房屋与修缮得 Logo 设计。

(b) FedEx 国际知名快递公司,除了可以看见清楚的 FedEx 字样,在 Logo 中的 EX 可以看到有个箭头。

(c) FreemanWhite logo 室内设计公司,Logo 就是 “F” 跟 “W” 的组合。

用“完形心理学”,增加界面设计有感度! 15

而在界面设计上最常使用图地原理的就是 Dialog Box,如 (d) 图,我们将背景暗化或是模糊化以突显前方的 “图”,让使用者可以专注在对话框的内容上;(e) 图因未淡化背景便可能扰乱使用者的阅读。而 APP 中的弹出式广告也是同样的道理。

用“完形心理学”,增加界面设计有感度! 16

6. 共同命运 (Common Fate) — 我们的大脑会把动态相近的事物看成一体

共同命运法则与相似性有点类似,只是更强调当某些元素有同速、同方向或是同行为的模式出现时,这些元素较易于被视为一个整体。这个原则常用在动态的呈现上。

Material Design 常使用的漂浮按钮 (Floating Action Button) 便是共同命运原则的良好示范。Floating Action Button 的设计便是为了节省移动装置的可使用空间,而将多种功能或选项藏在其中,因为类似的动态与设计,且几乎在同时间点出现,我们的大脑就会判断这些功能是一个整体。

用“完形心理学”,增加界面设计有感度! 17

7. 对称性 (Symmetry) — 我们的大脑会把对称的物体,视为一个整体。

对称,通常能带给观者一种稳定、和谐的感觉。你有发现吗? 若以接近性来说我们应该会判断 (2)(3) 为一组、(4)(5) 为一组,但事实上因为对称性,大脑的判读却是 (1)(2) 为一组、(3)(4) 为一组、(5)(6) 为一组。

用“完形心理学”,增加界面设计有感度! 18

让我们再以 “美图秀秀” 来举例,早期的版本 (左图) 因为子产品并没有那么多,因此整齐地排列在画面中央给人稳定和谐的感觉;然当子产品变多 (右图),便利用画面的不对称性给人右边内容还没结束的感觉,而刺激向左滑动的行为。用“完形心理学”,增加界面设计有感度! 19

左图: 美图秀秀较早版本 / 右图: 美图秀秀目前版本。

很多时候我们运用画面的对称性来引导视觉开始与结束的位置。即便是现在很流行的长卷动式网页也会运用显著标示或无明显区块的 header (网站 LOGO 或 横向 Navigation) 与 Footer(联络我们等相关资讯) 来告知使用者网页已经结束。用“完形心理学”,增加界面设计有感度! 20

最后

完形心理学概念普遍的存在与应用于各种设计中,大家也不难发现同个设计里综合了多种不同的完型概念。本文并不是要教大家如何科学化的分析设计而是在于理解我们的大脑是如何思考,以及 “为什么” 要使用这样的设计样式 (Design Pattern)。也因为这样的认知模式存在于每个人的脑中,因此,此理论也很适合设计师优化产品,用来解释直观设计或依稀感受却无法言喻的感性抽象,并以与他人共通并能理解的角度具体地阐述出来,来帮助人们更正确地接收你要传递的讯息。

留白不该只是设计的附属品或毫无根据,可能是利用接近性或对称性来帮助大脑分群;而填充式的满版内容无法帮助阅读,只会加重使用者的认知负荷。希望大家在掌握这些原则后可以有所依据,言之有物,设计有理,让产品更有感,成为与工程师沟通的桥梁,说服老板客户的利器。

爱猫说是一个完全独立的媒体,运营只靠网络广告支撑,如果您支持爱猫说设计狮网的话,请对此网站关闭广告拦截功能(如:Adblock)爱猫说设计狮网衷心的感谢您。

本文来自作者:请叫我网站管理员,资源整理不易,且下且珍惜。如果您觉得不错,欢迎评论。本文观点不代表爱猫说设计狮网立场,转载请联系原作者。

若本文章的资源已经失效,您可以在评论区告诉我们,我们将及时更新。如果您想要获取更多资源,并与我们进行互动,请加入我们的官方QQ群:284300445。爱猫说设计狮联盟

发表评论

登录后才能评论

联系我们

15298802030

在线咨询:点击这里给我发消息  爱猫说设计狮联盟

邮件:admin@imaoshuo.cn

工作时间:周一至周五,9:30-18:30,节假日休息

QR code