一个界面里有二十个图标，其中十二个是蓝色的，八个是灰色的，分布在页面的各个位置。当你第一眼看到，不需要读任何标签，就能感知到"蓝色的是一类，灰色的是另一类"。这个判断在意识层面以下就能完成，快过任何主动的阅读和分析。

颜色的相似性完成了分类，而且是在用户理解任何具体内容之前。

一.格式塔相似律是什么

格式塔相似律（Law of Similarity）的表述和接近律一样简洁：外观相似的元素，会被视觉系统感知为同一类，属于同一组；外观差异明显的元素，则被感知为不同类。

相似律和接近律是视觉系统完成分组的两条最基础的规律。接近律用空间距离来建立分组信号，相似律用视觉属性的共同点来建立分组信号。两者可以相互独立触发：即使两个元素在页面上相距很远，只要它们的外观足够相似，用户依然会感知到它们属于同一类；反过来，即使两个元素靠在一起，只要它们的外观差异足够明显，接近律建立的分组也会被相似律削弱。

理解相似律，需要先理解"相似性"可以通过哪些视觉维度来建立——颜色、形状、大小、方向、质感，这些属性的任何一种差异，都可能触发不同的分类感知。

二.相似律的几个视觉维度

1. 颜色

颜色是相似律里最强的分类信号。人类的视觉系统对颜色差异极度敏感，即使页面上的其他条件都相同，颜色的不同也会立刻产生分类感知。蓝色的一组按钮和灰色的一组按钮放在同一个页面上，用户不需要读按钮上的文字，就能感知到这是两种不同类型的操作。这个特性让颜色成为传递类别信息最高效的工具，也是几乎所有界面设计都会建立颜色语义系统的原因——主操作、次要操作、危险操作、禁用状态，每种类别都有对应的颜色，用户在视觉层面就能完成分类，不需要逐个阅读才能理解。

2.形状

形状是第二强的分类信号。圆形和方形即使颜色相同，也会被感知为不同的类别。界面里，填充按钮和图标即使都是蓝色，形状的不同，让用户不会把它们混为一类。同一套图标集里，如果部分图标是圆形轮廓，部分是方形轮廓，即使它们代表的功能性质相同，视觉上也会被感知为两个子集，产生用户意图之外的分类效果。

3.大小

大小传递的是层级关系而不是类别关系，但在相似律的框架下，大小相同的元素依然会被感知为处于同一层级。标题、副标题、正文，三者字号不同，用户从字号的大小关系就能感知到层级结构——这不只是视觉层级原则的体现，也是相似律在起作用：字号相同的元素被感知为同级，字号不同的元素被感知为不同级。

4. 方向

方向是一个容易被忽视的维度。朝向相同的元素会被感知为一组，方向不同的元素会被感知为独立或对立。下拉菜单里，所有选项的箭头方向一致，用户感知到它们是同类；如果其中一个箭头方向不同，用户会立刻注意到它，因为相似律在告诉他们"这个不一样"。界面里的图标方向、文字方向、滑动方向，都在参与相似律的分组判断。

5.质感和视觉风格

质感和视觉风格是相似律里最系统化的维度。填充按钮和描边按钮，即使颜色相同，质感的不同让用户感知到它们属于不同的操作层级。图标的线条粗细、圆角大小、填充方式——风格一致的图标被感知为来自同一个系统，风格混杂的图标让用户感知到不一致，进而怀疑这些图标是否代表不同性质的功能。

三.相似律在界面设计里的体现

理解了相似律通过哪些维度工作，就能看清楚它在具体设计场景里是怎么被使用的。

1. 颜色语义系统

颜色语义系统是相似律在界面设计里最系统化的应用。产品里所有蓝色的可点击元素，用户感知为"主操作或链接"；所有灰色的元素，用户感知为"次要的或禁用的"；所有红色的元素，用户感知为"危险或错误"；所有绿色的元素，用户感知为"成功或正常"。这套颜色系统一旦在产品里建立，用户就在用颜色相似性来快速分类每一个元素，不需要逐个读取文字内容来判断这个元素的性质。颜色语义系统的价值，正是来自于相似律——因为同色的元素会被感知为同类，只要颜色和类别的对应关系是一致的，整套系统就能让用户的分类成本接近于零。

2. 按钮的层级体系

按钮的层级体系是相似律在操作层面的应用。填充按钮（Filled Button）、描边按钮（Outlined Button）、文字按钮（Text Button）——三种形态对应三种操作优先级。在同一个页面里，所有填充按钮的视觉分量最高，因为它们的形态相似，共同建立了"这是主操作"的感知；所有描边按钮的视觉分量居中；所有文字按钮最轻。

这套体系依赖相似律：同一形态的按钮被感知为同一优先级，不同形态的按钮被感知为不同优先级。一旦这个形态和优先级的对应关系在产品里固定下来，用户就不需要逐个判断每个按钮有多重要——形态本身就传递了这个信息。

3.图标的风格一致性

图标的风格一致性是相似律在视觉完整性上的体现。同一套图标使用一致的线条粗细、圆角大小、填充方式，用户从视觉相似性就能感知到"这些图标属于同一个系统，遵循同样的规则"，产品整体上感到统一和专业。如果一个产品里混用了不同风格的图标——有的是细线条的，有的是粗轮廓的，有的是彩色填充的，有的是单色线性的——相似律会把它们分成多个子集，用户感知到的是不同来源、不同体系的图标被拼凑在一起，整体感大幅下降。

4. 状态的视觉标记

状态的视觉标记依赖相似律来建立用户对状态系统的认知。选中状态（Selected）、悬停状态（Hover）、禁用状态（Disabled）、加载状态（Loading）——每种状态有统一的视觉语言，同类状态在所有组件里的呈现方式一致。用户学会了"变蓝色表示选中"，在产品里所有需要呈现选中状态的地方，这个规则都成立，不需要在每个组件里重新学习。这套状态语言依赖相似律：视觉相似的状态表现，让用户把它们归为同一个意义类别。

5.数据可视化

数据可视化里，相似律是建立图表和图例之间关联的基础。折线图里，橙色的线代表 A 产品，蓝色的线代表 B 产品；图例里，橙色的色块对应 A 产品，蓝色的色块对应 B 产品。用户从颜色相似性就能建立图表内容和图例的对应关系，不需要逐行比对。如果图例里的颜色和图表里的颜色稍有不同，这个对应关系就会产生误差，用户的解读效率立刻下降。

三. 相似律和接近律的协作与冲突

相似律和接近律通常是协同工作的——设计得好的界面，靠近的元素同时也是外观相似的，两条规律指向同一个分组结论，分组信号最强，用户的感知没有歧义。

但两者有时会产生冲突，这时候用户的感知就会出现不确定性。

最常见的冲突场景：两个元素距离很近（接近律暗示它们是一组），但外观差异很大（相似律暗示它们是不同类）。比如，一个填充蓝色的主操作按钮，紧挨着一个红色的危险操作按钮——距离近让用户感到它们有关联，颜色差异让用户感到它们性质不同。用户会感知到"这两个都在这里，但一个是确认一个是危险"，需要额外的认知处理来解决这个矛盾。处理这种冲突的方式，是拉开距离——让接近律和相似律的信号一致：外观不同的元素，距离也应该拉开，不要让两条规律互相打架。

另一种冲突：两个元素距离很远，但外观完全相同。用户会感知到"这两个是同类"，期望它们有相同的行为，结果发现它们触发了完全不同的操作，感到困惑和不信任。这种情况在产品规模扩大后很容易出现——不同团队在不同页面里用了相同的视觉样式，但背后的交互行为没有同步，相似律建立了用户的错误预期。

当接近律和相似律给出相互矛盾的信号时，通常接近律的信号更强——空间距离是一个非常直接的感知线索，难以被忽视。但如果视觉属性的差异足够显著（比如颜色相差极大），相似律可以在一定程度上覆盖接近律的分组效果。两者共同在起作用，设计师要做的是让它们指向同一个方向，而不是相互抵消。

四. 相似律被破坏时的常见问题

相似律在界面里被破坏，通常以两种方式出现。

第一种是同类功能用了不同的视觉样式。同样是"删除"操作，在列表里是红色文字，在详情页里是灰色图标，在弹窗里是描边按钮——三种样式，用户无法从视觉相似性感知到"这三个操作的性质相同"，每次遇到都要重新理解。这类问题出现的根源，通常不是设计师有意为之，而是产品在不同时间由不同人完成了不同页面，没有一套统一的规范约束视觉决定。

第二种是不同类功能用了相同的视觉样式。最危险的例子是主操作和危险操作，用了外观非常相近的按钮——颜色相似，大小相近，位置邻近——相似律告诉用户"这两个是同类"，用户对它们的警惕性相同，误操作的概率上升。区分不同类功能的视觉样式，不只是为了美观，更是在用相似律来告诉用户"这两个东西不是同类，请区别对待"。

五. 相似律的使用边界

相似律是一个强大的分类工具，但使用时有几个边界需要注意。

1. 同时使用太多相似性维度来做分类，会让分类信号互相干扰。如果颜色、形状、大小同时都在传递不同的分类信息，用户需要同时处理三套分类系统，认知负担反而上升。一般来说，选一到两个主要维度来建立分类，其他维度保持一致，分类效果最清晰。

2. 过度依赖颜色相似来区分类别，会对色觉障碍用户造成障碍。全球约有 8% 的男性存在不同程度的色觉障碍，对他们来说，红色和绿色、蓝色和紫色等颜色的区分是困难的，纯粹依赖颜色相似来建立分类，这部分用户就无法感知到这套分类系统。在依赖颜色相似的同时，配合使用形状、图案或文字标签，让分类在色觉障碍用户那里同样有效，是相似律在无障碍设计里需要注意的问题。

3. 相似律建立的视觉分类，应该和内容本身的逻辑分类一致。如果视觉上把两个元素归为同类，但内容上它们完全不相关，用户的视觉期待和内容现实之间会产生落差，需要花额外的时间重新理解。相似律的价值，在于用视觉捷径帮助用户完成分类——这个捷径只有在视觉分类和逻辑分类一致时，才是真正的捷径，而不是误导。