網(wǎng)站建設中交互設計實(shí)用指南系列發(fā)布者：本站     時(shí)間：2022-04-04 19:04:53

任何位置都能明確“我在哪里？這里有什么？從這里能去哪里？”

小時(shí)候，童話(huà)故事都告訴我們，迷路可不是一件好事。那會(huì )伴隨著(zhù)困惑、沮喪、憤怒和恐懼。為了避免迷失方向，我們發(fā)明了各種導航工具，大到衛星定位系統，小到指南針，人類(lèi)在這一事情上，極具創(chuàng )意。

在網(wǎng)站上迷失方向，雖然不是什么生死攸關(guān)的事，但會(huì )帶來(lái)許多負面影響，如：用戶(hù)體驗下降、任務(wù)不能完成，用戶(hù)流失等。我們可以通過(guò)良好的導航系統來(lái)避免這個(gè)情況發(fā)生。好的導航系統可以幫助人們找到在網(wǎng)站中的位置，并幫助他們制定更好的查詢(xún)策略，增進(jìn)對內容的理解。

在制定解決方案前，先了解他們?yōu)槭裁磿?huì )迷路：

1、當人們不能理解信息時(shí)，會(huì )產(chǎn)生迷惑

2、人們在查詢(xún)過(guò)程中迷失，不知道下一步該做什么

3、人們可能會(huì )在網(wǎng)站中失去方向感，無(wú)法回到以前的頁(yè)面，甚至是首頁(yè)

交互設計實(shí)用指南系列(7) –避免迷路
圖1

比如在圖1的這個(gè)網(wǎng)站中游走，你容易陷入進(jìn)退兩難的境地。上圖中，兩個(gè)點(diǎn)擊打開(kāi)的頁(yè)面，都沒(méi)有導航信息，甚至沒(méi)有任何離開(kāi)當前頁(yè)面的出口。

4、  人們在在信息系統中偏離了方向，分散了注意力。人們因眾多的、喧賓奪主的信息而偏離了主要任務(wù)。關(guān)于這一點(diǎn)，可以參考交互指南之《突出重點(diǎn)，一目了然》

交互設計實(shí)用指南系列(7) –避免迷路
圖2

圖2中的登錄頁(yè)面，可謂琳瑯滿(mǎn)目，信息的豐富程度毫不遜色于首頁(yè)，難道設計者的目的，是希望用戶(hù)放棄登錄這個(gè)主要任務(wù)，去往“更重要”的地方嗎？

你也許會(huì )想，讓用戶(hù)不要迷路，不是非常簡(jiǎn)單的事情嗎，我只要在所有頁(yè)面中放入全局導航，使他們能在網(wǎng)站的核心內容之間移動(dòng)。然后放入面包屑，讓他們了解自己所處的位置，一切不就完事大吉了。

但事實(shí)上果真如此嗎？全局導航也許能幫助用戶(hù)了解你網(wǎng)站的核心內容，但在具體的任務(wù)中，比如圖3中的淘寶全局導航，如果放入在挑選商品或支付的頁(yè)面中，恐怕非但不能指引用戶(hù)，還會(huì )干擾到任務(wù)的完成。

交互設計實(shí)用指南系列(7) –避免迷路
圖3

 小心，別讓自己陷入導航系統的過(guò)度設計中去。我們所要做的，是使用人物角色和場(chǎng)景作為參考，確定人物角色會(huì )選擇的到達內容的最佳路線(xiàn)，而不是提供所有線(xiàn)路，更不需要將網(wǎng)站的全部結構復制到每個(gè)頁(yè)面當中，造成頁(yè)面信息負擔。好的導航系統讓人們感知不到它的存在。就好象在觀(guān)看體育比賽時(shí)，裁判會(huì )做出許多正確的判定，而我們往往忽略他的存在，但一旦裁判員做出了一個(gè)錯誤的判決，就會(huì )引來(lái)場(chǎng)上觀(guān)眾的一片唏噓。

那么，我們應該怎樣做，才能保證用戶(hù)不在網(wǎng)站中迷失呢？

首先，我們要幫助用戶(hù)定向，也就是確定“當前位置”。

即便GPS衛星定位系統如此強大，它都必須隨時(shí)在地圖上標明我們的“當前位置”，才能真正為我們導航。而與現實(shí)世界不同的是，在網(wǎng)絡(luò )世界中沒(méi)有南北之分，也沒(méi)有地理位置，我們必須利用導航系統的各種因素，來(lái)為用戶(hù)創(chuàng )造可以判斷當前位置的情景：

1、  重視網(wǎng)站的品牌信息

用戶(hù)應該一直知道自己在瀏覽什么網(wǎng)站，將組織的名稱(chēng)、標識、和身份識別圖放進(jìn)網(wǎng)站的所有頁(yè)面中，是達到此目的最顯著(zhù)的方法。

2、  細節創(chuàng )建情景

我們可以通過(guò)頁(yè)面內標題、頁(yè)面文字，向用戶(hù)傳遞當前位置的信息。瀏覽器標題和URL也是用戶(hù)進(jìn)行判斷的依據。當前導航選項的高亮狀態(tài)，也是常用的方式。

3、  面包屑

“面包屑”也是標明當前網(wǎng)站位置的好工具。此外，面包屑還能傳遞網(wǎng)站結構信息，以及記錄用戶(hù)的訪(fǎng)問(wèn)足跡。

4、  逃生艙模式

逃生艙模式也是幫助用戶(hù)確定當前位置的一張底牌。也就是在網(wǎng)站的所有頁(yè)面上設置統一的出口，無(wú)論什么時(shí)候，點(diǎn)擊這里，都可以回到首頁(yè)。大部分網(wǎng)站都把逃生艙設置在網(wǎng)站LOGO上，已經(jīng)成為慣例了。

其次，根據用戶(hù)需求，確定導航模式。

用戶(hù)的需求決定了我們應當放置何種導航鏈接。在不同類(lèi)型的頁(yè)面，用戶(hù)所產(chǎn)生的問(wèn)題不盡相同。我們需要預測這些問(wèn)題，然后在設計導航的時(shí)候，也問(wèn)自己同樣的問(wèn)題。

一般情況下，用戶(hù)會(huì )問(wèn)：“我在哪里？”“我在這里能做什么？”“我還可以去哪里”；在電子商務(wù)網(wǎng)站，他們也許會(huì )問(wèn)，我該如何找到想要的產(chǎn)品信息；具體在某一產(chǎn)品，他們也許會(huì )問(wèn)：“我該如何聯(lián)系客服人員？”“我到哪里可以找到相關(guān)產(chǎn)品”。

我們所要做的，并不是想出所有可能發(fā)生的問(wèn)題，相應的，我們也不可能把所有問(wèn)題的答案都放入頁(yè)面當中。這個(gè)時(shí)候，人物角色和場(chǎng)景，將發(fā)揮很重要的作用。對于不同的頁(yè)面，弄清楚每個(gè)用戶(hù)角色要去哪里，放置他們最需要的導航。比如：你的人物角色需要隨時(shí)從一個(gè)欄目跳轉到另一個(gè)欄目嗎？如果是的話(huà)，請保證頂級欄目的鏈接一直可用。

一旦確定了用戶(hù)想要到達的內容，就要思考達到這一目標所需要的最簡(jiǎn)單、最容易的方案。比如在圖4中，也許你的人物角色需要的，只是一個(gè)“下一組”鏈接。

交互設計實(shí)用指南系列(7) –避免迷路
圖4

 最后，通過(guò)壓力測試檢驗頁(yè)面的導航能力。

怎么樣測試這個(gè)頁(yè)面的導航能力呢?

（1） 隨機從你的網(wǎng)站上選擇一個(gè)頁(yè)面；
（2） 把這個(gè)頁(yè)面打印成黑白的，并把頁(yè)面頭部的瀏覽器地址欄和下面的版權及公司信息部份去掉；
（3） 假裝你是第一次進(jìn)入這個(gè)網(wǎng)站，并試圖回答下面的問(wèn)題(詳見(jiàn)下列問(wèn)題列表)；
（4） 在一張紙上寫(xiě)下你所想的和答案；

問(wèn)題列表:

1、這個(gè)頁(yè)面是寫(xiě)什么內容的？ 在頁(yè)面的標題處畫(huà)一個(gè)方形或在紙上寫(xiě)清楚；

2、這是個(gè)什么樣的網(wǎng)站? 把網(wǎng)站的名字用圈圈起來(lái)，或者自己寫(xiě)在紙上；

3、這個(gè)網(wǎng)站主要的版塊是什么? 用x標識；

4、這個(gè)頁(yè)面中主要的版塊是什么？ 用三角形圍著(zhù)x來(lái)標識；

5、我怎么樣到達這個(gè)網(wǎng)站的首頁(yè)？ 用H標識；

6、我怎么樣才能到達網(wǎng)站的頂部呢? T來(lái)標識；

7、每一組鏈接分別代表什么? 把頁(yè)面上的主要鏈接圈出來(lái)，并寫(xiě)下標識；

D:用來(lái)標識更多，詳細介紹及這個(gè)版塊的子頁(yè)面等；

N:在同一版塊的其它相鄰頁(yè)面；

S:在同一網(wǎng)站上但不相鄰的頁(yè)面；

O:離開(kāi)這個(gè)網(wǎng)站的頁(yè)面；

8、你是通過(guò)怎么樣的路徑到達這個(gè)頁(yè)面的呢？ 請寫(xiě)出你到達這個(gè)頁(yè)面的路徑，選擇1>選擇2>選擇3…

讓你們團隊的其它成員或熟悉你網(wǎng)站的朋友也與你做同一試驗，大家象跳傘一樣的進(jìn)入網(wǎng)站中的任意一個(gè)頁(yè)面，然后把回答記在紙上，你就可以看出導航存在的問(wèn)題。