潮州高端建站:设计原则之成分、对称和不对称平衡

2019.08.12 mf_web

77

平衡的构图感觉正确。它感觉稳定,美观。虽然它的一些元素可能是焦点并且吸引你的注意力,但是构图中没有任何一个区域会引起你的注意,以至于你无法看到其他区域。潮州高端建站

平衡构图包括安排正面元素和负面空间,使得设计的任何一个区域都不会超过其他区域。一切都在一起工作,无缝整合在一起。各个部分有助于他们的总和,但不要试图成为总和。

不平衡的成分会导致紧张。当设计不平衡时,各个元素在整体上占主导地位,并且构图变得小于其各部分的总和。在某些项目中,不平衡可能适合您尝试传达的信息,但通常您需要平衡的组合。

幸福不是强度问题,而是平衡,秩序,节奏和和谐。 - 托马斯默顿

身体和视觉平衡

平衡在物理世界中很容易理解,因为我们一直都在体验它。当某些东西不平衡时,它往往会摔倒。在你生命中的某个时候,你可能已经跷跷板或跷跷板了 - 你一边是朋友,另一边是朋友。

假设你们两个大小相同,你就可以很容易地在跷跷板上保持平衡。下面的图像看起来处于平衡状态,两个大小相同的人同样远离跷跷板平衡的支点。

设计原则:成分,对称和不对称平衡

对称平衡的跷跷板。

左侧的人使跷跷板逆时针旋转,右侧的人使其顺时针旋转相等的量。每个人的力量都在不同的方向,它们的总和为零。

但是,如果其中一个人要大得多,那么平衡就会被抛弃。

不平衡的跷跷板


不平衡的跷跷板。

这张图片感觉不对,因为我们知道左边的人不够大,无法平衡右边的人。顺时针力应该大得多,跷跷板应该接触右边的地面。

但是,如果较大的人向中心滑动,那么跷跷板将再次平衡。

不对称平衡的跷跷板
不对称平衡的跷跷板。

在这里,较大的人的力通过更接近跷跷板平衡的支点而减小。我相信你以前一直在跷跷板上,或者至少看过别人玩过的跷跷板,你对发生的事情有很好的认识。

视觉平衡是类似的。体重由视觉重量代替。物理重量作用的方向由视觉方向代替。

作为提醒,下面是视觉重量和视觉方向的定义,但我会将您回到本系列的第四篇文章了解更多细节。

  • 视觉重量。这是视觉元素的感知重量。它可以衡量页面上的任何内容吸引观众的注意力。

  • 视觉方向。这是视觉力的感知方向。如果一个元素有机会根据作用于它的力量移动,那么这就是我们认为元素应该移动的方向。

您不使用仪器来测量力。您不使用公式来计算一切是否平衡。相反,你用眼睛来确定一个成分是否平衡。

为什么视觉平衡很重要

就像在物理世界中一样,视觉平衡是一件好事。这本身就是可取的。不平衡的组合物会使观察者感到不舒服。回顾三个跷跷板图像中的第二个 - 看起来不对,因为我们可以看出跷跷板不应该处于平衡状态。

视觉重量是设计中元素或区域的视觉兴趣的度量。当组合物在视觉上平衡时,它的每个部分都有一些兴趣。视觉兴趣是平衡的,这使观众能够参与设计。

如果没有视觉平衡,观众可能无法看到设计的所有区域。他们可能不会在视觉重量或兴趣较低的区域度过任何时间。这些领域的任何信息都很容易被忽视。

您可以直观地平衡设计,因为您希望平衡合成中的兴趣点,以便观众花时间处理您想要传达的所有信息。

四种平衡

平衡构图的方法不止一种。上一节中的图像显示了其中两个。第一幅图像是对称平衡的一个例子,第二幅图像是不对称平衡的一个例子。另外两种类型的平衡是径向和马赛克。

对称平衡
对称平衡。

当相等的重量在组合物的相等侧上,在中心的支点或轴周围平衡时,发生对称平衡。对称的平衡唤起了形式感(它有时被称为正式平衡)和优雅。婚礼邀请是一个很好的例子,你可能希望对称平衡。

对称平衡的缺点是它是静态的,有时被认为是无聊的。因为一半的成分反映了另一半,所以至少一半的成分是可预测的。

不对称平衡
不对称平衡。

不对称平衡是由于组合物每一面的视觉重量不均匀造成的。组合物的一侧可能含有显性元素,其可以通过另一侧的一个或多个较小的焦点来平衡。一侧的一个视觉上沉重的元素可能会被另一侧的一些较轻的元素平衡。

不对称平衡更具动感和趣味性。它唤起了现代主义,运动,活力和活力的感觉。非对称平衡提供了更多的视觉多样性,虽然它可能更难实现,因为元素之间的关系更复杂。

径向平衡
径向平衡。

当元素从公共中心辐射时,发生径向平衡。抛出石头后,池塘中的阳光和涟漪是径向平衡的例子。保持焦点(支点)很容易,因为它始终是中心。

因为一切都从一个共同的中心辐射出来,一切都通向那个中心,使它成为一个强大的吸引力点。

马赛克平衡
马赛克平衡。

平衡混乱导致马赛克平衡(或晶体平衡)。想想Jackson Pollack的画作。该作品缺乏明确的焦点,这些元素具有统一的重点。缺乏等级导致乍一看视觉噪音。但不知何故,它们都在一起工作。

对称性和不对称性

对称性和不对称性都可以在整个组合中使用,独立于最终平衡,但同时有助于最终平衡。您可以在不对称平衡的构图中使用对称形式,反之亦然。

对称性通常被认为是美丽和协调的; 然而,它也可以被视为静态和沉闷。不对称往往更有趣和动态,尽管不被视为本质上美丽。

对称

有三种主要的对称类型。

当所有内容围绕中心轴镜像时,会发生反射对称(或双边对称)。当您听到“对称”这个词时,这可能是您首先想到的。轴可以是任何方向或方向,尽管它通常是垂直或水平的。

轴一侧的所有东西都在另一侧镜像。在地球表面生长或移动的自然形态会产生反射对称性。人脸和蝴蝶就是例子。

当反射是完美的镜像时,对称性被认为是纯粹的。很多时候它不会是完美的,每一方都会有轻微的变化。这几乎是对称的,它比纯对称更常见。

对称性甚至可以同时在多个轴上发生。例如,组合物的左半部分和右半部分可以彼此镜像,而顶部和底部也彼此镜像。雪花在两个以上的轴上显示出反射对称性。

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

当在空间中的不同位置重复元素时,发生平移对称(或晶体对称)。重复栅栏帖是一个例子。重复创造了翻译对称性。只要基本方向相同,它可以在任何方向或任何距离发生。自然形式通过繁殖发展平移对称性。您可以通过平移对称来创建节奏,动作,速度和动态动作。

蝴蝶是反射对称的一个例子,栅栏柱显示平移对称性,向日葵是径向对称的一个例子
蝴蝶是反射对称的一个例子,栅栏柱显示平移对称性,向日葵是径向对称的一个例子。

对称形式通常被视为图形,而不是地面。对称形式将比类似尺寸和形状的不对称形式承载更多的重量。

对称形式本身传达平衡,但它们看起来太稳定和过于平衡,导致缺乏兴趣。对称形式也会导致被动空间,因为负空间在形式周围是相等的。

不对称

不对称形式缺乏对称形式的平衡,尽管你可以不对称地平衡整个构图。不对称在自然形式中相当普遍:你可能是右手或左手; 招潮蟹有不同大小的爪子; 树枝生长在不同的方向; 云有随机的形状。

不对称在元素之间创建了更复杂的关系,因此它往往比对称更有趣。因为它更有趣,不对称可以用来引起注意。

不对称形式周围的空间更加活跃。创建了不可预测的模式,总体而言,不对称性比对称性更具表达自由度。权衡是它更难实现。

与相似性和对比度相结合的方式大致相同,您可以将对称性和不对称性结合起来,以达到良好的效果。以不对称的方式平衡对称形式,或对称地平衡不对称形式。用随机标记打破对称形式以增加兴趣。对比对称和组合中的不对称,使元素得到更多的关注。

格式塔原则

在整个系列中,我试图指出有多少设计原则来自格式塔原理。我也希望,随着你的到来,你已经看到了不同的设计原则如何建立在彼此之上。

格式塔原则之一专门针对对称和秩序,当然也适用于构图平衡。然而,这并不是唯一适用的原则。

Prägnanz法则预测了对称形式的简单性。焦点和相似性等格式塔原则有助于视觉权重。延续,共同命运和平行主义等原则赋予视觉方向。我还提到,对称形式更可能被看作是数字而不是地面。

我希望通过阅读本系列文章,我们认为格式塔原理导致许多指导我们的设计原则变得更加清晰。我们遵循的设计原则并非凭空而来; 它们源于我们感知视觉环境的心理学。

例子

这是截图的时候了。对于本系列的最后一篇文章,我有比平常更多的网站,我根据四种类型的平衡对它们进行了分组。

正如我在整个系列中重申的那样,我的观点如下。这就是我在这些设计中看到平衡的方式。你可能会看到不同的,这很好。批判性地思考设计比我们对我们的想法达成一致更重要。

对称平衡的例子

Helen&Hard整个网站的设计是对称平衡的。此处的屏幕截图来自“关于”页面,但网站的其他页面也是相似的平衡点。

Helen&Hard的“关于”页面的屏幕截图
Helen&Hard的“关于”页面的屏幕截图。(查看大图)

一切都围绕着页面中心的垂直轴反射。徽标居中,导航栏居中,圆形图像居中,标题居中,三列文本居中。

平衡不是完全对称的。例如,列具有不同的文本量。

但是,请注意页面顶部。徽标和导航栏都居中,但它们看起来并不是以视觉为中心。我的眼睛希望徽标以&符号为中心,或者至少更靠近它。导航栏右侧的三个菜单项比左侧的菜单项多。我的眼睛希望它们是相同的,并希望中心位于“关于”和“人物”链接之间。

我认为将这两个元素移出中心使它们看起来像是视觉中心会更好地平衡构图。

Tilde的主页是另一种对称平衡的设计。像Helen&Hard一样,这里的一切都围绕着沿着页面中心向下的垂直轴旋转:导航,文本,图像中的人。这与向下滚动页面相同。

0蒂尔德的主页截图
Tilde主页的屏幕截图。(查看大图)

与Helen&Hard一样,对称性并不纯粹。一方面,居中的文本行不是镜像。此外,还有一些元素关闭:“Meet the Team”箭头指向右侧,文本位于页面底部,另一个箭头指向右侧。

两者都是行动呼吁,都打破了对称性,引起了对自己的额外关注。注意两个箭头如何使用与其背景形成对比的颜色,进一步增加了这些元素的吸引力。

不对称平衡的例子

Carrie Voldengen投资组合的主页展示了围绕主导对称形式的整体不对称平衡。从整体构图来看,我看到了几种不同的形状。

Carrie Voldengen的网站截图
Carrie Voldengen的网站截图。(查看大图)

页面的质量是一个大矩形,由较小的矩形图像组成。就其本身而言,该网格围绕垂直轴和水平轴对称。它感觉非常强壮和稳定。就其本身而言,它非常平衡,看起来它不会去任何地方。

在右边,一个文本块拉下形状。它由文本和左上角的圆形徽标抵消。两者都提供相对等量的视觉重量作用在相反方向的网格上。

到想象的支点的距离与重量大致相同。右侧的文字整体较大且较暗,但蓝色圆形徽标赋予其一般区域更多的重量。圆圈甚至通过单一颜色连接到网格的左上角。

网格下面的文字似乎悬挂在它上面,而且它本身足够轻,不会使组合失去平衡。

请注意,空间也感觉平衡。左下方,右上方和右下方的区域,包括右下方的一些区域,均相互平衡。左侧区域大于右侧区域,右侧区域顶部和底部有额外空间。

Hirondelle USA主页顶部的图像旋转。我专门抓住了这个截图,讨论了页面顶部建立的不对称平衡。

Hirondelle USA的屏幕截图
Hirondelle USA的屏幕截图。(查看大图)

图像中的列稍微偏离中心,并且它使组合物具有强烈的垂直线 - 这是我们知道的重量很大的物体。左侧的栏杆提供与屏幕左边缘的强大连接。它也感觉到了锚定。很难想象页面上的任何设计元素都会失去平衡。

栏杆上方的文字感觉栏杆支撑; 然而,它也在视觉上平衡了右边男孩的形象。你可能会看到栏杆悬挂在杆子的左侧,拉不平衡,但我认为这个男孩的内在兴趣以及他背后的背景中的深色值可以抵消轨道和文本上的离开并保持平衡。

由于文本的金色线条在图像的左上角和右下角以及页面下方的按钮中重复出现,因此存在一种平移对称感。白色文本也会重复。

径向平衡的例子

的主页Vlog.it具有径向平衡,我希望是从截图中清晰。除了右上角的形状外,一切都围绕着页面的中心旋转,因为三个图像环围绕中心圆旋转。

Vlog.it的屏幕截图
Vlog.it的屏幕截图 (查看大图)

您在屏幕截图中看不到的是页面加载的方式。从左下角到页面中心绘制一条线。从那时起,几乎所有出现在页面上的内容都是围绕中心旋转或从中心辐射出来的,就像池塘中的涟漪一样。

右上角的较小圆圈增加了一点平移对称性和一些不对称性,增加了对构图的视觉兴趣。

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

Opera的Shiny Demos的屏幕截图
Opera的Shiny Demos的屏幕截图。(查看大图)

左上方的Shiny Demos和右下方的Opera徽标相互抵消,并且看起来与文本链接的中心相同。

这是径向平衡不一定需要使用圆圈的一个很好的例子。

马赛克平衡的例子

您可能期望马赛克平衡在网上使用最少,特别是在我提供Jackson Pollack绘画作为马赛克平衡的一个例子之后。在线的例子比您可能意识到的要多得多。

Rabbit's Tale的主页就是一个很好的例子。散落的字母肯定有随机和混乱的感觉,但构图中的平衡有效。

Rabbit's Tale的屏幕截图
Rabbit's Tale的屏幕截图。(查看大图)

两侧(右侧和左侧)的颜色和空间区域接近相等,以便相互平衡。中间的兔子甚至可以作为支点。在你看到它之后它也可能会脱颖而出,但总体而言,这些元素并没有引起人们的注意。

我不会试图找出哪些元素相互抵消,一次一个元素,但希望你同意总体平衡。如果有的话,混乱在右边比较重,但是没有达到平衡的程度。

内容丰富的网站,如新闻和杂志网站也表现出马赛克平衡。你可能会认出洋葱的主页。在屏幕截图中,我删除了页面顶部后面的背景图片。

The Onion的屏幕截图
The Onion的屏幕截图。(查看大图)

有很多值得关注的地方。布局不对称。列的大小不相等。很难确定什么是抵消什么。内容块在内部具有不同的内容量,因此具有不同的大小。没有什么能从公共中心辐射出来。

不同大小的块中有一些混乱和随机性,有些比其他块更密集。由于网站上的故事每天都在变化,每天都会出现不同的混乱。总的来说,它有效。

也许说这是一个马赛克平衡是一个延伸,但我再次认为它是,并且许多网站表现出这种混乱的平衡,虽然有些东西告诉我,我们在网上看到的大部分混乱都没有计划。

摘要

这需要一段时间才能到达,但这完成了我们关于设计原则的系列。我希望你喜欢它,学到新东西,或者发现这个系列是对基本设计原则的好评。

你可以猜到,我认为基本面很重要。我从这个系列开始,展示了所有这些原理是如何从人类感知和格式塔理论中产生的。我没有弥补他们。这些原则基于我们如何感知和解释我们的视觉环境。

例如,我们注意到焦点的一个原因是因为它们与周围的元素形成对比。他们脱颖而出。当你需要快速确定敌人的朋友时,这很重要。这种能力对我们作为一个物种的生存很重要,因此我们的眼睛发展迅速做出决定。

但是,设计原则并不是硬性规定。他们是指导方针。例如,没有一种正确的方式来表示两个元素相似或不同。你不需要遵循任何这些原则,虽然你应该理解它们并有理由打破它们。

潮州高端建站

最新案例

寒枫总监

来电咨询

400-6065-301

微信咨询

寒枫总监

TOP