淺析政府門戶網(wǎng)站網(wǎng)頁設(shè)計(jì)的要點(diǎn)(doc 8頁).doc

政府門戶網(wǎng)站網(wǎng)頁設(shè)計(jì)的要點(diǎn)解析目前，一些政府門戶網(wǎng)站在網(wǎng)頁設(shè)計(jì)方面還存在著諸多問題，如整體創(chuàng)意不足，頁面布局不活，色彩搭配不當(dāng)，字體運(yùn)用不佳，導(dǎo)航設(shè)計(jì)不全，名稱格式不 一，域名沒有統(tǒng)一，等等。筆者以為，政府門戶網(wǎng)站的網(wǎng)頁，特別是主頁，起著呈現(xiàn)傳達(dá)信息、與用戶交互和提供幫助導(dǎo)航的重要功能，其設(shè)計(jì)應(yīng)遵循以下原則：一 是內(nèi)容決定形式的原則，即網(wǎng)頁設(shè)計(jì)必須服務(wù)于網(wǎng)站內(nèi)容的呈現(xiàn)，要考慮瀏覽者獲取信息的速度和舒適度。二是整體協(xié)調(diào)一致的原則。即網(wǎng)頁設(shè)計(jì)的各個環(huán)節(jié)，包括 色彩、布局、文字、圖片等，要緊緊圍繞既定的創(chuàng)意和風(fēng)格展開。三是服從技術(shù)需要的原則。網(wǎng)頁設(shè)計(jì)受技術(shù)制約的程度非常明顯。如網(wǎng)頁的寬度受限于顯示器分辨 率的大??；網(wǎng)頁色彩的選取范圍應(yīng)在網(wǎng)絡(luò)安全色中；網(wǎng)頁中圖片和動畫的設(shè)計(jì)必須嚴(yán)格控制其大小和數(shù)量等等。 在明確以上設(shè)計(jì)原則的基礎(chǔ)上，政府門戶網(wǎng)站網(wǎng)頁設(shè)計(jì)還應(yīng)掌握以下要點(diǎn)。一、整體創(chuàng)意與風(fēng)格 網(wǎng)頁的創(chuàng)意與風(fēng)格是圍繞主題和內(nèi)容，對網(wǎng)頁色彩、布局、動畫、圖片、文字等頁面元素統(tǒng)一進(jìn)行個性化設(shè)計(jì)而形成的整體視覺效果和藝術(shù)特點(diǎn)。當(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è)計(jì)的靈魂和統(tǒng)領(lǐng)，創(chuàng)意匱乏、風(fēng)格平庸的網(wǎng)站很難吸 引人的眼球。因此，加強(qiáng)網(wǎng)頁的創(chuàng)意設(shè)計(jì)和風(fēng)格塑造是提高網(wǎng)頁設(shè)計(jì)水平的首要解決問題。 應(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è)計(jì)應(yīng)緊緊抓住本地區(qū)的歷史沿革、地 域文化、民族特色等個性化特點(diǎn)，選取標(biāo)志性的圖片、有象征意義的色彩、雋永深刻的文字和恰當(dāng)?shù)牟季?，按照視覺規(guī)律進(jìn)行藝術(shù)加工，設(shè)計(jì)出完整一致的視覺形 象，并長期沿用下去，不斷強(qiáng)化瀏覽者的記憶，久而久之就會深入人心，印象深刻，成為本地區(qū)獨(dú)特的“網(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è)計(jì)要盡量做到“穩(wěn)重不夸張、大氣不局促、素雅不濃烈、協(xié)調(diào)不跳躍”，其設(shè)計(jì)可分為以下步驟。 一是確定主色調(diào)。主色調(diào)是頁面的主要色彩傾向。企業(yè)網(wǎng)站設(shè)計(jì)中非常重視主色調(diào)的作用，如：IBM的蔚藍(lán)色、可口可樂的紅色、聯(lián)想集團(tuán)的藍(lán)色等，這些顏色與 企業(yè)形象融為一體，已經(jīng)成為企業(yè)的象征。當(dāng)前，政府門戶網(wǎng)站網(wǎng)頁主色調(diào)的選擇以紅色居多，有千篇一律的感覺，其實(shí)設(shè)計(jì)者完全可以根據(jù)網(wǎng)站的創(chuàng)意、主題和使 用對象，以及利用色彩想要達(dá)到的視覺和心理效果，大膽選擇黃色、灰色、綠色等作為主色調(diào)。 二是確定配色方案。主色調(diào)確定后，就要合理運(yùn)用色彩規(guī)律，以主色調(diào)為中心，利用色彩的明度、純度、色相三要素的變化，適當(dāng)增加其他色彩作為對比色和補(bǔ)色， 選取輔色調(diào)、點(diǎn)睛色、背景色等組成配色方案，和主色調(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ū)分背景和文字，提供舒適的視覺體驗(yàn)。三、欄目布局與版式 網(wǎng)頁布局與版式設(shè)計(jì)是運(yùn)用版面設(shè)計(jì)原理，合理配置與秩序化網(wǎng)頁視覺元素的過程，其目的是實(shí)現(xiàn)信息傳遞的清晰化、合理化、人性化，并考慮視覺形態(tài)的美化，使 瀏覽者在獲取信息的同時(shí)獲得審美感受。網(wǎng)頁布局與版式設(shè)計(jì)同傳統(tǒng)平面媒體的版式設(shè)計(jì)非常相似，其實(shí)質(zhì)就是在有限的屏幕空間內(nèi)將特定的視聽多媒體元素進(jìn)行合 理的編輯和安排。從整體上講，一些政府門戶網(wǎng)站網(wǎng)頁在布局與版式方面，過于方正、剛硬和死板，缺少設(shè)計(jì)靈感和藝術(shù)美感，主要表現(xiàn)在：采用直線和方塊元素的 多，采用曲線和不規(guī)則形狀元素的少；采用對稱性設(shè)計(jì)的多，采用非對稱性設(shè)計(jì)的少；采用常規(guī)布局的多，突破常規(guī)布局的少。布局與版式設(shè)計(jì)主要應(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è)計(jì)如果能以直為主、曲直結(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è)計(jì)實(shí)現(xiàn)的優(yōu)點(diǎn)， 但使用實(shí)在過多，沒有任何新鮮感，如果能在此基礎(chǔ)上，適當(dāng)加以錯位或非對稱的布局變化，頁面會顯得更靈活和生動。插圖3 典型的“國”字型布局 三是頁面尺寸。從頁面寬度來看，基于800600分辨率寬度來設(shè)計(jì)網(wǎng)頁已經(jīng)過時(shí)，在17寸以上寬屏顯示器已經(jīng)普及的今天，個別政府門戶網(wǎng)站仍采用這一寬 度，會在屏幕左右留下了較大空白，顯得小氣和局促，窄小的頁面也不利于呈現(xiàn)豐富的信息，因此，網(wǎng)頁寬度應(yīng)以1024768分辨率為設(shè)計(jì)標(biāo)準(zhǔn)。也可以此分 辨率為基準(zhǔn)，采用自適應(yīng)屏幕寬度設(shè)計(jì)，在各種分辨率條件下都能取得較好的效果。從頁面長度來看，我國政府門戶網(wǎng)站主頁絕大部分采用多頁式結(jié)構(gòu)。多頁式主頁 應(yīng)避免為使主頁內(nèi)容顯得豐富，將二級頁面的內(nèi)容提到主頁上來，使得頁面長度超過三屏，顯得過分冗長。單頁式主頁一般為導(dǎo)航型門戶網(wǎng)站采用，因?yàn)橹黜摮尸F(xiàn)的 信息量比較少，尤其要注意導(dǎo)航系統(tǒng)的設(shè)計(jì)，力求周全便捷，避免給用戶進(jìn)一步獲取信息帶來困難。 四是構(gòu)圖比例。黃金分割比例大約為0.618，可以不精確地表示為3比5(或5比8，8比13)。黃金分割寓變化于整齊之中。過于強(qiáng)調(diào)整齊的形體，容 易流于呆板單調(diào);而變化過多的形體，又顯得散漫雜亂。黃金分割律中，左右兩邊長度是不等和變化的，但又符合一定的規(guī)律，從這個角度看又是整齊的。它不僅在 自然界中隨處可見，在建筑、廣告、工業(yè)設(shè)計(jì)中也被作為最完美的比例標(biāo)準(zhǔn)。在網(wǎng)頁的構(gòu)圖中，有的政府門戶網(wǎng)站一味采用對稱和居中設(shè)計(jì)，顯得過于呆板，若能有 意識地運(yùn)用黃金分割和視覺中心點(diǎn)來配置頁面元素，將大大增強(qiáng)頁面的美感，減少構(gòu)圖比例失調(diào)的情況。 五是留白處理。留白是寫意國畫中常用的藝術(shù)手法，它能緩和畫面的緊張及復(fù)雜度，喚起聯(lián)想，利于組織嚴(yán)密和突出主題，加強(qiáng)對比，達(dá)到畫面的均衡（見插圖4） 著名畫家齊白石的蝦趣就是留白處理的佳作。留白同樣也適用于網(wǎng)站的布局設(shè)計(jì)和圖片設(shè)計(jì)。在給人強(qiáng)烈印象的構(gòu)成要素的周圍留下空白，能擴(kuò)大和提高視覺效 果，有利于視線流動，破除沉悶感。有的政府門戶網(wǎng)站網(wǎng)頁頁面為突出信息量，“寸土必爭”，飽滿擁擠，給人“堵得慌”的感覺，這就是因?yàn)榱舭滋幚聿划?dāng)?shù)暮?果。插圖4 齊白石的蝦趣 六是視覺流程。視覺流程是一個由總體感知、局部感知到最后印象三個感知階段組成的心理認(rèn)知過程。人的視線在一個平面上的流動具有比較固定的認(rèn)知模式，即從 左到右，自上而下，由左上沿著弧線向右下方自然地流動。在打開頁面后，如果沒有明確目的，瀏覽者一般會首先快速瀏覽整個頁面，形成初步印象，然后視線會被 可視性最強(qiáng)或感興趣的對象所吸引，并促成點(diǎn)擊。在網(wǎng)頁設(shè)計(jì)中，應(yīng)該遵循“閱讀最省力”的原則，要注意視覺流程規(guī)律，視覺流速應(yīng)合理，視線導(dǎo)向應(yīng)明確，要有 意識地引導(dǎo)瀏覽者視線按流程順序輕松、省力、愉悅地閱讀。依據(jù)此原理，在政府門戶網(wǎng)站網(wǎng)頁布局和版式設(shè)計(jì)中，應(yīng)將重大新聞和圖片欄目等重要信息，布置在頁 面靠左上方位置，并依欄目重要程度由上向下、由左至右排列。四、媒體設(shè)計(jì)與運(yùn)用 隨著網(wǎng)絡(luò)多媒體技術(shù)的進(jìn)步，圖形、圖像、動畫、視頻、聲音等多媒體元素的運(yùn)用，網(wǎng)頁由靜到動，由無聲到有聲，極大地豐富了網(wǎng)頁的表現(xiàn)力。多媒體的設(shè)計(jì)運(yùn)用 與表現(xiàn)效果也成為網(wǎng)頁設(shè)計(jì)要考慮的重要因素。當(dāng)前，很多政府門戶網(wǎng)站在標(biāo)題圖的設(shè)計(jì)上難以脫離“國徽政府名稱域名拼音”的窠臼，有的甚至完全模仿中 央人民政府門戶網(wǎng)站依葫蘆畫瓢；有的網(wǎng)站使用類似新浪、搜狐等門戶網(wǎng)站常見的飄浮廣告條，不符合政府門戶網(wǎng)站莊重嚴(yán)肅的氣氛；有的網(wǎng)站動畫和圖片使用過多 過濫，造成瀏覽者晃眼和不適，效果適得其反等，這些都是媒體設(shè)計(jì)與運(yùn)用不當(dāng)?shù)慕Y(jié)果。因此，媒體的設(shè)計(jì)與運(yùn)用必須注意以下方面。 一是在聲音運(yùn)用方面。政府門戶網(wǎng)站一般很少使用背景音樂，主要是因?yàn)殚T戶網(wǎng)站訪問頻率很高，不斷重復(fù)播放的背景音樂會使瀏覽者產(chǎn)生聽覺疲勞。此外，網(wǎng)頁中 插入音樂文件，會影響網(wǎng)頁打開速度。因此，除了在重大節(jié)日或重大事件中，確實(shí)需要運(yùn)用音樂來烘托頁面效果外，政府門戶網(wǎng)站平時(shí)一般不應(yīng)在網(wǎng)頁中使用背景音 樂。 二是在圖片設(shè)計(jì)方面。圖片包括圖形和圖像，網(wǎng)頁設(shè)計(jì)中二者通常結(jié)合使用，在標(biāo)題圖、LOGO等圖片中既有經(jīng)過處理的圖像，也有手工或軟件繪制的圖形。圖片 具有極強(qiáng)的信息導(dǎo)視作用，也能強(qiáng)化視覺效果、營造網(wǎng)頁氣氛以及活潑版面的作用。（見插圖5）政府門戶網(wǎng)頁圖片的設(shè)計(jì)和使用，要緊密圍繞主題選取具有獨(dú)特性 和排它性的名勝古跡、風(fēng)光民俗、代表人物、動植物品種等典型素材，采用富有創(chuàng)意的處理手法，運(yùn)用協(xié)調(diào)的色彩色調(diào)，確定合適的尺寸大小，精心設(shè)定頁面位置， 突出表現(xiàn)鮮明的地區(qū)特色。此外，還應(yīng)嚴(yán)格控制圖片的容量，通常應(yīng)將每個圖片的容量控制在40KB以下，且每個網(wǎng)頁的所有圖片文件大小合計(jì)以不超過 200KB為宜。插圖5 廣東省門戶網(wǎng)站標(biāo)題圖 三是在動畫設(shè)計(jì)方面。動畫是網(wǎng)頁設(shè)計(jì)元素中最生動、活躍的因素，具有較強(qiáng)親和力。據(jù)統(tǒng)計(jì)，動畫對瀏覽者的吸引力是圖片的三倍。網(wǎng)頁動畫通常采用flash 格式，在政府門戶網(wǎng)站網(wǎng)頁設(shè)計(jì)中，其設(shè)計(jì)與運(yùn)用主要應(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)站特點(diǎn)的限制 和視覺心理的要求，政府門戶網(wǎng)站網(wǎng)頁字體和字型有較為固定和規(guī)范的模式，個性化創(chuàng)造的空間并不大，主要應(yīng)從以下幾個方面來考慮。 一是文字的字體。作為政府門戶網(wǎng)站，同一頁面上使用的字體種類一般不應(yīng)超過四種。鑒于瀏覽者電腦中可能沒有特殊字體，網(wǎng)頁字體應(yīng)使用兼容的或系統(tǒng)默認(rèn)的缺 省字體，如黑體、宋體、仿宋及隸書等，如果確實(shí)需要其它非常用字體，可將字體圖形化后作為圖片插入網(wǎng)頁中使用。正文文字一般選擇宋體，文章標(biāo)題一般選擇宋 體加粗或黑體。標(biāo)題圖中的文字字體選擇比較靈活，可以是標(biāo)準(zhǔn)字體，也可以是設(shè)計(jì)的創(chuàng)意字體。除了加粗外，一般不宜采用斜體、加下劃線等字體效果。如有港臺 和國外瀏覽者，還應(yīng)建立繁體版和英文版，其字體設(shè)置應(yīng)充分考慮這些瀏覽者的閱讀習(xí)慣。 二是文字的字號及間距。在字號的選擇上，政府門戶網(wǎng)站正文文字一般采用9磅的字號。文字行距、間距通常取網(wǎng)頁設(shè)計(jì)軟件的默認(rèn)值，其中正文的行距以接近字體 尺寸大小為宜，文字大小與行距最合適的比例為10：12。適當(dāng)?shù)男芯鄷龑?dǎo)瀏覽者的目光，行距過寬會影響文字閱讀的延續(xù)性，行距過窄會造成文字擁擠，在閱 讀時(shí)發(fā)生跳行錯誤。同時(shí)，為適應(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ì)中可以根據(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)航上，要及時(shí)對導(dǎo)航系統(tǒng)的鏈接進(jìn)行檢查，去掉死鏈接和過時(shí)內(nèi)容，添加新網(wǎng)址，保持導(dǎo) 航系統(tǒng)的活力和有效性。為便于瀏覽者形象直觀地定位本地區(qū)下屬行政區(qū)政府門戶網(wǎng)站，最好采