- 相關(guān)推薦
網(wǎng)頁(yè)設(shè)計(jì)的五大規(guī)則
引導(dǎo)語(yǔ)：網(wǎng)頁(yè)設(shè)計(jì)也有相應(yīng)的規(guī)則你知道嗎？以下是小編整理的網(wǎng)頁(yè)設(shè)計(jì)的五大規(guī)則，歡迎參考閱讀!
平 衡
平衡感挺難拿捏的。網(wǎng)頁(yè)上呈現(xiàn)出的平衡有兩種——對(duì)稱(chēng)和不對(duì)稱(chēng)。我們都很習(xí)慣了看對(duì)稱(chēng)的圖片，就像我們小時(shí)候剪紙花，都會(huì)兩邊一起剪，這樣打開(kāi)就是對(duì)稱(chēng)化的。這種對(duì)稱(chēng)的平衡很好識(shí)別（反正都鏡面反射一下），而在不對(duì)稱(chēng)構(gòu)圖里面做到平衡才難。
舉兩個(gè)例子:
圖一 Subtraction
不對(duì)稱(chēng)平衡
圖 一在多處位置展示了不對(duì)稱(chēng)平衡里面的一些重要原則。你看，作為主Banner的那只狗的照片——狗身上的黑色全壓在畫(huà)面左側(cè)了，這時(shí)候畫(huà)面右側(cè)出現(xiàn)了一個(gè) X，這看似隨意的灰色X，可是平衡畫(huà)面的關(guān)鍵因素！這樣一來(lái)，你的視線就會(huì)被牽扯到畫(huà)面中間。除了在Banner圖里面，在網(wǎng)頁(yè)的頁(yè)頭中也出現(xiàn)了這樣的設(shè) 計(jì)——菜單欄的大小和顏色都相對(duì)重。那么在Subtraction的logo這條，就對(duì)應(yīng)用了黑字白底，再在上面加上黑線，這樣上下會(huì)相對(duì)平衡一些。
圖二apple
對(duì)稱(chēng)平衡
蘋(píng)果是現(xiàn)代網(wǎng)頁(yè)中實(shí)現(xiàn)對(duì)稱(chēng)平衡的典范。如圖二，每個(gè)元素都是在中軸線兩側(cè)排布，創(chuàng)造出了一個(gè)視覺(jué)上的和諧情景。
比 例
對(duì)于網(wǎng)頁(yè)元素來(lái)說(shuō)，并不是看得清楚就好，或者文本多長(zhǎng)就弄多大，它的排布跟網(wǎng)頁(yè)的平衡視覺(jué)上強(qiáng)調(diào)誰(shuí)有很大關(guān)系。
Tumbrl
而 到底如何去權(quán)衡這些元素的大小，跟每個(gè)元素本身的性質(zhì)有很大關(guān)系，舉個(gè)例子：你在瀏覽兩欄式的網(wǎng)頁(yè)的時(shí)候，一般會(huì)發(fā)現(xiàn)右邊的框要比左邊的框大，也放了一些 關(guān)鍵的信息在里面。這是由人的視覺(jué)習(xí)慣決定——哪怕是文本框放在左側(cè)，目錄這些元數(shù)據(jù)放在右側(cè)，也會(huì)不自覺(jué)的看向右邊。所以說(shuō)，元數(shù)據(jù)在右邊占地方是不太 科學(xué)的。有些人喜歡每欄一樣寬度的柵格布局，就像圖一那樣；另外的人可能喜歡黃金分割率，也就是右邊的框是左邊框的1.62倍。
有些網(wǎng)頁(yè)的設(shè)計(jì)也僅僅看重要程度來(lái)排比例的：
Coda
在 這個(gè)頁(yè)面上，各元素的比例控制得很好。不僅是視覺(jué)上的層次很好，意義上的層次也很好。從產(chǎn)品的logo開(kāi)始（1），然后引導(dǎo)用戶的行為（2），再到文字比 較密集的相關(guān)介紹（3），排布都很合理。圖文混排的區(qū)域，標(biāo)題的權(quán)重和正文隔開(kāi)，還有和左側(cè)icon的關(guān)系都很注意。瀏覽這個(gè)頁(yè)面的時(shí)候也會(huì)覺(jué)得整體非常 協(xié)調(diào)。
節(jié)奏
網(wǎng)頁(yè)上的節(jié)奏感非常重要，甚至比數(shù)據(jù)更重要。尤其那些數(shù)據(jù)量大，頁(yè)面長(zhǎng)的網(wǎng)頁(yè)。比如這個(gè)叫Digg的網(wǎng)站，頁(yè)面上出現(xiàn)了雙目錄，但也是遵循了節(jié)奏感方面的一些原則。
Digg
Digg首先在header部分展示出的是一個(gè)水平的導(dǎo)航欄，然后跳到主要內(nèi)容的展示部分，每篇文章依次列開(kāi)。這就給讀者一種連續(xù)的感覺(jué)，會(huì)順著往下滑。而這個(gè)小技巧也被用在了右側(cè)的Top 10文章排列中。
tumblr
我們可以用音樂(lè)來(lái)理解這個(gè)視覺(jué)上呈現(xiàn)出的節(jié)奏感。每個(gè)頁(yè)面都需要一些視覺(jué)上的停頓，這取決于你要讓讀者快速瀏覽這些信息，還是要安插一個(gè)有意思的圖片，還是引導(dǎo)讀者按下下載的按鈕。
如果所有的元素在網(wǎng)頁(yè)上的權(quán)重都一樣，那節(jié)奏也是太一致了，這樣讀者不會(huì)感到乏味嗎（想想那些口水歌）看一下就不想再看下去了，何談看到你想讓他們看到的東西呢？
而如果頁(yè)面上面變化太多，又會(huì)顯得很亂。這就違反了同一性的原理（下面會(huì)講）。最重要的是要在網(wǎng)頁(yè)的某些部分保留一致性。
每個(gè)部分的節(jié)奏感是根據(jù)各個(gè)不同的需要決定的，就像Digg，但整體也需要通過(guò)顏色或形狀呈現(xiàn)一致性。
強(qiáng)調(diào)
在設(shè)計(jì)中，再?zèng)]有比圓形更有魅力的圖案了，尤其是在充斥著四邊形的網(wǎng)頁(yè)設(shè)計(jì)領(lǐng)域。一個(gè)圓圈并不需要借助亮眼的顏色或留白，僅僅靠它的形狀特點(diǎn)就能輕松引起用戶的注意。這就是為什么你的眼睛總能被那些最近流行的標(biāo)志所吸引，不過(guò)“圓形”最大的魅力其實(shí)還是發(fā)揮在Logo上。
圖4a：A List Apart
正如你在圖4a中所見(jiàn)，A List Apart用了不止一個(gè)，而是多組“圓形”來(lái)突顯出其Logo。你不僅能通過(guò)其旁邊那個(gè)有著發(fā)行編碼的標(biāo)志(1)注意到它，也能通過(guò)右手邊幾個(gè)更小的標(biāo)志注意到T恤促銷(xiāo)的信息。
你還可以通過(guò)使用”留白“或”顏色“來(lái)起到強(qiáng)調(diào)的作用。它們可配合”圖形“使用，但通常情況下你不必用全，一兩個(gè)即可。三個(gè)元素的同時(shí)使用會(huì)造成一種過(guò)于夸張的吸引力，讓用戶很難再去注意頁(yè)面其他的部分，尤其是主要內(nèi)容。
圖4b: Google
Google 同時(shí)放了“留白”和“顏色”兩個(gè)大招刷存在感。顏色鮮艷的Google標(biāo)志和周?chē)竺娣e的白色的區(qū)域總能即刻吸引你的眼球。Google如此設(shè)計(jì)不僅強(qiáng)化了 其標(biāo)志，還能使你的目光自然地從左到右：你的目光可以準(zhǔn)確地找到搜索輸入框，同時(shí)自然地移向右邊的主搜索鍵。Google能夠提供給用戶最優(yōu)質(zhì)的搜索結(jié) 果，其中一個(gè)成功因素恰恰就是充分利用了基礎(chǔ)視覺(jué)技術(shù)，為網(wǎng)頁(yè)打造出極佳的易用感。
整體感
整體感是一個(gè)見(jiàn)仁見(jiàn)智的概念，一種“合而為一”的感受。沒(méi)有什么元素是實(shí)在無(wú)法符合設(shè)計(jì)氛圍和感覺(jué)的。
okey dave
關(guān)于整體感有個(gè)重要的例子——Dave Werner的portfolio作品集。其每一頁(yè)都有網(wǎng)站手稿、圖釘和其他一些雜七雜八的玩意兒，他把這些元素結(jié)合在一起并且打造出了整體感。既沒(méi)有一樣元素顯得過(guò)于突兀，也沒(méi)有出現(xiàn)迥異的整體風(fēng)格。
【網(wǎng)頁(yè)設(shè)計(jì)的五大規(guī)則】相關(guān)文章：
網(wǎng)頁(yè)設(shè)計(jì)的五大技巧05-09
網(wǎng)頁(yè)設(shè)計(jì)字體組合的黃金規(guī)則01-20
10個(gè)優(yōu)化網(wǎng)頁(yè)用戶界面網(wǎng)頁(yè)設(shè)計(jì)的規(guī)則01-22
網(wǎng)頁(yè)設(shè)計(jì)字體組合的10個(gè)黃金規(guī)則05-08
響應(yīng)式網(wǎng)頁(yè)設(shè)計(jì)的7類(lèi)排版規(guī)則01-04
網(wǎng)頁(yè)設(shè)計(jì)案例分享:網(wǎng)頁(yè)專(zhuān)題設(shè)計(jì)技巧04-04