设计中留白的细节
设计中留白的细节

留白是指版面中没有编排任何元素的空白区域。本期我们所讲的留白并非指的是某种特定风格的设计形式,而是在任何设计中都存在的,大到版心小到字间距的那些留白细节。恰恰是这些不起眼的细节部分,决定的一个设计的品质高低。只要认真掌握好这些基本原则,也就可以做出与之前完全不同的优秀版面。希望本期所讲述的内容能够对你有所帮助。

设计中留白的细节

设计中留白的细节

设计中留白的细节

均等的留白能够将元素链接在一起,会传递出统一感和平稳感,通过控制留白的面积大小关系,则可以将不相关的元素区分开来。接下来我们以生活中常见的手机图标为例,来解释留白中区分与链接的应用。

设计中留白的细节

设计中留白的细节
设计中留白的细节

上图中,黄色区域是标注好的留白面积,图标与文字等距排列。所有元素都链接到了一起,抛开我们的视觉经验,单从元素的位置与关系来说,我们并没有办法分清哪些文字与哪些图标存在联系。

设计中留白的细节

设计中留白的细节
设计中留白的细节

通过减小文字与图标之间的留白大小,使图标与相关文字成为组合,让我们有效区分出了文字标注的是其上方的图标含义,给人清晰明确的印象。

设计中留白的细节

设计中留白的细节

设计中留白的细节

结构示意图

设计中留白的细节

上图中,花瓶之间的留白均相等,给人非常整齐的感觉,版面整体显得稳重有条理性。但也会使画面缺少视觉焦点,显得有些缺少变化。

设计中留白的细节

设计中留白的细节

结构示意图

设计中留白的细节

通过改变花瓶的位置,让放置在大面积留白中的花瓶得到了强调,即使不需要放大也会显得格外醒目。四周的大面积留白让焦点更加突出,从而提高了元素的识别度。

设计中留白的细节

留白在版面中无处不在,小到文字之间的距离,大到整个版面与版心的大小,把控好每个部分的留白,是版式设计中非常重要的部分,这里我们将依次讲解留白在不同情况下的应用与注意事项。

设计中留白的细节

设计中留白的细节

设计中留白的细节
设计中留白的细节

无论元素如何放大与缩小,人眼能够识别到的最小比例是不会跟着改变的。上图中方块间的距离在大比例的情况下不会显得有什么问题,当等比缩小后方块间几乎黏在了一起,这种情况下我们需要重新调整方块之间的距离。

设计中留白的细节

汉字是在虚拟的方框中设计出来的,字库中字体的间距是针对常规正文字号下设置的,当我们把文字缩小后,出现了与上面方块同样的情况,文字产生了黏连,这时我们需要加大文字间的留白,而将文字放大后也是同样的道理,需要减小文字间的留白距离。

设计中留白的细节

设计中留白的细节

拉丁字母与汉字不同,字体的字面是不等宽的,所以我们需要单独设置每个文字之间的留白距离,分别比对字体默认的字偶间距与软件自带的视觉间距(这里为了不被字意干扰,我们将字体镜像显示),两种设置均不是特别理想。

设计中留白的细节

设计中留白的细节

默认的字偶间距需要顾及到与不同字母的搭配情况,而针对特定文字组合的单词来说,我们可以更精确的调整文字间的留白距离。诀窍在于视觉上的均衡,千万不要死记数据。

设计中留白的细节

设计中留白的细节

设计中留白的细节

首先我们绘制好衬板的大小,在不添加文字的情况下,视觉会停留在色块的中心位置。虽然这里是以购买按钮为例,但并不局限于此,在任何文字与边界的情况下都是可以运用这个思维的。

设计中留白的细节

设计中留白的细节
设计中留白的细节

加入文字后,四周的留白并不统一,给人左重右轻的心理感受,视线在中心与文字之间来回移动,产生了动感与紧张的印象,对于一个在小比例下显示的购买按钮来说,这显然不是我们想要的印象。

设计中留白的细节

设计中留白的细节
设计中留白的细节

统一文字四周的留白大小,将文字居中放置在色块衬板上,在视觉上变得平稳起来,接下来我们需要调整四周留白的大小,下方将文字放大,边界与字身的面积对比过于悬殊,特别是在小尺寸下显得格外拥挤。(但并不是说在大尺寸下绝对不可以这样做)

设计中留白的细节

留白的空间大小会给人不同的印象,这里纵向以一个字的高度作为留白依据,横向留白两个字的距离。同样的,换成线框也一样,但要注意线框与文字在粗细度上的比例。

设计中留白的细节

设计中留白的细节
设计中留白的细节

设计中留白的细节

设计中留白的细节
设计中留白的细节

虽然说当文字放大后,需要减少留白的面积大小,但在文字过多的段落情况下,为了保证阅读的流畅,需要加大行与行之间的留白面积。以此达到良好的阅读性的目的。

设计中留白的细节

设计中留白的细节
设计中留白的细节

经过调整后,我们将行间距离的留白大小设置为半个字的高度,而字与字之间的距离需要远远小于行间距离才会达到流畅阅读的目的。

设计中留白的细节

随着文字比例的缩小,之前设置好的半个字高度行距在视觉上多少显得有些拥挤了,这种情况我们可以继续加大行与行之间的留白面积,这里修改为一个字的高度。

设计中留白的细节

设计中留白的细节

设计中留白的细节

接下来我们看文字组与文字组之间的留白,上图中的文字组合之间的留白均等,我们没有办法区分出信息的层级。正如上文所说,留白的区分与链接需要根据内容的关联程度划分。

设计中留白的细节

设计中留白的细节

根据文案的内容,将关联性不强的文字组合间的距离加大处理,使信息的区分变得明显,那么留白应该设置成多大呢?根据组合中原有的比例来设置留白大小,会让整个组合给人更加和谐统一的印象。

设计中留白的细节
设计中留白的细节

经过留白的划分后,这个组合就完成了,从宏观角度可以区分为两个组,继续细分可以得到四个大小不同的文字组合。

设计中留白的细节

设计中留白的细节

上图中,主体形象与文字组合的距离很近,多少给人有些拥挤的印象。版面四周留白也显得有些不够均衡,但整体的问题不是很大。

设计中留白的细节

这个画面的结构问题就特别明显了,文字组虽然与主形象拉开了足够的距离,但由于留白面积过大,显得有些脱节了。

设计中留白的细节
设计中留白的细节

由于版心的留白与上文“文字与边界”的概念类似,这里就不再赘述了。

使主体占据版面二分之一的面积,而文字组放置到了右侧空白处,左右的留白大小得到统一,文字组居中放置在了右侧二分之一的位置。调整后的版面在视觉上会更自然一些。

设计中留白的细节

设计中留白的细节

设计中留白的细节

设计中留白的细节

设计中留白的细节
设计中留白的细节

上图虽然在面积上统一了三个元素的留白大小,但在视觉上看,它们的间距留白并不是一样大的。这是视错觉的缘故。

设计中留白的细节

设计中留白的细节
设计中留白的细节

为了修正这种错觉,我们需要忽略元素的一部分面积,以眼睛作为标尺来进行留白间距的调整,这点相当重要。

设计中留白的细节

设计中留白的细节

设计中留白的细节
设计中留白的细节

主形象与文字组之间的留白大小问题不是很大,但文字的组合间距均相等,导致信息传递混乱,我们重点修改文字组中的留白。

设计中留白的细节
设计中留白的细节

通过阅读文案信息得知,这个版面想传递的重要概念应该是产品名称,其次是价格信息,再然后是“夏季新款”等信息。 将文字的层级划分好后,调整留白间距,区分出关联性不强的信息组合。

设计中留白的细节
设计中留白的细节

文字信息梳理清楚后,使信息的传递变得更加有效。这里去掉了空间感不是很强的背景底色,而白色同样能够传递出高级感。

设计中留白的细节

修改前

设计中留白的细节

修改后

设计中留白的细节

设计中留白的细节

设计中留白的细节
设计中留白的细节

这个版面中,留白显得过于零碎,文字信息的划分混乱。没有明确的规律可循,导致版面拥挤,美观度下降。

设计中留白的细节
设计中留白的细节

原设计比例并不美观,这里修改版面的比例,将文字信息重新分配并划分好层级关系。统一版面中的字体选择。在保证版面平衡的情况下编排各个元素的位置。让版面中的留白面积保持完整,并且有据可循。那么这个画面就修改完成了。

设计中留白的细节

修改前

设计中留白的细节

修改后

设计中留白的细节

设计中留白的细节

留白在版式设计的各个环节中都扮演着重要角色,我们本期学习了留白的作用与注意事项,了解了从字距的设置到整个版面的布局中的留白细节,相信大家已经掌握了比例与留白之间的关系,并能够在今后的设计当中加以运用。

理论知识并非刻板绝对的,优秀的版面是建立在成熟的审美基础之上,灵活运用才是关键所在。本期的内容就到这里,我们下期再见!

设计中留白的细节
设计中留白的细节
设计中留白的细节

往期精品内容推荐(点击图片)

设计中留白的细节

 

始发于微信公众号:研习设

通过「BeePress|微信公众号文章采集」WordPress 插件生成