你有沒有遇到過這樣的情況跷叉，你訪問一個(gè)網(wǎng)站，花大量時(shí)間時(shí)間在瀏覽，突然想要去某個(gè)特定的頁面執(zhí)行一項(xiàng)任務(wù)云挟，但是自己完全迷失了方向梆砸，不知道該去哪里？
導(dǎo)航是任何應(yīng)用程序或界面中最重要的一個(gè)部分园欣，因?yàn)樗S多與可訪問性相關(guān)的東西帖世，用戶必須能夠輕松地瀏覽信息，而不是迷失在網(wǎng)站上的大量頁面中沸枯。有人可能會(huì)爭辯說日矫，有“搜索”來幫助你，但是你不能單單相信搜索绑榴，因?yàn)檠芯勘砻靼崮校挥?0％的網(wǎng)站用戶使用搜索功能，而大多數(shù)70％的網(wǎng)站依靠直接導(dǎo)航彭沼。這就是導(dǎo)航菜單具有高優(yōu)先級(jí)的原因缔逛。畢竟，即使是最有創(chuàng)意或有最酷的功能的網(wǎng)站姓惑，如果用戶無法找到想要的信息褐奴，它也是毫無用處的。
那什么是導(dǎo)航菜單于毙？
導(dǎo)航菜單是一種內(nèi)容類別或顯示特征的列表敦冬，其通常以鏈接或圖標(biāo)的形式呈現(xiàn)，并以明顯的視覺形式組合在一起唯沮，所述清晰的視覺形式不同于網(wǎng)站或頁面設(shè)計(jì)的其余部分脖旱。這些主要由導(dǎo)航欄和漢堡菜單組成。
我們幾乎在任何地方都能找到這些菜單介蛉，但這里面臨的挑戰(zhàn)是萌庆，您經(jīng)常發(fā)現(xiàn)人們?cè)诓檎疫@些菜單時(shí)遇到很多困難，并且對(duì)菜單感到困惑币旧。
在研究了超過15種以用戶為中心的產(chǎn)品和項(xiàng)目之后践险，我發(fā)現(xiàn)了一些有趣的發(fā)現(xiàn)和最佳實(shí)踐來設(shè)計(jì)用戶友好的導(dǎo)航菜單：我將它們分為幾類
顯示更加明顯
1.使用面包屑導(dǎo)航。面包屑是幫助定位網(wǎng)站內(nèi)人員的導(dǎo)航輔助工具吹菱。如果人們從外部來源被引導(dǎo)到網(wǎng)站的更深層頁面巍虫，這種方向尤其重要。
2.避免在大屏幕上使用小菜單（或菜單圖標(biāo)）鳍刷。當(dāng)有足夠的空間來顯示菜單時(shí)占遥，不應(yīng)該隱藏菜單。
3.總是嘗試將菜單放在熟悉的位置输瓜。用戶大部分時(shí)間都花在網(wǎng)站其他內(nèi)容上瓦胎。因此芬萍，用戶希望在瀏覽其他內(nèi)容或應(yīng)用程序（例如，左欄凛捏，屏幕頂部）之前查找他們以前見過的UI元素。通過將你的菜單放在人們希望找到它們的地方芹缔，使這些期望對(duì)你有利坯癣。（如下所示）
4.使菜單選項(xiàng)看起來可交互。如果選項(xiàng)看起來不可點(diǎn)擊最欠，用戶可能甚至不會(huì)意識(shí)到它是一個(gè)菜單示罗。如果您改變了太多菜單的造型，或者嚴(yán)格遵守平面設(shè)計(jì)原則芝硬，菜單看起來可能只是裝飾性圖片或標(biāo)題蚜点，這樣也是不可行的。
5.確保你的菜單有足夠的視覺重量拌阴。在許多情況下绍绘，放置在熟悉位置的菜單，則不需要太多留白區(qū)域或添加高飽和度顏色以便顯眼迟赃。但是陪拘，如果設(shè)計(jì)混亂，缺乏視覺重量的菜單可能很容易迷失在促銷和頭條新聞的海洋中纤壁。
6.使用與背景色對(duì)比強(qiáng)的顏色左刽。有多少設(shè)計(jì)師忽略了對(duì)比度準(zhǔn)則;?迷失在數(shù)字空間里，又多少用戶因?yàn)閷ふ也藛尾[起了雙眼酌媒。
協(xié)調(diào)用戶任務(wù)菜單
1.用可理解的鏈接標(biāo)簽欠痴。找出用戶正在查找的內(nèi)容，并使用熟悉且相關(guān)的類別標(biāo)簽秒咨。菜單不是為了裝扮修飾的部分喇辽。是為了堅(jiān)持清楚地描述產(chǎn)品內(nèi)容和功能的術(shù)語。
2.使鏈接標(biāo)簽易于掃描閱讀雨席。您可以通過左對(duì)齊垂直菜單和前置加載關(guān)鍵字來減少用戶花費(fèi)閱讀菜單的時(shí)間茵臭。
3.對(duì)于大型網(wǎng)站，使用菜單讓用戶預(yù)覽較低級(jí)別的內(nèi)容舅世。如果典型的用戶旅程涉及向下鉆取幾個(gè)級(jí)別旦委，超級(jí)菜單（或傳統(tǒng)下拉菜單）可以通過讓用戶跳過一個(gè)級(jí)別（或兩個(gè)級(jí)別）來節(jié)省用戶時(shí)間。
4.為密切相關(guān)的內(nèi)容提供本地導(dǎo)航菜單雏亚。如果人們經(jīng)常希望相關(guān)的產(chǎn)品的比較缨硝，使那些近似的頁面在本地導(dǎo)航菜單中看到，而不是強(qiáng)迫人們?yōu)g覽“彈簧式”的向上和向下的層次結(jié)構(gòu)罢低。
5.利用視覺溝通查辩。幫助用戶理解菜單選項(xiàng)的圖像胖笛，圖形或顏色。但要確保圖像代表用戶任務(wù)（或者至少不要使任務(wù)更加困難）宜岛。
為每個(gè)級(jí)別做獨(dú)特的視覺設(shè)計(jì)
人們應(yīng)該能夠快速掃描導(dǎo)航并了解哪些鏈接是主要长踊，次要和第三方導(dǎo)航項(xiàng)目。鏈接的放置和分組應(yīng)該建立在這個(gè)層次結(jié)構(gòu)之上萍倡。
視覺設(shè)計(jì) ： 如字體樣式身弊，字體大小，字體重量列敲、字體顏色等都應(yīng)該建立不同的導(dǎo)航級(jí)別上阱佛，并且應(yīng)該在整個(gè)導(dǎo)航中保持一致。如果實(shí)施輔助導(dǎo)航戴而，則設(shè)計(jì)還應(yīng)該明確區(qū)分父母凑术、孩子和兄弟之間的鏈接，并與主導(dǎo)航保持一致所意。
使用位置指示器
與面包屑一樣淮逊，導(dǎo)航上的位置指示器可幫助人們?cè)诰W(wǎng)站上定位自己，尤其是在網(wǎng)站內(nèi)部更深的情況下扶踊。這個(gè)清晰的視覺指示器可以指示用戶在哪個(gè)部分壮莹。
移動(dòng)端與PC端的不同導(dǎo)航
NNG的菜單導(dǎo)航不僅只針對(duì)于移動(dòng)設(shè)備，雖然為不同設(shè)備獨(dú)立開發(fā)設(shè)計(jì)可能是額外的付出姻檀，但他們依舊建議優(yōu)化每個(gè)設(shè)備的導(dǎo)航命满。這是一種更好的用戶體驗(yàn)，因?yàn)椤安煌脑O(shè)備具有不同的交互能力和不同的屏幕尺寸”绣版。
例如胶台，在PC上，日本時(shí)報(bào)導(dǎo)航設(shè)計(jì)利用更寬的屏幕寬度杂抽，并在單獨(dú)的欄上水平列出類別（輔助項(xiàng)目）诈唬。在移動(dòng)設(shè)備上，相同的導(dǎo)航使用漢堡包菜單設(shè)計(jì)模式缩麸，并在展開時(shí)利用手機(jī)的較長垂直空間铸磅，并在每個(gè)部分標(biāo)題下方列出次要項(xiàng)目，而不是在兩個(gè)部分之間分割主要和次要級(jí)別杭朱。兩種設(shè)計(jì)之間要存在凝聚力阅仔，同時(shí)針對(duì)每個(gè)視圖進(jìn)行優(yōu)化。
- 本文翻譯來自Medium
- 感謝Vamsi Batchu
