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

1、網(wǎng)頁(yè)導(dǎo)航的視覺(jué)設(shè)計(jì)與其可用行分析摘 要導(dǎo)航系統(tǒng)是一個(gè)網(wǎng)站的路標(biāo)，我們可以通過(guò)它來(lái)找尋我們需要的信息，因此好的導(dǎo)航能讓用戶(hù)有舒適的體驗(yàn)，增加對(duì)你的網(wǎng)站好感度，樂(lè)于再次光臨。但是導(dǎo)航系統(tǒng)千篇一律的模式顯然讓人厭倦。于是很多網(wǎng)頁(yè)設(shè)計(jì)師突破以往的模式，設(shè)計(jì)出了新穎的網(wǎng)站，新穎的導(dǎo)航，這樣的確給人們帶來(lái)了新的視覺(jué)沖擊，但是有時(shí)也會(huì)讓用戶(hù)迷惑，網(wǎng)站很新奇卻不知道如何開(kāi)始。本文通過(guò)對(duì)目前網(wǎng)站導(dǎo)航現(xiàn)狀的分析，探索網(wǎng)站的導(dǎo)航如何能兼具視覺(jué)設(shè)計(jì)和可用性。關(guān)鍵詞：導(dǎo)航、視覺(jué)設(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)頁(yè)導(dǎo)航的可用性分析（4-6） 1.1網(wǎng)頁(yè)導(dǎo)航的概況（5-6） 1.2網(wǎng)頁(yè)導(dǎo)航的可用性分析(6-7)

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

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

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

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

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

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

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

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

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

14、計(jì)時(shí)只能在顏色和質(zhì)感上做變化。雖然在信息量大的門(mén)戶(hù)類(lèi)網(wǎng)站它還說(shuō)相當(dāng)實(shí)用的，但是在這個(gè)追求新奇和趣味的網(wǎng)絡(luò)時(shí)代，這種千篇一律的導(dǎo)航已經(jīng)不能滿(mǎn)足人們的視覺(jué)需求了。如下圖（圖一）的一個(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ì)讓用戶(hù)在點(diǎn)擊時(shí)有一種新奇，從而記住這個(gè)網(wǎng)站。 圖二（a） 圖二（b）圖三的網(wǎng)站是一個(gè)生產(chǎn)葡萄酒的企（ 。 flash技術(shù)的使用讓網(wǎng)站的頁(yè)面突破了格局的限制，在導(dǎo)航設(shè)計(jì)上也相當(dāng)?shù)男路f。吧臺(tái)上的酒瓶就充當(dāng)了導(dǎo)

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

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

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

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