構圖平衡主要意味著調整設計中積極元素與消極元素之間的關係,確保設計中的區域不存在偏差。每一種元素都彼此相連,組成一個無縫銜接的整體。而不均衡的構圖會引發緊張,當設計中的元素失衡時,單個元素可能會衝擊整體元素,各個元素而不是設計整體佔據了主要地位。在某些項目中,可能會利用非均衡的效果,但大多數的構圖都是平衡的。
物理平衡與視覺平衡
物理世界的平衡不難理解,因為我們經常見到。當物體失去平衡時便會傾斜或摔倒。你可能也親自體驗過蹺蹺板---你和你的朋友必須保持它的平衡。
坐在蹺蹺板左端的人的力是逆時鐘方向的,而右端的人的力則是順時針方向的。雙方所用的力方向相反,力的總和為零。如果一個人的體重超過另一個人很多的話,蹺蹺板就會失去平衡。
上面這幅畫讓我們覺得不舒服,因為左端的人沒有足夠的力去平衡右端的力。蹺蹺板的左端會觸到地面,然而,如果右端的人向中心方向移動的話,蹺蹺板會再次取得平衡。
視覺平衡的道理也是一樣。只是把物理視覺的力換成了視覺力,把物理世界中力的方向換成了視覺方向而已。下面給出了簡單的視覺力量和視覺方向的定義。
視覺力是指設計中各個元素對觀看者目光的吸引力。
視覺方向是指當元素能夠移動時,它會自行移動的方向。
當然,在設計中,力的方向和大小都無法用儀器精確判斷,確認一個構圖是否平衡,只能依靠雙眼。
為何視覺平衡很重要
如同在現實世界中一樣,視覺平衡是一件好事。一個不平衡的設計會讓觀看者覺得不舒服。請看上面第二幅圖中的蹺蹺板,它給人的感覺是「不對」的,因為我們的本能讓我們知道蹺蹺板不應失去平衡。
視覺力其實就是觀看者對設計中的元素分配的注意力。當一個設計視覺上平衡時,它的每個部分都能吸引觀看者的注意力。均衡的設計往往能讓觀看者長久停留。
當設計中沒有視覺平衡時,觀看者可能對某些元素或區域毫不留意。那麼這些區域或元素所包含的信息就會缺失。
平衡的四種類型
平衡一個構圖不止有一種方式。在前面我們已經看到了兩種平衡。第一張是對稱平衡的例子,第二張是不均衡對稱的例子。另外兩種平衡分別是放射平衡與分散平衡。
對稱平衡指的是環繞一個中心點或者軸心,兩側元素力量均等的平衡。對稱均衡給人一種很正式而優雅的感覺。西方傳統婚禮邀請函的設計就是一個對稱平衡的好例子。
對稱平衡的缺點是它是靜止的,有時會給人以無聊的感覺。因為設計的一半與另一半幾乎完全相同,其中一半的圖案是可以預測到的。
不對稱平衡是由構圖中不對稱的視覺力量所組成的平衡。構圖中的某個元素佔有主導位置,它的力被一系列更小的元素所平衡。也就是說,一個力可以被許多力所平衡。
不對稱平衡更為動態,也更為有趣。它給人以現代,運動,活力的感覺。這種對稱能帶來視覺上的更多選擇,雖然它也許難實現,因為各個元素之間的關係較為複雜。
放射平衡由一個中心點所發出的多種元素之間的平衡實現。日光或池塘中的漣漪就是放射平衡的例子。這種平衡較為容易實現,因為它的中心是固定的。
由於各個元素都有一個共同的中心,所有的元素自然把觀看者的目光引向這個中心,使它成為視線的焦點所在。
分散對稱
分散對稱是對混亂做再平衡的結果。想像一下Jackson Pollack的油畫。畫面構圖沒有明顯的視覺點,但各個元素依然保持著某種一致。第一眼看上去,各個元素似乎沒有平衡。但它們都共同遵循著某種秩序。
對稱與反對稱
對稱和反對稱在構圖中都有其作用,但最終都會把設計引向平衡。對稱是美好和諧的,但從一個角度看也是靜止和無趣的。反對稱更有意思,更為動感,但本質上並不被認為是美麗的。
對稱
對稱主要有三種類型。
映射對稱(雙重對稱)是指所有元素都圍繞著一個基本軸線映射而成的對稱。這也是人們聽到「對稱」 這個詞第一時間想到的東西。這種對稱一般是垂直或水平展開。人臉和蝴蝶都是對稱的例子。
當軸線兩側的元素可以完全重合時,就是一個所謂的純粹對稱。大多數時候,由於軸線兩側的元素多少會有些不同,純粹對稱是很罕見的。對稱甚至可以沿著多重軸線展開。向日葵就是一個例子。
旋轉對稱(放射對稱)指的是圍繞一個中心點展開的對稱。只要有一個中心點,這種對稱可以發生在不同角度和頻率上。這種對稱常用來表現速度,運動或動感的事物。運動中的車輪就是一個例子。
遞進式對稱指的是元素有規律地在空間中重複的對稱。籬笆就是一個例子。它可以以任何間隔,在任何方向上展開,只要其基本的規律是固定的。這種對稱也用於展現旋律,運動,速度等。
對稱一般被視為前景而不是背景。一般而言對稱比不對稱具有更多的視覺力。對稱能傳達出平衡的感覺,但他們常常顯得過於穩定,過於平衡,形式上容易呆板。對稱也常產生被動空間,因為他們包含的空間幾乎全是一樣的。
反對稱
反對稱缺少對稱所具有的平衡結構,雖然它也可以對整體構圖的平衡發揮作用。反對稱結構在自然界中十分普遍:螃蟹的爪子大小各不相同。樹枝朝不同方向生長。雲朵的形狀變化萬千。
反對稱結構在元素間形成了較為複雜的關係,因此比對稱結構更有意思。由於這一點,它常被用來吸引視線。
環繞不對稱形式的空間更為靈活。它們的模式更為不可預測,在不對稱的空間中有更多自由。唯一的遺憾是,它很難使用。
但將不對稱和對稱形式綜合起來利用時,往往能達到很好的效果。你可以用不對稱形式達到對稱,亦可以用對稱的形式去平衡不對稱。在設計中配合使用對稱和不對稱能讓各個元素更吸引注意力。
格式塔原則
格式塔原則中有一條原理與對稱形式及平衡的關係非常密切。雖然這遠非唯一的原則。
格式塔原則中的視覺焦點與相似度都解釋了視覺力的由來。一致性,平行等原則與視覺方向有關。前面我也說過,對稱結構一般都是前景而不是背景。由此可見,我們介紹的許多設計原則並非憑空而來。它們往往與我們對空間的視覺體驗有關,而這已經屬於心理學的範疇。
示例
對稱平衡的示例
Helen & Hard的整個網站都採用了對稱平衡的方式。下面的截圖來自網站中「關於」的頁面,但網站其他頁面的布局也與之類似。
頁面中的所有內容都圍繞著一個縱向的中心展開。Logo是中心對稱的,導航按鈕也是中心對稱的,圓形的畫面同樣也是中心對稱,標題也是中心對稱的,三個部分的文本也是中心對稱的。但頁面的平衡並非完美對稱,例如每部分的內容數量並不一樣。
然而,請注意頁面的頂部。導航條和logo事實上都在中心,但看上去他們並非位於中心。位於導航條左側的三條目錄比右側的目錄擁有更多的字母,但我的視覺本能要求它們的字母數量一致,視覺中心也是放在「關於」和「成員」之間更為合理。
所以我認為,將這兩部分元素調整一下,從物理中心移動到視覺中心的位置會更好一些。Tilde 網站的主頁是另一個對稱平衡的例子。如同Helen & Hard網站一樣,這個頁面的一切都為熬著一個縱向的軸心展開,這個軸心縱貫整個頁面的中心:導航,內容,圖片中的人員等等。
Tilde網站首頁截屏
如同在Helen & Hard頁面中一樣,這個頁面中的對稱也不是純粹對稱。因為軸線兩側Neri並非完全對等的映像。某一側的某些內容還存在缺失。
非對稱平衡的例子
Carrie Voldengen的主頁展示了一個以對稱形式實現非對稱平衡的範例。請看頁面的整體構圖,我自己至少能發現幾個不規則的圖形。
頁面的大部分內容是一個很大的長方形,包含了一系列較小的長方形圖片。這個大長方形無論縱向還是橫向都有一個軸心。給人的感覺十分穩定和平衡。
在這個長方形的右側,有一個似乎是從長方形內容上生長出的「內容塊「。它被頁面左上方的圓形圖案和文字所平衡。這兩部分的內容到視覺中心點的距離相等。右側的文字Neri更大,但左側的圓形logo擁有更多視覺力。因此這兩部分內容大體保持了均衡。
長方形的下方也有少量文字,但它們的視覺力很輕,不致於使整個構圖失衡。
我特別截取了 Hirondelle USA 主頁上的一張圖來說明非對稱平衡的情況。
Hirondelle USA網站首頁截屏
圖片中小孩抱的柱子略微偏離視覺中心,它的方向是縱向的,並擁有很強的視覺力。柱子左側的護欄提供了一個很強的聯繫,把柱子與畫面邊緣連接起來。它看起來也非常穩定,並且頁面中沒有其他元素能打亂它們的穩定性。
護欄上方的文字被護欄支撐著。然而,它在視覺上也被畫面右側的男孩所平衡。觀看者也許感覺護欄是「懸掛」在柱子左側的,難免會使畫面失衡,但男孩的形象和深色的背景不僅平衡了護欄,也平衡了其上的文字。
放射平衡的例子
Vlog.it 網站的主頁清楚地展示了放射平衡的例子。除了右上角的小圖形之外,頁面中的任何元素都圍繞著頁面中心展開,形成三個圓環。
Vlog.it 網站截屏
但遺憾的是在這張截圖上你看不到頁面是如何加載的。在頁面左側的一點與頁面的中心之間有一條線。從這一點開始,頁面中所有內容沿著中心旋轉展開或呈放射狀展開,如同池塘的漣漪一樣。
Shiny Demos 網站不是圓形的,但頁面中等個文字似乎擁有一個共同的中心點。所以觀看者很容易把它看做是一個旋轉的形體,中心就是正中的,由四個方塊組成的立方體。
Opera’s Shiny Demos網站截屏
頁面左上角的標題和右下角的logo也是彼此平衡的關係,並給人一種從正方形方塊中脫離而出的印象。
這個例子也很好地說明,放射平衡並不一定都是圓形。
分散平衡的例子
你可能會覺得在用於網絡的設計中,分散式平衡是最少見的,特別是當我舉了Jackson Pollack的油畫作品為例後。事實上這方面的例子比你認為的要多的多。
「兔子故事」的主頁是個很好的例子。頁面中單詞排列的方式給人的感覺是混亂的,但頁面的構圖依然存在平衡。
兔子左右的頁面區域大概相等,顏色也一致。中心的兔子圖案甚至可以視為一種視覺焦點。在你看到這個頁面後不久,你就會注意到兔子的存在,但它周圍的元素則不容易被用戶注意到。
我並不準備一個一個指出哪種元素與哪種元素相互平衡,但希望讀者能理解整體平衡的情況。大體上說,右側的混亂度稍高一些,但並沒有到足夠擾亂畫面平衡的程度。
內容密集型網站,如新聞和雜誌網站也常採用分散式平衡。請看下面The Onion 的主頁截圖。在截圖中,我移除了頁面的背景圖片。
The Onion網站截屏
這個頁面有很多可觀指出。頁面布局並不對稱。縱列的內容並不相等。很難判斷哪些內容與哪些內容是平衡的。整個頁面似乎也沒有一個共同的中心。
由於內容塊的大小不同,頁面存在一定的混亂。由於頁面的內容是每天更換的,頁面的「混亂」也是每天更換的。
可能說這個頁面是分散平衡有點誇張,但我想說的是,許多網站就是以這種方式取得「混亂平衡」的,雖然有許多網頁中的混亂排版並非是有意安排的結果。
結論
正如多說讀者都能想到的,基礎工作十分重要。我在文章中已經展示了,這些設計原則都是源自人類的認知規律和格式塔理論。這些原則並非是我的創造,而是基於我們對周圍環境的視覺感知。
例如,我們注意到視覺焦點的一個原因就是該元素與周圍元素所形成的對比。因為它們與其他元素不同。這種判斷可能與人類祖先對朋友和敵人的區分。這對於人類的生存非常重要,所以我們判斷特殊的東西時,反應會非常迅速。
然而,設計原則並非是一成不變的。它們充其量只是指導原則。你並不需要嚴格遵守每條設計原則。當然,你首先需要了解它們,之後才能打破它們。希望這篇文章對大家更好地控制和使用設計中的視覺元素有所幫助。
翻譯:劉海靜