網頁設計專業水準的水平

本文介紹了四個網頁設計的基本準則，其實，設計是相通的，本文也適用於平面設計和視頻設計當中，希望對你有幫助，一起來看。

據我N年（N≤1）的經驗來看，許多網頁設計師或者網頁設計愛好者都並非是科班出身，他們沒有接受過系統的設計理論的教育。所以做網頁設計時，往往是憑自己靈感或者參考別人作品，導致設計出來的作品無論在整體還是細節上都不能達到一些專業水準的水平。

但是，實際上只要掌握本教程所介紹的4基本的設計準則，那麼就能顯著提高網頁設計師的設計水平，讓你完成從業餘設計師到專業設計師的蛻變。

事實上，這四個基本準則不僅僅適用於網頁設計領域，在平面設計、視頻設計等領域也被廣泛被運用，因為設計是相通的。這四個基本準則有一個好記的名字“鯉魚（CRAP）”，英文單詞鯉魚是由CRAP四個字母組成的，分別是是四個單詞的首字母縮寫，這四個準則是：

Contrast：對比

Repetition：重複

Alignment：對齊

Proximity：相似

這四個準則可謂實用又好用，所以本教程是一個系列教程，後續文章會對四個準則分別進行介紹，本文是概述。

1.對齊（Alignment）
 

對齊是網頁設計理論中一個非常重要的準則，但是卻很容易掌握。判斷一個網站的設計是業餘水準還是專業水準，通過看是否恰當運用對齊準則就知道了。沒有運用對齊準則的網頁，所有東西好像是隨意散落在頁面上似的，結構很鬆散，沒有較強的目的性。

對齊準則: 設計網頁時，網頁上任何設計元素都不應該被隨意放置，所有設計元素和頁面上的其他元素要有視覺上的聯繫，這個聯繫手段就是對齊。

本教程在上圖網頁加了一些水平和垂直的紅線，標出了它們對齊的地方。請讀者註意看頁面上這些設計元素是如何和其他元素對其的。

舉個例子：如標誌部分和內容的第一欄文字是對齊的，這是有意為之，而不是偶然的。

2.重複（Repetition）
 

專業的網頁設計會保持一個統一的頁面風格，各個頁面的風格不會互相衝突。保持這種風格統一性的秘訣就在於運用重複準則。

重複準則: 一些設計元素在整個網頁設計過程中要有一些重複。

重複準則也可以幫助訪問者知道網站上面哪些元素在功能上是一樣的，或者哪些元素在內容的重要性上是屬於哪個等級的。

讀者可以注意到，每一個評論的標題都是一樣的風格，評論正文的背景顏色也是一樣的，評論者的頭像都是靠左對齊的。這些雖然是Wordpress後台默認的，但從設計上講，的確運用了重複準則。

再看側邊欄，每個側邊欄的標題看上去都是相同的，一樣的背景，相同的字號和字體顏色。

重複準則可以讓訪客知道哪些東西是同一類的，所以，重複準則不僅能改善網頁的設計，而且也能提升整個網站的用戶體驗。

3.對比（Contrast）
 

很顯然，如果網頁設計的時候，所有的元素都設計得相差不大，那麼自然很難找到所需要的內容。因為沒有重點和非重點的區別。要把內容區分出來，就必須用到對比準則。

對比準則: 網頁上的內容應該有一定的對比和區分度。

一個簡單的測試對比的方法是瞇眼測試，把眼睛瞇起來看，如果對比運用恰當的話，你應該還是可以分辨出設計頁面上不同的內容，對比準則就是幫助區分這些不同的內容。

舉個例子，上面設計稿左下方兩個碩大的按鈕就是為了突出這兩個鏈接，以便讓訪客點擊它們，了解更多公司的信息和去聯繫他們。因為這兩個按鈕和其他的內容有很大的對比度，所以很容易被區分出來。

4.相似（Proximity）
 

一些糟糕的網頁設計例子：

你看到一張圖片，卻不知道描述這張圖片的具體文字是那一段。

你花了很長時間才知道某一個設計元素和其他設計元素原來是同一類別。

這些都是因為設計網頁時，沒有運用到相似準則。

相似準則: 相關聯或者類似的項目應該組成一組。

請看上圖用紅色框起來的部分，Solution這個總標題和下面6個文字段落的距離比上面的文字要更接近一點。同樣，下面6塊段落文字，它們自己的標題、圖標和文字都會靠在一起，台中網頁設計每一塊都會和其他塊保持一定距離，以便讀者容易區分。這樣你就可以輕鬆知道這些標題、圖標是描述哪一些文字的。

總結

學習完了大概介紹，如果你想學習運用這四個準則，網頁設計公司那麼從現在起瀏覽網頁時，看別人的網頁設計是如何運用這四個準則的。

如果看到了一個你喜歡的網頁設計，建議你看看是否能找到以上提到的準則，當看到一個不令人喜歡的網頁設計時，看看是否因為沒有恰當運用這些準則。一旦你在設計網頁的時候意識到了這些準則的存在，那麼請大膽去運用它們。

當然，網頁設計的準則都是可以被打破的，但是設計網頁時，要打破這些準則，你必須先知道這些準則是如何影響網頁設計的。