| 淺談?wù)T戶網(wǎng)站網(wǎng)頁設(shè)計要點 | ||
作者：袁藝 林生 文章來源：信息化建設(shè) 點擊數(shù)： 94 更新時間：2009-1-15 14:56:35  | ||
在明確以上設(shè)計原則的基礎(chǔ)上，政府門戶網(wǎng)站網(wǎng)頁設(shè)計還應(yīng)掌握以下要點。 一、整體創(chuàng)意與風(fēng)格 網(wǎng)頁的創(chuàng)意與風(fēng)格是圍繞主題和內(nèi)容，對網(wǎng)頁色彩、布局、動畫、圖片、文字等頁面元素統(tǒng)一進(jìn)行個性化設(shè)計而形成的整體視覺效果和藝術(shù)特點。當(dāng)前，一些政府門戶網(wǎng)站個性不足，趨向于模式化和同質(zhì)化，中央人民政府門戶網(wǎng)站幾乎成了一些地方政府門戶網(wǎng)站的“模板”，“千網(wǎng)一面”、“似曾相識”的現(xiàn)象嚴(yán)重。還有的網(wǎng)站網(wǎng)頁風(fēng)格不明顯，主要表現(xiàn)在：同一頁面內(nèi)各種元素拼湊堆砌、零散混亂，缺少相互呼應(yīng)和一致性；在頁面與頁面之間，特別是一級和二級頁面之間，色彩、版式、文字等網(wǎng)頁風(fēng)格大相徑庭，頁面間聯(lián)系不夠緊密，沒有形成統(tǒng)一的整站形象等。網(wǎng)頁的創(chuàng)意與風(fēng)格是網(wǎng)頁設(shè)計的靈魂和統(tǒng)領(lǐng)，創(chuàng)意匱乏、風(fēng)格平庸的網(wǎng)站很難吸引人的眼球。因此，加強(qiáng)網(wǎng)頁的創(chuàng)意設(shè)計和風(fēng)格塑造是提高網(wǎng)頁設(shè)計水平的首要解決問題。 應(yīng)該說，政府門戶網(wǎng)站不應(yīng)僅僅是一種政府發(fā)布信息資源和提供信息服務(wù)的工具，也應(yīng)是一級政府在網(wǎng)絡(luò)上精心打造的視覺形象，應(yīng)著力反映政府的執(zhí)政理念、發(fā)展策略和遠(yuǎn)景規(guī)劃等深層次內(nèi)容。盡管創(chuàng)意具有很強(qiáng)的主觀色彩，似乎來自于靈感與頓悟，但絕非空穴來風(fēng)完全不可把握。創(chuàng)意設(shè)計應(yīng)緊緊抓住本地區(qū)的歷史沿革、地域文化、民族特色等個性化特點，選取標(biāo)志性的圖片、有象征意義的色彩、雋永深刻的文字和恰當(dāng)?shù)牟季?，按照視覺規(guī)律進(jìn)行藝術(shù)加工，設(shè)計出完整一致的視覺形象，并長期沿用下去，不斷強(qiáng)化瀏覽者的記憶，久而久之就會深入人心，印象深刻，成為本地區(qū)獨特的“網(wǎng)絡(luò)形象代表”，這就是一個政府門戶網(wǎng)站成功創(chuàng)意和風(fēng)格的最終表現(xiàn)。 二、頁面色彩與色調(diào) 對以呈現(xiàn)信息為主的門戶網(wǎng)站而言，和諧的色彩色調(diào)能提高信息獲取速度，比字形和字體的變化更能提高理解的準(zhǔn)確度。當(dāng)前，一些政府門戶網(wǎng)站網(wǎng)頁在色彩色調(diào)方面的問題主要有：色彩使用過多，造成色彩雜亂相互沖突，色彩觀感矛盾，主色調(diào)不明確；文字、圖片、動畫等要素的色彩處理不一致，整體效果不佳，割裂了網(wǎng)頁色彩的整體感；網(wǎng)頁色調(diào)過于鮮艷，色彩對比過于強(qiáng)烈，視覺跳躍過于明顯，引起瀏覽者視覺疲勞和注意力分散；文字顏色和背景色對比不明顯，降低了閱讀效率。因此，政府門戶網(wǎng)站網(wǎng)頁的色彩色調(diào)設(shè)計要盡量做到“穩(wěn)重不夸張、大氣不局促、素雅不濃烈、協(xié)調(diào)不跳躍”，其設(shè)計可分為以下步驟。 一是確定主色調(diào)。主色調(diào)是頁面的主要色彩傾向。企業(yè)網(wǎng)站設(shè)計中非常重視主色調(diào)的作用，如：IBM的蔚藍(lán)色、可口可樂的紅色、聯(lián)想集團(tuán)的藍(lán)色等，這些顏色與企業(yè)形象融為一體，已經(jīng)成為企業(yè)的象征。當(dāng)前，政府門戶網(wǎng)站網(wǎng)頁主色調(diào)的選擇以紅色居多，有千篇一律的感覺，其實設(shè)計者完全可以根據(jù)網(wǎng)站的創(chuàng)意、主題和使用對象，以及利用色彩想要達(dá)到的視覺和心理效果，大膽選擇黃色、灰色、綠色等作為主色調(diào)。 二是確定配色方案。主色調(diào)確定后，就要合理運用色彩規(guī)律，以主色調(diào)為中心，利用色彩的明度、純度、色相三要素的變化，適當(dāng)增加其他色彩作為對比色和補(bǔ)色，選取輔色調(diào)、點睛色、背景色等組成配色方案，和主色調(diào)一起構(gòu)成有節(jié)奏韻律、和諧統(tǒng)一的色彩關(guān)系（見插圖1）。網(wǎng)頁配色方案要避免出現(xiàn)色彩單一或用色過多的現(xiàn)象，色彩種類最好不要超過四種。  插圖1 一種配色方案 三是正確使用色彩。確定好主色調(diào)和配色方案后，在色彩的使用中應(yīng)注意“總體協(xié)調(diào)、局部對比”，即網(wǎng)頁的整體色彩效果應(yīng)該是和諧的，只有局部小范圍的地方可以有一些強(qiáng)烈的色彩對比。要適當(dāng)保持用色的延續(xù)性，在風(fēng)格統(tǒng)一的基礎(chǔ)上，為子網(wǎng)站或功能模塊選取不同的主色調(diào)和配色方案，既要從顏色上對不同內(nèi)容加以區(qū)分，使得頁面富于變化，又要保持色彩的整體性和協(xié)調(diào)性。背景色一般采用素淡清雅的色彩，應(yīng)避免采用花紋復(fù)雜的圖片和純度很高的色彩，背景色與文字的色彩對比要強(qiáng)烈一些，便于區(qū)分背景和文字，提供舒適的視覺體驗。 三、欄目布局與版式 網(wǎng)頁布局與版式設(shè)計是運用版面設(shè)計原理，合理配置與秩序化網(wǎng)頁視覺元素的過程，其目的是實現(xiàn)信息傳遞的清晰化、合理化、人性化，并考慮視覺形態(tài)的美化，使瀏覽者在獲取信息的同時獲得審美感受。網(wǎng)頁布局與版式設(shè)計同傳統(tǒng)平面媒體的版式設(shè)計非常相似，其實質(zhì)就是在有限的屏幕空間內(nèi)將特定的視聽多媒體元素進(jìn)行合理的編輯和安排。從整體上講，一些政府門戶網(wǎng)站網(wǎng)頁在布局與版式方面，過于方正、剛硬和死板，缺少設(shè)計靈感和藝術(shù)美感，主要表現(xiàn)在：采用直線和方塊元素的多，采用曲線和不規(guī)則形狀元素的少；采用對稱性設(shè)計的多，采用非對稱性設(shè)計的少；采用常規(guī)布局的多，突破常規(guī)布局的少。布局與版式設(shè)計主要應(yīng)注意以下幾個方面。 一是版式線條。網(wǎng)頁中文字、標(biāo)題、圖片等會在頁面上組合形成各種線條和形狀。正確地處理和搭配好這些線條和形狀，才能增強(qiáng)頁面的藝術(shù)魅力。直線條的藝術(shù)效果是流暢、挺拔、規(guī)矩、整齊，有輪有廓。直線和矩形在頁面上的重復(fù)組合可以呈現(xiàn)井井有條、涇渭分明的視覺效果，一般應(yīng)用于比較莊重、嚴(yán)肅的頁面；曲線條的藝術(shù)效果是流動、活躍，具有動感。（見插圖2）曲線和弧形在頁面上的重復(fù)組合可以呈現(xiàn)流暢、輕快，富有活力的視覺效果，一般用于表現(xiàn)青春、活潑的主題。政府門戶網(wǎng)站網(wǎng)頁設(shè)計如果能以直為主、曲直結(jié)合，就可以豐富頁面的表現(xiàn)力和內(nèi)涵，顯得莊重而又不刻板，威嚴(yán)而又不冷漠。  插圖2 曲線板式的例子 二是欄目布局。網(wǎng)頁布局有“國”字型、拐角型、標(biāo)題正文型、左右框架型、上下框架型、綜合框架型、封面型、F1ash型、變化型等多種形式。（見插圖3）政府門戶網(wǎng)站主頁一般采用“國”字型布局，即最上面是網(wǎng)站標(biāo)題圖，接下來是網(wǎng)站主體內(nèi)容，左右分列兩小條內(nèi)容，中間是主要部分，與左右一起羅列到底，最下面是網(wǎng)站的制作單位、聯(lián)系方式、版權(quán)聲明等。這是一種適合政府門戶網(wǎng)站的常規(guī)布局，也是一種安全保守的布局，具有便于呈現(xiàn)大量信息、便于設(shè)計實現(xiàn)的優(yōu)點，但使用實在過多，沒有任何新鮮感，如果能在此基礎(chǔ)上，適當(dāng)加以錯位或非對稱的布局變化，頁面會顯得更靈活和生動。  插圖3 典型的“國”字型布局 三是頁面尺寸。從頁面寬度來看，基于800×600分辨率寬度來設(shè)計網(wǎng)頁已經(jīng)過時，在17寸以上寬屏顯示器已經(jīng)普及的今天，個別政府門戶網(wǎng)站仍采用這一寬度，會在屏幕左右留下了較大空白，顯得小氣和局促，窄小的頁面也不利于呈現(xiàn)豐富的信息，因此，網(wǎng)頁寬度應(yīng)以1024×768分辨率為設(shè)計標(biāo)準(zhǔn)。也可以此分辨率為基準(zhǔn)，采用自適應(yīng)屏幕寬度設(shè)計，在各種分辨率條件下都能取得較好的效果。從頁面長度來看，我國政府門戶網(wǎng)站主頁絕大部分采用多頁式結(jié)構(gòu)。多頁式主頁應(yīng)避免為使主頁內(nèi)容顯得豐富，將二級頁面的內(nèi)容提到主頁上來，使得頁面長度超過三屏，顯得過分冗長。單頁式主頁一般為導(dǎo)航型門戶網(wǎng)站采用，因為主頁呈現(xiàn)的信息量比較少，尤其要注意導(dǎo)航系統(tǒng)的設(shè)計，力求周全便捷，避免給用戶進(jìn)一步獲取信息帶來困難。 四是構(gòu)圖比例。黃金分割比例大約為0.618，可以不精確地表示為3比5(或5比8，8比13……)。黃金分割寓變化于整齊之中。過于強(qiáng)調(diào)整齊的形體，容易流于呆板單調(diào);而變化過多的形體，又顯得散漫雜亂。黃金分割律中，左右兩邊長度是不等和變化的，但又符合一定的規(guī)律，從這個角度看又是整齊的。它不僅在自然界中隨處可見，在建筑、廣告、工業(yè)設(shè)計中也被作為最完美的比例標(biāo)準(zhǔn)。在網(wǎng)頁的構(gòu)圖中，有的政府門戶網(wǎng)站一味采用對稱和居中設(shè)計，顯得過于呆板，若能有意識地運用黃金分割和視覺中心點來配置頁面元素，將大大增強(qiáng)頁面的美感，減少構(gòu)圖比例失調(diào)的情況。 五是留白處理。留白是寫意國畫中常用的藝術(shù)手法，它能緩和畫面的緊張及復(fù)雜度，喚起聯(lián)想，利于組織嚴(yán)密和突出主題，加強(qiáng)對比，達(dá)到畫面的均衡（見插圖4）著名畫家齊白石的《蝦趣》就是留白處理的佳作。留白同樣也適用于網(wǎng)站的布局設(shè)計和圖片設(shè)計。在給人強(qiáng)烈印象的構(gòu)成要素的周圍留下空白，能擴(kuò)大和提高視覺效果，有利于視線流動，破除沉悶感。有的政府門戶網(wǎng)站網(wǎng)頁頁面為突出信息量，“寸土必爭”，飽滿擁擠，給人“堵得慌”的感覺，這就是因為留白處理不當(dāng)?shù)暮蠊?/p>  插圖4 齊白石的《蝦趣》 六是視覺流程。視覺流程是一個由總體感知、局部感知到最后印象三個感知階段組成的心理認(rèn)知過程。人的視線在一個平面上的流動具有比較固定的認(rèn)知模式，即從左到右，自上而下，由左上沿著弧線向右下方自然地流動。在打開頁面后，如果沒有明確目的，瀏覽者一般會首先快速瀏覽整個頁面，形成初步印象，然后視線會被可視性最強(qiáng)或感興趣的對象所吸引，并促成點擊。在網(wǎng)頁設(shè)計中，應(yīng)該遵循“閱讀最省力”的原則，要注意視覺流程規(guī)律，視覺流速應(yīng)合理，視線導(dǎo)向應(yīng)明確，要有意識地引導(dǎo)瀏覽者視線按流程順序輕松、省力、愉悅地閱讀。依據(jù)此原理，在政府門戶網(wǎng)站網(wǎng)頁布局和版式設(shè)計中，應(yīng)將重大新聞和圖片欄目等重要信息，布置在頁面靠左上方位置，并依欄目重要程度由上向下、由左至右排列。 四、媒體設(shè)計與運用 隨著網(wǎng)絡(luò)多媒體技術(shù)的進(jìn)步，圖形、圖像、動畫、視頻、聲音等多媒體元素的運用，網(wǎng)頁由靜到動，由無聲到有聲，極大地豐富了網(wǎng)頁的表現(xiàn)力。多媒體的設(shè)計運用與表現(xiàn)效果也成為網(wǎng)頁設(shè)計要考慮的重要因素。當(dāng)前，很多政府門戶網(wǎng)站在標(biāo)題圖的設(shè)計上難以脫離“國徽＋政府名稱＋域名＋拼音”的窠臼，有的甚至完全模仿中央人民政府門戶網(wǎng)站依葫蘆畫瓢；有的網(wǎng)站使用類似新浪、搜狐等門戶網(wǎng)站常見的飄浮廣告條，不符合政府門戶網(wǎng)站莊重嚴(yán)肅的氣氛；有的網(wǎng)站動畫和圖片使用過多過濫，造成瀏覽者晃眼和不適，效果適得其反等，這些都是媒體設(shè)計與運用不當(dāng)?shù)慕Y(jié)果。因此，媒體的設(shè)計與運用必須注意以下方面。 一是在聲音運用方面。政府門戶網(wǎng)站一般很少使用背景音樂，主要是因為門戶網(wǎng)站訪問頻率很高，不斷重復(fù)播放的背景音樂會使瀏覽者產(chǎn)生聽覺疲勞。此外，網(wǎng)頁中插入音樂文件，會影響網(wǎng)頁打開速度。因此，除了在重大節(jié)日或重大事件中，確實需要運用音樂來烘托頁面效果外，政府門戶網(wǎng)站平時一般不應(yīng)在網(wǎng)頁中使用背景音樂。 二是在圖片設(shè)計方面。圖片包括圖形和圖像，網(wǎng)頁設(shè)計中二者通常結(jié)合使用，在標(biāo)題圖、LOGO等圖片中既有經(jīng)過處理的圖像，也有手工或軟件繪制的圖形。圖片具有極強(qiáng)的信息導(dǎo)視作用，也能強(qiáng)化視覺效果、營造網(wǎng)頁氣氛以及活潑版面的作用。（見插圖5）政府門戶網(wǎng)頁圖片的設(shè)計和使用，要緊密圍繞主題選取具有獨特性和排它性的名勝古跡、風(fēng)光民俗、代表人物、動植物品種等典型素材，采用富有創(chuàng)意的處理手法，運用協(xié)調(diào)的色彩色調(diào)，確定合適的尺寸大小，精心設(shè)定頁面位置，突出表現(xiàn)鮮明的地區(qū)特色。此外，還應(yīng)嚴(yán)格控制圖片的容量，通常應(yīng)將每個圖片的容量控制在40KB以下，且每個網(wǎng)頁的所有圖片文件大小合計以不超過200KB為宜。  插圖5 廣東省門戶網(wǎng)站標(biāo)題圖 三是在動畫設(shè)計方面。動畫是網(wǎng)頁設(shè)計元素中最生動、活躍的因素，具有較強(qiáng)親和力。據(jù)統(tǒng)計，動畫對瀏覽者的吸引力是圖片的三倍。網(wǎng)頁動畫通常采用flash格式，在政府門戶網(wǎng)站網(wǎng)頁設(shè)計中，其設(shè)計與運用主要應(yīng)注意不要片面追求炫酷效果，而應(yīng)突出和表現(xiàn)主題，不能和頁面其它元素脫節(jié)；應(yīng)動靜結(jié)合，富于節(jié)奏，畫面變化不能過于強(qiáng)烈刺激，以免引起視覺疲勞；動畫數(shù)量不能太多，占用版面不能太大，以免喧賓奪主，影響信息呈現(xiàn)和網(wǎng)頁打開速度。 五、文字字體與字型 對政府門戶網(wǎng)站而言，文字占據(jù)了網(wǎng)頁的主體部分。文字字體與字型選擇應(yīng)給人以清晰的視覺印象，避免頁面繁雜零亂，使人易讀易懂。當(dāng)前，一些政府門戶網(wǎng)站網(wǎng)頁在字體字型處理上的問題主要有：文字字體使用過多，顏色變化過多；文字粗細(xì)、對齊方式不一致；文字風(fēng)格與頁面內(nèi)容不符，與主題沖突等。受網(wǎng)站特點的限制和視覺心理的要求，政府門戶網(wǎng)站網(wǎng)頁字體和字型有較為固定和規(guī)范的模式，個性化創(chuàng)造的空間并不大，主要應(yīng)從以下幾個方面來考慮。 一是文字的字體。作為政府門戶網(wǎng)站，同一頁面上使用的字體種類一般不應(yīng)超過四種。鑒于瀏覽者電腦中可能沒有特殊字體，網(wǎng)頁字體應(yīng)使用兼容的或系統(tǒng)默認(rèn)的缺省字體，如黑體、宋體、仿宋及隸書等，如果確實需要其它非常用字體，可將字體圖形化后作為圖片插入網(wǎng)頁中使用。正文文字一般選擇宋體，文章標(biāo)題一般選擇宋體加粗或黑體。標(biāo)題圖中的文字字體選擇比較靈活，可以是標(biāo)準(zhǔn)字體，也可以是設(shè)計的創(chuàng)意字體。除了加粗外，一般不宜采用斜體、加下劃線等字體效果。如有港臺和國外瀏覽者，還應(yīng)建立繁體版和英文版，其字體設(shè)置應(yīng)充分考慮這些瀏覽者的閱讀習(xí)慣。 二是文字的字號及間距。在字號的選擇上，政府門戶網(wǎng)站正文文字一般采用9磅的字號。文字行距、間距通常取網(wǎng)頁設(shè)計軟件的默認(rèn)值，其中正文的行距以接近字體尺寸大小為宜，文字大小與行距最合適的比例為10：12。適當(dāng)?shù)男芯鄷龑?dǎo)瀏覽者的目光，行距過寬會影響文字閱讀的延續(xù)性，行距過窄會造成文字擁擠，在閱讀時發(fā)生跳行錯誤。同時，為適應(yīng)不同用戶的偏好和視力狀況，網(wǎng)頁頂部最好設(shè)有可切換字體大小的圖片按鈕。 三是文字的排列。由于政府門戶網(wǎng)站功能以呈現(xiàn)信息為主，網(wǎng)頁文字版式通常較為固定，一般根據(jù)文字內(nèi)容多少分欄編排到固定的、適合的板塊中，用板塊將文字加以統(tǒng)一。如：雙欄、三欄、甚至多欄的編排形式。網(wǎng)頁通常使用橫排文字，也有網(wǎng)頁使用豎排的方式，或者將文字圖形化后斜排列。豎向排列的文字空間感和速度感較強(qiáng)，在網(wǎng)頁設(shè)計中可以根據(jù)需要少量使用。網(wǎng)頁正文的文字排列方式包括兩端對齊、居中、左對齊或右對齊、繞圖排列等，但通常采用左對齊這種比較符合閱讀習(xí)慣的排列形式。 四是文字的色彩。合理的文字色彩設(shè)置，能夠吸引瀏覽者的注意，使文字更加突出醒目。對于政府門戶網(wǎng)站而言，文字使用色彩種類不宜過多，最好不要超過三種；色彩的純度不宜過高，文字的色彩與背景色明度對比不宜過強(qiáng)；文字色彩應(yīng)和網(wǎng)頁中的圖片、動畫等媒體的色彩協(xié)調(diào)一致，使整個頁面色彩和諧統(tǒng)一；強(qiáng)調(diào)文字一般用紅色，慎用綠色、藍(lán)色等其它色彩來突出顯示標(biāo)題或重要信息。 六、網(wǎng)絡(luò)導(dǎo)航與改版 為瀏覽者提供信息資源導(dǎo)航服務(wù)是政府門戶網(wǎng)站的基本功能之一。在站外導(dǎo)航上，要及時對導(dǎo)航系統(tǒng)的鏈接進(jìn)行檢查，去掉死鏈接和過時內(nèi)容，添加新網(wǎng)址，保持導(dǎo)航系統(tǒng)的活力和有效性。為便于瀏覽者形象直觀地定位本地區(qū)下屬行政區(qū)政府門戶網(wǎng)站，最好采用地圖式導(dǎo)航，即點擊地圖相應(yīng)位置即可快速進(jìn)入當(dāng)?shù)卣T戶網(wǎng)站。在站內(nèi)導(dǎo)航上，應(yīng)遵循“3次點擊規(guī)則”，即在主頁上沒有任何一條信息需要點擊次數(shù)超過3次，確保瀏覽者能在最短的時間內(nèi)找到所需信息。 網(wǎng)站改版是網(wǎng)站建設(shè)中的一項經(jīng)常性工作。當(dāng)前，一些政府門戶網(wǎng)站改版存在著更新頻率過慢或過快、改版前后風(fēng)格迥異等問題。網(wǎng)站界面長期不更新會顯得陳舊和缺乏活力;更新太快則很難形成自己的風(fēng)格，容易破壞瀏覽者原有的閱讀習(xí)慣。網(wǎng)站界面應(yīng)當(dāng)在使用過程中不斷完善，進(jìn)行一些小的調(diào)整和修改。當(dāng)網(wǎng)站界面已經(jīng)不能滿足需要時，再進(jìn)行一次大的改版。改版時應(yīng)當(dāng)在舊版基礎(chǔ)上進(jìn)行，保留優(yōu)秀設(shè)計因素和VI設(shè)計，使網(wǎng)站界面具有歷史傳承性，最好不要改頭換面式地改版。 七、網(wǎng)站名稱與域名 網(wǎng)站名稱與域名應(yīng)符合人們的思維習(xí)慣和認(rèn)知規(guī)律，有助于瀏覽者記憶和快速定位網(wǎng)站。在國務(wù)院下發(fā)的有關(guān)文件中，明確要求政府門戶網(wǎng)站英文域名后綴為“.gov.cn”，但對域名中綴沒作硬性要求，各網(wǎng)站域名中綴均使用行政區(qū)劃簡稱的拼音，但有的以全拼作中綴，有的以拼音縮寫作中綴，這兩種情況基本各占一半的比例。為防止域名重復(fù)和引起歧義，便于瀏覽者識記，建議統(tǒng)一以行政區(qū)劃簡稱的全拼作中綴。 與域名相比，各級政府門戶網(wǎng)站的名稱更加混亂，以省這一級為例，其命名方式粗略估計有十余種以上，如××省人民政府門戶網(wǎng)站、中國.××、××政府公眾信息網(wǎng)、××政務(wù)網(wǎng)、××在線等等。建議各級政府門戶網(wǎng)站參照中央人民政府門戶網(wǎng)站的命名方法，統(tǒng)一命名為××省人民政府門戶網(wǎng)站，有利于推進(jìn)政府門戶網(wǎng)站的標(biāo)準(zhǔn)化和規(guī)范化，形成統(tǒng)一嚴(yán)謹(jǐn)、層次分明的政府門戶網(wǎng)站體系。 | ||
