1網站導航設計

1.1以城市信息為主導的導航設置

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

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

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

1.2以城市內、外用戶群為主導的導航設置

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

2網站視覺元素設計

在進行城市門戶網站視覺設計之前，應該對該城市進行基礎調研，包括是否有該城市的視覺識別體系，以及該城市擁有的自然地理、文化歷史、產業資源等信息，找出符合當地城市定位及文化特征的圖形、文字和色彩等視覺元素，從而使城市門戶網站的設計達到與地域文化相一致的、特色鮮明的視覺整體效果。

2.1圖標與圖片設計

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

2.2色彩設計

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

2.3網站標志與文字設計

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

3結語

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

作者：張毅 鄭露 單位：廣東工業大學