淺析CRAP在網(wǎng)頁設計中的應用

摘 要：初學者在學習網(wǎng)頁設計課程時，對設計中需要注意的一些設計原則不太清楚，本文將從CRAP中獲得了相關的設計原則，提出設計原則在網(wǎng)頁設計中的應用，供初學者參考。

關鍵詞：網(wǎng)頁設計；對比；重復；對齊；親密性

CRAP是羅賓？威廉姆斯在《寫給大家看的設計書》中提出的基于設計中的Contrast（對比）、Repetition（重復）、Alignment（對齊）和Proximity（親密性）4個基本原則。隨著網(wǎng)絡的不斷發(fā)展，CRAP已經(jīng)被網(wǎng)頁設計師們廣泛應用，同時在中職學生的網(wǎng)頁設計課程教學中也起到了非常重要的作用。教師可以將此四原則融入到網(wǎng)頁設計的教學中，從而提高學生對網(wǎng)頁設計的能力。

原則一：Contrast對比。在網(wǎng)頁設計中要讓各個元素之間各不相同，避免使用基本相似的頁面元素，這樣可以使網(wǎng)頁呈現(xiàn)多元化。例如網(wǎng)頁中不同的文字顏色、大小 ，線條的樣式與寬度，使用不同的形狀。但在使用這些元素時要讓各元素之間產(chǎn)生協(xié)調(diào)，但對于中職學生來說，他們對自主設計網(wǎng)頁，不自信，不敢嘗試使用不同的元素。其實對于網(wǎng)頁設計的初學者來說，可以嘗試使用不同的元素，這種嘗試會有一些突發(fā)狀況，但是也常常會帶來驚喜。這些元素的使用，可以使頁面具有特色，并與眾不同。

舉個例子，對于新聞類的網(wǎng)頁來說，信息量比較大，怎么讓你的新聞吸引讀者的注意？在首頁中先設置一個新聞標題，也就是先給讀者一個內(nèi)容懸念的標題，然后在標題下注明提要，標題字體要大，加上下劃線，字體顏色可以有變化，最好使用加粗的字體，提要字體要相對小些。然后是新聞的正文，正文中標題和內(nèi)容的設置區(qū)別要大些，標題可以設置為初號，顏色可以和網(wǎng)頁整體色調(diào)一致。內(nèi)容字體也不要使用默認大小，要調(diào)整的大一些，可以使用四號。

原則二：Repetition重復。當你打開瀏覽器時，網(wǎng)頁中有許多元素是重復的，比如顏色、形狀、紋理、字體、空間關系、大小、圖形等。而在網(wǎng)頁設計中，重復最多的要數(shù)導航欄，幾乎大部分網(wǎng)站的導航欄在每個頁面中都有，都是重復的，這樣使用者就不會陷在那兒，費神思量，試圖搞清楚不同條目的位置。

例如《生命時報》、《時代》、《紐約時報》這樣的網(wǎng)站，它們都有某些元素，會在網(wǎng)頁間重復出現(xiàn)。那么在設計網(wǎng)頁時，則要將些元素設置成相同的格式，并且字體大小、顏色、圖片都要一致且醒目，并將它們放在頁面的同一個位置。那么要實現(xiàn)這樣的統(tǒng)一，最好在制作網(wǎng)站時，將這些網(wǎng)頁元素的樣式設置在外部樣式表，這樣所有頁面在調(diào)用外部樣式表時，可以保證一致，同時修改時，也可以達到一起修改的效果。

原則三：Alignment（對齊）。在網(wǎng)頁設計是，很多人習慣將所有的元素居中顯示，其實這樣是不利于閱讀的。想一想，我們每天都看到的東西，你讀過多少本書是居中排列的，有多少報紙雜志的文章是居中排列的，又有多少散文是居中排列的，通常是沒有。因為我們?nèi)祟愰喿x文字的順序是從左至右，所以在對齊方式的使用時，請不要讓文字在網(wǎng)頁上居中，那看上去很糟糕，很難閱讀。在網(wǎng)頁設計時，考慮到讀者的視覺，不能在網(wǎng)頁上隨意陳列元素，不要在左側放圖片，那是文章開始的地方，也不能隨便在網(wǎng)頁某處插入圖片，在制作時要讓它與頁面上的元素排列成一個整體。

例如在設計網(wǎng)頁中文字與圖片的對齊時，可考慮人們閱讀的習慣，將文字放在頁面的左邊，也就是使用左對齊，將圖片放置在頁面的右邊，但要注意，圖片所占的區(qū)域不能大于文字，如果需要在頁面中放置的圖片比較好時，可以使用一些特效將圖片放在一個組中，使用特效來展示圖片，網(wǎng)頁中的各個元素之間不能亂，要有一定的規(guī)律，使整個頁面要給讀者有塊的感覺。

原則四：Proximity（親密性）。網(wǎng)頁設計中，相互關聯(lián)的元素應當分組到一起，讓它們構成一個視覺單位，比如導航欄的設計要有特點，與同一網(wǎng)頁上的其它元素要有區(qū)別，但讓導航欄在網(wǎng)頁上獨立存在。在設計中，要將大量的信息進行歸類，將歸類的類目進行提煉，然后放在導航欄中。同時在設計時，要考慮讀者的閱讀習慣，他們一般都不愿意滾屏瀏覽，不會向下瀏覽到你的下方內(nèi)容，所以要最大限度利用桌面面積，將網(wǎng)頁元素盡可能多的放置在頁面上方，這樣頁面啟動時，此處可載入最多內(nèi)容。但不能為了把所有信息都放在頁面上，能使用頁面變得擁擠，在設計時還是要給頁面留白，這樣頁面就會讓讀者不會覺得雜亂了。

以上四原則在實際教學中，教師可以參考，將設計原則應用到自己的教學項目中，在教學項目中提出為什么要這么設計，應用了設計原則中的哪一條，這樣CRAP才能讓中職學生更容易接受和掌握。

參考文獻：

[1] 姜恩正：設計師談成功網(wǎng)頁設計原則.電子工業(yè)出版社，2016年

[2]威廉姆斯：寫給大家看的設計書.人民郵電出版社.2016年

作者簡介：李娜（1982.2），女，湖北十堰人，大學本科學歷，湖北省十堰市高級技工學校中級（講師），主要研究方向：計算機程序設計和網(wǎng)頁制作。

作者單位：湖北省十堰市高級技工學校，湖北十堰，442000