1網(wǎng)站導(dǎo)航設(shè)計

1.1以城市信息為主導(dǎo)的導(dǎo)航設(shè)置

如何在有限寬度的顯示屏上構(gòu)建合理的信息框架，讓瀏覽者對網(wǎng)站提供的巨量信息感到有條理；如何建立包括主導(dǎo)航條（瀏覽深度）、關(guān)鍵詞搜索（精準(zhǔn)瀏覽）、頂條導(dǎo)航（任務(wù)導(dǎo)向）的導(dǎo)航系統(tǒng)等。通過導(dǎo)航系統(tǒng)的建立，進(jìn)行信息分級，可使巨量信息在一個頁面里建立起層次合理的章節(jié)目錄，以引導(dǎo)瀏覽者便捷地找到所需信息。倫敦城市門戶網(wǎng)站導(dǎo)航系統(tǒng)設(shè)計，它包含了主導(dǎo)航條、關(guān)鍵詞搜索和頂條導(dǎo)航，主次分明，功能分區(qū)明確。主導(dǎo)航條用了4種不同顏色的斜線起伏相連，以等線體作為分類小標(biāo)題的字體，標(biāo)題內(nèi)容分別指向城市的4種功能，即“介紹、服務(wù)、商業(yè)、資訊”。

瀏覽者通過主導(dǎo)航條的指引，在對應(yīng)的下拉菜單中，可以詳細(xì)地了解到各類信息，這樣就能對倫敦城市有較全面整體的認(rèn)識。主導(dǎo)航條右側(cè)的＂Findit！＂及醒目的紅色放大鏡圖標(biāo)，是導(dǎo)航系統(tǒng)中的關(guān)鍵詞搜索功能，通過輸入關(guān)鍵字詞，可以直接找到網(wǎng)站內(nèi)所有與之相關(guān)的信息。頂條導(dǎo)航設(shè)置在網(wǎng)站頂端，用較小文字標(biāo)示，分別指向“在線工作、站內(nèi)信息按照標(biāo)題的首字母順序檢索、網(wǎng)上商城、文化活動、招聘工作、新聞中心、聯(lián)系我們、登錄注冊”等關(guān)于整個倫敦城市的各個方面的信息。在這個部分，不僅提供了方便市民購買、支付的功能，還有序地把整個城市的文化教育活動、工作就業(yè)等大量的服務(wù)信息進(jìn)行了高度概括。如頂條導(dǎo)航里＂Doitonline＂對應(yīng)的頁面中，會有＂Applyforit，F(xiàn)indit，Payforit＂等選項，選擇＂Payforit＂就可以在線繳納房租、水電、稅款等；點擊＂Contactus＂，顯示的不僅是倫敦市政府的聯(lián)系方式，還有倫敦市近45個其他職能部門的聯(lián)系方式。

主導(dǎo)航旨在幫助瀏覽者對城市信息作全面了解；頂條導(dǎo)航旨在幫助瀏覽者解決具體任務(wù)及解答問題；關(guān)鍵詞搜索旨在快速、精準(zhǔn)地幫助瀏覽者獲得信息。國內(nèi)網(wǎng)站的導(dǎo)航系統(tǒng)分類繁雜，主導(dǎo)航條與頂條導(dǎo)航主次不分、內(nèi)容重復(fù)，主導(dǎo)航條的分類有時高達(dá)10個類別以上。如上海城市門戶網(wǎng)站導(dǎo)航系統(tǒng)設(shè)計，見圖2，主導(dǎo)航條設(shè)置了13個類別；關(guān)鍵詞搜索設(shè)置在主導(dǎo)航條下方，細(xì)分“網(wǎng)站群檢索、站內(nèi)檢索、一般搜索、高級搜索”4個選項；頂條導(dǎo)航設(shè)置了8個類別，每個類別下方有顯露式的下拉索引，達(dá)20項以上。瀏覽者在分類過多、主次不分的導(dǎo)航系統(tǒng)中，要逐個閱讀、篩選來尋找自己需要的信息。如何將繁雜的城市信息進(jìn)行合理分類、概括，不僅能提高網(wǎng)站的易用性，建立清晰的信息架構(gòu)，還能減少用戶的選擇難度，提高查找效率。不管城市的大小，其門戶網(wǎng)站作為對內(nèi)、對外展示城市和提供城市信息的基本功能是不變的。有效地把城市的主要功能作為主導(dǎo)航條，將具體任務(wù)的解決及查詢設(shè)置到頂條導(dǎo)航的方法是值得大家仔細(xì)研究的。

1.2以城市內(nèi)、外用戶群為主導(dǎo)的導(dǎo)航設(shè)置

以用戶群角度作為分類標(biāo)準(zhǔn)的導(dǎo)航設(shè)計，也是一種值得借鑒的方法。如日本金澤城市門戶網(wǎng)站設(shè)計，見圖3，設(shè)計師基于網(wǎng)絡(luò)人群自助式點擊的需求，在首頁設(shè)置了城市居民和旅游觀光客的不同入口。這樣的信息架構(gòu)不是從城市功能、城市信息分類出發(fā)，而是基于城市對內(nèi)、對外的用戶群來進(jìn)行構(gòu)建。像這種對用戶群進(jìn)行快速分流引導(dǎo)的設(shè)計方法，有利于用戶過濾掉不必要的信息。

2網(wǎng)站視覺元素設(shè)計

在進(jìn)行城市門戶網(wǎng)站視覺設(shè)計之前，應(yīng)該對該城市進(jìn)行基礎(chǔ)調(diào)研，包括是否有該城市的視覺識別體系，以及該城市擁有的自然地理、文化歷史、產(chǎn)業(yè)資源等信息，找出符合當(dāng)?shù)爻鞘卸ㄎ患拔幕卣鞯膱D形、文字和色彩等視覺元素，從而使城市門戶網(wǎng)站的設(shè)計達(dá)到與地域文化相一致的、特色鮮明的視覺整體效果。

2.1圖標(biāo)與圖片設(shè)計

對于以大量信息內(nèi)容為主的城市門戶網(wǎng)站來說，善用圖標(biāo)與圖片的設(shè)計，不僅可以活躍版面、營造生動的網(wǎng)頁形象，還能有效地配合文字信息達(dá)到視覺強化的作用。圖標(biāo)設(shè)計在現(xiàn)代設(shè)計中起著舉足輕重的作用，它以形象簡潔的圖形設(shè)計跨越語言、文字障礙，具有國際通用性的特點。如巴黎城市門戶網(wǎng)站首頁設(shè)計，設(shè)計師在頂條導(dǎo)航上采用了圖標(biāo)設(shè)計，圖標(biāo)下方輔以文字說明，作為網(wǎng)站鮮明的視覺符號，避免了大量的文字導(dǎo)航，運用形象的圖標(biāo)象征導(dǎo)航的內(nèi)容，使分類引導(dǎo)的信息更形象、更直觀，或許不懂法語的人，也能通過圖標(biāo)輔助找到相應(yīng)的欄目和頁面。多彩的圖標(biāo)導(dǎo)航設(shè)計與簡潔的網(wǎng)站標(biāo)志相結(jié)合，體現(xiàn)了巴黎作為國際大都會、時尚之都的城市特色。圖片分為矢量圖片和攝影圖片，矢量圖片富有裝飾美感，攝影圖片具有真實可靠等特點。在選擇圖片時，應(yīng)根據(jù)網(wǎng)站內(nèi)容進(jìn)行挑選。在進(jìn)行圖片的編排組合時，有效地將圖片與文字進(jìn)行搭配，處理好圖片大小，形成瀏覽視覺重點，從而有序指引瀏覽者，是提高網(wǎng)站可讀性的重要設(shè)計方法。如圖4中，大小圖片的有序排列，既便于信息分類，又使視覺有了集中點。

2.2色彩設(shè)計

網(wǎng)頁的色彩包括網(wǎng)站的標(biāo)準(zhǔn)色、圖片的主色、頁面的背景色和邊框色等。色彩本身是客觀的，但色彩的出現(xiàn)總能引起人們的一系列心理活動。人們的聯(lián)想、風(fēng)俗、生活經(jīng)歷往往會給色彩注入不同的情感內(nèi)涵，并由此引發(fā)出對不同顏色的好感或厭惡，從而使色彩具有了明顯的情感象征性。。巴塞羅那城市門戶網(wǎng)站，設(shè)計師以巴塞羅那城市建筑中典型的藍(lán)色和橙色作為網(wǎng)站的標(biāo)準(zhǔn)色，不僅與主頁圖片的色調(diào)一致，而且在主導(dǎo)航條的設(shè)計上也以藍(lán)色和橙色加以區(qū)別，使得主導(dǎo)航條的分類更加清晰。柏林城市門戶網(wǎng)站見圖5b，網(wǎng)站以藍(lán)色為主色調(diào)，紅色為點綴色，整體統(tǒng)一。多倫多城市門戶網(wǎng)站見圖5c，網(wǎng)站以深藍(lán)色為主色調(diào)，以低純度的藍(lán)色、紫色、黃色、綠色為輔助色，作為各主導(dǎo)航分類標(biāo)題的背景色。良好的網(wǎng)站色彩設(shè)計，不僅能體現(xiàn)該城市的人文氣息、活躍網(wǎng)頁視覺效果，還能通過色彩的面積對比、色調(diào)對比，使得導(dǎo)航系統(tǒng)更具條理性，實現(xiàn)功能引導(dǎo)的作用。

2.3網(wǎng)站標(biāo)志與文字設(shè)計

網(wǎng)站標(biāo)志是城市門戶網(wǎng)站的第一視覺元素，在首頁中占據(jù)著重要的視覺位置，是城市形象的直觀反映。有的網(wǎng)站標(biāo)志是以該市的市徽進(jìn)行延展設(shè)計，從而形成一致的城市視覺形象；有的則為適應(yīng)網(wǎng)絡(luò)文化而重新設(shè)計。國外城市門戶網(wǎng)站標(biāo)志設(shè)計。不管是延用還是重新設(shè)計，網(wǎng)站標(biāo)志都應(yīng)該與網(wǎng)站頁面的整體視覺風(fēng)格保持一致。文字是網(wǎng)頁設(shè)計元素中信息傳達(dá)的主角，是信息傳播的基本載體，同時也是最具創(chuàng)意的設(shè)計元素。不同的標(biāo)題需要選擇能夠準(zhǔn)確傳達(dá)其特性的字體。不同的字體，其風(fēng)格與內(nèi)涵不同。一般而言，網(wǎng)站正文的小標(biāo)題字體應(yīng)選擇黑體，正文內(nèi)容選擇宋體，這樣可以提高網(wǎng)站的可讀性。良好的網(wǎng)站設(shè)計，不僅需要建立簡潔、清晰、明了的導(dǎo)航系統(tǒng)，還要善于運用圖標(biāo)、色彩、標(biāo)志、文字等視覺元素，才能起到強化導(dǎo)航系統(tǒng)、展示城市文化的作用。（本文來自于《包裝工程》雜志。《包裝工程》雜志簡介詳見。）

3結(jié)語

一個優(yōu)秀的城市門戶網(wǎng)站將有助于城市品牌形象的推廣，是城市軟實力的綜合展示平臺之一。目前，我國的城市門戶網(wǎng)站還存在很多問題，如文字堆積、導(dǎo)航分類不明確、界面不美觀等，更少有體現(xiàn)城市文化內(nèi)涵的網(wǎng)站。在進(jìn)行城市門戶網(wǎng)站的設(shè)計工作時，設(shè)計師團(tuán)隊需協(xié)同該城市政府各部門達(dá)成一致的網(wǎng)站功能定位，繼而建立合理的信息架構(gòu)及網(wǎng)站導(dǎo)航，以符合城市形象的視覺設(shè)計來營造具有城市特色、導(dǎo)航清晰、便捷易用的城市門戶網(wǎng)站。

作者：張毅 鄭露 單位：廣東工業(yè)大學(xué)