浅谈平面设计师必备的视觉层次指南

5.间距:让你的布局平衡、流畅以及焦点明确

通常,在设计中最容易忽视的却很重要的原则是白色区域的大小和留白手法。当你在你的设计布局中没有提前为留白区域做准备,尤其是你努力去填充尽可能多的信息的时候,很大可能你最终会得到一个乱七八糟、混乱不堪的设计。这是因为留白在你的设计中是能够帮你分离组织元素,让其看起来有条理,布局平衡的必要元素。

你可能之前看到过:一个网站或传单被信息、文字和图像塞得满满的,你甚至不知道你应该从哪开始看起。不要创造出像那样在浏览顺序上杂乱无章的设计,这样会赶走你的来访者。

时刻计划着空白区域,这是至关重要的事,如:

·让浏览者的眼睛有一片休憩的区域以及畅游设计的路径。

· 将版面分为几部分(这样做一方面能保持良好的间距,另一方面是能减少空间,从而把相关内容连接的更紧密)

David Salgado 和 Mariana Perfeito两者在编辑设计上,,版面的各个部分之间都留下了大量的空白区域,同时将有关联的内容组合在一起。最终得到一个整洁并平衡式的设计。

浅谈平面设计师必备的视觉层次指南,PS教程,

David Salgado 和 Mariana Perfeito

· 分离焦点

出自Design Womb的这种真空包装设计运用了丰富的色彩,花纹的背景,围绕在该产品品牌名称的白色区域周围,直接引导着你的焦点]

浅谈平面设计师必备的视觉层次指南,PS教程,

Design Womb

06.构图:确定你的设计结构

你能通过我们之前提到的一些技术方法制作的布局来引导访问者,但是,大部分设计更受益于整体结构或者组织规律——这就是我们熟知的构图。

艺术家已经使用构图技巧已经有几个世纪了,它们大部分还在今天使用。让我们来看一看一些最常用的构图方法。

三分法:三分法是一种动态的构图方法,你的焦点预先不是放在中心点上。

相反,这条规则把整体布局分成一个网格,(三条相同距离的水平线和三条相同距离的垂直线)然后,把焦点放在一条线上,或者放在四个相交点其中一点上。

浅谈平面设计师必备的视觉层次指南,PS教程,

Cover Design Studio

奇数法则:这个法则告诉我们3往往更好。一个创意的周围有一个奇数的对象(或许焦点被其他两个或者四个项目围绕,如下)总是比一个偶数在视觉上看起来更有趣和令人高兴。

浅谈平面设计师必备的视觉层次指南,PS教程,

Charlotte Cheetham/Manystuff

隐藏的韵律:这会是一个非常有效的指明重要信息和提供简明设计方案的技巧。怎样创造这种具有动感的设计?视觉导向线。

导向线不必是实实在在的线条(即使它们可以是实实在在的线条)。它们或以实物、形状、重叠式设计元素、正负形交叠的状态出现,或者其余任何能创造一种定向运动的形式。

最常见的除水平的、垂直的,对角的导向线以外,还有S曲线、Z字形线。Z字形线性版式是一种普及的网页布局基础,是利用"Z"的形状为阅读模式的方式。

具体应用方式可参考下图:

浅谈平面设计师必备的视觉层次指南,PS教程,

Jake Hill

浅谈平面设计师必备的视觉层次指南,PS教程,

Vince Frost

若想得到创造动态成分从而给你的设计以完美的线条流动感的灵感,推荐阅读《设计原则:掌握创造作品的流程及节奏》

如何检验你的视觉层次效果

我们希望这篇文章的指引能够让你明白建立明确的视觉层次在你的设计项目中的重要性。

我们在文章中提及很多的方法,都是用来强调你设计中的某些部分的不错的工具。但是,提醒一句:过多的强调点很容易会破坏整个视觉的层次效果。

视觉强调不能使用在过多的设计元素中。否则,所有的东西都变得一样了。当所有的东西都被突出,那也就意味着没有一样东西能够被突出。层次建立的基础是要强调某些元素,同时削弱某些元素。

但是,如果你不确定你的视觉层次是不是你想要的效果,那怎么办呢?有一个简单的办法,来随时检验你的设计效果,不需要任何特别的工具。就是使用可靠的“眯眼测试”:

靠后坐,远离一点你的电脑。然后眯眼看你的设计,这样所有的细节都变得模糊,你只看见大概的轮廓。观看什么东西被突出?突出的部分是不是你想观众第一眼关注的东西?如果是,那么你的视觉层次是不错的。如果不是,那么可能需要返回设计中,做一些别的尝试来调整。

现在,你已经拥有了一些技巧和手法去建立一个吸引人的视觉层次了,去好好的使用他们吧~祝福你们在设计中找到自己永恒的快乐。

我们是DATS翻译小组,我们爱设计爱英语,通过翻译设计的文章共同学习进步,虽然我们还有许多不足,但是只要把每个人的微小的力量聚集起来,总有一天会发出耀眼的光芒~

本文翻译由DATS翻译小组成员 MOMO、Nierkou、NoNo“、Backet、大果只、最光阴、八重、chenhan、IAN_000、bear 、suyan266共同翻译完成。

翻译校对:杯中的海

视觉设计:喵酱紫