实例讲解设计中的亲密性原则

  • A+
所属分类:经验思维

北京赛车 本文来源: 酸梅干超人(公众号: 超人的电话亭), 共 2050 字

尽管大多数设计师都是一些追求完美的偏执狂,但是在设计过程中难免会一不留神留下一些小细节上的失误,这里多了一像素,那里少了一像素是再正常不过的事情。所以在设计完成之后,对自己的设计稿北京赛车进行自审和修改,不仅能够维持我们完美主义者的人设,还能有效缓解前端老哥开发时的暴躁程度。

页面的自审从平面四要素开始 (请背诵平面四要素),这四个点是页面中最直观能观测和感受到的,也是最容易修正的错误。所以,本文从亲密性这个新人出现问题比较频繁的点开始讲起,从发现问题到如何修改。

实例讲解设计中的亲密性原则

那我们先来说说什么是亲密性。亲密性从格式塔组织律中的邻近性原则脱胎而来,是说相互接近的元素比相互远离的更具有成组的倾向。

实例讲解设计中的亲密性原则

亲密性原理示意图

利用亲密性原则,我们可以做到让页面内信息的排布疏密得当;元素与元素之间的亲疏联系符合逻辑又满足视觉感知的要求;内容具有一种节奏感,大大降低了浏览时的视觉负荷。所以是界面排版中的重中之重。

实例讲解设计中的亲密性原则

实例讲解设计中的亲密性原则

实例讲解设计中的亲密性原则

页面来自我们之前做的 mars 重设计。我已经将它魔改至仅有亲密性的问题,这样一来足便你们清晰得感知到毫无亲密性的页面,看起来有多累人,请仔细观察页面左侧的文字段并尝试阅读。很难对吧?亲密性缺失最容易给页面带来的感官问题,正在于没有视觉节奏。一方面相关信息之间没有连续性,另一方面从上至下看起来又毫无顿挫,故而使用户产生阅读疲劳,就像唱歌不在拍子上一样难受。

我们常看到文章的段间距总比行间距大,行间距又总比字间距大,正是出于「节奏」的考量。所以在页面排布中,也同样需要重视这个问题。

很多新人觉得诶明明我已经把间距做大了啊,为什么还是说亲密性不对呢?那得看看自己大间距和小间距之间差了多少?2pt?4pt?这个差距就属于仔细看能看出来,但想要能体现亲疏却还差不少的程度。所以我们需要记住的是亲密性最终并不能够诉诸数字,而是诉诸感官。眼睛说它有亲疏感了,它才是真的有亲疏关系。

当我们在自审时发现页面中的元素呈现一种粘连、不易区分、无视觉节奏、浏览/阅读疲劳甚至读不下去的状态时,显然在亲密性上面的就已经出了问题,不用犹豫,抄起鼠标改就是了。

实例讲解设计中的亲密性原则

1。第一步,重新拆分模块

不要嫌麻烦,一旦我们发现了问题,就需得尽力修正到合理的程度,这时从最开始回溯,也可以帮助我们重新整理思路。

以第上面那个页面为例,我们首先拆分大模块,这些模块之间的间距一般来说应当是页面的纵向间距中最大的。这个页面较为简单,大的模块只有头部模块和内容流两个:

实例讲解设计中的亲密性原则

继续向下拆分,我们可以得到更为细致的小模块,这些小模块彼此之间存在紧密的联系却又相对比较独立,故而作为次级模块存在。一般来说,如果没有同域原则的影响 (这个后面讲),次级模块之间的间距会比大模块之间的小一些,以此来体现亲密性。

2.第二步,重新分类字段

确定完了模块,下一步就是将模块内的字段按照亲疏关系重新分类。有时候亲密性的问题可能就是出现在第一遍设计时没有把字段分类做到逻辑清晰,所以自审时这一步至关重要。

以上图中字段较多的 feed 单元为例,该模块的字段可以分为:标签、标题、辅助信息三种,其中辅助信息有两条,一条是地点,一条是时间。如此分类下来,字段间的亲疏关系就比较清晰明了,方便下一步中间距安排:

实例讲解设计中的亲密性原则

3.第三步,重新考虑间距

接下来需要考虑的,只剩下合适的间距。大间距需要体现出不同组之间的「疏」,小间距则要体现相关元素之间的「亲」,要做到这一点,两者的对比就需要足够强烈。

北京赛车我们曾经写过一篇关于元素尺寸定义的文章,里面提到一种确定间距的方法,对新手来说较为实用。方法是这样的:首先我们确定一些数值,比如如果你定义的间距增量为4pt,那么我们确定一组以 4pt 为公约数的数值:4pt、8pt、12pt、16pt、20pt、24pt、28pt、32pt。从中取用较大的数为大间距,较小的数为小间距,并结合自己的页面进行对比和取用。

依然是那一页,我们既然已经列出了上面那一组数字,那么就从中取用一些作为间距,并代入页面:

实例讲解设计中的亲密性原则

这些数据仅适用于这一页,这一种设计形式,假如换个设计样式,那间距的定义可能就完全不是这样了,但思路是相通的。

4.引申,分割的形式

改到此处,页面看起来已经像那么回事儿了,该亲密的该疏远的都已经体现了出来,阅读性也基本修正完成。那么这样就结束了吗?没有。

单单使用间距来控制页面的亲疏关系,并不是一个万金油做法,因为有些页面的字段更加复杂且不规整,这时候间距起到的作用则相对有限,比如下图基安酷安的问答板块 (魔改),哪怕用了间距控制了亲密性,看起来依然很难受。

实例讲解设计中的亲密性原则

这时候我们需要换一个角度切入这个问题:分割的形式。

除了间距,分割的形式还能有:分割线、分割带、色彩分割和卡片化,在格式塔中这些用法被称为同域原则,虽然已经超出了亲密性的范畴,但在修正亲密性问题的这个步骤中,任何可以引申的思路都不应被忽视。

实例讲解设计中的亲密性原则

若我们将上述几种分割的形式引入之前的页面,得到的效果一定比单一的间距控制要好得多:

实例讲解设计中的亲密性原则

实例讲解设计中的亲密性原则

至此,亲密性的自查就差不多到完成了,但我们的自查之路还远远不止于此,接下来还有一系列的细节等待我们去检查和修正,敬请期待吧。



发表评论

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen: