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

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

結(jié)合網(wǎng)頁講。就是以下幾條：

平 衡

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

舉兩個(gè)例子:

圖一 Subtraction

不對(duì)稱平衡

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

圖二apple

對(duì)稱平衡

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

比 例

對(duì)于網(wǎng)頁元素來說。并不是看得清楚就好?；蛘呶谋径嚅L(zhǎng)就弄多大。它的排布跟網(wǎng)頁的平衡視覺上強(qiáng)調(diào)誰有很大關(guān)系。

Tumbrl

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

有些網(wǎng)頁的設(shè)計(jì)也僅僅看重要程度來排比例的：

Coda

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

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

現(xiàn)在的網(wǎng)頁可通過交互設(shè)計(jì)來強(qiáng)化網(wǎng)頁上展現(xiàn)的比例。

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

文章名稱：網(wǎng)站設(shè)計(jì)技巧之比例與平衡--網(wǎng)站建設(shè)分享
標(biāo)題鏈接：http://www.bm7419.com/news24/298374.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供用戶體驗(yàn)、搜索引擎優(yōu)化、企業(yè)建站、服務(wù)器托管、定制開發(fā)、響應(yīng)式網(wǎng)站

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請(qǐng)盡快告知，我們將會(huì)在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng)，如需處理請(qǐng)聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時(shí)需注明來源： 創(chuàng)新互聯(lián)