網(wǎng)站設(shè)計(jì)技巧之比例與平衡--網(wǎng)站建設(shè)分享

欄目：網(wǎng)站建設(shè)技巧發(fā)布時(shí)間：2021-10-11 來(lái)源: null

分享到：

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

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