让设计更有说服力的20条经典原则：相似性

编者按：「让设计更有说服力的 20 条经典原则」系列文章已经到了第 8 篇，每篇文章针对一个设计原则进行探讨，通过真实案例为你解析在设计中该如何运用。

在本篇文章中，带你了解相似性原则与邻近性原则有何不同，在设计中又是如何运用的。

往期回顾：

简介说明

1. 理论表述

相似的元素倾向于被视为一个组。

2. 理论背景

相似性原则是格式塔组织律中的一个部分，是简洁法则的一种具体的表现场景。

上一篇邻近性表达的是元素空间位置上的接近，而相似性则表达的是元素形式和内容上的接近，包括形状、颜色、大小、运动状态等等。如果在一堆元素中有一些具有某种相同的特征，那么在我们的认知中这些元素具有更强的相关性。

设计案例

首先我们需要达成一个共识：元素的相似并不等于完全一致，更多时候细节统一我们就会认为元素是相似的。

细节包括但不限于：

矩形比例、圆角大小、描边样式
不同字段对应的字体、字重、字号、色彩
颜色的明度、饱和度、色相
图标样式、色彩、大小

1. 界面内相同功能的组件保持样式统一

这一点想必不用多说，拥有相同功能、含义、层次结构的组件保持样式上的统一可以使用户快速理解这个组件的操作方式，降低用户学习成本。想一想，如果为一个新闻 APP 的首页做卡片式设计，使用不同的样式，不仅作为设计师会很累，用户也会很累。

图1：虾米、京东、小黑盒

让设计更有说服力的20条经典原则：相似性

所以，相同的组件保持样式上的统一是十分有必要的，不论是对快速制作原型完成界面设计的要求，还是对降低用户学习成本的考量，都不应该把相同的组件设计得相去甚远。

2. APP风格保持统一

除了页面内部的组件或元素具备一定的相似性之外，页面与页面之间也需要，这是为了 APP 整体风格的统一。

应用（或网站）风格的统一是 UI 设计中相当重要的一个论题，统一的风格能够让用户清晰地感知到自己处在同一个应用（或网站）中，而不是觉得点一下就跳到了别人家的地盘里，这不仅仅是用户体验的要求，也是视觉上的需求。

正如我之前强调的那样，细节上面保持统一就可以使用户将这些页面联系起来，认为它们属于同一个应用。

应用案例2：小黑盒发现页、游戏页、个人页

让设计更有说服力的20条经典原则：相似性

我们会觉得这几个页面属于同一个应用，因为它们都具备一些相同的细节特征，比如一致的分页组件、相同大小的圆角、不断复现的色彩（小黑盒中主要是主色黑色）、相同的字体、有规律的字号字重、一些相同形式的 icon 等等，这些小细节相互影响并不断加强我们对页面相似处的感知，所以我们会觉得这些页面的风格是统一的。

习惯使用 XD 或 Sketch 中的 Symbol 功能，并不断去复用色彩、字体字重字号、矩形元素的圆角和比例，相信你可以更快速地做出一套风格一致的页面。