美文网首页设计理论基础设计
设计原则:平衡与对称关系(七)

设计原则:平衡与对称关系(七)

作者: Charles_UI | 来源:发表于2017-01-09 22:16 被阅读703次

    一个有平衡感觉的组合,给人感到稳定和美观。虽然其中有一些元素只起到联络节点的作用,可是这个组合却可以足够的吸引我们的眼球并忽略其他的区域。

    在设计中没有一个平衡组合不包括着积极因素和消极空间,一切的运作空间都是紧密结合形成一个有机的整体,各个部件的集合就是总和,却又形成各异。

    不平衡的组合会导致紧张。当设计的元素处于不平衡的状态时,那么各个部件将支配着整个组合,使得整体小于各个部件的总和。当然在有些项目中,可能需要传达不平衡的信息,但是大多数的都是需要平衡状态。

    “幸福不是一种强度,而是平衡、秩序、节奏和和谐。”– Thomas Merton

    物理平衡和视觉平衡

    在现实世界中平衡很容易理解,因为我们每时每刻都在经历着这些。例如下面的图中似乎是平衡的,有两个大小相等的人,且处于跷跷板的两端,距离中心点也是等距。

    左侧的人使跷跷板向下移动,而右侧的人与之相反,那么两人作用力不同,但是总体上的和是零。

    如果说其中一端的人要大得多,那么就会将另一端的人甩出去。

    就像上面图片中一样,感觉上的不平衡,因为左边的人不够足够大,来平衡右边人的重量。所以跷跷板会向右倾,接触到右侧的地面。

    然而,如果右侧较大的人向中心滑动一段距离,那么跷跷板将会再次平衡。

    在这里较大人的力由于靠近支点位置就会减少右边的力,我相信在这种情况下,相比较于前面的情况要感觉舒服一些。

    视觉平衡也是类似的,而物理重量在一般情况下可以替换成视觉权重,其物理重量作用力的方向也可以由视觉方向来替代。注意,下面是视觉权重和视觉导向的定义,我们也将会回顾系列文章的第四篇的详细内容。

    (1)视觉权重:通过视觉感知元素的权重占比,也是作为在页面中吸引用户眼球的量度。

    (2)视觉方向:视觉权重产生的一种感知力度的方向,我们会用其作为移动元素的方向。

    以上两者是无法使用仪器来测量的力度。也不能使用一般的公式来精确的度量,相反,我们最好的方法就是使用眼睛来处理之间的平衡。

    为什么视觉上的平衡非常的重要?

    正如物理世界中一样,视觉平衡是一件好事,甚至可以替代自身的物体,而不平衡的物体组合将会使用户感到不舒服。回头看看跷跷板案例中的第二张图片就是这样,按照人们的正确理解,跷跷板就应该是平衡状态更加自然舒服一些。

    对于视觉权重的一些解释是在设计中一个元素或是区域在吸引点的控制方法,当元素中一个是平衡的状态时,那么其每一个部分的吸引点都应该是平衡的,所以视觉吸引点也应该是平衡的,这样的设计才会使得用户感觉舒服。

    反之,如果不处于视觉平衡的状态,那么用户就不会看到在设计中各个区域的兴趣点。对于这些区域用户也不会花太多时间来详细查看,那么这部分就很容易被忽略掉。

    因为要在设计中平衡这些对用户感兴趣的兴趣点,所以就要让用户花时间来知道并理解我们要传达的信息,那么就要使得设计在视觉上处于平衡状态。

    四种类型的平衡

    对于组合元素的平衡方法有很多,在上面的介绍中就提到了两个,第一个是平衡对称的,第二个不是,其他类型就是径向和马赛克。

    当组合物等边时,就会在视觉权重上是对称平衡的,而且还要围绕在中心的支点或轴平衡处发生。对称平衡的形式可以唤起用户的情感(有时也称为正式的平衡)和体验,例如在婚礼邀请上,我们就很希望是对称平衡的组合物。

    对称平衡的缺点就是:它是静态的,有时也被视为一种乏味的。因为这个组合反射一半是相同的,那么就知道一半是可以预测的。

    不对称平衡,从两侧不平衡的视觉权重造成的结果。该组合物的一侧可能是主导元素,而另一侧是一个较小的焦点元素来起到平衡的作用,另外一侧较重的元素也可以通过多个较轻的元素来平衡。

    不对称平衡是更加具有活力的和有趣的。它会唤起我们现代主义中运动、活力、能量的感觉。另外还能提供多种不同的视觉风格,可是由于元素之间的关系比较复杂,所以实现就较为困难。

    径向平衡

    径向平衡中的元素会从一个共同的中心点辐射出去。就像太阳光线和将石头扔向池塘中引起的涟漪波纹一样,保留中心点(支点)是很容易的,因为总是位于中心的。由于一切都是中心辐射,所有就导致中心位置是吸引力最强的区域。

    马赛克平衡

    马赛克平衡(或结晶平衡)是平衡中产生混乱,杰克逊·波洛克的画作就是这种风格。该组合物缺乏明显的焦点,而各个元素共享统一的重点,另外由于缺乏层次,就导致视觉噪声,因为所有元素都在一起。

    对称与不对称关系

    在整个组合物中无论是对称性还是非对称性都是相互独立又相互联系,最后共同达成平衡。我们还可以使用对称形式来使用不对称的均衡组合,反之亦然。

    对称通常被看作是美丽与统一,然而也会被看作静态的和平淡的。不对称往往是更加有趣的和动态的,尽管在本质上不一定美丽。

    对称的三种类型

    轴对称

    当一切元素都是围绕一个中心轴镜像时才发生(两侧对称),这也可能使我们觉得对称的轴可以是任何方向,但是往往是垂直的或水平的。

    在轴线的一侧都会在另一侧被镜像反射,例如横跨地球表面的生长和自然演化的轴对称:人脸和蝴蝶。

    当反射是一个完美的镜像时,那么这种对称就是绝对的对称,反之由于大多数不是完美的,所以就是相对对称,有稍微的变化,而且常见。

    对称性可以在多个轴或同一时间发生。例如一个组合物的左侧和右侧的一半都是一样的互为镜像,而且底部和顶部也是。

    旋转对称

    当一切都是围绕一个共同的中心发生时(或径向对称)。那么它就可以以任何的角度或频率发生,但是只有一个共同的中心点。该增长或移动垂直于地球表面的自然形态发展旋转对称,向日葵的花瓣就是一个例子。无反射旋转可以被用来显示运动,速度或动态作用,想想一个移动的车轮。

    平移对称

    元素在空间中不同地点发生了重复(或晶体对称性),其中重复栅栏柱就是一个例子。重复创建平移对称性,它可以发生在任何方向或任何距离,只要基本取向是相等的。通过自然的形式发生平移对称性,也可以通过平移对称性来创造节奏、动作、速度和动力的作用。

    该蝴蝶是轴对称的一个例子,栅栏柱显示平移对称性,而向日葵是径向对称的一个例子

    图中的对称是相对于地面中,另外对称的形式相对于同样尺寸和形状,要携带更多的重量。对称的形式要传达的是一种平衡,但往往又会显得过于稳定和平衡,导致缺乏兴趣,也可能导致被动的空间,因为负空间等于周围的所有形式。

    非对称

    非对称的形式缺乏对称形式的平衡感,虽然整个组合处于非对称的平衡状态,另外非对称状态是非常自然的形式,这就好比近视于左右手,还有潮蟹的不同的爪子,树枝的生长的不同方向,云朵形状的随机变化。

    非对称会造成元件之间的更为复杂的关系,但是往往相对于对称性更加有趣。因为是更加有趣的,所以可以作为提醒大家注意的一种方法。

    左右对称形式的空间是较为活跃的,而使用不可预知的模式创建,使得总是比对称相比更加的自由,但是需要权衡的是这往往是很难实现的。

    在设计中使用了相似性和对比度,然后结合对称性和非对称性,最后呈现出来的效果将会更加的完美,例如平衡非对称模式、双向对称模式,对称和非对称的平衡方式。打破这种对称形式和随机标记会增加情趣,对比对称和非对称的构图方式,去探索哪种方式的内容会更加的得到关注。

    格式塔原则

    在本系列中,我一直努力指出这么多设计原则是如何从格式塔原则中产生,更希望能一起看到如何使用设计原则来建立不同的元素以及之间的关系。其中格式塔原则就是针对对称和秩序的,也是适用于组成平衡,虽然这个原则不能适用于所有。

    对称形式可以由简单的普雷格郎茨原则来实现,例如联结节点和相似性有助于提升视觉权重,还有延续、共性、平行等视觉方向。还提到对称形式更加容易被视为图而不是作为背景。

    我希望这些原则可以很好的指导我们的设计原则,相信通过阅读本系列文章将会更加的清晰。设计原则也并不是凭空出现的,而是源自于我们看待环境时视觉对心理上的一些感知。

    案例

    下面的截图中,由于这是本系列的最后一篇文章,相比较于平时寻找了更多的网站案例,并使用了前面提到的四种类型来平衡组合它们。

    正如我在本系列中重点的一样,在接下来的所有案例中都用到了设计中平衡理论,在案例中也许会看到不同的地方,而这也是设计中我们需要考虑到的,我们觉得什么是最重要的。

    对称平衡的例子

    Helen & Hard的整个网站设计就是一种对称平衡的方式,下面的截图是“关于我”的页面,而且其他网站也使用了这样的均衡设计。

    一切元素区域都是采用竖直轴面向下,例如logo处于中间位置,导航栏居中,图形图像也是居中,标题居中和文本的三列也是居中的。但是文字区域的结尾处不居中的,那是根据不同的内容文字量来决定。

    另外请注意页面的顶部,logo和导航栏居中,但是并没有出现在视觉上居中的位置,我的视线而是在导航栏的中心logo接近底部的位置。导航栏右侧的三个菜单相比较于左侧的字母要更多,而我们的眼睛是希望他们是一样的,并且是居中,与“关于”和“人”等比间距。所以我个人觉得如果移动两个像素出来,将会使得它们的视觉中心会更好的平衡组成。

    网站symmetrically是另一个设计对称的平衡案例,就像上一个网站一样,这里的一切也都是围绕着中心垂直轴:导航、文字、人物形象,向下滚动也是这样。

    也是不绝对的对称,文字居中但不像镜像,另外一对箭头的指向都是向右,并在页面的结尾处的箭头是指向文本区域的。两者都是有联系方式,这样可以加倍注意到自己的效果,还有两个箭头是如何使用颜色并与背景形成强烈的对比,进一步增加这些元素的吸引力。

    非对称平衡的例子

    Carrie Voldengen主页上周围的元素和主导区域的对称形式在整体上是不对称的平衡。纵观整个组合物,还可以看到几个离散的形状。

    网页是由组成较小的矩形图像和较大的网格包围,就其自身而言这个网格有两个垂直以及多个水平轴组成,感觉非常稳定和有冲击力,也是看起来非常的平衡而不会超出任何其他的地方。

    在右侧的文本块比较靠下,正好与文字和左上角的圆形logo抵消,提供了在相反方向上的一种视觉平衡。

    想像一个支点在距离相同的权重,相比较于整体,右侧的文本显得更加的大和暗,但是蓝色的圆形logo赋予更大的权重,以及大部分的区域。这个圆通过单一的颜色连接到页面的左上角。在网格下面的文字,似乎它只适合自身的查看作用,而失去平衡。

    另外要注意的是整个空间感觉是平衡的,在顶部和左侧以及右侧的区域是彼此平衡的,而左边的空白区域相比较于右边的要大一些,但是在页面的顶部和底部有较多合适的空间。

    网站Hirondelle USA的主页是旋转对称的,我会借助这个截图来详细说明这种非对称平衡案例的使用。

    图像中的垂直处稍微偏离中心位置,并且和锚点之间有一种垂直关系,这时我们感觉物体重了很多,在左侧的栏杆与屏幕的作边缘紧密连接,使得它感觉有一种依靠,很难想象网页中的设计元素失去平衡将会怎样?

    栏杆上面的文字感受到栏杆的支持,并与右侧的男孩保持一种平衡关系。另外在左侧的的栏杆较为复杂的图形,而右边男孩的背后较深的颜色正好可以很好的平衡之间的关系。

    而平移对称性为文本中重复在左上角的金线和图像右下角,以及网页中的按钮,使用白色的文字作为重复。

    径向平衡的例子

    网站Vlog.it就是呈现一种放射状的平衡,可以从截图中轻松感知到。比如在右上角的形状等,一切都是围绕页面的中心,图像中三个环围绕着中心 圆旋转。

    由于截图的原因,不能看到页面是如何加载的,描述一下是有一条线从左下角刀页面的中心绘制。从这以后,页面上会显示一个围绕中心点并成辐射状旋转,就像池塘中的涟漪一样一切源于一个点。另外在右上方的一个小圆圈有一个小的平移对称性,来提高页面中的趣味点。

    Opera的Shiny Demos主页上不是圆形,而是文本链接,它们似乎是源自于一个共同的或接近共同的中心点,这很容易想象中间的区域和几个正方形,而形成整个形状的旋转。

    Shiny Demos左上角是歌剧院的logo,有右下角的logo相互抵消,并以中心点为支点来辐射。这是一个使用径向平衡,但又没有使用圆的一个很好例子。

    马赛克平衡对称

    我们能够预想到马赛克平衡在网上用得最少的,尤其是在我提供的杰克逊·波洛克的画作为平衡的一个例子。但是还是有更多的例子只是我们可能没有意识到而已。

    网站Rabbit's Tale就是一个很好的例子,又很多散落的字母是随机的和混乱的。但是这个组合物也是平衡的。

    页面的两侧使用渐变的灰白色,以及相等的面积。而中间的兔子是作为支点,在看过之后会脱颖而出,但是总体元素的呼吁我们关注自己。

    在这里我不会去揣测那些元素对应着哪些元素,但是它们之间形成一种整体的平衡,如果说有的话,那就是在右边的偏重,但是不能摆脱平衡点。

    而对于内容为主的网站,如新闻和杂志的网站上展示马赛克平衡就较好,也许我们都认识这个网站 Onion,在截图中,我已经去除了顶部的背景图像。

    这里面有很多的布局是不对称的,列的大小也是不相等的,很难确定哪些是平衡元素或区域。另外还使用了不同的尺寸和数量,也没有一个共同的中心辐射。在块与块之间有很一些混乱和随机性,相比较一些其他的密集区域。因为网站上的故事每天都会变化,每天都会处在混乱中。

    也许这是一个马赛克的平衡,认为很多网站都表现出这种混乱平衡,虽然网站上也告诉我们很多的信息,在网站上的信息也是混乱的。

    总结

    到这里我们花了很多的时间来讨论设计原理,现在希望你们可以喜欢这系列的文章,并从中可以学习到新的东西,或者是好好复习这些基本的设计原理。

    正如你想到的那样,这些基本知识是非常重要的,在我开始讲所有系列在格式塔原则中展示的时候,从人类的感知基础,并提出我们是如何看待和理解这些视觉环境。例如,我们会注意到一个焦点元素,是因为它和周围的元素形成对比,使得它们看起来就不同,还有我们需要快速的确定敌人和朋友是很重要的,这种能力也作为我们的生存本能,所以眼睛可以迅速做出判断。

    然而,设计中没有硬性的规定,这系列提到的都是作为指导方针。两个元素是相同和不同的,没有一个正确的方式。所以也就不需要遵守任何这些原则,但我们应该要理解这些原则,并有理由来打破这些规则。

    最后,我希望这系列能够帮助到你,更希望在该系列的文章中对你们在视觉传达方面有更多的控制权。

    作者:Steven Bradley

    https://www.smashingmagazine.com/2015/06/design-principles-compositional-balance-symmetry-asymmetry/

    相关文章

      网友评论

        本文标题:设计原则:平衡与对称关系(七)

        本文链接:https://www.haomeiwen.com/subject/adnhbttx.html