新媒體視覺系列(1):平衡

1 評論 4527 瀏覽 8 收藏 12 分鐘

在之前的文章《新媒體運營必需知道的 4 個設計原則》中,琛姐談到過?4 個設計的基本原則——親密性、對齊、重復、對比。但通過更深入地學習設計知識,琛姐發現,之前提到的「對齊」原則并不完善,更全面的說法應該是「平衡」。因為「對齊」的根本目的是為了實現版面「平衡」,「對齊」只是達到「平衡」的方式之一。本文是對「對齊」原則的更正和補充。

本質上說,平衡是指讓一條垂直軸兩側的重量保持平衡,我們日常生活中所說的走路、騎車時要保持平衡,和設計中要保持平衡,是一個概念。

為什么我們會喜歡平衡的設計?

因為大量的經驗告訴我們:不平衡(不對稱)的生物體一般和疾病有關,而且,日常生活中如果無法保持平衡,容易導致事故。比如,走路的時候失去平衡會導致摔跤、騎車的時候失去平衡會導致翻車等等。

所以說,平衡在我們的大腦中不僅僅只有表面的意思,千百年來的經驗告訴我們——「平衡=健康」,「平衡=安全」。出于生存的本能需求,當我們面對不平衡的設計時,會自然地產生警惕和不適的感覺。

最常見的達到平衡的方式是對稱,而用不對稱的方式達到平衡會更加有趣、個性化。

一、對稱平衡

對稱平衡是一種非常容易實現的對稱方式,這種平衡方式在建筑設計、攝影設計中都非常常見:

在封面圖中疊加文字和圖片時,也常常見到這種對齊方式:

公眾號24HOURS封面

公眾號新世相封面

當我們說對稱的時候,一般是指左右對稱,在新媒體設計中,左右對稱只需要完全居中或兩端對齊,就能實現。居中對齊是視覺平衡感最好的一種文字對齊方式,但一般適用于字數較少的情況。

居中對

一般文字較多的時候我們會采用左對齊的方式,卻很容易忽略兩端對齊。但現實是:如果我們僅僅采用左對齊,右邊的邊線會呈現不規則的鋸齒狀,如果改成兩端對齊,左右邊線都會變得平直,對稱感明顯增強。

左:左對齊;右:兩端對

對稱平衡給人感覺正式、高雅、嚴謹、精確、有氣勢,劣勢是可能會顯得呆板和拘謹。

所以,很多時候,可以適當地進行一些調整,打破完全對稱的局面。

不過,多種對齊方式疊加涉及到非對稱平衡,是一種更復雜的平衡方式,想要合理利用,我們先要搞清楚什么是非對稱平衡,以及如何達到非對稱平衡。

二、非對稱平衡

關于對稱平衡和非對稱平衡的概念,我們可以類比一下蹺蹺板。為了讓蹺蹺板保持平衡,最簡單的方法就是讓 2 個差不多重量的人坐在差不多距離的位置上,也就是對稱平衡。

圖片來源:視覺中國

但如果2個人的體重相差很大的話怎么辦呢?最好的辦法就是讓相對較重的人坐到離蹺蹺板支點更近的位置,相對較輕的人坐在離蹺蹺板支點更遠的位置,距離支點的差距和他們體重的差距成正比。這就是非對稱平衡。

圖片來源:視覺中國

和玩蹺蹺板的人一樣,設計中的每種元素也有自己對應的重量,在視覺設計中被稱為視覺比重。視覺比重是一個視覺度量體系,大概有下面幾個原則:

1.大重小輕。

占版面面積較大的元素視覺比重較大,面積較小的元素視覺比重較小。比如,下圖中體積較大的燈泡看起來更重。

2.近重遠輕。

距離較近的元素視覺比重較大,距離較遠的元素視覺比重較小。比如,下圖左1的花盆看起來就比較重,右1的花盆看起來相對較輕。

3.深重淺輕。

顏色濃烈、鮮艷的元素視覺比重較大,顏色較淺的元素視覺比重較小。比如,下圖中大紅色的嘴唇看起來比較重,淺黃色的頭發看起來比較輕。

4.圖重文輕。

圖片的視覺比重較大,文字的視覺比重較小。所以在組合圖片和文字時需要特別注意,當圖片本身結構比較平衡時,比如下面這張十點讀書的海報,其中的圖片是對稱結構,構圖已經平衡,在右邊添加空白背景的文字反而打破了原有的平衡,整體顯得左重右輕了。

但如果圖片本身不平衡,添加文字就可以幫助整體版面實現平衡。比如,下圖中人物的重心是向右傾斜的,在右邊添加文字可以減輕右邊的重量,幫助版面實現平衡。

理解了這些道理,在排版設計的時候,我們就可以把一個版面想象成一個蹺蹺板,版面的中軸線就是蹺蹺板的支點,而在版面上添加元素就是在蹺蹺板的兩端添加重量。

不對稱平衡就是利用以上的基礎規律,并結合直覺,在版面上合理布局元素,使得整體視覺比重達到平衡狀態。

對稱平衡可以借助設計軟件的輔助線完成,但不對稱平衡目前還無法借助機器實現,所以,在進行非對稱平衡設計時,不僅要熟悉基礎規律,還要對元素的視覺比重及布局有精準的直覺。

厲害的藝術家、設計大師在掂量各個元素的視覺比重時,通常比常人擁有更好的直覺和判斷力。

比如,公眾號深夜發媸把圖片元素放在版面左邊,把文字放在右邊,使版面達到平衡:

公眾號 HUGO 在圖片的左上角放自己的 Logo,在右下角放品牌 Slogan,也使得版面更接近平衡狀態。

公眾號“我要WhatYouNeed”的正文部分采用左對齊的方式,而在一些圖片注釋或作者介紹的地方則會采用右對齊的方式,不僅使得整個版面擁有更好的平衡感,而且打破了單調的局面,使得版面更加靈動

左:圖片注釋右對齊;右:作者介紹右對齊

公眾號十點讀書在制作封面圖時,也注意了版面的平衡問題:

當圖片主體靠右時,公眾號Logo就放在左邊:

當圖片主體靠左時,公眾號Logo就放在右邊:

不過,當圖片比較對稱時,公眾號的Logo放在靠邊的位置就有點不太平衡了,好在左下角有標題文字,能在一定程度上進行平衡。

三、小結

我們日常生活中所說的平衡,和設計中的平衡,是一個概念。

保持版面平衡的方式有 2 種:對稱平衡和非對稱平衡。

  • 對稱平衡是一種非常容易實現的對稱方式,在新媒體視覺中,一般是指左右對稱。
  • 非對稱平衡則是利用視覺比重的基礎規律,并結合直覺,在版面上合理布局元素,使得整體視覺比重達到平衡狀態。

#專欄作家#

琛姐,微信公眾號:草莓學堂(caomeixt),人人都是產品經理專欄作家。大學新媒體教師,草莓學堂創始人,關注新媒體環境下營銷、電商的發展趨勢。

本文原創發布于人人都是產品經理。未經許可,禁止轉載。

題圖來自 pexels,基于 CC0 協議

更多精彩內容,請關注人人都是產品經理微信公眾號或下載App
評論
評論請登錄
  1. 目前還沒評論,等你發揮!