導(dao)航設計千變萬化(hua)(hua)(hua)，但是(shi)能夠(gou)同(tong)時兼顧到(dao)可用(yong)(yong)性、易(yi)用(yong)(yong)性還能夠(gou)帶(dai)來(lai)足(zu)夠(gou)舒適體驗的(de)導(dao)航模式(shi)，就不(bu)是(shi)那么多了。可靠(kao)的(de)導(dao)航設計需(xu)要(yao)幫(bang)助用(yong)(yong)戶達成目標，找到(dao)內容(rong)，提升頁面的(de)轉化(hua)(hua)(hua)率。設計不(bu)合理(li)的(de)導(dao)航對于用(yong)(yong)戶體驗是(shi)災難性的(de)，最(zui)直接(jie)的(de)影(ying)響，是(shi)用(yong)(yong)戶不(bu)再能足(zu)夠(gou)快捷方便的(de)找到(dao)想要(yao)的(de)頁面和(he)內容(rong)，間(jian)接(jie)地影(ying)響了網(wang)站的(de)轉化(hua)(hua)(hua)率和(he)用(yong)(yong)戶的(de)留存率。

而易(yi)用性良好的(de)(de)(de)(de)(de)(de)(de)UI界面(mian)很大(da)程度上(shang)是從(cong)設計(ji)(ji)(ji)優良的(de)(de)(de)(de)(de)(de)(de)導(dao)(dao)航(hang)(hang)開(kai)始的(de)(de)(de)(de)(de)(de)(de)。導(dao)(dao)航(hang)(hang)是用戶從(cong)A點走(zou)向B點的(de)(de)(de)(de)(de)(de)(de)重要指(zhi)引(yin)，設計(ji)(ji)(ji)師在(zai)(zai)(zai)設計(ji)(ji)(ji)過程中(zhong)不(bu)僅(jin)(jin)要確保這個(ge)路(lu)標足夠清(qing)晰，而且(qie)要讓導(dao)(dao)航(hang)(hang)的(de)(de)(de)(de)(de)(de)(de)過程足夠順滑(hua)、流(liu)暢(chang)。在(zai)(zai)(zai)整(zheng)個(ge)設計(ji)(ji)(ji)流(liu)程中(zhong)，導(dao)(dao)航(hang)(hang)設計(ji)(ji)(ji)應(ying)(ying)該(gai)占據(ju)有一(yi)定的(de)(de)(de)(de)(de)(de)(de)優先(xian)級(ji)，因為它不(bu)僅(jin)(jin)僅(jin)(jin)在(zai)(zai)(zai)整(zheng)個(ge)網頁的(de)(de)(de)(de)(de)(de)(de)信息架構中(zhong)占據(ju)著近乎骨(gu)架的(de)(de)(de)(de)(de)(de)(de)作用，而且(qie)在(zai)(zai)(zai)整(zheng)個(ge)體驗設計(ji)(ji)(ji)中(zhong)也扮演著重要的(de)(de)(de)(de)(de)(de)(de)角色。在(zai)(zai)(zai)原(yuan)型(xing)設計(ji)(ji)(ji)階段，導(dao)(dao)航(hang)(hang)的(de)(de)(de)(de)(de)(de)(de)設計(ji)(ji)(ji)應(ying)(ying)該(gai)就已(yi)經打磨清(qing)晰，并且(qie)集中(zhong)了所需(xu)的(de)(de)(de)(de)(de)(de)(de)設計(ji)(ji)(ji)素材，確保開(kai)發伊始便能搞定導(dao)(dao)航(hang)(hang)。

在(zai)諸多導航(hang)設計當中(zhong)，有一些(xie)優秀的(de)設計模式(shi)已經(jing)經(jing)過反(fan)復的(de)設計驗證，今天的(de)文中(zhong)就挑選出其中(zhong)最突(tu)出的(de) 5 種，供(gong)你參考(kao)。

1、帶有流暢動效的下拉導航菜單

下代(dai)菜單(dan)(dan)(dan)是(shi)UI設(she)計(ji)(ji)(ji)中最常見的(de)(de)設(she)計(ji)(ji)(ji)元(yuan)素(su)(su)，作(zuo)為一種擴展性良好的(de)(de)控(kong)件，它(ta)在(zai)被觸(chu)發之后擴展顯示更多(duo)(duo)的(de)(de)選(xuan)項，呈現更多(duo)(duo)的(de)(de)內容(rong)。下拉菜單(dan)(dan)(dan)有許多(duo)(duo)種不(bu)同的(de)(de)衍生樣式，在(zai)導(dao)(dao)航(hang)設(she)計(ji)(ji)(ji)中也很常見。許多(duo)(duo)傳統(tong)的(de)(de)導(dao)(dao)航(hang)當中，導(dao)(dao)航(hang)元(yuan)素(su)(su)的(de)(de)下拉菜單(dan)(dan)(dan)是(shi)需(xu)要點擊觸(chu)發的(de)(de)，而(er)現在(zai)更多(duo)(duo)的(de)(de)設(she)計(ji)(ji)(ji)師會選(xuan)擇光標懸(xuan)浮在(zai)導(dao)(dao)航(hang)元(yuan)素(su)(su)上的(de)(de)時(shi)候觸(chu)發，這樣對于用戶會更加省(sheng)心(xin)省(sheng)力(li)。

為了確保導航(hang)的整潔清晰，如今網頁的主要導航(hang)類目通常不(bu)會太(tai)多，控(kong)制在4~ 6 個選項，而下拉菜單則用(yong)來承載(zai)二級導航(hang)元素，這樣就(jiu)節省了空間，也讓信息層級更加清晰。

這種設計(ji)模式對于用戶(hu)而言并(bing)不陌生，瀏覽起來(lai)也頗為(wei)方(fang)便，對于多層級、大量選項的(de)導(dao)航需求而言，它正好可以應對。值得(de)注意的(de)是，光標懸浮觸發下拉菜單的(de)時候(hou)，展(zhan)現的(de)動效要(yao)足夠的(de)微妙，降低用戶(hu)打開(kai)的(de)突兀感，這樣會(hui)讓(rang)體驗更加優(you)秀(xiu)。

2、漢堡菜單+側邊欄

漢堡(bao)菜(cai)單加上(shang)彈出式的(de)(de)(de)(de)側邊(bian)欄(lan)在iOS和(he) Android 平臺(tai)上(shang)都是(shi)極為常(chang)見的(de)(de)(de)(de)導航設計模(mo)式。雖然有數據表明(ming)，漢堡(bao)菜(cai)單和(he)默(mo)認隱藏的(de)(de)(de)(de)側邊(bian)欄(lan)導航在打(da)開率上(shang)并不如常(chang)見的(de)(de)(de)(de)顯(xian)性(xing)導航，但是(shi)它在體驗上(shang)有獨特的(de)(de)(de)(de)優(you)勢，讓(rang)整個界面(mian)更加簡約、整潔，干擾性(xing)更小(xiao)。用戶(hu)點擊漢堡(bao)菜(cai)單，側邊(bian)欄(lan)導航從側面(mian)滑出顯(xian)示，用戶(hu)可(ke)選擇他們想要(yao)點擊的(de)(de)(de)(de)選項(xiang)。

漢(han)堡菜單和側邊欄的搭配特別適用(yong)于響(xiang)應式(shi)的網頁(ye)設計，例如(ru)Android 平臺的 Gmail 官方應用(yong)，YouTube 和 Facebook，均是(shi)沿用(yong)了這樣的設計。

隱(yin)藏(zang)式(shi)的(de)側邊欄導航，在很大程度(du)上讓用戶更(geng)加專注于主要的(de)界(jie)面內容，讓界(jie)面更(geng)加整潔。雖然打開率不如顯性導航，但是在很多(duo)情(qing)況(kuang)下，這(zhe)種隱(yin)藏(zang)性的(de)設計更(geng)符合實際需求。

3、懸浮固定網頁導航菜單

懸(xuan)(xuan)浮固定(ding)的(de)導(dao)航(hang)菜單在(zai)越來越多的(de)網頁(ye)(ye)設計中出現，當用戶在(zai)滾(gun)動(dong)頁(ye)(ye)面向(xiang)下瀏覽的(de)時候，懸(xuan)(xuan)浮固定(ding)導(dao)航(hang)在(zai)頁(ye)(ye)面頂部懸(xuan)(xuan)浮不(bu)動(dong)，隨著用戶瀏覽，它們一直都可(ke)見，用戶無需滾(gun)動(dong)到(dao)頂部就可(ke)以點擊導(dao)航(hang)跳轉(zhuan)。

目前(qian)，懸浮固定導(dao)(dao)航(hang)菜(cai)單(dan)已經成為常見(jian)的(de)(de)(de)導(dao)(dao)航(hang)設(she)計(ji)(ji)手法，電商(shang)、產品類的(de)(de)(de)網(wang)站，多會選擇(ze)這樣(yang)(yang)的(de)(de)(de)導(dao)(dao)航(hang)設(she)計(ji)(ji)，便(bian)于(yu)用戶快(kuai)速跳轉。這種導(dao)(dao)航(hang)設(she)計(ji)(ji)的(de)(de)(de)優勢在(zai)于(yu)快(kuai)速、便(bian)捷，用戶對于(yu)在(zai)網(wang)站不同的(de)(de)(de)頁面間跳轉的(de)(de)(de)需求比(bi)較大，那么這樣(yang)(yang)的(de)(de)(de)設(she)計(ji)(ji)能(neng)夠省去很多麻煩。根據 Akamai 和(he) Gomez.com 的(de)(de)(de)調研，79%的(de)(de)(de)線上購物的(de)(de)(de)用戶，在(zai)遭遇糟(zao)糕的(de)(de)(de)瀏覽和(he)導(dao)(dao)航(hang)體驗之后，會一去不復返，由此可見(jian)，便(bian)捷的(de)(de)(de)導(dao)(dao)航(hang)是多么重(zhong)要。

4、深度定制的超大導航菜單

此處我們所說(shuo)(shuo)的深度定制的超大導(dao)航菜單，更接近選(xuan)(xuan)項卡(ka)的設計(ji)，它們大多(duo)分為 2 個(ge)層級(ji)，不同的選(xuan)(xuan)項被組(zu)織到不同的選(xuan)(xuan)項卡(ka)當中(zhong)，選(xuan)(xuan)項卡(ka)中(zhong)所承載的導(dao)航選(xuan)(xuan)項相比于(yu)下拉菜單更大，設計(ji)也更加視覺化，更易于(yu)點擊選(xuan)(xuan)取。有的選(xuan)(xuan)項當中(zhong)甚(shen)至會包含文本和說(shuo)(shuo)明，便于(yu)用(yong)戶進(jin)行選(xuan)(xuan)擇。

這種超(chao)大(da)導(dao)航菜單(dan)當中的(de)子選項的(de)尺寸(cun)足(zu)夠大(da)，視覺化設計也足(zu)夠突出，可見性(xing)極(ji)強，用(yong)戶很難選錯。

5、響應式卡片柵格導航

 

超大導(dao)(dao)(dao)航菜(cai)(cai)單所(suo)能容納的導(dao)(dao)(dao)航條目相對更(geng)多、更(geng)加視覺化，和開頭所(suo)說的下拉菜(cai)(cai)單導(dao)(dao)(dao)航類似(si)，光標(biao)懸(xuan)浮在標(biao)簽頁上的時(shi)候(hou)，自(zi)動顯示(shi)下面的選(xuan)項(xiang)。根據 NNGroup 的研究，這類導(dao)(dao)(dao)航當中，導(dao)(dao)(dao)航菜(cai)(cai)單越(yue)大，越(yue)受歡迎。

這(zhe)種(zhong)(zhong)導(dao)航菜單適合對可訪(fang)問性要求(qiu)高的(de)網頁，對于有視力(li)障(zhang)礙和進階用戶都(dou)更為(wei)友好。另(ling)外一方面，這(zhe)種(zhong)(zhong)導(dao)航還為(wei)設計師提供了更多發揮的(de)空間。

響應式的(de)(de)設(she)計就不必贅述，但(dan)是(shi)卡片柵(zha)格(ge)式的(de)(de)導(dao)航(hang)無疑是(shi)從移動端(duan)開始流行的(de)(de)導(dao)航(hang)模(mo)式。在這(zhe)里，導(dao)航(hang)選(xuan)項被設(she)計成為小卡片，置于(yu)導(dao)航(hang)欄的(de)(de)柵(zha)格(ge)當中，當屏幕尺寸發生改變的(de)(de)時候，導(dao)航(hang)中的(de)(de)小卡片會隨(sui)著自(zi)適應的(de)(de)柵(zha)格(ge)而重新排列，以(yi)(yi)匹配整(zheng)個布局。這(zhe)種設(she)計不僅高度可(ke)視化，而且可(ke)以(yi)(yi)根據主(zhu)題(ti)風格(ge)，進行深度的(de)(de)定制。

這(zhe)種導(dao)(dao)航(hang)(hang)當(dang)中，各個(ge)選項(xiang)不僅便于光標點擊(ji)(ji)，而且在移(yi)動端上，更加適(shi)合手指點擊(ji)(ji)，可(ke)以說是(shi)跨(kua)平臺響應式設計(ji)的首選。許(xu)多網站目前(qian)都采(cai)用了這(zhe)樣的導(dao)(dao)航(hang)(hang)設計(ji)，比如(ru) Pinterest 和著名的音樂服務 Spotify。