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

關(guān)鍵詞：網(wǎng)頁設(shè)計；對比；重復(fù)；對齊；親密性

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

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

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

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

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

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

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

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

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

參考文獻(xiàn)：

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

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

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

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