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

简介说明

1. 理论表述

相似的元素倾向于被视一组。

2. 理论背景

相似性原则格式组织律中的一部分，简洁法则的一种具体的表场景。

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

设计案例

首先我们需要达成一个共识：元素的相似并不等完一致，更时细节统一我们就认为元素是相似的。

细节括不限于：

• 矩形比例、圆角大小、描边样式
• 不段应体、、号、色
• 颜色的明、饱和、色相
• 图标式、色彩、大

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

这想必不用多说，拥有相功能、含义、层结构组件保持样上统可以使用户快速理解这个组件操作，降低用户学习成本。想想，如为个新闻 APP 首页做卡片设计，使用不样，不仅作为设计师会很累，用户也会很累。

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

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

2. APP风格保持统一

除页面内部的组件或元素具备一定的相似之外，页面与页面之间也需要，是为 APP 整风的统一。

应用（或网站）风格统是 UI 设计相要个论题，统风格能够让用户晰地感知到自己处在个应用（或网站），而不是觉下跳到了家地盘里，这不仅仅是用户体验要求，也是视觉上需求。

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

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

我们会觉这几个页属于个应用，为它们都具备些相细节特征，比如致分页组件、相大小圆、不断复现色（小黑盒主要是主色黑色）、相体、有规律号、些相形 icon 等等，这些小细节相互影响并不断加强我们页相似处感知，所以我们会觉这些页风格是统。

习惯使 XD 或 Sketch 中的 Symbol 功，并断复色彩、字体字重字号、矩形元素的圆角和例，相信你可更快速地做一套格一致的页面。

3. 特异点更易获得视觉焦点

反过来思考，在相似的元素中，突然蹿一个截然同的东西，你立马就会被吸引，这实是相似性原的一种逆向应的方法。

应案例3：豆瓣书影音页特异点的应

最显眼是那些没被选、全部长模样 tab 吗？不是，最显眼是那个唯长不样，所以论在什么时候用户都能够楚地知自己在哪个页。

注意事项

注意点1：相似不等高度重复

有初学者（或新人设计师）做出一个页面内是一模一样的、雷同的模块，没有丝毫变化的设计，其是一个误区。相似不等度重复，在有大量 feed 列表的应用内，度重复尤其要命。

如个页从上到下看起来全是模样，页呆板沉闷不说全是，这样会用户造成阅读上压力。

反案例1：蒸帮所有文章类条目有样

我们常用的做法就是在大量 feed 中每隔 3~5 个就插一种不太一样的条目，种「不一样」的 feed、模块穿插在正常的 feed 中间能够活跃页面、控用户的阅读节奏，避免枯燥。

这里需要我们注意是，改 feed 样不是改到目全，而是需要保留些共处，比如前提到那些细节，这样会让组件看起来不样，相似性到保留，我们依然会认为这两者是保持风格统。

注意2：不模块不要做太相似

比如说，广告。

有时候就是需要广告和正的模长得差多，诱导户点击获得盈利，这是产的商性需求。但我说这一点需要注意，是从户的体验需求发的，诱导点击长期来广受人诟病，应需谨慎。如何衡量还得具体情况具体分析。

反面案例2：Instagram，左为正的态，右为广告

个是广告，个是正常功能模块，两者长样，交互样，用户容易忽略那很小广告标签而误击，从而进入个预期甚至会抗拒场景。

总结

• 利用相似性原理，使应用内页面达到风格统一；
• 特异点更容易获得视焦点；
• 相似不等于过度复。

参考文献

• 《The Law of Similarity – Gestalt Principles (1)》 MADS SOEGAARD
• 《格式塔心理学5项法则的学习思考》 zhongnanli
• 格式 度科

欢迎关注作者的公众号：「超人的话亭」