一个界面里有二十个图标,其中十二个是蓝色的,八个是灰色的,分布在页面的各个位置。当你第一眼看到,不需要读任何标签,就能感知到"蓝色的是一类,灰色的是另一类"。这个判断在意识层面以下就能完成,快过任何主动的阅读和分析。
颜色的相似性完成了分类,而且是在用户理解任何具体内容之前。
一.格式塔相似律是什么
格式塔相似律(Law of Similarity)的表述和接近律一样简洁:外观相似的元素,会被视觉系统感知为同一类,属于同一组;外观差异明显的元素,则被感知为不同类。
相似律和接近律是视觉系统完成分组的两条最基础的规律。接近律用空间距离来建立分组信号,相似律用视觉属性的共同点来建立分组信号。两者可以相互独立触发:即使两个元素在页面上相距很远,只要它们的外观足够相似,用户依然会感知到它们属于同一类;反过来,即使两个元素靠在一起,只要它们的外观差异足够明显,接近律建立的分组也会被相似律削弱。
理解相似律,需要先理解"相似性"可以通过哪些视觉维度来建立——颜色、形状、大小、方向、质感,这些属性的任何一种差异,都可能触发不同的分类感知。
二.相似律的几个视觉维度
1. 颜色
颜色是相似律里最强的分类信号。人类的视觉系统对颜色差异极度敏感,即使页面上的其他条件都相同,颜色的不同也会立刻产生分类感知。蓝色的一组按钮和灰色的一组按钮放在同一个页面上,用户不需要读按钮上的文字,就能感知到这是两种不同类型的操作。这个特性让颜色成为传递类别信息最高效的工具,也是几乎所有界面设计都会建立颜色语义系统的原因——主操作、次要操作、危险操作、禁用状态,每种类别都有对应的颜色,用户在视觉层面就能完成分类,不需要逐个阅读才能理解。
2.形状
形状是第二强的分类信号。圆形和方形即使颜色相同,也会被感知为不同的类别。界面里,填充按钮和图标即使都是蓝色,形状的不同,让用户不会把它们混为一类。同一套图标集里,如果部分图标是圆形轮廓,部分是方形轮廓,即使它们代表的功能性质相同,视觉上也会被感知为两个子集,产生用户意图之外的分类效果。
3.大小
大小传递的是层级关系而不是类别关系,但在相似律的框架下,大小相同的元素依然会被感知为处于同一层级。标题、副标题、正文,三者字号不同,用户从字号的大小关系就能感知到层级结构——这不只是视觉层级原则的体现,也是相似律在起作用:字号相同的元素被感知为同级,字号不同的元素被感知为不同级。
4. 方向
方向是一个容易被忽视的维度。朝向相同的元素会被感知为一组,方向不同的元素会被感知为独立或对立。下拉菜单里,所有选项的箭头方向一致,用户感知到它们是同类;如果其中一个箭头方向不同,用户会立刻注意到它,因为相似律在告诉他们"这个不一样"。界面里的图标方向、文字方向、滑动方向,都在参与相似律的分组判断。
5.质感和视觉风格
质感和视觉风格是相似律里最系统化的维度。填充按钮和描边按钮,即使颜色相同,质感的不同让用户感知到它们属于不同的操作层级。图标的线条粗细、圆角大小、填充方式——风格一致的图标被感知为来自同一个系统,风格混杂的图标让用户感知到不一致,进而怀疑这些图标是否代表不同性质的功能。
三.相似律在界面设计里的体现
理解了相似律通过哪些维度工作,就能看清楚它在具体设计场景里是怎么被使用的。








