網(wǎng)頁導(dǎo)航的視覺設(shè)計(jì)與其可用行分析

1、網(wǎng)頁導(dǎo)航的視覺設(shè)計(jì)與其可用行分析摘 要導(dǎo)航系統(tǒng)是一個(gè)網(wǎng)站的路標(biāo)，我們可以通過它來找尋我們需要的信息，因此好的導(dǎo)航能讓用戶有舒適的體驗(yàn)，增加對(duì)你的網(wǎng)站好感度，樂于再次光臨。但是導(dǎo)航系統(tǒng)千篇一律的模式顯然讓人厭倦。于是很多網(wǎng)頁設(shè)計(jì)師突破以往的模式，設(shè)計(jì)出了新穎的網(wǎng)站，新穎的導(dǎo)航，這樣的確給人們帶來了新的視覺沖擊，但是有時(shí)也會(huì)讓用戶迷惑，網(wǎng)站很新奇卻不知道如何開始。本文通過對(duì)目前網(wǎng)站導(dǎo)航現(xiàn)狀的分析，探索網(wǎng)站的導(dǎo)航如何能兼具視覺設(shè)計(jì)和可用性。關(guān)鍵詞：導(dǎo)航、視覺設(shè)計(jì)、可用性AbstractThe guidance system is a website guidepost, we may pursue

2、the information through it which we need, therefore the good navigation can let the user have the comfortable experience, increases the good sensitivity to your website, is glad once more the presence. But the guidance system stereotyped pattern lets the human be weary of obviously. Therefore the ve

3、ry many homepage designer broke through the former pattern to design the novel website, the novel navigation, like this indeed has brought the new visual impact to the people, but sometimes also could let the user confuse, the website was very novel did not know actually how started. Does this artic

4、le through to the present website navigation present situation analysis, how explore the website the navigation to be able the concurrently visual design and the usability.Key word: Navigation，Visual design, usability目 錄封面（1）中文摘要(2)英文摘要(2)目錄(3)緒論(4)1網(wǎng)頁導(dǎo)航的可用性分析（4-6） 1.1網(wǎng)頁導(dǎo)航的概況（5-6） 1.2網(wǎng)頁導(dǎo)航的可用性分析(6-7)

5、2網(wǎng)頁導(dǎo)航的視覺設(shè)計(jì)(7-11) 2.1網(wǎng)頁導(dǎo)航的新形式 (7-10) 2.2新式導(dǎo)航存在的問題 (10-11)3如何兼顧網(wǎng)頁導(dǎo)航的可用性和視覺設(shè)計(jì)(11)4結(jié)論(11-12)致謝(12)主要參考文獻(xiàn)(12)緒 論對(duì)瀏覽者來說，導(dǎo)航是一個(gè)網(wǎng)站的目錄。當(dāng)我們進(jìn)入一家網(wǎng)站首先會(huì)尋找導(dǎo)航，以此來判斷這家網(wǎng)站的價(jià)值，或者是否有我們想要閱讀的部分。因此導(dǎo)航的首要目的就是可用性強(qiáng)，便于用戶輕松找到他們需要的信息。但是，當(dāng)你進(jìn)入的每家網(wǎng)站都擁有類似的導(dǎo)航條，即使它們的可用性相當(dāng)?shù)母?，我想用戶也?huì)對(duì)它感到失望。所以那些新穎的不同于以往的網(wǎng)站往往會(huì)給人以驚喜，但是它們?cè)趲眢@喜的同時(shí)往往也給用戶來許多的煩惱：這

6、些新穎的導(dǎo)航可能運(yùn)用圖片和flash等技術(shù)，導(dǎo)致加載網(wǎng)頁的速度變慢，導(dǎo)航無法顯示等問題；導(dǎo)航的布局不同于人們以往的使用習(xí)慣，用戶需要猜測(cè)設(shè)計(jì)者的意圖等。這些問題會(huì)磨光用戶的耐性，在失敗了多次仍沒找到需要的信息后，他們就會(huì)離開網(wǎng)站。好的導(dǎo)航要兼顧可用性和視覺設(shè)計(jì)，網(wǎng)頁如何在追求視覺效果的同時(shí)也能讓用戶輕松的找到想要的信息是一個(gè)需要研究的課題。1 網(wǎng)頁導(dǎo)航的可用性分析1.1網(wǎng)頁導(dǎo)航的概況網(wǎng)頁導(dǎo)航的形式：1 純文字在功能上，文字導(dǎo)航就已經(jīng)完成了任務(wù)。但從視覺的角度來說，純文字的導(dǎo)航遠(yuǎn)遠(yuǎn)達(dá)不到用戶的期望值。2 文字加裝飾相對(duì)于純文字的導(dǎo)航，“文字加裝飾”的形式更體現(xiàn)出了網(wǎng)絡(luò)傳播的靈活性和趣味性，它不僅

7、可以通過裝飾性的圖標(biāo)圖片更準(zhǔn)確的表達(dá)欄目的信息特征，還可以通過導(dǎo)航條的裝飾效果，對(duì)網(wǎng)頁風(fēng)格及整體網(wǎng)站形式設(shè)計(jì)做出強(qiáng)有力的補(bǔ)充。3 Flash導(dǎo)航Flash導(dǎo)航被廣泛的應(yīng)用在各類信息類內(nèi)容的網(wǎng)站里，F(xiàn)lash導(dǎo)航可以增加頁面設(shè)計(jì)的靈活性和信息處理的趣味性。Flash導(dǎo)航可以讓讀者找到瀏覽網(wǎng)站的樂趣。4 隱藏文字信息的導(dǎo)航Flash技術(shù)的發(fā)展，使很多富有創(chuàng)意的設(shè)計(jì)師，把導(dǎo)航設(shè)計(jì)成隱藏的。有的需要點(diǎn)擊某個(gè)區(qū)域，才會(huì)顯示出來，而有的導(dǎo)航則是跟隨鼠標(biāo)的移動(dòng)的，只有在單擊鼠標(biāo)右鍵時(shí)，才能顯現(xiàn)。這些效果確實(shí)讓我們的網(wǎng)站顯得新鮮而又創(chuàng)意。5 信息抽屜信息抽屜式的導(dǎo)航會(huì)根據(jù)打開的信息位置挪動(dòng)。6 多導(dǎo)航系統(tǒng)多導(dǎo)

8、航的形成與設(shè)計(jì)是由信息結(jié)構(gòu)與欲求目的來決定的。7 無導(dǎo)航“信息域”導(dǎo)航如果網(wǎng)站的頁面上的信息域十分清楚的擺放了相關(guān)的信息內(nèi)容，每個(gè)信息域的信息似乎無法與其他域的信息合并為一個(gè)欄目，同時(shí)單獨(dú)的一類信息，其信息量大小也不足以形成一個(gè)欄目。設(shè)計(jì)設(shè)計(jì)師的處理方式，是讓頁面上的每個(gè)信息域本身作為“導(dǎo)航”，這種情況叫做信息域?qū)Ш健?；瀏覽者在首頁上就看到了網(wǎng)站所有可能包含的內(nèi)容，并可直接點(diǎn)擊深層級(jí)的信息連接。網(wǎng)頁導(dǎo)航的排列方式：1 橫排導(dǎo)航占用頁面空間最少，經(jīng)常被使用在網(wǎng)站信息內(nèi)容非常多的門戶網(wǎng)站、資訊網(wǎng)站中。除了面積小的特點(diǎn)外，另一視覺優(yōu)點(diǎn)是橫排導(dǎo)航很大氣。2 豎排導(dǎo)航相對(duì)橫排導(dǎo)航而言，豎排導(dǎo)航占用的頁面

9、空間較多，通常位于頁面居左的位置。居右導(dǎo)航給排版帶來一定的難度，而且也不同于人們的閱讀習(xí)慣，但也有極少數(shù)優(yōu)秀的作品。由于從瀏覽者的心理考慮，居左導(dǎo)航更容易讓用戶接受。3 傾斜導(dǎo)航傾斜導(dǎo)航的個(gè)性特征太過明顯，因此不時(shí)所有的網(wǎng)站都適用的。當(dāng)網(wǎng)頁的信息量大小合適，需要營造個(gè)性的網(wǎng)站風(fēng)格時(shí)，可以嘗試采用傾斜排版的方式。以上是目前存在的一些網(wǎng)站導(dǎo)航形式，這些導(dǎo)航各有優(yōu)勢(shì)，網(wǎng)頁設(shè)計(jì)者可以通過對(duì)自己網(wǎng)站的結(jié)構(gòu)和布局的分析合理的使用不同形式的導(dǎo)航。1.2網(wǎng)頁導(dǎo)航的可用性分析可用性是一個(gè)與任何需要用戶使用的產(chǎn)品都有關(guān)的術(shù)語。從最基本的層面上說，可用性是指產(chǎn)品和用戶之間的關(guān)系，直接與產(chǎn)品是否有用有關(guān)。同樣的標(biāo)準(zhǔn)也

10、適用于web站點(diǎn)，網(wǎng)站的導(dǎo)航應(yīng)該以用戶的目的、需求、期望來判斷是否可用性強(qiáng)。導(dǎo)航幫助我們找到任何想要的東西；告訴我們現(xiàn)在身在何處；給我們一種固定的感覺；通過層次結(jié)構(gòu)的可視化告訴我們當(dāng)前的位置；告訴我們?nèi)绾问褂镁W(wǎng)站；當(dāng)網(wǎng)站的導(dǎo)航清楚、規(guī)劃得當(dāng)，會(huì)當(dāng)用戶對(duì)網(wǎng)站建設(shè)者有信心。當(dāng)人們進(jìn)入一家新的網(wǎng)站后，首先感知到的是這個(gè)網(wǎng)站的視覺風(fēng)格。然后當(dāng)網(wǎng)站給人的感覺不錯(cuò)時(shí)，人們開始想要深入這家網(wǎng)站。人們的第一反應(yīng)就是尋找導(dǎo)航系統(tǒng)，以此來決定該如何開始。一般來說，用戶會(huì)逐個(gè)察看導(dǎo)航的欄目清單，然后點(diǎn)擊一個(gè)看起來還不錯(cuò)的欄目。然后從進(jìn)入下級(jí)菜單，再進(jìn)行選擇，如果運(yùn)氣不錯(cuò)的話，再點(diǎn)擊一兩下，你將得到一份清單，大約就是

11、你在尋找的目標(biāo)。然后分別點(diǎn)擊這些清單的鏈接來查看它們的詳細(xì)信息，閱讀詳細(xì)內(nèi)容。但是如確信找不到你需要的信息，或者你已經(jīng)厭煩了，不想再尋找，你會(huì)離開。從自己做為web用戶的體會(huì)來說，如果到了一家網(wǎng)站那，卻找不到你學(xué)要的內(nèi)容或者不知道這個(gè)網(wǎng)站是怎么組織的，你不可能在那里待太長時(shí)間，或者下次不會(huì)再光顧這家網(wǎng)站。那么導(dǎo)航需要?jiǎng)?chuàng)建得“明確”、“簡單”、“一致”。導(dǎo)航有一些習(xí)慣的用法，如同我們?cè)诳磿鴷r(shí)有一些傳統(tǒng)的閱讀習(xí)慣一樣。我們習(xí)慣從左到右的閱讀，在書的前幾頁會(huì)有目錄，在頁邊的某個(gè)地方會(huì)有頁碼。如果打破這些習(xí)慣用法，我們會(huì)有多失望。Web導(dǎo)航的習(xí)慣用法大部分來自已有的印刷品習(xí)慣用法。他們會(huì)繼續(xù)演化下去，

12、但是有一些基本的元素，如網(wǎng)站的ID、欄目的劃分、實(shí)用工具、“你在那里”的指示器、頁面的名稱、頁面導(dǎo)航、底端導(dǎo)航等。持久導(dǎo)航的使用，可以描述出現(xiàn)在網(wǎng)站每個(gè)頁面上的一組導(dǎo)航元素。讓導(dǎo)航在每一頁以一致的外觀出現(xiàn)在同樣的位置，會(huì)讓用戶立即確認(rèn)自己仍然呆在這個(gè)網(wǎng)站上，而且用戶只需要了解它一次。但是在主頁和表單頁不必使用持久導(dǎo)航。持久導(dǎo)航最重要的元素之一就是把我們送回主頁的按鈕或鏈接。讓一個(gè)返回主頁的按鈕始終可見，會(huì)給用戶一種安全感，無論怎么點(diǎn)擊最后都可以回到主頁重新開始。導(dǎo)航的欄目名稱要和點(diǎn)擊的鏈接一致。當(dāng)用戶點(diǎn)擊“關(guān)于我們”的欄目，結(jié)果出來的是公司產(chǎn)品的介紹，那么用戶可能會(huì)覺得迷惑，對(duì)網(wǎng)站的建設(shè)者的組

13、織能力產(chǎn)生懷疑。導(dǎo)航的欄目名稱和鏈接內(nèi)容的匹配會(huì)讓用戶有一個(gè)愉快的體驗(yàn)，讓他們輕松找到他們需要的信息。用戶希望知道自己在那里。信息內(nèi)容少的網(wǎng)站可以通過“你在這里”指示器來了解。信息量大的網(wǎng)站會(huì)可以通過和“面包屑”來告訴用戶所處的方位。這些都是可以作為輔助導(dǎo)航。當(dāng)我們點(diǎn)擊當(dāng)前欄目時(shí)我們希望它和其他的欄目有所區(qū)別，讓我們知道我們?cè)跒g覽當(dāng)前欄目。一般會(huì)用顏色、形狀、空間位置等來區(qū)分當(dāng)前頁和其他的欄目。這樣可以讓用戶知道正在閱讀的是什么內(nèi)容。以上這些做法可以讓導(dǎo)航變得可用性強(qiáng)，可以使用戶在瀏覽網(wǎng)站時(shí)有舒適的體驗(yàn)。2 網(wǎng)頁導(dǎo)航的視覺設(shè)計(jì)2.1網(wǎng)頁導(dǎo)航的新形式傳統(tǒng)的導(dǎo)航多是tab導(dǎo)航，長長的一條或多條，設(shè)

14、計(jì)時(shí)只能在顏色和質(zhì)感上做變化。雖然在信息量大的門戶類網(wǎng)站它還說相當(dāng)實(shí)用的，但是在這個(gè)追求新奇和趣味的網(wǎng)絡(luò)時(shí)代，這種千篇一律的導(dǎo)航已經(jīng)不能滿足人們的視覺需求了。如下圖（圖一）的一個(gè)網(wǎng)站為例( 圖片一(a) 圖片一(b) 圖片一(c) 下圖二的網(wǎng)站（http:/www.hybridworks.jp/）導(dǎo)航做得相當(dāng)?shù)木拢瑥膶?dǎo)航的質(zhì)感到菜單的切換特效到切換菜單的聲音都設(shè)計(jì)得相當(dāng)?shù)募?xì)致。精細(xì)的特效設(shè)計(jì)讓用戶在點(diǎn)擊時(shí)有一種新奇，從而記住這個(gè)網(wǎng)站。 圖二（a） 圖二（b）圖三的網(wǎng)站是一個(gè)生產(chǎn)葡萄酒的企（ 。 flash技術(shù)的使用讓網(wǎng)站的頁面突破了格局的限制，在導(dǎo)航設(shè)計(jì)上也相當(dāng)?shù)男路f。吧臺(tái)上的酒瓶就充當(dāng)了導(dǎo)

15、航的角色，點(diǎn)擊酒瓶就會(huì)出現(xiàn)酒的介紹和與之匹配的酒杯。網(wǎng)頁的整個(gè)效果制作的相當(dāng)真實(shí)，而且很有趣味性。 圖三上面的三個(gè)例子只是簡單的介紹了網(wǎng)站導(dǎo)航在形式上的創(chuàng)新，給人帶來的一些驚喜。但是并不是所有的創(chuàng)新都帶來了好的結(jié)果，有些新的形式可能讓網(wǎng)頁的可用性降低。2.2新式導(dǎo)航存在的問題設(shè)計(jì)師往往會(huì)只追求形式上的美感，有時(shí)會(huì)只關(guān)注字體大小和位子擺放如何美觀的問題，讓視覺元素變得模糊部清。設(shè)計(jì)師的眼中形式美是占主導(dǎo)地位的。而且在想在這個(gè)充滿個(gè)性的時(shí)代，設(shè)計(jì)師往往會(huì)希望通過很強(qiáng)的視覺沖擊、和與眾不同的新式來奪人眼球。一個(gè)制作很精彩的網(wǎng)站，有漂亮的大塊圖片、甚至是聲色俱佳的Flash，很好的動(dòng)態(tài)效果，這些可能需

16、要很久的時(shí)間來加載。經(jīng)過長時(shí)間的等待用戶在進(jìn)入時(shí)可能會(huì)覺得很驚喜。它導(dǎo)航可能新奇的不同已往的 ，甚至沒有導(dǎo)航 。用戶都要費(fèi)一番腦筋來猜想建站者的意圖，網(wǎng)站是如何組織的。讓人琢磨半天也沒有頭緒的話，用戶會(huì)選擇離開。這就是新式導(dǎo)航的問題，設(shè)計(jì)者往往會(huì)把形式感作為建站的首要考量。沒有考慮到用戶在使用時(shí)的方便性、快捷性。而讓用戶有挫敗感，從而放棄瀏覽他的網(wǎng)站。設(shè)計(jì)者往往只是站在設(shè)計(jì)師的角度來建設(shè)一個(gè)網(wǎng)站，沒有從用戶的角度來考慮瀏覽網(wǎng)站時(shí)的舒適程度。這不是一個(gè)好的網(wǎng)站設(shè)計(jì)所應(yīng)該有的。 3 如何兼顧網(wǎng)頁導(dǎo)航的可用性和視覺設(shè)計(jì)好的網(wǎng)頁導(dǎo)航要兼顧可用性和視覺設(shè)計(jì)兩方面。如何才能兼顧網(wǎng)站導(dǎo)航的可用性和視覺性是一

17、個(gè)需要權(quán)衡的問題。首先網(wǎng)站導(dǎo)航的設(shè)計(jì)，要以“如何有效地進(jìn)行信息結(jié)構(gòu)的展示”作為參考。網(wǎng)站的導(dǎo)航要根據(jù)網(wǎng)站的信息結(jié)構(gòu)來劃分。信息架構(gòu)決定了我們是用幾級(jí)分類，一個(gè)項(xiàng)目是否可以屬于兩個(gè)或多個(gè)分類，等等。信息架構(gòu)里面，有很大一部分工作是分類。分類，就是對(duì)已有的項(xiàng)目、內(nèi)容，通過已知的共同屬性，進(jìn)行分組、歸類。然后根據(jù)有序的分類再來考慮使用什么樣的形式。可能設(shè)計(jì)人員覺得這樣會(huì)限制了他們的思路，不能創(chuàng)造出新穎的網(wǎng)站。但是即使是純文字的網(wǎng)站也能通過文字大小、位子、字體、顏色的不同而創(chuàng)作出相當(dāng)出色的網(wǎng)站。好的信息分類會(huì)兩網(wǎng)站變得井井有條，為網(wǎng)站加分。根據(jù)網(wǎng)站信息架構(gòu)分析得出網(wǎng)站的分類。然后更具這樣一個(gè)架構(gòu)來設(shè)計(jì)

18、網(wǎng)站的導(dǎo)航。這樣的導(dǎo)航是合理的也是易用的。在視覺設(shè)計(jì)上可以改變導(dǎo)航的形狀、顏色、質(zhì)感、增加特效和聲音。更重要的是加入新鮮的元素來增加趣味性，也可以運(yùn)用新的技術(shù)來實(shí)現(xiàn)它的多樣性。但是在視覺設(shè)計(jì)的同時(shí)能然要遵循可用性的 原則，以用戶的舒適閱讀為大前提。如導(dǎo)航的左右放置是否符合用戶的閱讀習(xí)慣，而不是為了設(shè)計(jì)而不關(guān)用戶的體驗(yàn)。這樣導(dǎo)航即具有可用新又具有視覺的沖擊力。結(jié) 論導(dǎo)航是網(wǎng)站不可或卻的頁面元素，是瀏覽這進(jìn)入網(wǎng)站的第一搜尋目標(biāo)，無論進(jìn)入到哪個(gè)頁面，人們都會(huì)再次尋找它，不斷的點(diǎn)擊它，再點(diǎn)擊它，來找到我們需要的信息。設(shè)計(jì)人員往往希望在導(dǎo)航上做出更多的新奇效果，不同以往的布局。這些視覺效果和新奇的嘗試給用戶帶來了不一樣的體驗(yàn)，往往讓人耳目一新，如同得到一個(gè)新奇的玩具一樣。