1、政府門戶網(wǎng)站網(wǎng)頁設(shè)計的要點解析目前，一些政府門戶網(wǎng)站在網(wǎng)頁設(shè)計方面還存在著諸多問題，如整體創(chuàng)意不足，頁面布局不活，色彩搭配不當，字體運用不佳，導航設(shè)計不全，名稱格式不 一，域名沒有統(tǒng)一，等等。筆者以為，政府門戶網(wǎng)站的網(wǎng)頁，特不是主頁，起著呈現(xiàn)傳達信息、與用戶交互和提供關(guān)心導航的重要功能，其設(shè)計應(yīng)遵循以下原則：一 是內(nèi)容決定形式的原則，即網(wǎng)頁設(shè)計必須服務(wù)于網(wǎng)站內(nèi)容的呈現(xiàn)，要考慮掃瞄者獵取信息的速度和舒適度。二是整體協(xié)調(diào)一致的原則。即網(wǎng)頁設(shè)計的各個環(huán)節(jié)，包括 色彩、布局、文字、圖片等，要緊緊圍繞既定的創(chuàng)意和風格展開。三是服從技術(shù)需要的原則。網(wǎng)頁設(shè)計受技術(shù)制約的程度特不明顯。如網(wǎng)頁的寬度受限于顯示器

2、分辨 率的大?。痪W(wǎng)頁色彩的選取范圍應(yīng)在網(wǎng)絡(luò)安全色中；網(wǎng)頁中圖片和動畫的設(shè)計必須嚴格操縱其大小和數(shù)量等等。 在明確以上設(shè)計原則的基礎(chǔ)上，政府門戶網(wǎng)站網(wǎng)頁設(shè)計還應(yīng)掌握以下要點。一、整體創(chuàng)意與風格 網(wǎng)頁的創(chuàng)意與風格是圍繞主題和內(nèi)容，對網(wǎng)頁色彩、布局、動畫、圖片、文字等頁面元素統(tǒng)一進行個性化設(shè)計而形成的整體視覺效果和藝術(shù)特點。當前，一些政府門 戶網(wǎng)站個性不足，趨向于模式化和同質(zhì)化，中央人民政府門戶網(wǎng)站幾乎成了一些地點政府門戶網(wǎng)站的“模板”，“千網(wǎng)一面”、“似曾相識”的現(xiàn)象嚴峻。還有的網(wǎng) 站網(wǎng)頁風格不明顯，要緊表現(xiàn)在：同一頁面內(nèi)各種元素拼湊堆砌、零散混亂，缺少相互呼應(yīng)和一致性；在頁面與頁面之間，特不是一

3、級和二級頁面之間，色彩、版 式、文字等網(wǎng)頁風格大相徑庭，頁面間聯(lián)系不夠緊密，沒有形成統(tǒng)一的整站形象等。網(wǎng)頁的創(chuàng)意與風格是網(wǎng)頁設(shè)計的靈魂和統(tǒng)領(lǐng)，創(chuàng)意匱乏、風格平凡的網(wǎng)站專門難吸 引人的眼球。因此，加強網(wǎng)頁的創(chuàng)意設(shè)計和風格塑造是提高網(wǎng)頁設(shè)計水平的首要解決問題。 應(yīng)該講，政府門戶網(wǎng)站不應(yīng)僅僅是一種政府公布信息資源和提供信息服務(wù)的工具，也應(yīng)是一級政府在網(wǎng)絡(luò)上精心打造的視覺形象，應(yīng)著力反映政府的執(zhí)政理念、進展 策略和遠景規(guī)劃等深層次內(nèi)容。盡管創(chuàng)意具有專門強的主觀色彩，大概來自于靈感與頓悟，但絕非空穴來風完全不可把握。創(chuàng)意設(shè)計應(yīng)緊緊抓住本地區(qū)的歷史沿革、地 域文化、民族特色等個性化特點，選取標志性的圖片、

4、有象征意義的色彩、雋永深刻的文字和恰當?shù)牟季?，按照視覺規(guī)律進行藝術(shù)加工，設(shè)計出完整一致的視覺形 象，并長期沿用下去，不斷強化掃瞄者的經(jīng)歷，久而久之就會深入人心，印象深刻，成為本地區(qū)獨特的“網(wǎng)絡(luò)形象代表”，這確實是一個政府門戶網(wǎng)站成功創(chuàng)意和風格 的最終表現(xiàn)。二、頁面色彩與色調(diào) 對以呈現(xiàn)信息為主的門戶網(wǎng)站而言，和諧的色彩色調(diào)能提高信息獵取速度，比字形和字體的變化更能提高理解的準確度。當前，一些政府門戶網(wǎng)站網(wǎng)頁在色彩色調(diào)方 面的問題要緊有：色彩使用過多，造成色彩雜亂相互沖突，色彩觀感矛盾，主色調(diào)不明確；文字、圖片、動畫等要素的色彩處理不一致，整體效果不佳，割裂了網(wǎng)頁 色彩的整體感；網(wǎng)頁色調(diào)過于鮮艷，

5、色彩對比過于強烈，視覺跳躍過于明顯，引起掃瞄者視覺疲勞和注意力分散；文字顏色和背景色對比不明顯，降低了閱讀效率。 因此，政府門戶網(wǎng)站網(wǎng)頁的色彩色調(diào)設(shè)計要盡量做到“穩(wěn)重不夸張、大氣不局促、素雅不濃烈、協(xié)調(diào)不跳躍”，其設(shè)計可分為以下步驟。 一是確定主色調(diào)。主色調(diào)是頁面的要緊色彩傾向。企業(yè)網(wǎng)站設(shè)計中特不重視主色調(diào)的作用，如：IBM的蔚藍色、可口可樂的紅色、聯(lián)想集團的藍色等，這些顏色與 企業(yè)形象融為一體，差不多成為企業(yè)的象征。當前，政府門戶網(wǎng)站網(wǎng)頁主色調(diào)的選擇以紅色居多，有千篇一律的感受，事實上設(shè)計者完全能夠依照網(wǎng)站的創(chuàng)意、主題和使 用對象，以及利用色彩想要達到的視覺和心理效果，大膽選擇黃色、灰色、綠

6、色等作為主色調(diào)。 二是確定配色方案。主色調(diào)確定后，就要合理運用色彩規(guī)律，以主色調(diào)為中心，利用色彩的明度、純度、色相三要素的變化，適當增加其他色彩作為對比色和補色， 選取輔色調(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)該是和諧的，只有局部小范圍的地點可 以有一些強烈的色彩對比。要適當保持用色的連續(xù)性，在風格統(tǒng)一的基礎(chǔ)上，為子網(wǎng)站或功能模塊選取

7、不同的主色調(diào)和配色方案，既要從顏色上對不同內(nèi)容加以區(qū) 分，使得頁面富于變化，又要保持色彩的整體性和協(xié)調(diào)性。背景色一般采納素淡清雅的色彩，應(yīng)幸免采納花紋復雜的圖片和純度專門高的色彩，背景色與文字的色彩對 比要強烈一些，便于區(qū)分背景和文字，提供舒適的視覺體驗。三、欄目布局與版式 網(wǎng)頁布局與版式設(shè)計是運用版面設(shè)計原理，合理配置與秩序化網(wǎng)頁視覺元素的過程，其目的是實現(xiàn)信息傳遞的清晰化、合理化、人性化，并考慮視覺形態(tài)的美化，使 掃瞄者在獵取信息的同時獲得審美感受。網(wǎng)頁布局與版式設(shè)計同傳統(tǒng)平面媒體的版式設(shè)計特不相似，事實上質(zhì)確實是在有限的屏幕空間內(nèi)將特定的視聽多媒體元素進行合 理的編輯和安排。從整體上講，

8、一些政府門戶網(wǎng)站網(wǎng)頁在布局與版式方面，過于方正、剛硬和死板，缺少設(shè)計靈感和藝術(shù)美感，要緊表現(xiàn)在：采納直線和方塊元素的 多，采納曲線和不規(guī)則形狀元素的少；采納對稱性設(shè)計的多，采納非對稱性設(shè)計的少；采納常規(guī)布局的多，突破常規(guī)布局的少。布局與版式設(shè)計要緊應(yīng)注意以下幾個 方面。 一是版式線條。網(wǎng)頁中文字、標題、圖片等會在頁面上組合形成各種線條和形狀。正確地處理和搭配好這些線條和形狀，才能增強頁面的藝術(shù)魅力。直線條的藝術(shù)效 果是流暢、挺拔、規(guī)矩、整齊，有輪有廓。直線和矩形在頁面上的重復組合能夠呈現(xiàn)井井有條、涇渭分明的視覺效果，一般應(yīng)用于比較莊重、嚴肅的頁面；曲線條的 藝術(shù)效果是流淌、活躍，具有動感。（見

9、插圖2）曲線和弧形在頁面上的重復組合能夠呈現(xiàn)流暢、輕快，富有活力的視覺效果，一般用于表現(xiàn)青春、爽朗的主題。政 府門戶網(wǎng)站網(wǎng)頁設(shè)計假如能以直為主、曲直結(jié)合，就能夠豐富頁面的表現(xiàn)力和內(nèi)涵，顯得莊重而又不刻板，威嚴而又不冷漠。插圖2 曲線板式的例子 二是欄目布局。網(wǎng)頁布局有“國”字型、拐角型、標題正文型、左右框架型、上下框架型、綜合框架型、封面型、F1ash型、變化型等多種形式。（見插圖3） 政府門戶網(wǎng)站主頁一般采納“國”字型布局，即最上面是網(wǎng)站標題圖，接下來是網(wǎng)站主體內(nèi)容，左右分列兩小條內(nèi)容，中間是要緊部分，與左右一起排列到底，最下 面是網(wǎng)站的制作單位、聯(lián)系方式、版權(quán)聲明等。這是一種適合政府門戶網(wǎng)

10、站的常規(guī)布局，也是一種安全保守的布局，具有便于呈現(xiàn)大量信息、便于設(shè)計實現(xiàn)的優(yōu)點， 但使用實在過多，沒有任何新奇感，假如能在此基礎(chǔ)上，適當加以錯位或非對稱的布局變化，頁面會顯得更靈活和生動。插圖3 典型的“國”字型布局 三是頁面尺寸。從頁面寬度來看，基于800600分辨率寬度來設(shè)計網(wǎng)頁差不多過時，在17寸以上寬屏顯示器差不多普及的今天，個不政府門戶網(wǎng)站仍采納這一寬 度，會在屏幕左右留下了較大空白，顯得小氣和局促，窄小的頁面也不利于呈現(xiàn)豐富的信息，因此，網(wǎng)頁寬度應(yīng)以1024768分辨率為設(shè)計標準。也能夠此分 辨率為基準，采納自適應(yīng)屏幕寬度設(shè)計，在各種分辨率條件下都能取得較好的效果。從頁面長度來看，

11、我國政府門戶網(wǎng)站主頁絕大部分采納多頁式結(jié)構(gòu)。多頁式主頁 應(yīng)幸免為使主頁內(nèi)容顯得豐富，將二級頁面的內(nèi)容提到主頁上來，使得頁面長度超過三屏，顯得過分冗長。單頁式主頁一般為導航型門戶網(wǎng)站采納，因為主頁呈現(xiàn)的 信息量比較少，尤其要注意導航系統(tǒng)的設(shè)計，力求周全便捷，幸免給用戶進一步獵取信息帶來困難。 四是構(gòu)圖比例。黃金分割比例大約為0.618，能夠不精確地表示為3比5(或5比8，8比13)。黃金分割寓變化于整齊之中。過于強調(diào)整齊的形體，容 易流于呆板單調(diào);而變化過多的形體，又顯得散漫雜亂。黃金分割律中，左右兩邊長度是不等和變化的，但又符合一定的規(guī)律，從那個角度看又是整齊的。它不僅在 自然界中隨處可見，在

12、建筑、廣告、工業(yè)設(shè)計中也被作為最完美的比例標準。在網(wǎng)頁的構(gòu)圖中，有的政府門戶網(wǎng)站一味采納對稱和居中設(shè)計，顯得過于呆板，若能有 意識地運用黃金分割和視覺中心點來配置頁面元素，將大大增強頁面的美感，減少構(gòu)圖比例失調(diào)的情況。 五是留白處理。留白是寫意國畫中常用的藝術(shù)手法，它能緩和畫面的緊張及復雜度，喚起聯(lián)想，利于組織嚴密和突出主題，加強對比，達到畫面的均衡（見插圖4） 聞名畫家齊白石的蝦趣確實是留白處理的佳作。留白同樣也適用于網(wǎng)站的布局設(shè)計和圖片設(shè)計。在給人強烈印象的構(gòu)成要素的周圍留下空白，能擴大和提高視覺效 果，有利于視線流淌，破除沉悶感。有的政府門戶網(wǎng)站網(wǎng)頁頁面為突出信息量，“寸土必爭”，飽滿擁

13、擠，給人“堵得慌”的感受，這確實是因為留白處理不當?shù)暮?果。插圖4 齊白石的蝦趣 六是視覺流程。視覺流程是一個由總體感知、局部感知到最后印象三個感知時期組成的心理認知過程。人的視線在一個平面上的流淌具有比較固定的認知模式，即從 左到右，自上而下，由左上沿著弧線向右下方自然地流淌。在打開頁面后，假如沒有明確目的，掃瞄者一般會首先快速掃瞄整個頁面，形成初步印象，然后視線會被 可視性最強或感興趣的對象所吸引，并促成點擊。在網(wǎng)頁設(shè)計中，應(yīng)該遵循“閱讀最省力”的原則，要注意視覺流程規(guī)律，視覺流速應(yīng)合理，視線導向應(yīng)明確，要有 意識地引導掃瞄者視線按流程順序輕松、省力、愉悅地閱讀。依據(jù)此原理，在政府門戶網(wǎng)站

14、網(wǎng)頁布局和版式設(shè)計中，應(yīng)將重大新聞和圖片欄目等重要信息，布置在頁 面靠左上方位置，并依欄目重要程度由上向下、由左至右排列。四、媒體設(shè)計與運用 隨著網(wǎng)絡(luò)多媒體技術(shù)的進步，圖形、圖像、動畫、視頻、聲音等多媒體元素的運用，網(wǎng)頁由靜到動，由無聲到有聲，極大地豐富了網(wǎng)頁的表現(xiàn)力。多媒體的設(shè)計運用 與表現(xiàn)效果也成為網(wǎng)頁設(shè)計要考慮的重要因素。當前，專門多政府門戶網(wǎng)站在標題圖的設(shè)計上難以脫離“國徽政府名稱域名拼音”的窠臼，有的甚至完全模仿中 央人民政府門戶網(wǎng)站依葫蘆畫瓢；有的網(wǎng)站使用類似新浪、搜狐等門戶網(wǎng)站常見的飄浮廣告條，不符合政府門戶網(wǎng)站莊重嚴肅的氣氛；有的網(wǎng)站動畫和圖片使用過多 過濫，造成掃瞄者晃眼和不

15、適，效果適得其反等，這些差不多上媒體設(shè)計與運用不當?shù)慕Y(jié)果。因此，媒體的設(shè)計與運用必須注意以下方面。 一是在聲音運用方面。政府門戶網(wǎng)站一般專門少使用背景音樂，要緊是因為門戶網(wǎng)站訪問頻率專門高，不斷重復播放的背景音樂會使掃瞄者產(chǎn)生聽覺疲勞。此外，網(wǎng)頁中 插入音樂文件，會阻礙網(wǎng)頁打開速度。因此，除了在重大節(jié)日或重大事件中，確實需要運用音樂來烘托頁面效果外，政府門戶網(wǎng)站平常一般不應(yīng)在網(wǎng)頁中使用背景音 樂。 二是在圖片設(shè)計方面。圖片包括圖形和圖像，網(wǎng)頁設(shè)計中二者通常結(jié)合使用，在標題圖、LOGO等圖片中既有通過處理的圖像，也有手工或軟件繪制的圖形。圖片 具有極強的信息導視作用，也能強化視覺效果、營造網(wǎng)頁氣

16、氛以及爽朗版面的作用。（見插圖5）政府門戶網(wǎng)頁圖片的設(shè)計和使用，要緊密圍繞主題選取具有獨特性 和排它性的名勝古跡、風光民俗、代表人物、動植物品種等典型素材，采納富有創(chuàng)意的處理手法，運用協(xié)調(diào)的色彩色調(diào)，確定合適的尺寸大小，精心設(shè)定頁面位置， 突出表現(xiàn)鮮亮的地區(qū)特色。此外，還應(yīng)嚴格操縱圖片的容量，通常應(yīng)將每個圖片的容量操縱在40KB以下，且每個網(wǎng)頁的所有圖片文件大小合計以不超過 200KB為宜。插圖5 廣東省門戶網(wǎng)站標題圖 三是在動畫設(shè)計方面。動畫是網(wǎng)頁設(shè)計元素中最生動、活躍的因素，具有較強親和力。據(jù)統(tǒng)計，動畫對掃瞄者的吸引力是圖片的三倍。網(wǎng)頁動畫通常采納flash 格式，在政府門戶網(wǎng)站網(wǎng)頁設(shè)計中

17、，其設(shè)計與運用要緊應(yīng)注意不要片面追求炫酷效果，而應(yīng)突出和表現(xiàn)主題，不能和頁面其它元素脫節(jié)；應(yīng)動靜結(jié)合，富于節(jié)奏，畫 面變化不能過于強烈刺激，以免引起視覺疲勞；動畫數(shù)量不能太多，占用版面不能太大，以免喧賓奪主，阻礙信息呈現(xiàn)和網(wǎng)頁打開速度。五、文字字體與字型 對政府門戶網(wǎng)站而言，文字占據(jù)了網(wǎng)頁的主體部分。文字字體與字型選擇應(yīng)給人以清晰的視覺印象，幸免頁面繁雜零亂，使人易讀易明白。當前，一些政府門戶網(wǎng)站網(wǎng) 頁在字體字型處理上的問題要緊有：文字字體使用過多，顏色變化過多；文字粗細、對齊方式不一致；文字風格與頁面內(nèi)容不符，與主題沖突等。受網(wǎng)站特點的限制 和視覺心理的要求，政府門戶網(wǎng)站網(wǎng)頁字體和字型有較為

18、固定和規(guī)范的模式，個性化制造的空間并不大，要緊應(yīng)從以下幾個方面來考慮。 一是文字的字體。作為政府門戶網(wǎng)站，同一頁面上使用的字體種類一般不應(yīng)超過四種。鑒于掃瞄者電腦中可能沒有專門字體，網(wǎng)頁字體應(yīng)使用兼容的或系統(tǒng)默認的缺 省字體，如黑體、宋體、仿宋及隸書等，假如確實需要其它特不用字體，可將字體圖形化后作為圖片插入網(wǎng)頁中使用。正文文字一般選擇宋體，文章標題一般選擇宋 體加粗或黑體。標題圖中的文字字體選擇比較靈活，能夠是標準字體，也能夠是設(shè)計的創(chuàng)意字體。除了加粗外，一般不宜采納斜體、加下劃線等字體效果。如有港臺 和國外掃瞄者，還應(yīng)建立繁體版和英文版，其字體設(shè)置應(yīng)充分考慮這些掃瞄者的閱讀適應(yīng)。 二是文字

19、的字號及間距。在字號的選擇上，政府門戶網(wǎng)站正文文字一般采納9磅的字號。文字行距、間距通常取網(wǎng)頁設(shè)計軟件的默認值，其中正文的行距以接近字體 尺寸大小為宜，文字大小與行距最合適的比例為10：12。適當?shù)男芯鄷龑呙檎叩哪抗猓芯噙^寬會阻礙文字閱讀的連續(xù)性，行距過窄會造成文字擁擠，在閱 讀時發(fā)生跳行錯誤。同時，為適應(yīng)不同用戶的偏好和視力狀況，網(wǎng)頁頂部最好設(shè)有可切換字體大小的圖片按鈕。 三是文字的排列。由于政府門戶網(wǎng)站功能以呈現(xiàn)信息為主，網(wǎng)頁文字版式通常較為固定，一般依照文字內(nèi)容多少分欄編排到固定的、適合的板塊中，用板塊將文字加 以統(tǒng)一。如：雙欄、三欄、甚至多欄的編排形式。網(wǎng)頁通常使用橫排文字，也有

20、網(wǎng)頁使用豎排的方式，或者將文字圖形化后斜排列。豎向排列的文字空間感和速度感 較強，在網(wǎng)頁設(shè)計中能夠依照需要少量使用。網(wǎng)頁正文的文字排列方式包括兩端對齊、居中、左對齊或右對齊、繞圖排列等，但通常采納左對齊這種比較符合閱讀習 慣的排列形式。 四是文字的色彩。合理的文字色彩設(shè)置，能夠吸引掃瞄者的注意，使文字更加突出醒目。關(guān)于政府門戶網(wǎng)站而言，文字使用色彩種類不宜過多，最好不要超過三種； 色彩的純度不宜過高，文字的色彩與背景色明度對比不宜過強；文字色彩應(yīng)和網(wǎng)頁中的圖片、動畫等媒體的色彩協(xié)調(diào)一致，使整個頁面色彩和諧統(tǒng)一；強調(diào)文字一般 用紅色，慎用綠色、藍色等其它色彩來突出顯示標題或重要信息。六、網(wǎng)絡(luò)導航與改版 為掃瞄者提供信息資源導航服務(wù)是政府門戶網(wǎng)站的差不多功能之一。在站外導航上，要及時對導航系統(tǒng)的鏈接進行檢查，去掉死鏈接和過時內(nèi)容，添加新網(wǎng)址，保持導 航系統(tǒng)的活力和有效性。為便于掃瞄者形象直觀地定位本地區(qū)下屬行政區(qū)政府門戶