让设计更有说服力的20条经典原则:邻近性 - 优设网 - UISDC

让设计更有说服力的20条经典原则:邻近性

2019/04/30 8811评论区

编者按:作者整理了 20 条经典原则,并通过正反例子说明这些原则在设计中是如何运用的。系统学习 20 条经典原则,让你的设计更有说服力。

我们都知道把逻辑上有关系的两个元素应该尽量放在一起排布,两个视觉元素在一起就会变成一个视觉单元。究竟这个原理是什么?两个视觉元素成一组是以什么特质来确定的?这篇文章为你揭晓。

往期回顾:

简介说明

1. 理论表述

彼此靠近的元素倾向于被视为一个组。

2. 理论背景

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

在《写给大家看的设计书》中,Robin Williams 将邻近性原则变称为「亲密性」,称呼不一样,但表达的是同一个意思。

设计案例

邻近性原则在 UI 设计领域中的应用随处可见,小到一个 icon 的制作,大到一整个界面的排布,无处不在体现着邻近性原则,它也确实更多地应用在界面大大小小各种元素的排版当中。

1. 同一个组内的元素间距更小

应用案例1:起点、闲鱼、虾米音乐

如果我们对这些页面中的元素进行划分,可以得到 n 多不同的组,每一组内又由不同的元素构成。仔细观察我们可以发现元素与元素之间的间距永远要比组与组之间的更小,因为它们接近,所以它们成组,这就是邻近性原则的应用。

2. 组之间的距离比边距更小

当我们在做双排(或多排)列表的时候,时常会思考格与格之间的间距到底能不能比边距更大(有边距的情况下,且主要指横向)?看过很多实际的线上案例之后会发现,格与格的间距通常都会设计得比边距更小,至多相等,几乎不会更大。

应用案例2:Keep(间距<边距)、Netflix(间距=边距)

因为只要格间距比边距更小,我们就会下意识地认为它们是一组的,实际上它们的确属于一个大组,这样的视觉印象符合我们对它们的预期。而如果格间距大了,而边距却更小了,就会使我们产生困惑:它们不是一起的吗?为什么做这么开?这就是矛盾。

3. 具有强关联性的模块互相靠近

应用案例3:Behance、Instagram

注意观察分页组件的位置,以及受它影响的区域。这两者可以说是强关联性的,与一方交互,另一方就会发生改变,所以分页组件处于靠近受影响区域的上方,而不会出现在页面其他远离这个区域的位置。

注意事项

1. 无关联的元素或组件不要刻意做近

邻近性原则给予我们另外一个方面的警示,就是如果两个组件没有直接的视觉或交互关系,就不要把它们做得太近,尤其是类似商品列表的组件。

有时候我们拿到一个商品列表的文字信息并没有这么多,无法把图片右侧的纵向空间合理填满,有的新手设计师(或在学者)就会习惯性把标题做到与图片顶对齐,其余元素做到与图片底对齐。

反面案例1:商品列表常见错误

这样做的坏处相信知道了邻近原则的各位已经了然了,除了标题以外,其他元素看起来都与下面那个商品更接近,矛盾和疑惑就此产生了。那这时候应该怎么办呢?处理方案一般有以下几种:第一,标题向下,价格向上移动 2~5pt;第二,利用比邻近性更强的同域原则,添加分割线。

2. 距离的对比需要易被感知

所有元素相互间距都很小等于没有邻近性。邻近性原则在间距对比中才会产生效果,而想要让用户感受到邻近性原则的作用,那对比一定要足够明显,才能被轻易感知。

反面案例2:学生作业魔改版

如果间距的大小对比不够明显,那么邻近性法则的作用同样会不够明显,这时候界面元素之间的亲疏关系就依然是模糊的,页面在用户感知中也还是无序的、混乱的。

总结

  • 元素的关联性越大,间距就越小;
  • 无关联的元素不要近到让大家产生误解;
  • 间距的对比需要能够容易被清晰地感知到。

参考文献

欢迎关注作者的微信公众号:「超人的电话亭」

优设大课堂

非特殊说明,本文版权归原作者所有,转载请注明出处
本文地址:https://www.uisdc.com/principle-of-proximity

发表评论 加载中....

评论加载中....

uisdc

评论区都快饿瘪了,看看我期盼的小眼神...

版式设计 交互设计师 界面设计 排版布局 职场 设计师干货 优设专访 优设大课堂 设计达人 配色 视觉设计 web前端开发 素材下载 AI教程 设计流程 设计理论 神器下载 字体下载 设计师专访 psd下载 设计规范 用户体验设计 海报设计 设计趋势 平面设计 动效设计 logo设计 图标设计 ICON 产品设计 神器推荐 App设计 字体设计 职场规划 酷站推荐 交互设计 ui设计 优秀网页设计 设计师职场 ps技巧 酷站 用户体验 PS教程 网页设计 经验分享

您还没有登录

优设启用更安全省心的 微信扫码登录

微信扫码

300万设计师聚集地!优设网是极具人气的设计师平台
2012年成立至今,一直专注于设计师的学习成长交流

把好文章收藏到微信

打开微信,扫码分享
学设计 优设网 在这里