網(wǎng)頁導(dǎo)航是網(wǎng)站中一個(gè)重要的組成元素。訪客需要通過導(dǎo)航來快速找到他們所需要的信息。
如果導(dǎo)航設(shè)計(jì)非常混亂以致阻礙了用戶使用，訪客將感受到挫折甚至離開。簡(jiǎn)而言之，網(wǎng)站導(dǎo)航設(shè)計(jì)需要清晰而直接。為了達(dá)到這個(gè)目標(biāo)，我列舉7種應(yīng)該避免的糟糕設(shè)計(jì)。
1.太多選項(xiàng)
提供15個(gè)選項(xiàng)然后做出選擇的時(shí)間比提供8個(gè)選項(xiàng)然后做出選擇的時(shí)間要長(zhǎng)。提供盡可能少的選項(xiàng)可以提高選擇的時(shí)間。
不幸的是，這個(gè)原理應(yīng)用到網(wǎng)站導(dǎo)航時(shí)，許多公司就不管這一套了。他們把所有選項(xiàng)都集中到主導(dǎo)航條（primary navigation bar）試圖讓用戶快捷到達(dá)所有頁面。
這好像聽起來很有道理，但是信息過載造成的后果會(huì)適得其反。與事先設(shè)計(jì)好用戶有可能訪問的導(dǎo)航選項(xiàng)不同，他們會(huì)因?yàn)檫^多的選項(xiàng)而不知如何下手。
當(dāng)用戶開始質(zhì)疑應(yīng)該點(diǎn)擊哪個(gè)選項(xiàng)時(shí)，他們已經(jīng)開始抱怨這個(gè)導(dǎo)航架構(gòu)了。用戶很可能點(diǎn)擊的下一個(gè)按鈕就是“返回”。
當(dāng)設(shè)計(jì)一個(gè)網(wǎng)站的主導(dǎo)航時(shí)，設(shè)置盡可能少但重要的選項(xiàng)確實(shí)會(huì)有些風(fēng)險(xiǎn)。但是設(shè)計(jì)盡可能少的選項(xiàng)，事實(shí)上是鼓勵(lì)用戶全面體驗(yàn)?zāi)愕木W(wǎng)站。
2.錯(cuò)誤的選項(xiàng)
另外一個(gè)經(jīng)常出現(xiàn)的錯(cuò)誤出現(xiàn)在處理主導(dǎo)航與次導(dǎo)航之間的關(guān)系上。將一個(gè)并不重要的導(dǎo)航選項(xiàng)放到主導(dǎo)航將直接影響到網(wǎng)站的目標(biāo)人群使用體驗(yàn)。
需要時(shí)刻銘記的是網(wǎng)站是給目標(biāo)用戶使用的，內(nèi)容與形式時(shí)刻要與目標(biāo)用戶契合。
一個(gè)“董事長(zhǎng)致辭”的鏈接對(duì)公司的CEO來說是重要的，但對(duì)于不需要這個(gè)的內(nèi)容的用戶而言，將“CEO致辭”放在主導(dǎo)航無疑是錯(cuò)誤的，特別是這個(gè)致辭是以鏈接的方式存在時(shí)。
3.為大尺寸設(shè)備設(shè)計(jì)還是適應(yīng)各個(gè)設(shè)備
現(xiàn)在網(wǎng)站被各種設(shè)備各種尺寸訪問著。只用大尺寸顯示訪問網(wǎng)站的時(shí)代一去不復(fù)返了，友好的網(wǎng)站必須適應(yīng)多平臺(tái)尺寸設(shè)備。
許多網(wǎng)站導(dǎo)航方案只為大屏幕顯示器。在小尺寸顯示設(shè)備上，包括平板電腦和手機(jī)，這種導(dǎo)航體驗(yàn)就不是很友好了。這就是網(wǎng)站為什么必須設(shè)計(jì)自適應(yīng)導(dǎo)航的原因。
有了自適應(yīng)設(shè)計(jì)的網(wǎng)站，導(dǎo)航便可以在不同顯示尺寸的設(shè)備上保證易用性。例如Webydo就是個(gè)好例子。它有著像素級(jí)自適應(yīng)編輯功能，可以自由適應(yīng)不同設(shè)備，不需寫一行代碼。只要把導(dǎo)航與頁面設(shè)計(jì)好，就可以像一個(gè)正常的網(wǎng)站一樣發(fā)布了。
4.彈出式菜單的混亂
當(dāng)你開始設(shè)計(jì)主導(dǎo)航的選項(xiàng)時(shí)，開始考慮次導(dǎo)航與主導(dǎo)航之間的頁面聯(lián)系。比如說，主導(dǎo)航上有一個(gè)“我們的公司”選項(xiàng)，在這個(gè)選項(xiàng)下面還有其他重要性不足以放在主導(dǎo)航上的次導(dǎo)航，如以下幾個(gè)：
*公司歷史
*領(lǐng)導(dǎo)人團(tuán)隊(duì)
*所獲獎(jiǎng)項(xiàng)
*招聘
表現(xiàn)這些次導(dǎo)航方法之一就是下拉框或彈出框，而這種觸發(fā)條件是鼠標(biāo)懸停在所屬主菜單上。這種通用方法可以防止一些問題，但是如果有下面的狀況就hold不住了。
例如，觸摸屏是沒有“懸停”這種狀態(tài)的，所以必須確保這種鏈接方式易用。不要使用有三級(jí)或者更多的彈出式菜單來避免各種彈出菜單，這會(huì)使你設(shè)計(jì)的導(dǎo)航變得笨重。
如果想了解哪種菜單適合你的網(wǎng)站，通航設(shè)計(jì)模式的重要性?這篇文章用各種實(shí)例討論了web和app的導(dǎo)航。
5.導(dǎo)航不一致
一旦用戶搞清楚了如何使用你的導(dǎo)航，就不要再改變啦！網(wǎng)站應(yīng)該有個(gè)體驗(yàn)一致的導(dǎo)航，無論是網(wǎng)站、觸屏，還是迭代導(dǎo)航。次導(dǎo)航可能在頁面間變化，但主導(dǎo)航的體驗(yàn)必須一致。
6.導(dǎo)航的文案太長(zhǎng)
保持簡(jiǎn)練的導(dǎo)航非常重要，保持導(dǎo)航上文案的簡(jiǎn)練與友好也同樣重要。
比如一個(gè)鏈接叫“我們公司的所有信息”，就不如“我們的公司”“公司”“關(guān)于我們”，或“關(guān)于”。這似乎不是一個(gè)特別大修改，但是可以精簡(jiǎn)許多。
如果你像這樣修改整個(gè)導(dǎo)航條，用戶就可以省一半的精力閱讀的同時(shí)保證文案的可達(dá)性。
7.錯(cuò)誤的語調(diào)
每個(gè)網(wǎng)站都有自己的語調(diào)。這個(gè)語調(diào)可以是友好的，輕松的，也有可能是專業(yè)的，直接的，或者其他的感覺。無論這個(gè)網(wǎng)站的語調(diào)是什么，導(dǎo)航的文案應(yīng)與語調(diào)相符。
如果這個(gè)網(wǎng)站的語調(diào)是友好的且助人的，鏈接上“我們?nèi)绾螏椭恪北取胺?wù)”更好些。通過了解這個(gè)網(wǎng)站的語調(diào)，你可以設(shè)計(jì)與之相符的導(dǎo)航。
是的，在這種情況下“我們?nèi)绾螏椭恪北取胺?wù)”字?jǐn)?shù)要多，這似乎違背了第6項(xiàng)原則。要記住的是設(shè)計(jì)的目標(biāo)不是文字盡可能短，而是根據(jù)全局做出正確的設(shè)計(jì)，這個(gè)全局包括適當(dāng)?shù)奈谋鹃L(zhǎng)度，正確的語調(diào)、選項(xiàng)等。
如果你正在為你的網(wǎng)站尋找一個(gè)設(shè)計(jì)方案，可以看這篇文章。?
結(jié)語
一個(gè)網(wǎng)站的導(dǎo)航設(shè)計(jì)可以打造或破壞用戶體驗(yàn)。確保你的導(dǎo)航結(jié)構(gòu)清晰易用可以使得用戶花費(fèi)更多的時(shí)間并指導(dǎo)用戶閱讀所需內(nèi)容，這些對(duì)良好的網(wǎng)站用戶體驗(yàn)也是無比重要的。
