史上最全平衡构图总结

001

幸福不是强度问题,而是平衡、秩序、节奏和和谐的问题。

   ——托马斯默顿

一种平衡的构图给人感觉是正确的,稳定的和美观的。虽然它的一些元素可能是焦点,吸引你的眼球,但不至于突出到让你看不到其他部分。

平衡构成涉及到合理安排积极元素和消极空间,这样的设计不会让一个区域过分突出于其他区域。所有成分彼此协调,构成和谐的整体。个体为总体服务,但不会试图变成一个独立的整体。

不平衡的组合会令人感到不安。当一个设计是不平衡的,个别元素占主导地位的整体,该组合的效果会小于其各部分的总和。在某些项目中,不平衡对于你要表达的信息来说可能是正确的选择,但一般情况下你想要平衡的构成。

物理平衡与视觉平衡

在物质世界平衡很容易理解,因为我们无时无刻不在体验它。当某个东西是不平衡的,它往往会倾倒。也许你在你生活中的某段时间曾玩过跷跷板——你在一边,一个朋友在另一边。如果你们体重大小差不多一样,你们很容易地平衡跷跷板。下图看起来是平衡的,有两个同样大小的人距支点同样距离,跷跷板达到平衡状态。

002

对称平衡的跷跷板

左边的人使跷跷板逆时针旋转,而右边的人使其等量的顺时针旋转。每个人的力量都作用在一个不同的方向上,他们的总和为零。如果其中一个人要大得多,平衡就会被打破。

003

不平衡的跷跷板

这张图片感觉不太好,因为我们知道左边的那个人太小,不足以和右边的人平衡。顺时针的力量要大得多,而且跷跷板的右边应该接触地面。然而,如果更大的人滑向中心,跷跷板将恢复平衡。

004

不对称平衡的跷跷板 

这样,大人的作用力通过靠近支点而降低,使跷跷板达到平衡。我相信大家曾玩过跷跷板,至少看别人玩过,所以大家应该很容易理解这个道理。视觉平衡与此类似,其中体重被视觉重量所取代,重力的作用方向被视觉方向所取代。

下面是视觉重量和视觉方向的定义。

视觉重量这是一个视觉元素的感知比重,是衡量页面上有多少东西会吸引眼球的一种方法。

视觉方向:这是一个视觉力量的感知方向。是我们认为一个元素根据作用于其上的力量应该移动的方向。

我们不用仪器测量,不使用公式计算。而是用眼睛来判断一个组成是否平衡。

为什么视觉平衡是重要的

就像在物质世界一样,视觉的平衡是一件好事,是令人舒服的、自然的状态。一个不平衡的组成看着让人不舒服,比如,回头看看第二张跷跷板的图片,看起来就是不对的,因为我们可以识别跷跷板不应该是平衡的。

视觉重量是一个元素或区域在设计中的视觉比重的度量。当一个组合在视觉上是平衡的,它的每一部分都占有一定的比重。视觉比重的平衡,使观众专注于设计所表达的东西。

如果视觉比重不平衡,观众可能看不到设计的所有内容。在视觉重量或比重较少的部分,他们可能不会花一点时间,这样的话,在这些部分的任何信息都很容易被忽视。我们应该让设计在视觉上达到平衡,因为我们想平衡作品中的各个点,让观众把时间花在所有我们想传达的信息上。

四种平衡

平衡一个组成有很多方法,在上一节中的图像显示了其中的两个。第一个图像是一个对称平衡的例子,第二个是一个不对称平衡的例子,其他两种类型的平衡是径向平衡和马赛克平衡。

005

对称平衡

对称平衡存在于一个权重相等,两边对等的组成中,围绕一个支点或中心轴达到平衡。对称的平衡会给人感觉正式(有时被称为正式的平衡)和优雅,婚礼邀请函就是一个很好的例子。而对称平衡的缺点是,它是静态的,有时被认为是呆板乏味的。由于一半的组成反映了另一半,至少有一半的组成是相当可想而知的。

006

不对称的平衡

不对称平衡,在构图上每一侧有不平等的视觉重量。该组合的一侧可能含有一个占主导地位的元素,在另一侧上由两个或更多不那么聚焦的点构成。一个视觉上很重量的元素可能是由几个较轻量的元素与之平衡。

不对称的平衡是更为动态和有趣的。它激起了现代主义、运动、能量和活力的感觉。不对称的平衡提供了更多的视觉变化,然而它可能更加难以达到平衡,因为元素之间的关系是更为复杂的。

007

径向平衡 

径向平衡,各元素从同一个中心辐射而出,例如,阳光的光线和石头扔进池塘时泛起的涟漪。保持一个焦点(支点)是容易的,因为它总是中心。一切都从一个中心辐射,一切也指向中心,这使得中心成为一个强大的吸引点。

008

马赛克的平衡

马赛克平衡(或晶体平衡),来自平衡的混乱。想想Jackson Pollack画作。这种构成组合没有明显的焦点,所有元素共享一个统一的重点地位。乍看,缺乏层次的结构会产生视觉噪声。然而,总得来说,它们可以共同协作有效传达信息。

对称与不对称

单独利用对称或者不对称都可以使作品达到最终的平衡。你也可以在一个不对称平衡的构图使用对称的形式,反之亦然。对称通常被看作是美丽和谐的,但是,它也可以被看作是静态和沉闷的。不对称往往是更有趣和动态,尽管没有被视为本质上的美丽。

对称性

主要有三种类型的对称性。

反射对称(或双边对称),所有元素都围绕一个中心轴。它可能是你第一个想到的,当你听到“对称”这个词时,中心轴可以是任何方向或方位,不过它通常是垂直的或水平的。

轴的一侧上所有东西都在另一侧镜像显示。在地球表面生长或运动的自然形态发展了反射对称性,例如人的脸和一只蝴蝶。

当反射是一个完美的镜像图像时,被认为是绝对的对称性。大多数时候都不会是完美的,每一方都会有细微的不同。这是近对称的,它比绝对的对称更为常见。对称性甚至可以同时存在于多个轴上。例如,一个组成的左边和右边可以互为镜像,而上部和下部也互为镜像。例如雪花,在多个轴上呈现反射对称性。

旋转对称(或径向对称),所有元素围绕一个中心旋转。它可以是任何角度或频率,只要有一个共同的中心。生长或垂直于地球表面的自然形态发展了旋转对称性,向日葵的花瓣是一个例子。没有反射的旋转可以用来显示运动,速度或动态动作,想想汽车运动时旋转的车轮。

平移对称性(或晶体对称性),元素在空间中的不同位置重复。重复栏是一个例子,这种重复就创造了平移对称性。它可以发生在任何方向上,或在任何距离,只要基本方向是相同的。自然形态通过复制发展平移对称性。通过平抑对称,你可以创造节奏、运动、速度和动态动作。

009

蝴蝶是一个反射对称的例子,篱笆柱显示翻译的对称性,而向日葵是一个径向对称的例子 

对称形式通常被看作是图形,而不是背景。一个对称的形式将比一个类似大小的和形状的非对称形式占据更多的比重。对称形式传达平衡本身,但他们可能会表现得太稳定,太平衡,以至于缺乏趣味性。同时,对称形式会产生被动空间,因为负空间是平等的形式。

不对称性

非对称的形式,缺乏对称形式的平衡,即使可以不对称地平衡整个构图。在自然形式中不对称更为常见:也许你是右撇子或左撇子;招潮蟹有不同大小的爪子;树枝生长方向不同;云有随意的形状。

不对称创造了元素之间更为复杂的关系,所以它往往比对称更有趣。因此,不对称可以用来吸引人们的注意力。不对称形式周围的空间更生动。不对称性可以创造出各种变幻莫测的模式,总之,相比对称性,它让你有更多的表达自由。但缺点是,这是很难实现。

与相似和对比的配合方式一样,你可以结合使用对称性和不对称性,以达到良好的效果。用不对称的方法使对称形式达到平衡,或者用对称的方法使不对称形式达到平衡。用随意的标记打破对称形式来增加趣味性,让对称和不对称在构图中形成对比,这样使元素得到更多的关注。

格式塔原则

在这个系列中我尝试指出格式塔原则产生的设计原则。我也希望,随着你的阅读,你已经看到了不同的设计原则如何建立在彼此的基础上。

一个格式塔原则特别强调对称和秩序,当然也适用于组成平衡。尽管这不是唯一 一条适用的原则。Prägnanz法则揭示了对称形式的简约。格式塔原则如焦点和相似性有助于增加视觉重量,延续性,同步和平行原则揭示视觉方向。我还提到,对称形式更可能被视为图形,而不是背景。

用格式塔原则衍生的诸多设计原则指导我们的设计,希望阅读本系列文章之后,大家能对这个思想有更加清晰的认识。我们遵循的设计原则并不是凭空产生的,它们是从我们感知视觉环境的心理方法中得出的。

实例

接下来是截图。这一系列的最后一篇文章,我准备了比往常更多的网站,并按上述四种平衡类型分组。正如我在整个系列中反复提到的,以下是我的意见。这是我在这些设计中认识平衡的方法。大家可能会有不同的看法,这样很好。批判性的看待设计比我们彼此认同更重要。

对称平衡的例子

Helen & Hard整个网站的设计是对称平衡的。这里是“关于”页面的截图,但网站的其他页面也是同样的平衡。

010

海伦和硬盘的“关于”页面截图 

所有内容以页面中心为竖轴对称。Logo居中,导航栏居中,圆形图像居中,标题居中,三列文本也是居中排列。其平衡并非完全对称,比如列有不同长度的文本。然而,注意页面的顶部。Logo和导航栏都是居中的,但他们看起来并没有在视觉上居中。我的眼睛想要Logo以&符号为中心,或至少接近它。导航栏右边的三个菜单项的字母要比左边三个的字母多。我的眼睛希望他们是一样多的,并希望中心是在“about”和“people”链接之间。我认为移动这两个元素从的位置使他们在视觉上看起来居中,会使布局的平衡感更好。

Tilde的首页是另一个对称平衡的设计。和Helen & Hard一样,这里的内容以垂直中心为轴对称:导航,文本,图像中的人。向下滚动页面,也是一样的。

011

Tilde对波浪线的首页截图

和Helen & Hard一样,Tilde的首页也不是绝对的对称。比如,它中心的文本就不是对称的。另外,还有几个元素也是不对称的:“Meet the Team”所在的箭头向右,而页面底部的文本所在又是一个向右的箭头。都是指引动作,都打破了对称性,都吸引用户对自身的特别关注。注意这两个箭头如何使用颜色与它们的背景形成对比,进一步增加这些元素的吸引力。

不对称平衡的例子

Carrie Voldengen的主页在明显的对称形式周围整体表现出不对称平衡。通览其整体结构,我发现几个离散的形状。

012

Carrie Voldengen的网站截图 

该页面的主体是一个大矩形,由一些较小的矩形图像网格组成。就网格本身而言,它在水平和垂直方向都是对称的。它给人感觉非常强大而稳定。它本身是非常平稳安定的,看起来不会往任何移动的倾向。

在右边,一个文本块拉下的形状。与左上角的文字和圆形logo相抵消。双方提供了一个相对平等的视觉重量,以相反的方向分别作用于网格上。两者到假想的支点的距离和重量都是差不多的。右边的文本整体更大一点,颜色更深疑点,但蓝色圆形logo提供了比一般区域更重的比重。该圆圈甚至通过同一颜色连接了网格的最左上角。

网格下面的文本似乎悬挂的,它本身足够轻量,没有破坏整个构图的平衡,注意空间也是平衡的。左边向下的空间,和顶部往右的空间,以及右边往下的空间,包括右下角的一点空间,都彼此平衡。左边的区域比右边的区域大,但右边有顶部和底部的附加空间。

在Hirondelle USA首页顶部的图像是旋转的。我用这个截图来具体谈谈在页面顶部建立的不对称平衡。

013

Hirondelle USA的截图

图中,文本列稍微偏离了中心,靠一个强大的垂直线固定整个布局—— 一个我们知道其比重很大的物体。左边的栏杆与屏幕左边缘产生了一个强大的连接,它给人感觉非常稳固,很难想象页面上的那个设计元素会失去平衡。

栏杆上方的文本感觉有栏杆作为支撑,而且,它在视觉上也被右边男孩的图像平衡掉。你可能会认为的栏杆在使左极点下坠,但我认为男孩这边以及他身后背景里的东西抵消了栏杆和左边的文本的比重,保持了事物的平衡。图中有一种平移对称性的感觉,如在图像的左上角的金黄色条,在图片右下部的文本,以及在页面更下方的按钮重复出现。还有,白色文本也是重复的。

径向平衡案例

Vlog.it 的主页具有径向平衡性,截图已清楚地呈现。除了在右上角的形状,像三个环上的图像围绕中心旋转那样,所有元素都围绕着页面的中心。

001

Screenshot of Vlog.it

在截图中你看不到的是页面加载的方式。左下角到页面中心有一条线,从这一点开始,所有元素在页面上出现,通过围绕中心旋转,或由它辐射,如同池塘泛起涟漪。在右上角的小圆圈增加了一点平移对称性和一些不对称性,增加了构图的视觉趣味。

Opera闪亮的演示主页不是圆形的,但是文本链接都来自一个共同的或接近共同的中心。很容易想象整个形状是围绕中间的一个正方形或者一个四方交汇的区域而旋转。

015

Screenshot of Opera’s Shiny Demos

闪亮Demo的标题在左上而Opera的标志在右下角,二者相互制衡,也和文本连接一样看起来由同一个中心辐射而出。这是一个证明径向平衡不一定要使用的圆圈的很好的例子。

马赛克平衡的例子

你可能以为马赛克平衡在网页中使用最少,特别是在我以Jackson Pollack画作为马赛克平衡的例子之后。其实,网上有许多比你想象的要多很多的例子。Rabbit’s Tale的主页就是一个很好的例子,散落的字母给人随机的混乱的感觉,但作品构图是平衡的。

016

Screenshot of Rabbit’s Tale

左右两边有近乎相等区域的颜色和空间,彼此平衡。在中间的兔子甚至起到一个支点的作用。在你看到它后,可能感觉它会比较突出一点,但总体而言,各元素没有单独凸显自身。我不会试图一 一找出哪些元素彼此制衡,但希望你同意,这里是一个整体的平衡。如果有什么的话,那就是右半部分的混乱所占比重稍微大了一点点,但还没到破坏平衡的程度。

内容繁多的网站,如新闻和杂志网站也呈现出马赛克平衡。你可能会认出The Onion的主页。在截图中,我已经删除了页面顶部下的背景图像。

017

Screenshot of The Onion

这里有很多要查看的。布局不是对称的,列与列的尺寸不相等,很难确定什么与什么持衡。每块区域内部有不同量的内容,因此,每一块都是不同大小的,也没有什么元素是从一个中心辐射排布的。不同大小尺寸的模块之间有一点混乱和随机性,有的模块比其他模块更密集。由于网站上的故事每天都在变化,每天都会出现一个不同的混乱。总之,这种布局很有效。

也许说这是一个马赛克平衡有点牵强,但我还是认为它是。并且有许多网站呈现出这种混乱的平衡,尽管我感到,我们看到的许多网上的混乱并没有被刻意规划过。

总结

写到这里确实花费了不少时间,但这完结了我们这一组的设计原则。希望大家能好好利用,学到一些新的东西,或者发现它们是对基本设计原则的一个很好的回顾。

正如大家可以猜到的,我认为基本原理是重要的。我开始这个系列是为了展示这些原则是怎样从人类感知产生,并发展形成理论。我没有对它们进行捏造。这些原则都是以我们感知和阐释视觉环境的方式为基础实实存在的。例如,我们注意到焦点的一个原因是因为它们与周围的元素形成了对比。它们因为不同而突出。这一点是很重要的,当你需要快速辨别利与害。这种能力对我们作为一个物种的生存是非常重要的,所以我们的眼睛到为了迅速作出判断而发生进化。

但是,设计原则不是固定而快捷的规则,它们是指导方针。比如说,没有一种正确的方法来表达两个元素是相似的或不同的。你不需要遵循任何这些原则,然而你应该理解他们,而且有一个打破它们的理由。再次表示,我希望大家喜欢这个系列的文章,也更希望本系列内容能让大家在视觉传达的设计中有更多的控制权。

2 1 收藏 评论

相关文章

可能感兴趣的话题



直接登录
跳到底部
返回顶部