從業(yè)余到專業(yè)系列--網(wǎng)頁(yè)設(shè)計(jì)的四個(gè)基本準(zhǔn)則（概述篇）

圖趣將給大家?guī)?lái)一個(gè)網(wǎng)頁(yè)設(shè)計(jì)系列教程：從業(yè)余到專業(yè)。。。

許多網(wǎng)頁(yè)設(shè)計(jì)師或者愛(ài)好者都并非是科班出身，他們沒(méi)有接受過(guò)系統(tǒng)的設(shè)計(jì)理論的教育。所以做網(wǎng)頁(yè)設(shè)計(jì)時(shí)，往往是憑自己靈感或者參考別人作品，導(dǎo)致設(shè)計(jì)出來(lái)的作品無(wú)論在整體還是細(xì)節(jié)上都不能達(dá)到一些專業(yè)水準(zhǔn)的水平。
但是，實(shí)際上只要掌握本教程所介紹的4基本的設(shè)計(jì)準(zhǔn)則，那么就能顯著提高網(wǎng)頁(yè)設(shè)計(jì)師的設(shè)計(jì)水平，讓你完成從業(yè)余設(shè)計(jì)師到專業(yè)設(shè)計(jì)師的蛻變。
事實(shí)上，這四個(gè)基本準(zhǔn)則不僅僅適用于網(wǎng)頁(yè)設(shè)計(jì)領(lǐng)域，在平面設(shè)計(jì)、視頻設(shè)計(jì)等領(lǐng)域也被廣泛被運(yùn)用，因?yàn)樵O(shè)計(jì)是相通的。這四個(gè)基本準(zhǔn)則有一個(gè)好記的名字“鯉魚(yú)（CRAP）”，英文單詞鯉魚(yú)是由CRAP四個(gè)字母組成的，分別是是四個(gè)單詞的首字母縮寫(xiě)，這四個(gè)準(zhǔn)則是：

• Contrast：對(duì)比
• Repetition：重復(fù)
• Alignment：對(duì)齊
• Proximity：相似

這四個(gè)準(zhǔn)則可謂實(shí)用又好用，所以本教程是一個(gè)系列教程，后續(xù)文章會(huì)對(duì)四個(gè)準(zhǔn)則分別進(jìn)行介紹，本文是概述。
Robin Williams的教程書(shū)The Non-Designer’s Design Book對(duì)這四個(gè)基本準(zhǔn)則進(jìn)行了非常深入和詳細(xì)的解答，不過(guò)是英文的。如果讀者時(shí)間不多的話，可以只參考本教程。

1.對(duì)齊（Alignment）

對(duì)齊是設(shè)計(jì)理論中一個(gè)非常重要的準(zhǔn)則，但是卻很容易掌握。判斷一個(gè)網(wǎng)站的設(shè)計(jì)是業(yè)余水準(zhǔn)還是專業(yè)水準(zhǔn)，通過(guò)看是否恰當(dāng)運(yùn)用對(duì)齊準(zhǔn)則就知道了。沒(méi)有運(yùn)用對(duì)齊準(zhǔn)則的網(wǎng)頁(yè)，所有東西好像是隨意散落在頁(yè)面上似的，結(jié)構(gòu)很松散，沒(méi)有較強(qiáng)的目的性。

對(duì)齊準(zhǔn)則: 設(shè)計(jì)網(wǎng)頁(yè)時(shí)，網(wǎng)頁(yè)上任何設(shè)計(jì)元素都不應(yīng)該被隨意放置，所有設(shè)計(jì)元素和頁(yè)面上的其他元素要有視覺(jué)上的聯(lián)系，這個(gè)聯(lián)系手段就是對(duì)齊。

請(qǐng)參考下面的網(wǎng)頁(yè)設(shè)計(jì) Oxford Garden website

本教程在上圖網(wǎng)頁(yè)加了一些水平和垂直的紅線，標(biāo)出了它們對(duì)齊的地方。請(qǐng)讀者注意看頁(yè)面上這些設(shè)計(jì)元素是如何和其他元素對(duì)其的。

舉個(gè)例子：如標(biāo)志部分和內(nèi)容的第一欄文字是對(duì)齊的，這是有意為之，而不是偶然的。

2.重復(fù)（Repetition）

專業(yè)的網(wǎng)頁(yè)設(shè)計(jì)會(huì)保持一個(gè)統(tǒng)一的頁(yè)面風(fēng)格，各個(gè)頁(yè)面的風(fēng)格不會(huì)互相沖突。保持這種風(fēng)格統(tǒng)一性的秘訣就在于運(yùn)用重復(fù)準(zhǔn)則。

重復(fù)準(zhǔn)則: 一些設(shè)計(jì)元素在整個(gè)網(wǎng)頁(yè)設(shè)計(jì)過(guò)程中要有一些重復(fù)。

重復(fù)準(zhǔn)則也可以幫助訪問(wèn)者知道網(wǎng)站上面哪些元素在功能上是一樣的，或者哪些元素在內(nèi)容的重要性上是屬于哪個(gè)等級(jí)的。

請(qǐng)參考下面的網(wǎng)頁(yè)設(shè)計(jì) Mullenweg’s personal blog.

讀者可以注意到，每一個(gè)評(píng)論的標(biāo)題都是一樣的風(fēng)格，評(píng)論正文的背景顏色也是一樣的，評(píng)論者的頭像都是靠左對(duì)齊的。這些雖然是Wordpress后臺(tái)默認(rèn)的，但從設(shè)計(jì)上講，的確運(yùn)用了重復(fù)準(zhǔn)則。

再看側(cè)邊欄，每個(gè)側(cè)邊欄的標(biāo)題看上去都是相同的，一樣的背景，相同的字號(hào)和字體顏色。

重復(fù)準(zhǔn)則可以讓訪客知道哪些東西是同一類的，所以，重復(fù)準(zhǔn)則不僅能改善網(wǎng)頁(yè)的設(shè)計(jì)，而且也能提升整個(gè)網(wǎng)站的用戶體驗(yàn)。

3.對(duì)比（Contrast）

很顯然，如果網(wǎng)頁(yè)設(shè)計(jì)的時(shí)候，所有的元素都設(shè)計(jì)得相差不大，那么自然很難找到所需要的內(nèi)容。因?yàn)闆](méi)有重點(diǎn)和非重點(diǎn)的區(qū)別。要把內(nèi)容區(qū)分出來(lái)，就必須用到對(duì)比準(zhǔn)則。

對(duì)比準(zhǔn)則: 網(wǎng)頁(yè)上的內(nèi)容應(yīng)該有一定的對(duì)比和區(qū)分度。

請(qǐng)參考下面的網(wǎng)頁(yè)設(shè)計(jì) Let’s Make it a Date website

一個(gè)簡(jiǎn)單的測(cè)試對(duì)比的方法是瞇眼測(cè)試，把眼睛瞇起來(lái)看，如果對(duì)比運(yùn)用恰當(dāng)?shù)脑挘銘?yīng)該還是可以分辨出設(shè)計(jì)頁(yè)面上不同的內(nèi)容，對(duì)比準(zhǔn)則就是幫助區(qū)分這些不同的內(nèi)容。

舉個(gè)例子，上面設(shè)計(jì)稿左下方兩個(gè)碩大的按鈕就是為了突出這兩個(gè)鏈接，以便讓訪客點(diǎn)擊它們，了解更多公司的信息和去聯(lián)系他們。因?yàn)檫@兩個(gè)按鈕和其他的內(nèi)容有很大的對(duì)比度，所以很容易被區(qū)分出來(lái)。

4.相似（Proximity）

一些糟糕的網(wǎng)頁(yè)設(shè)計(jì)例子：

• 你看到一張圖片，卻不知道描述這張圖片的具體文字是那一段。
• 你花了很長(zhǎng)時(shí)間才知道某一個(gè)設(shè)計(jì)元素和其他設(shè)計(jì)元素原來(lái)是同一類別。

這些都是因?yàn)樵O(shè)計(jì)網(wǎng)頁(yè)時(shí)，沒(méi)有運(yùn)用到相似準(zhǔn)則。

相似準(zhǔn)則: 相關(guān)聯(lián)或者類似的項(xiàng)目應(yīng)該組成一組。

參考下面這個(gè)網(wǎng)頁(yè)設(shè)計(jì) Arts Design Studio website

請(qǐng)看上圖用紅色框起來(lái)的部分，Solution這個(gè)總標(biāo)題和下面6個(gè)文字段落的距離比上面的文字要更接近一點(diǎn)。同樣，下面6塊段落文字，它們自己的標(biāo)題、圖標(biāo)和文字都會(huì)靠在一起，每一塊都會(huì)和其他塊保持一定距離，以便讀者容易區(qū)分。這樣你就可以輕松知道這些標(biāo)題、圖標(biāo)是描述哪一些文字的。

總結(jié)

要更加深入的學(xué)習(xí)這個(gè)四個(gè)準(zhǔn)則？不用擔(dān)心，很快將翻譯發(fā)布出剩下的文章。

學(xué)習(xí)完了大概介紹，如果你想學(xué)習(xí)運(yùn)用這四個(gè)準(zhǔn)則，那么從現(xiàn)在起瀏覽網(wǎng)頁(yè)時(shí)，看別人的網(wǎng)頁(yè)設(shè)計(jì)是如何運(yùn)用這四個(gè)準(zhǔn)則的。

如果看到了一個(gè)你喜歡的網(wǎng)頁(yè)設(shè)計(jì)，看看是否能找到以上提到的準(zhǔn)則，當(dāng)看到一個(gè)不令人喜歡的網(wǎng)頁(yè)設(shè)計(jì)時(shí)，看看是否因?yàn)闆](méi)有恰當(dāng)運(yùn)用這些準(zhǔn)則。一旦你在設(shè)計(jì)網(wǎng)頁(yè)的時(shí)候意識(shí)到了這些準(zhǔn)則的存在，那么請(qǐng)大膽去運(yùn)用它們。

當(dāng)然，網(wǎng)頁(yè)設(shè)計(jì)的準(zhǔn)則都是可以被打破的，但是設(shè)計(jì)網(wǎng)頁(yè)時(shí)，要打破這些準(zhǔn)則，你必須先知道這些準(zhǔn)則是如何影響網(wǎng)頁(yè)設(shè)計(jì)的。