網站設計技巧之比例與平衡--網站建設分享

欄目：網站建設技巧發布時間：2021-10-11 來源: null

分享到：

從字體設計、制圖到頁面版式，設計總有那么多少條通用的準則，它實用于網頁或者印刷。然而，在網頁設計這邊，很多本應當有的規矩都被搞亂了，就只是隨著感到走。這并不是說設計師在規矩方面有松散，而是大多數網絡工作者都不曉得要依照這些規矩——就算他們曉得，也不曉得怎么去用。
結合網頁講，就是以下多少條：
平衡
均衡感挺難拿捏的。網頁上顯現出的均衡有兩種——對稱跟錯誤稱。咱們都很習慣了看對稱的圖片，就像咱們小時候剪紙花，都會兩邊一起剪，這樣打開就是對稱化的。這種對稱的均衡很好識別（反正都鏡面反射一下），而在錯誤稱構圖里面做到均衡才難。
舉兩個例子:
圖一 Subtraction
錯誤稱均衡
圖一在多處位置展示了錯誤稱均衡里面的一些重要準則。你看，作為主Banner的那只狗的照片——狗身上的黑色全壓在畫面左側了，這時候畫面右側呈現了一個X，這看似隨便的灰色X，可是均衡畫面的要害因素！這樣一來，你的視線就會被牽扯到畫面旁邊。除了在Banner圖里面，在網頁的頁頭中也呈現了這樣的設計——菜單欄的大小跟色彩都絕對重。那么在Subtraction的logo這條，就對利用了黑字白底，再在上面加上黑線，這樣高低會絕對均衡一些。
圖二apple
對稱均衡
蘋果是古代網頁中實現對稱均衡的典范。如圖二，每個元素都是在中軸線兩側排布，發明出了一個視覺上的跟諧情景。

比例
對網頁元素來說，并不是看得明白就好，或者文本多長就弄多大，它的排布跟網頁的均衡視覺上強調誰有很大關聯。
Tumbrl
而到底如何去衡量這些元素的大小，跟每個元素自身的性質有很大關聯，舉個例子：你在瀏覽兩欄式的網頁的時候，個別會發明右邊的框要比左邊的框大，也放了一些要害的信息在里面。網站設計要能充分吸引訪問者的注意力，讓訪問者產生視覺上的愉悅感。因此在網頁創作的時候就必須將網站的整體設計與網頁設計的相關原理緊密結合起來。這是由人的視覺習慣決定——哪怕是文本框放在左側，目錄這些元數據放在右側，也會不自發的看向右邊。所以說，元數據在右邊占處所是不太科學的。有些人喜好每欄一樣寬度的柵格布局，就像圖一那樣；另外的人可能喜好黃金宰割率，也就是右邊的框是左邊框的1.62倍。
有些網頁的設計也僅僅器重要水平來排比例的：
Coda
在這個頁面上，各元素的比例把持得很好。不僅是視覺上的品位很好，意思上的品位也很好。從產品的logo開端（1），而后領導用戶的行動（2），再到文字比較密集的相干介紹（3），排布都很公道。圖文混排的區域，題目的權重跟解釋隔開，還有跟左側icon的關聯都很留神。瀏覽這個頁面的時候也會覺得整體十分跟諧。
不過以上這個例子有點老，網頁展示很平面。
當初的網頁可通過交互設計來強化網頁上展示的比例。
比方這個國際廣告獎D&AD的網站，在滑動內頁時候，菜單欄占頁面的比例會絕對縮小，這樣人的留神力會更集中于旁邊局部，更留神瀏覽內容。網站設計要能充分吸引訪問者的注意力，讓訪問者產生視覺上的愉悅感。因此在網頁創作的時候就必須將網站的整體設計與網頁設計的相關原理緊密結合起來。