新媒体视觉系列(1):平衡

在之前的文章《新媒体运营必需知道的 4 个设计原则》中,琛姐谈到过 4 个设计的基本原则——亲密性、对齐、重复、对比

但通过更深入地学习设计知识,琛姐发现,之前提到的「对齐」原则并不完善,更全面的说法应该是「平衡」。因为「对齐」的根本目的是为了实现版面「平衡」,「对齐」只是达到「平衡」的方式之一。

本文是对「对齐」原则的更正和补充。

本质上说,平衡是指让一条垂直轴两侧的重量保持平衡,我们日常生活中所说的,走路、骑车时要保持平衡,和设计中要保持平衡,是一个概念。

为什么我们会喜欢平衡的设计?

因为大量的经验告诉我们,不平衡(不对称)的生物体一般和疾病有关,而且,日常生活中如果无法保持平衡,容易导致事故,比如,走路的时候失去平衡会导致摔跤、骑车的时候失去平衡会导致翻车等等。

所以说,平衡在我们的大脑中不仅仅只有表面的意思,千百年来的经验告诉我们——「平衡=健康」,「平衡=安全」。出于生存的本能需求,当我们面对不平衡的设计时,会自然地产生警惕和不适的感觉。

最常见的达到平衡的方式是对称,而用不对称的方式达到平衡会更加有趣,个性化。

1.对称平衡

对称平衡是一种非常容易实现的对称方式,这种平衡方式在建筑设计、摄影设计中都非常常见。

在封面图中叠加文字和图片时,也常常见到这种对齐方式:

公众号24HOURS封面图
公众号新世相封面图

当我们说对称的时候,一般是指左右对称,在新媒体设计中,左右对称只需要完全居中或两端对齐,就能实现。居中对齐是视觉平衡感最好的一种文字对齐方式,但一般适用于字数较少的情况。

居中对齐

一般文字较多的时候我们会采用左对齐的方式,却很容易忽略两端对齐,但现实是,如果我们仅仅采用左对齐,右边的边线会呈现不规则的锯齿状,如果改成两端对齐,左右边线都会变得平直,对称感明显增强。

左:左对齐;右:两端对齐

对称平衡给人感觉正式、高雅、严谨、精确、有气势,劣势是可能会显得呆板和拘谨。

所以,很多时候,可以适当地进行一些调整,打破完全对称的局面。不过,多种对齐方式叠加涉及到非对称平衡,是一种更复杂的平衡方式,想要合理利用,我们先要搞清楚什么是非对称平衡,以及如何达到非对称平衡。

2.非对称平衡

关于对称平衡和非对称平衡的概念,我们可以类比一下跷跷板。为了让跷跷板保持平衡,最简单的方法就是让 2 个差不多重量的人坐在差不多距离的位置上,也就是对称平衡。

图片来源:视觉中国

但如果2个人的体重相差很大的话怎么办呢?最好的办法就是让相对较重的人坐到离跷跷板支点更近的位置,相对较轻的人坐在离跷跷板支点更远的位置,距离支点的差距和他们体重的差距成正比。这就是非对称平衡。

图片来源:视觉中国

和玩跷跷板的人一样,设计中的每种元素也有自己对应的重量,在视觉设计中被称为视觉比重。视觉比重是一个视觉度量体系,大概有下面几个原则:

大重小轻。占版面面积较大的元素视觉比重较大,面积较小的元素视觉比重较小。比如,下图中体积较大的灯泡看起来更重。

近重远轻。距离较近的元素视觉比重较大,距离较远的元素视觉比重较小。比如,下图左1的花盆看起来就比较重,右1的花盆看起来相对较轻。

深重浅轻。颜色浓烈、鲜艳的元素视觉比重较大,颜色较浅的元素视觉比重较小。比如,下图中大红色的嘴唇看起来比较重,浅黄色的头发看起来比较轻。

图重文轻。图片的视觉比重较大,文字的视觉比重较小。所以在组合图片和文字时需要特别注意,当图片本身结构比较平衡时,比如下面这张十点读书的海报,其中的图片是对称结构,构图已经平衡,在右边添加空白背景的文字反而打破了原有的平衡,整体显得左重右轻了。

但如果图片本身不平衡,添加文字就可以帮助整体版面实现平衡。比如,下图中人物的重心是向右倾斜的,在右边添加文字可以减轻右边的重量,帮助版面实现平衡。

理解了这些道理,在排版设计的时候,我们就可以把一个版面想象成一个跷跷板,版面的中轴线就是跷跷板的支点,而在版面上添加元素就是在跷跷板的两端添加重量。

不对称平衡就是利用以上的基础规律,并结合直觉,在版面上合理布局元素,使得整体视觉比重达到平衡状态。

对称平衡可以借助设计软件的辅助线完成,但不对称平衡目前还无法借助机器实现,所以,在进行非对称平衡设计时,不仅要熟悉基础规律,还要对元素的视觉比重及布局有精准的直觉。

厉害的艺术家,设计大师在掂量各个元素的视觉比重时,通常比常人拥有更好的直觉和判断力。

比如,公众号深夜发媸把图片元素放在版面左边,把文字放在右边,使版面达到平衡:

公众号 HUGO 在图片的左上角放自己的 Logo,在右下角放品牌 Slogan,也使得版面更接近平衡状态:

公众号“我要WhatYouNeed”的正文部分采用左对齐的方式,而在一些图片注释或作者介绍的地方则会采用右对齐的方式,不仅使得整个版面拥有更好的平衡感,而且打破了单调的局面,使得版面更加灵动。

左:图片注释右对齐;右:作者介绍右对齐



公众号十点读书在制作封面图时,也注意了版面的平衡问题,当图片主体靠右时,公众号Logo就放在左边:


当图片主体靠左时,公众号Logo就放在右边:


不过,当图片比较对称时,公众号的Logo放在靠边的位置就有点不太平衡了,好在左下角有标题文字,能在一定程度上进行平衡。


3.小结

我们日常生活中所说的平衡,和设计中的平衡,是一个概念。保持版面平衡的方式有 2 种:对称平衡和非对称平衡。对称平衡是一种非常容易实现的对称方式,在新媒体视觉中,一般是指左右对称。非对称平衡则是利用视觉比重的基础规律,并结合直觉,在版面上合理布局元素,使得整体视觉比重达到平衡状态。


PS:琛姐是大学新媒体教师。每周三,分享一个“写完了可以直接放进书里”的新媒体思考。

PPS:我已委托“维权骑士”为我的文章进行维权行动。如需转载,请联系琛姐进行授权,抄袭必纠。

©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 204,445评论 6 478
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 85,889评论 2 381
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 151,047评论 0 337
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 54,760评论 1 276
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 63,745评论 5 367
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 48,638评论 1 281
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 38,011评论 3 398
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 36,669评论 0 258
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 40,923评论 1 299
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 35,655评论 2 321
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 37,740评论 1 330
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 33,406评论 4 320
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 38,995评论 3 307
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 29,961评论 0 19
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 31,197评论 1 260
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 45,023评论 2 350
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 42,483评论 2 342

推荐阅读更多精彩内容