您當前位置:圖趣網(wǎng)(Tuquu) >> 網(wǎng)頁設計教程 >> 設計理論 >> 瀏覽設計教程

網(wǎng)頁設計中的平衡準則

平衡作為一種自然規(guī)律,發(fā)揮著相當重要的作用。如工作與娛樂的平衡、中國的陰陽平衡等。一個姣好的面容往往是五官比較平衡對稱。
因此從美學上講,平衡對于網(wǎng)頁設計而言,是一個重要的設計準則。通過掌握平衡,你可以設計出視覺上愉悅的網(wǎng)頁,可以讓你更好地控制網(wǎng)頁設計。

1.什么是設計平衡

先不涉及到設計,先考慮一下物理學上的平衡。

如下圖所示,放置一個杠桿,中間是一個支點,如果在離支點相同距離的兩邊各放置一個同樣質(zhì)量的物體,那么這個杠桿就可以達到平衡。

網(wǎng)頁設計準則平衡

我們可以用一個簡單的方程式來解釋它:

F1*D1=F2*D2(F表示力的大小,D表示物體和支點的距離)。

當方程式兩邊,力大小乘于距離相等時,那么就達到了平衡。

看下圖例子,假如支點離開中心,偏向左邊,那么這個杠桿如何平衡?

網(wǎng)頁設計準則平衡

根據(jù)方程式我們知道,左邊距離變短,相應的,左邊的力應該增大才能達到平衡。

雖然是物理學的概念,但是相信這并不難理解。設計上的平衡也是一樣。網(wǎng)頁設計應該有一個看不見的中心軸(水平或者垂直)。各個設計元素的輕重以及它們距離中心軸的距離,會決定你的網(wǎng)頁設計是否達到平衡。

從上面的示例可以知道,有兩種類型的平衡,一種是對稱平衡,一種是非對稱平衡。

但是應該如何界定設計元素的視覺上的輕重呢?

2.設計元素的視覺輕重

物理學的平衡和設計的平衡最大的不同之處在于設計元素沒有一個物理重量,但是,設計元素卻有一個視覺重量。

這里列出一些影響設計元素視覺重量的東西:

  • 大?。猴@然尺寸越大,視覺上越重。
  • 色彩:一些色彩看上去會比其他色彩要重一些,比如紅色看上去最重,而黃色看上去最輕。
  • 密度:區(qū)域內(nèi)的東西越多,密度越大就顯得越重。
  • 亮度:暗的物體看上去總是比亮的物體重。

3.對稱平衡

對稱平衡類似于支點放在杠桿的中間,要達到這種平衡,對稱軸兩邊的物體的重要就要一樣。

對稱平衡看上去更加正式、穩(wěn)定。給人以一致、高雅、經(jīng)典的感覺。

比如婚禮請柬,通常字會居中,這樣會形成一種對稱平衡,給人予莊重、高雅的感覺,很貼合婚禮請柬所要傳達的意思。

《最后的晚餐》是一副平衡用得非常好的經(jīng)典名畫。左邊的視覺重量和右邊的視覺重量幾乎一樣,整個畫面的中心軸在耶穌那里,這樣就達成了一個完美的平衡。

網(wǎng)頁設計準則平衡

看一下下列的網(wǎng)頁設計例子Tilly Moss,這個網(wǎng)頁中,在水平方向和垂直方向上都是平衡的。

網(wǎng)頁設計準則平衡

4.非對稱平衡

非對稱平衡相當于支點偏離中心杠桿中心。這樣兩邊距離不一樣,就造成了兩邊物體也要不一樣才能形成平衡,在設計上,這種非對稱平衡往往體現(xiàn)在,一邊是一個或兩個視覺較重,占主導地位的設計元素,而另一邊則是幾個視覺上相對較輕的設計元素。

非對稱平衡的設計往往更富于動感,因為視覺元素的一些變化,但是正因為如此,使非對稱平衡的設計更難以掌握。

網(wǎng)頁設計準則平衡

試看下面這個網(wǎng)頁設計的例子

這是Ernest Hemingway Collection網(wǎng)站的首頁。網(wǎng)頁的主要內(nèi)容放在右邊,要使設計達到平衡,左邊放置了幾個物體,而且左邊整體色調(diào)要更暗一些,這樣也為左邊增加了視覺重量。想象一下,如果將棕黑色咖啡的位置放到頂部或者底部,網(wǎng)頁設計是否能到達平衡?

5.徑向平衡和馬賽克平衡

一般而言,我們接觸到比較多的是對稱平衡和非對稱平衡。但是這里有兩種類型的平衡同樣值得一提:

  • 徑向平衡:各個元素基于中心向內(nèi)或向外輻射。試想一下太陽光線向外發(fā)射,徑向平衡創(chuàng)造出一種基于中心點的平衡。
  • 馬賽克平衡:許多元素散亂排列創(chuàng)造出的平衡。馬賽克平衡看上去可能比較凌亂,而且很難定義它的中心點。

6.總結:

平衡作為設計準則之一,在網(wǎng)頁設計上是很重要的。一個平衡的設計會給瀏覽者傳遞一種統(tǒng)一正確的感覺,而不平衡的設計則很容易突出某一具體的設計元素,而忽略了整個設計風格。

現(xiàn)在開始觀察別人的網(wǎng)頁設計是如何達到平衡的,哪一些設計元素比較輕?哪一些比較重?為什么?

通過這樣的眼力訓練,你很快就可以找到平衡的感覺,從而創(chuàng)造出視覺愉悅的網(wǎng)頁設計來。

[教程作者:admin]
免責聲明:本站文章系圖趣網(wǎng)整理發(fā)布,如需轉(zhuǎn)載,請注明出處,素材資料僅供個人學習與參考,請勿用于商業(yè)用途!
本文地址:http://m.pkvc.cn/tutorial/di1089.html
10個網(wǎng)站提高你的創(chuàng)意理念
網(wǎng)頁設計布局指南
圖趣網(wǎng)微信
建議反饋
×