網(wǎng)頁(yè)導(dǎo)航是網(wǎng)站中一個(gè)重要的組成元素。訪客需要通過(guò)導(dǎo)航來(lái)快速找到他們所需要的信息打月。
如果導(dǎo)航設(shè)計(jì)非扯痈混亂以致阻礙了用戶使用，訪客將感受到挫折甚至離開(kāi)奏篙。簡(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á)所有頁(yè)面夕吻。
這好像聽(tīng)起來(lái)很有道理诲锹，但是信息過(guò)載造成的后果會(huì)適得其反。與事先設(shè)計(jì)好用戶有可能訪問(wèn)的導(dǎo)航選項(xiàng)不同涉馅，他們會(huì)因?yàn)檫^(guò)多的選項(xiàng)而不知如何下手归园。
當(dāng)用戶開(kāi)始質(zhì)疑應(yīng)該點(diǎn)擊哪個(gè)選項(xiàng)時(shí)，他們已經(jīng)開(kāi)始抱怨這個(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來(lái)說(shuō)是重要的形导，但對(duì)于不需要這個(gè)的內(nèi)容的用戶而言，將“CEO致辭”放在主導(dǎo)航無(wú)疑是錯(cuò)誤的习霹，特別是這個(gè)致辭是以鏈接的方式存在時(shí)朵耕。
3.為大尺寸設(shè)備設(shè)計(jì)還是適應(yīng)各個(gè)設(shè)備
現(xiàn)在網(wǎng)站被各種設(shè)備各種尺寸訪問(wèn)著。只用大尺寸顯示訪問(wèn)網(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è)備坛缕，不需寫(xiě)一行代碼。只要把導(dǎo)航與頁(yè)面設(shè)計(jì)好捆昏，就可以像一個(gè)正常的網(wǎng)站一樣發(fā)布了赚楚。
4.彈出式菜單的混亂
當(dāng)你開(kāi)始設(shè)計(jì)主導(dǎo)航的選項(xiàng)時(shí)，開(kāi)始考慮次導(dǎo)航與主導(dǎo)航之間的頁(yè)面聯(lián)系骗卜。比如說(shuō)宠页，主導(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)懸停在所屬主菜單上。這種通用方法可以防止一些問(wèn)題焚刺，但是如果有下面的狀況就hold不住了敛摘。
例如门烂，觸摸屏是沒(méi)有“懸腿橛洌”這種狀態(tài)的，所以必須確保這種鏈接方式易用屯远。不要使用有三級(jí)或者更多的彈出式菜單來(lái)避免各種彈出菜單蔓姚，這會(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ú)論是網(wǎng)站、觸屏捅暴，還是迭代導(dǎo)航恬砂。次導(dǎo)航可能在頁(yè)面間變化，但主導(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ò)誤的語(yǔ)調(diào)
每個(gè)網(wǎng)站都有自己的語(yǔ)調(diào)希柿。這個(gè)語(yǔ)調(diào)可以是友好的诊沪，輕松的，也有可能是專業(yè)的曾撤，直接的端姚，或者其他的感覺(jué)。無(wú)論這個(gè)網(wǎng)站的語(yǔ)調(diào)是什么挤悉，導(dǎo)航的文案應(yīng)與語(yǔ)調(diào)相符编整。
如果這個(gè)網(wǎng)站的語(yǔ)調(diào)是友好的且助人的，鏈接上“我們?nèi)绾螏椭恪北取胺?wù)”更好些娄猫。通過(guò)了解這個(gè)網(wǎng)站的語(yǔ)調(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)度，正確的語(yǔ)調(diào)抡蛙、選項(xiàng)等护昧。
如果你正在為你的網(wǎng)站尋找一個(gè)設(shè)計(jì)方案，可以看這篇文章粗截。?
結(jié)語(yǔ)
一個(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)也是無(wú)比重要的熊昌。
