從字體設計、制圖到頁(yè)面版式，設計總有那么幾條通用的原則，它適用于網(wǎng)頁(yè)或者印刷。然而，在網(wǎng)頁(yè)設計這邊，很多本應該有的規則都被搞亂了，就只是跟著(zhù)感覺(jué)走。這并不是說(shuō)設計師在規則方面有松懈，而是大多數網(wǎng)絡(luò )工作者都不知道要遵守這些規則——就算他們知道，也不知道怎么去用。

結合網(wǎng)頁(yè)講，就是以下幾條：

平 衡

平衡感挺難拿捏的。網(wǎng)頁(yè)上呈現出的平衡有兩種——對稱(chēng)和不對稱(chēng)。我們都很習慣了看對稱(chēng)的圖片，就像我們小時(shí)候剪紙花，都會(huì )兩邊一起剪，這樣打開(kāi)就是對稱(chēng)化的。這種對稱(chēng)的平衡很好識別（反正都鏡面反射一下），而在不對稱(chēng)構圖里面做到平衡才難。

舉兩個(gè)例子:

圖一 Subtraction

不對稱(chēng)平衡

圖一在多處位置展示了不對稱(chēng)平衡里面的一些重要原則。你看，作為主Banner的那只狗的照片——狗身上的黑色全壓在畫(huà)面左側了，這時(shí)候畫(huà)面右側出現了一個(gè)X，這看似隨意的灰色X，可是平衡畫(huà)面的關(guān)鍵因素！這樣一來(lái)，你的視線(xiàn)就會(huì )被牽扯到畫(huà)面中間。除了在Banner圖里面，在網(wǎng)頁(yè)的頁(yè)頭中也出現了這樣的設計——菜單欄的大小和顏色都相對重。那么在Subtraction的logo這條，就對應用了黑字白底，再在上面加上黑線(xiàn)，這樣上下會(huì )相對平衡一些。

圖二apple

對稱(chēng)平衡

蘋(píng)果是現代網(wǎng)頁(yè)中實(shí)現對稱(chēng)平衡的典范。如圖二，每個(gè)元素都是在中軸線(xiàn)兩側排布，創(chuàng )造出了一個(gè)視覺(jué)上的和諧情景。

比 例

對于網(wǎng)頁(yè)元素來(lái)說(shuō)，并不是看得清楚就好，或者文本多長(cháng)就弄多大，它的排布跟網(wǎng)頁(yè)的平衡視覺(jué)上強調誰(shuí)有很大關(guān)系。

Tumbrl

而到底如何去權衡這些元素的大小，跟每個(gè)元素本身的性質(zhì)有很大關(guān)系，舉個(gè)例子：你在瀏覽兩欄式的網(wǎng)頁(yè)的時(shí)候，一般會(huì )發(fā)現右邊的框要比左邊的框大，也放了一些關(guān)鍵的信息在里面。這是由人的視覺(jué)習慣決定——哪怕是文本框放在左側，目錄這些元數據放在右側，也會(huì )不自覺(jué)的看向右邊。所以說(shuō)，元數據在右邊占地方是不太科學(xué)的。有些人喜歡每欄一樣寬度的柵格布局，就像圖一那樣；另外的人可能喜歡黃金分割率，也就是右邊的框是左邊框的1.62倍。

有些網(wǎng)頁(yè)的設計也僅僅看重要程度來(lái)排比例的：

Coda

在這個(gè)頁(yè)面上，各元素的比例控制得很好。不僅是視覺(jué)上的層次很好，意義上的層次也很好。從產(chǎn)品的logo開(kāi)始（1），然后引導用戶(hù)的行為（2），再到文字比較密集的相關(guān)介紹（3），排布都很合理。圖文混排的區域，標題的權重和正文隔開(kāi)，還有和左側icon的關(guān)系都很注意。瀏覽這個(gè)頁(yè)面的時(shí)候也會(huì )覺(jué)得整體非常協(xié)調。

不過(guò)以上這個(gè)例子有點(diǎn)老，網(wǎng)頁(yè)展現很平面。

現在的網(wǎng)頁(yè)可通過(guò)交互設計來(lái)強化網(wǎng)頁(yè)上展現的比例。

比如這個(gè)國際廣告獎D&AD的網(wǎng)站，在滑動(dòng)內頁(yè)時(shí)候，菜單欄占頁(yè)面的比例會(huì )相對縮小，這樣人的注意力會(huì )更集中于中間部分，更注意閱讀內容。

http://ezekroy.com/jianzhanzhishi/7779.html 網(wǎng)站設計技巧之比例與平衡-