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

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

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

瀏覽者通過主導(dǎo)航條的指引，在對(duì)應(yīng)的下拉菜單中，可以詳細(xì)地了解到各類信息，這樣就能對(duì)倫敦城市有較全面整體的認(rèn)識(shí)。主導(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)上商城、文化活動(dòng)、招聘工作、新聞中心、聯(lián)系我們、登錄注冊(cè)”等關(guān)于整個(gè)倫敦城市的各個(gè)方面的信息。在這個(gè)部分，不僅提供了方便市民購買、支付的功能，還有序地把整個(gè)城市的文化教育活動(dòng)、工作就業(yè)等大量的服務(wù)信息進(jìn)行了高度概括。如頂條導(dǎo)航里＂Doitonline＂對(duì)應(yīng)的頁面中，會(huì)有＂Applyforit，F(xiàn)indit，Payforit＂等選項(xiàng)，選擇＂Payforit＂就可以在線繳納房租、水電、稅款等；點(diǎn)擊＂Contactus＂，顯示的不僅是倫敦市政府的聯(lián)系方式，還有倫敦市近45個(gè)其他職能部門的聯(lián)系方式。

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

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

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

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

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

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

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

2.2色彩設(shè)計(jì)

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

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

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

3結(jié)語

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

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