网易首页 > 网易号 > 正文 申请入驻

让设计更有说服力的20条经典原则(八):相似性

0
分享至

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
  • 格式塔 百度百科

来源:优设网

特别声明:以上内容(如有图片或视频亦包括在内)为自媒体平台“网易号”用户上传并发布,本平台仅提供信息存储服务。

Notice: The content above (including the pictures and videos if any) is uploaded and posted by a user of NetEase Hao, which is a social media platform and only provides information storage services.

相关推荐
热点推荐
多国“批评”中方导弹试射活动,外交部再回应

多国“批评”中方导弹试射活动,外交部再回应

澎湃新闻
2026-07-07 15:30:26
美国1-4!输球不可怕,可怕的是赛后主帅这番话,脸都不要了!

美国1-4!输球不可怕,可怕的是赛后主帅这番话,脸都不要了!

郭夷包工头
2026-07-07 11:15:40
搞笑图片第1265期:能明显证明你工作努力的直接证据

搞笑图片第1265期:能明显证明你工作努力的直接证据

今天的快乐
2026-07-06 21:42:57
国际奥委会暂时解除对俄罗斯奥委会的处罚

国际奥委会暂时解除对俄罗斯奥委会的处罚

上观新闻
2026-07-07 23:05:58
广西水灾,胡锡进是最大功臣!

广西水灾,胡锡进是最大功臣!

麦杰逊
2026-07-07 16:58:07
Shams:如果詹姆斯决定重返骑士,米切尔也将十分欢迎

Shams:如果詹姆斯决定重返骑士,米切尔也将十分欢迎

懂球帝
2026-07-07 22:54:50
“姆总,我们错了!”法国人为求姆巴佩原谅,连埃菲尔铁塔和齐达内都“卖”了?

“姆总,我们错了!”法国人为求姆巴佩原谅,连埃菲尔铁塔和齐达内都“卖”了?

新欧洲
2026-07-06 22:14:13
直径超1300公里!巨型台风要来了

直径超1300公里!巨型台风要来了

扬子晚报
2026-07-07 20:01:50
C罗在被绝杀后疯狂比手势!疑抱怨队友遭无视 强忍泪水4分钟后泪崩

C罗在被绝杀后疯狂比手势!疑抱怨队友遭无视 强忍泪水4分钟后泪崩

风过乡
2026-07-07 22:08:16
37.0℃!申城发布今年首个高温橙色预警,台风“巴威”路径有变!

37.0℃!申城发布今年首个高温橙色预警,台风“巴威”路径有变!

文汇报
2026-07-07 18:28:08
16GB+1TB  !新机官宣:7月13日,正式开售

16GB+1TB !新机官宣:7月13日,正式开售

科技堡垒
2026-07-07 08:51:45
为45岁中国籍女性!日本"无头女尸"身份确认!

为45岁中国籍女性!日本"无头女尸"身份确认!

看看新闻Knews
2026-07-07 20:19:44
全线跳水,原因找到了

全线跳水,原因找到了

中国基金报
2026-07-07 16:53:24
哈兰德和兄姐的差别有多大?明明一母同胞,颜值天赋却全然不同

哈兰德和兄姐的差别有多大?明明一母同胞,颜值天赋却全然不同

TVB的四小花
2026-07-07 09:55:44
丰田官宣新车,15.4万元,即将上市

丰田官宣新车,15.4万元,即将上市

科技堡垒
2026-07-07 09:01:18
知道日本的反应大,但没想到后劲儿这么大

知道日本的反应大,但没想到后劲儿这么大

这里是东京
2026-07-07 18:08:12
比亚迪商票承兑余额增长至249亿元

比亚迪商票承兑余额增长至249亿元

新浪财经
2026-07-07 01:07:00
吹张红牌,惊动白宫:特朗普喊话“查查”巴西裁判,巴西足协驳斥

吹张红牌,惊动白宫:特朗普喊话“查查”巴西裁判,巴西足协驳斥

红星新闻
2026-07-07 16:55:27
到了高中你会发现:中考成绩600分左右的孩子,到了高中容易下滑

到了高中你会发现:中考成绩600分左右的孩子,到了高中容易下滑

娱乐的宅急便
2026-07-05 03:55:27
交通运输部:优先保障广西防汛抢险人员、防汛救灾物资运输,做好灾害损毁路段抢通保通

交通运输部:优先保障广西防汛抢险人员、防汛救灾物资运输,做好灾害损毁路段抢通保通

界面新闻
2026-07-07 12:39:29
2026-07-07 23:52:49
睿阳科技
睿阳科技
甘肃睿阳科技有限公司
129文章数 3关注度
往期回顾 全部

科技要闻

全球下载量第一,可阿里AI还没学会赚钱

头条要闻

龙卷风亲历者:父母乘凉时被卷到百米高空 双双遇难

头条要闻

龙卷风亲历者:父母乘凉时被卷到百米高空 双双遇难

体育要闻

比利时干掉美国:正义必胜大喜剧!

娱乐要闻

私密照流出!曝关晓彤曾两次原谅鹿晗

财经要闻

桔子数科暴雷启示录:合规定生死

汽车要闻

试驾全新坦克300 Hi4-Z/激光雷达/全场景NOA

态度原创

家居
健康
艺术
教育
军事航空

家居要闻

2026建博会(广州) 公装联探展交流活动

粘食吃多了腹胀腹痛的居家缓解妙招

艺术要闻

当人“长”成了风景,美得如此不真实!

教育要闻

小学奥数求面积,有的初中生都不会,狂添辅助线

军事要闻

伊朗外长:若威胁继续 不会启动最终谈判

无障碍浏览 进入关怀版