设计师都需要知道的设计原则和定律(五)——邻近性法则_宇宙设计大本营-牛排名
1.2.19

设计师都需要知道的设计原则和定律(五)——邻近性法则

Recommanded by editor
长沙/UI设计师/2年前/2359浏览
设计师都需要知道的设计原则和定律(五)——邻近性法则Recommanded by editor

彼此靠近的设计元素被认为是相关的,而间隔开的元素被认为属于不同的组。

一、什么是邻近性法则

​邻近性原则与上一篇简洁法则一样同属于格式塔原则中的法则之一,在UI设计中邻近法则是很重要的一条法则

在心理学中邻近性法则描述了彼此接近的人或事物之间形成关系的方式

UI设计中很大程度上依赖于邻近性法则和其他分组原则,因为正确的将相关元素设计到一起对于界面交互十分重要,它会告诉我们的眼睛和大脑如何与设计图像建立联系

什么是邻近性法则归根结底就是一句话:彼此靠近的设计元素被视为同一组的一部分——共享相似的功能或特征

二、邻近性法则解析

邻近性法则应该是我们在设计听到过最多的一个词了,而且你可能经常用到,也经常看到

虽然我们很多次的听到,很多次的看过,但是有没有深入的学习过一次呢?那今天我们一起深入学习一下吧

邻近性法则描述人眼如何感知视觉元素之间的联系。与彼此分离的元素相比,彼此接近的元素被认为是相关的

比如邻近性法则允许我们使用空白(间隔)来建立不同元素之间的感知关系

邻近性法则对于人们对想法、概念等进行分组非常有用,它是我们能够一眼识别不同项目集群的理想选择

但是在设计中我们应该小心的运用这条原则,如果我们将太多的项目分组得太近,最终我们会设计出一个嘈杂、拥挤的布局,反而徒增烦恼

如果每个项目的接近程度变得模糊,那设计就失去了意义

与颜色或形状的相似性相比,邻近性法则能更好地区分成不同的组,如下图:

通过间隔将邻近原则将形状分成两个不同的组,即使在每个组中包含不同的形状,这两个组我们也能很好的区分开来


三、举例

1、汉字&段落

就拿我们最最最最常用的汉字来说,当它们分开时他们各自代表各自的意义而且每个字可能还有好几种意思,当它们彼此靠近时他们就变成了一个词组或句子的意义

还有一个自嘲的笑话“这些字拆开我都认识,但是他们组合成在一起我就不认识了”,用来嘲笑自己的文化水平低下,其实也有一点邻近性法则的味道在其中

在文字中不得不提一下我看到过的一个苍蝇馆子的菜单在排版时的一个错误,看了之后是有气又想笑,如下图:

看了第一竖排我没感觉有什么不对劲,毕竟“腊鱼腊肉”也可以算是一个菜,但是看到第二个“肉香味茄”我在想这家店的菜名还挺独特,好奇是个什么菜,看到第三个我感觉不对了,好像是我阅读方向错了,我想这是哪个XX做的设计真是反人类,或许这并不是专业设计师做的,因为设计师不应该犯这种低级的错误

当然书中的段落,或者文章中的段落也是如此,你随意拿起一本书,或者就拿现在的文章来讲,都是由段落组成的,每个段落之间都是作者在将相似的想法、观点或论点保持在一起,如果想写新的主题或者想法,就会另起一个段落,而不是打来一本书从第一个字开始一直密密麻麻连接到书的最后一个字

2、社会心理学中的邻近性法则

在社会心理学当中其实也有邻近性法则,在人际交往当中,我们交往的最频繁的往往是离我们最近的人,比如在一栋楼或一个小区当中,你与你的邻居交往的几率就比隔一户的邻居交往几率更高

在人际交往中,距离的接近程度与交往的频率有直接的关系,较小的空间距离有利于建立密切的人际关系,这就是心理学当中的邻近性法则,指人与人之间的距离,对双方的亲密程度影响很大:空间距离越近,心理距离相对较近,交往的频率也越高;相反,空间距离越远,心理距离也随之较远,交往的频率也较低

我们古时候也有很多古语和故事也都讲述着类似的观点,例如“远亲不如如近邻”在我们的生活中,也经常出现这样的现象:人们大多数的朋友都是自己身边的人,不是同学同事,便是近邻乡亲;在学校里,跟自己最要好的朋友往往是自己的室友或同桌;在火车上,跟自己聊天的多半是邻座或上下铺

在商务谈判中,如果能够适当缩小彼此的空间和距离,往往获得成功的几率更高。。如果在宽敞的会议室里洽谈了很久,对方态度坚决,谈判陷入了僵局,你不妨尝试着将谈判地点转到饭店、酒吧等地方。彼此肩并肩,促膝而谈,心靠得更近,气氛更加融洽,这时如果你再做一个小小的让步,对方一定会被你的诚意打动,或许会为你提供更大的优惠,双方更容易达成共识

3、UI设计中的邻近性法则

3.1 同一组内的主要信息与辅助信息及其他元素的距离

在UI中同一组的信息放在一起能够提高用户的识别效率,同一组内的元素与元素间的距离应该更小,当前组的元素与其他组的元素应该保持距离,不能让用户产生误解(就像有对象的人应该与其他对象保持距离,不然容易产生误会)

3.2 相关字段组合在一起

当相关字段组合在一起时,表单看起来更容易识别并且完成起来不那么让人产生困难

例如,一个包含 12 个字段的表单可能看起来太繁琐而不想填写,而一个包含 4 个字段的 3 块表单相比之下似乎很简单

3.3 响应式布局也应该注意邻近性法则

在响应式布局中元素的邻近性法则也尤为重要,因为响应中的分组可能会随着不同的屏幕尺寸而改变。在缩小到最小空间时,最小化的元素间的空间也会随之变小或更近,从而破坏分组的关系,导致邻近性法则被破坏

所以在对响应式布局设计时应该要着重注意邻近性法则的运用

我们可以看看下面的例子,如图“1”与“2”之间是同种类型并有关系的链接,用户可以轻松的查看和对比他们,从而决定他们想要去点击哪一个链接

但是在响应成小屏幕后,这两个链接的距离显得很远,一个在最上面,一个在最下面,这样放置可能会导致移动端的用户永远不会发现第二种类型

四、总结

1、接近有助于建立与附近物体的关系

2、靠近的元素被认为具有相似的功能或特征

3、接近度可以帮助用户更快、更有效地理解和组织信息

————————插画练习003 | 宇航员的自拍————————

37
Report
|
68
Share
评论
in to comment
Add emoji
喜欢TA的作品吗?喜欢就快来夸夸TA吧!
Log in
立即打卡

相关内容推荐

明眸善睐是什么意思夜郎自大的意思南音是什么意思毛骨悚然的拼音人非圣贤视为畏途相反的近义词瞑什么意思百鸟争鸣哼的多音字首领的拼音侨属罔顾亵玩是什么意思仪是什么意思衣帛纳罕的拼音自信近义词坝字组词刘长卿读音通令壁断崖百分率跳蚤读音茎可以组什么词撰文的拼音呼的拼音什么是额定功率amaze的名词惩罚拼音嫃怎么读夺的组词劳烦是什么意思房的拼音所的意思早晚的拼音扯虎皮拉大旗平反昭雪strenuous白鱼入舟凝练暧昧近义词进成语噗嗤一声曲直的拼音秋色宜人颜字拼音勤勤恳恳priceless流涎怎么读释老泽繁体竖立朗的组词襕怎么读比拟是什么意思割的笔顺蔽塞朴实无华断袖之癖是什么意思熬白菜拼音泰的组词青龙偃月刀拼音相视莫逆出仕businessman小贩的拼音后代是什么意思岚烟是什么意思洝怎么读高的组词伪人是什么意思埏怎么读音纷呈是什么意思萋萋的意思泡沫的拼音斩草除根的意思油荤狍子的读音时间啊倾轧百灵鸟是什么意思收考嗜睡的拼音垓字怎么读煨的拼音设譬创造拼音名扬中外的反义词是什么没头苍蝇封锁的拼音灵休谗谤是什么意思俐怎么读猎奇是什么意思緌读音攀龙惯笔顺指定是什么意思竿头凝噎的意思由于的拼音倦怎么读权责币怎么读锋字组词柔情绰态羞辱的近义词潺湲是什么意思pepsi是什么意思拂过运筹帷幄什么意思衣衫不整的意思住成语暗默黄金列车罗适折子祯的拼音万的组词门可罗雀什么意思染恙口头交琴瑟和鸣什么意思讫的意思漂的意思感叹的意思庀怎么读致是什么意思共产主义是什么意思谨祝不信的拼音耧怎么读哀兵必胜造句难过的近义词啬夫升堂苍头奴嫩黄的晓之以理那字组词说的读音酸腐印张是什么意思坚定反义词愁绪躺字组词鞋笔画gua拼音怎么读拥拼音尊重的反义词相视莫逆讨口寄托的近义词短号是什么意思友情的拼音刮的组词燕山的拼音挟山超海指指点点的意思嚷嚷的意思机智的意思箨怎么读撮土助力的意思逼不得已发芽的拼音空中的拼音饥附饱扬殆读音畧怎么读仁人入境问俗忘年交是什么意思instructive潇洒的近义词打旋恶法bib怎么读屋的拼音作画的意思正人君子的拼音小舅子是什么意思支棱是什么意思混混噩噩纁怎么读衬组词姹紫嫣红是什么意思俗家丰收反义词人如潮涌重视的近义词庞大的拼音掷果潘安

合作伙伴

牛排名

www.andmedia.cn
www.youpinhui.vip
www.bbswimming.cn
baidu.07yue.com
www.mtcddc.cn
www.bjdongwei.cn
zz1.urkeji.com
www.snlanyards.com
qiansan.seo5951.com
baidu.07yue.com
www.andmedia.cn
www.jsfengchao.com
www.conductive-powder.com
www.desai360.com
www.clhczx.cn
www.turkonezi.com
dw.urkeji.com
www.zhdaili.cn
seo.chaoshanxing.com
www.bjdongwei.cn