門(mén)戶(hù)型網(wǎng)站的布局與色彩選擇發(fā)布者：本站     時(shí)間：2020-05-02 14:05:14

網(wǎng)頁(yè)設計的視覺(jué)效果日新月異，隨著(zhù)互聯(lián)網(wǎng)技術(shù)應用的不斷發(fā)展，視覺(jué)形式的呈現也更加貼切地服務(wù)于用戶(hù)的瀏覽與應用需要。在眾多門(mén)類(lèi)的網(wǎng)站中，資訊類(lèi)網(wǎng)站是最普遍的網(wǎng)站類(lèi)型之一，目前大部分政府、企業(yè)、綜合門(mén)戶(hù)網(wǎng)站都屬于這一類(lèi)網(wǎng)站。

資訊類(lèi)網(wǎng)站的視覺(jué)效果多以簡(jiǎn)潔大方的風(fēng)格呈現。在看似簡(jiǎn)單實(shí)則收納了大量繁雜訊息的網(wǎng)頁(yè)版面上，科學(xué)的視覺(jué)傳達規律起到了重要的作用。就顏色而言，門(mén)戶(hù)類(lèi)網(wǎng)站的用色要整體統一協(xié)調，局部對比醒目。確定主色，主色調是頁(yè)面的主要色彩傾向。企業(yè)網(wǎng)站設計中非常重視主色調的作用，如IBM的蔚藍色、可口可樂(lè )的紅色等，這些顏色已經(jīng)成為企業(yè)的象征。

綜合門(mén)戶(hù)網(wǎng)站由于其內容頻道廣泛的原因，它們在主色調的運用上相對靈活。而政府門(mén)戶(hù)網(wǎng)站對主色調的選擇則較為嚴謹，多以紅、藍作為其主色。設計者要根據網(wǎng)站的定位、主題、瀏覽用戶(hù)，表現利用色彩想要傳達的視覺(jué)效果，大膽地用色。

從方法上來(lái)說(shuō)，門(mén)戶(hù)網(wǎng)站通常從網(wǎng)站內容的主題立意角度選擇主色。如針對網(wǎng)站的布局，從圖片著(zhù)手選擇主色，運用Photoshop軟件使圖片彩塊化呈現：用吸管工具將顏色提取出來(lái)，按規律排列，得到一組可用樣色。在眾多可用色調中，選擇切合主題且視覺(jué)效果出眾的顏色作為主色。

主色調確定后，要合理運用色彩規律進(jìn)行配色工作。將主色調在色相環(huán)上定位，以此尋找與主色調協(xié)調的色彩。第一，單色調：主色的深、中、淺的組合被稱(chēng)為單色調。單色調沒(méi)有色相上的變化，卻提供了色彩明度對比，使得版面給人以統一的整體印象，常用于風(fēng)格穩健的設計中。第二，類(lèi)似色色調：在色相環(huán)中與主色相鄰的顏色是類(lèi)似色。類(lèi)似色之間具有很強的潛在關(guān)聯(lián)性，這種色調既有單色調的統一，又具有活力和變化。類(lèi)似色色調類(lèi)別豐富，相對容易駕馭。第三，對比色色調：將色相或色彩差異大的色調搭配在一起，利用對比呈現出強烈的視覺(jué)效果，稱(chēng)為對比配色。它與前面兩種配色相反，會(huì )給人強烈的視覺(jué)沖擊力。對比配色在門(mén)戶(hù)類(lèi)網(wǎng)頁(yè)設計中通常以強調色的身份出現，同色系低飽和度、變化少且單調的配色中，用與主色成對比的色彩色調作為強調重點(diǎn)，如標題橫幅（banner）區域的文字和標志（logo）使用對比關(guān)系色彩，能讓整個(gè)網(wǎng)頁(yè)看起來(lái)更完整且色彩分明。而此時(shí)所用的重點(diǎn)色就成為強調色。小面積使用高明度、高飽和度的強調色是為了與主色形成對比。如果大范圍、大面積使用強烈色彩，則會(huì )打亂視覺(jué)平衡，使整體網(wǎng)頁(yè)視覺(jué)印象過(guò)于強烈。

就布局而言，門(mén)戶(hù)類(lèi)網(wǎng)站的訊息繁多，各類(lèi)信息的位置十分重要。布局要以美觀(guān)清晰、便于用戶(hù)瀏覽閱讀為根本。這首先就涉及視覺(jué)流程的問(wèn)題。所謂視覺(jué)流程，是指網(wǎng)站界面設計對于用戶(hù)的視覺(jué)引導，用戶(hù)瀏覽網(wǎng)頁(yè)時(shí)首先會(huì )看到什么，然后會(huì )看到哪里，在哪個(gè)位置瀏覽停留時(shí)間長(cháng)，哪里用時(shí)少，這些都是運用科學(xué)的視覺(jué)流程規律來(lái)引導的。有人認為網(wǎng)站的版式布局、選色配色、字體安排只關(guān)乎頁(yè)面的美觀(guān)問(wèn)題，其實(shí)這些版式布局同樣對用戶(hù)的心理產(chǎn)生一定的影響。

從位置上來(lái)講，人們的視線(xiàn)習慣于從上至下、從左到右地瀏覽頁(yè)面內容。所以，網(wǎng)頁(yè)的上方位置比下方重要，左側位置比右側重要。通常，中上部被稱(chēng)為“優(yōu)選視域”,多用于放置重要內容。從面積上來(lái)說(shuō)，用戶(hù)在掌握整體畫(huà)面信息之后，不管是文字還是圖片，一定會(huì )先從大面積的部分看到小面積的部分。從色彩上來(lái)說(shuō)，用戶(hù)視線(xiàn)會(huì )從濃烈的色彩開(kāi)始，移動(dòng)到淺淡的色彩，容易從色調高的部分移向色調低的部分。此外，在色彩統一的版面中加入性質(zhì)不同的色彩后，人們也會(huì )自然地將視線(xiàn)移到不同的色彩上。

以上引導視線(xiàn)的方法在傳達視覺(jué)印象或呈現視覺(jué)感受時(shí)，都能在網(wǎng)站的版面設計中反映出先后順序。以政府門(mén)戶(hù)類(lèi)網(wǎng)站為例，在首頁(yè)設計中，一些重要信息多以大圖的動(dòng)態(tài)形式出現在左側，右側為推薦文字信息。實(shí)時(shí)突出的重大新聞?dòng)么笞种庙?。首?yè)的下半部分（頂部導航欄以下）放置更新速度相對較慢的常規信息，這樣整個(gè)版面的層次就拉開(kāi)了，讓瀏覽用戶(hù)第一眼就能找到主次關(guān)系。

綜合門(mén)戶(hù)類(lèi)網(wǎng)站的布局相對更靈活，因為其頻道范圍廣，其導航欄占據更大的空間，位置的擴張本身就加強了其功能性，在視覺(jué)順序上也提前了，讓瀏覽者一目了然，直奔主題。標題和站內搜索引擎雖然置頂，但由于面積和導航欄對比懸殊，在視覺(jué)順序上相對要弱些，想看的時(shí)候才能看見(jiàn)它--這正是設計者、瀏覽用戶(hù)所需要的。此類(lèi)門(mén)戶(hù)網(wǎng)站多在導航欄下方配圖，以廣告居多，可靈活運用位置空間。

網(wǎng)頁(yè)設計中的文字也是影響布局的重要因素。字體、字形大小的選擇要觀(guān)察可用區域面積的比例，如配圖及圖案中肌理的走勢。首頁(yè)整體格調也是選用文字的重要參考因素，文字要與之相呼應。如時(shí)尚的氣氛配時(shí)尚的字體，樸素的氣氛配平靜的字體等。

門(mén)戶(hù)類(lèi)網(wǎng)站信息量龐大，只有科學(xué)地運用色彩與布局等視覺(jué)傳達規律，合理地配色、排版，才會(huì )使頁(yè)面呈現出條理清晰、主次分明、簡(jiǎn)潔大方的視覺(jué)效果，從而方便瀏覽者使用。