1310-6499-520
今天是:
站内搜索:  
您的当前位置:主页 > 知识博客 > 设计管理 >
联系我们

名称:九分网络科技

联系:13106499520

地址:福建省福州市仓山区金榕南路553号


扫一扫添加微信

让设计更有说服力的20条经典原则:邻近性--九分科技

时间:2020-06-27   分类:设计管理    作者:网络   来源:网络整理   点击:152

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

内容采集来自9fen.net

内容采集来自9fen.net

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

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

九分网络

往期回顾: www.9fen.net

《让设计更有说服力的20条经典原则:美即好用效应》 内容采集来自9fen.net

《让设计更有说服力的20条经典原则:多尔蒂门槛》

内容采集来自9fen.net

《让设计更有说服力的20条经典原则:菲茨定律》 九分网络

《让设计更有说服力的20条经典原则:希克定律》

九分网络

《让设计更有说服力的20条经典原则:雅各布定律》 本文来自九分网络

《让设计更有说服力的20条经典原则:简洁法则》 九分网络

简介说明

1. 理论表述

九分网络

彼此靠近的元素倾向于被视为一个组。 www.9fen.net

2. 理论背景 copyright 9fen.net

邻近性原则是格式塔组织律中的一个部分,是简洁法则的一种具体的表现场景本文来自九分网络

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

九分网络

设计案例

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

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

应用案例1:起点、闲鱼、虾米音乐 九分网络

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

本文来自九分网络

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

www.9fen.net

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

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

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

内容采集来自9fen.net

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

九分网络

www.9fen.net

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

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

应用案例3:Behance、Instagram 九分网络

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

copyright 9fen.net

本文来自九分网络

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

本文来自九分网络

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

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

www.9fen.net

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

九分网络

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

九分网络

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

copyright 9fen.net

标签: 设计原则 设计法则 优设 优设网 优秀 超人的电话亭 邻近性

郑重声明:本文版权归原作者所有,九分网络转载文章仅为传播更多信息之目的,如作者信息标记有误,请第一时间联系我们修改或删除,多谢。


九分网络专业提供公众号、小程序、PC及移动端站点搭建!网站程序及服务器维护:13106499520。微信:452570709

----相关文章----