聊聊網(wǎng)頁設(shè)計中五大「金科玉律」

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

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

　　平 衡

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

　　舉兩個例子:

　　不對稱平衡

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

　　對稱平衡

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

　　比 例

　　對于網(wǎng)頁元素來說，并不是看得清楚就好，或者文本多長就弄多大，它的排布跟網(wǎng)頁的平衡視覺上強調(diào)誰有很大關(guān)系。

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

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

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

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

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

　　節(jié)奏

　　網(wǎng)頁上的節(jié)奏感非常重要，甚至比數(shù)據(jù)更重要。尤其那些數(shù)據(jù)量大，頁面長的網(wǎng)頁。比如這個叫Digg的網(wǎng)站，頁面上出現(xiàn)了雙目錄，但也是遵循了節(jié)奏感方面的一些原則。

　　Digg首先在header部分展示出的是一個水平的導(dǎo)航欄，然后跳到主要內(nèi)容的展示部分，每篇文章依次列開。這就給讀者一種連續(xù)的感覺，會順著往下滑。而這個小技巧也被用在了右側(cè)的Top 10文章排列中。

　　我們可以用音樂來理解這個視覺上呈現(xiàn)出的節(jié)奏感。每個頁面都需要一些視覺上的停頓，這取決于你要讓讀者快速瀏覽這些信息，還是要安插一個有意思的圖片，還是引導(dǎo)讀者按下下載的按鈕。

　　如果所有的元素在網(wǎng)頁上的權(quán)重都一樣，那節(jié)奏也是太一致了，這樣讀者不會感到乏味嗎(想想那些口水歌)看一下就不想再看下去了，何談看到你想讓他們看到的東西呢?

　　而如果頁面上面變化太多，又會顯得很亂。這就違反了同一性的原理(下面會講)。最重要的是要在網(wǎng)頁的某些部分保留一致性。

　　每個部分的節(jié)奏感是根據(jù)各個不同的需要決定的，就像Digg，但整體也需要通過顏色或形狀呈現(xiàn)一致性。

　　強調(diào)

　　在設(shè)計中，再沒有比圓形更有魅力的圖案了，尤其是在充斥著四邊形的網(wǎng)頁設(shè)計領(lǐng)域。一個圓圈并不需要借助亮眼的顏色或留白，僅僅靠它的形狀特點就能輕松引起用戶的注意。這就是為什么你的眼睛總能被那些最近流行的標志所吸引，不過“圓形”最大的魅力其實還是發(fā)揮在Logo上。

　　正如你在圖4a中所見，A List Apart用了不止一個，而是多組“圓形”來突顯出其Logo。你不僅能通過其旁邊那個有著發(fā)行編碼的標志(1)注意到它，也能通過右手邊幾個更小的標志注意到T恤促銷的信息。

　　你還可以通過使用”留白“或”顏色“來起到強調(diào)的作用。它們可配合”圖形“使用，但通常情況下你不必用全，一兩個即可。三個元素的同時使用會造成一種過于夸張的吸引力，讓用戶很難再去注意頁面其他的部分，尤其是主要內(nèi)容。

　　Google同時放了“留白”和“顏色”兩個大招刷存在感。顏色鮮艷的Google標志和周圍大面積的白色區(qū)域總能即刻吸引你的眼球。Google如此設(shè)計不僅強化了其標志，還能使你的目光自然地從左到右：你的目光可以準確地找到搜索輸入框，同時自然地移向右邊的主搜索鍵。Google能夠提供給用戶最優(yōu)質(zhì)的搜索結(jié)果，其中一個成功因素恰恰就是充分利用了基礎(chǔ)視覺技術(shù)，為網(wǎng)頁打造出極佳的易用感。

　　整體感

　　整體感是一個見仁見智的概念，一種“合而為一”的感受。沒有什么元素是實在無法符合設(shè)計氛圍和感覺的。

　　關(guān)于整體感有個重要的例子——Dave Werner的portfolio作品集。其每一頁都有網(wǎng)站手稿、圖釘和其他一些雜七雜八的玩意兒，他把這些元素結(jié)合在一起并且打造出了整體感。既沒有一樣元素顯得過于突兀，也沒有出現(xiàn)迥異的整體風(fēng)格。

　　在他的Portfolio作品集中，即便有很多看上去千差外別的分散個體元素，其實也都被筆記和草圖掩蓋了：這甚至形成了他作品集獨有的設(shè)計風(fēng)格。他的作品集里不存在一個網(wǎng)頁，你在上面看不到任何圖釘(用于組合界面元素)的痕跡。

　　你可能還不是大牛(我也不是)，但我希望你在這些例子中能吸收到一定的設(shè)計經(jīng)驗。這些經(jīng)驗既能助你做出最渴望達到的視覺效果，也能使用戶的眼球遵循你的意圖到達指定頁面。沒有這些元素，即使你的設(shè)計“看上去”也不賴，你也無法再有所突破。這些原則本身都非常簡單，但是作為設(shè)計師，我們必須時刻注意它們。