淺析CRAP在網(wǎng)頁設(shè)計(jì)中的應(yīng)用

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

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

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

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

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

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

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

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

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

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

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

參考文獻(xiàn)：

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

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

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

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