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

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

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

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

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

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

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

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

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

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

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

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