先說說導航欄的定義和作用吧薄榛。
導航欄本質上就是超鏈接讳窟，幫助用戶快速訪問某個特定地址。
導航欄強調合理性敞恋、邏輯性丽啡，它讓整個產品（Web or App）結構清晰，條理分明硬猫，指引用戶當前所處的位置补箍，防止其有迷失感。
現(xiàn)在一說“導航欄”這3個字啸蜜，大家的第一反應都是移動端UI的設計坑雅，但在此之前，卻是Web獨領風騷數(shù)十年衬横。
在這里只討論主流的導航欄設計裹粤，那些太小眾前衛(wèi)化的不在范圍之內。
導航欄的設計語言比較模糊混淆蜂林，大多數(shù)網(wǎng)站或者是App并不是單一導航設計語言遥诉，而是多種混合使用。
Web中比如主導航欄是頂端噪叙，輔導航欄在左側矮锈；又或者反著來，主導航欄左側睁蕾，輔導航欄頂端苞笨。
App中也是一脈相承瀑凝，兩者混用猜丹。有頂欄+底欄的硅卢、有頂欄+側邊欄的将塑、還有三者一起用的蝌麸。
特征App:36氪来吩、網(wǎng)易云蔽莱、游民星空
Web導航設計
在Web導航欄設計中，還有一個經(jīng)久不衰的設計要點是面包屑導航同廉。
面包屑作為一種視覺指引，為用戶揭示出網(wǎng)頁的層次結構锅劝，也正是因此故爵，面包屑成為了用戶了解網(wǎng)站背景信息的重要途徑稠集。關于面包屑的講解與使用饥瓷，不再細講，這里推薦一篇文章晦鞋。
1.頂部導航欄
Web中最常見最中規(guī)中矩的導航欄悠垛，不會犯錯确买，不太出眾纱皆，讓用戶快速了解產品及功能派草，快速找到自己想要的內容。
1.1頂部導航欄中又細分好幾種艺普，有以魅族歧譬、Pasoti為首的頂部導航欄+全屏Banner瑰步，適用于產品線短內容少、重營銷宣傳性質為主的網(wǎng)站兵钮。
1.2頂部導航欄+卡片式掘譬，適用于產品功能較少葱轩， 注重視覺風格的統(tǒng)一和圖文的瀏覽效率
1.3頂部導航欄+Feed流袜炕，適用于強內容展示網(wǎng)站
2.巨型導航欄
多運用在擁有大量細分內容的網(wǎng)頁，比如電商掖肋，比如電商，比如電商沿盅。 ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ??
像淘寶這種就是典型混淆使用嗡呼，不知道各位在逛淘寶的時候有沒有用過最頂端導航欄中的“網(wǎng)站導航”皇耗。
3.側邊導航欄
側邊導航欄分左側和右側呜袁，一般都在左側，因為左側符合我們的習慣虹钮，從左往右寫字芙粱、從左往右讀書氧映，Office的設置在左邊，Eclipse律姨、AS也在左邊择份，左邊更容易聚焦烫堤，有更多的點擊率塔逃。
適用于幾乎所有的網(wǎng)站，尤其是有很多子分類內容的網(wǎng)站
App導航設計
縱觀互聯(lián)網(wǎng)的發(fā)展路徑躏吊，我們可以了解到發(fā)展趨勢是逐漸的從Web過渡到移動端比伏，而移動端導航欄的玩法和Web大相徑庭而又殊途同歸赁项，仔細觀察能在App上看到許多Web設計語言的影子。
1.底部導航欄
如果說Web導航欄國王是頂部導航欄的話舰攒，那移動端導航欄的國王必定是底部導航欄無疑摩窃，而這位國王的領土更是隨著iOS的壯大飛速擴張芬骄。
直觀易懂、簡單便捷匪蟀、快速上手材彪、跨平臺 通用性……許許多多的優(yōu)點都在它身上琴儿，很多遵守著Material design規(guī)范的App在版本迭代升級中都紛紛轉投陣營，一頭扎進底部菜單欄中显熏，比如現(xiàn)在的國民應用“微信”喘蟆，再比如小眾的App應用市場“酷安”鼓鲁。
無他骇吭，底部導航欄真的是通殺級別的，適用于所有的App棘脐，沒有MD的極簡蛀缝，沒有抽屜式的隱藏目代，上至八十歲的老奶奶下至三歲的小蘿莉嗤练，都能把底部菜單欄玩的不要不要的潭苞。
特征App：微信真朗、QQ遮婶、知乎湖笨、Airbnb慈省、支付寶袱衷、淘寶
底部導航欄還進化出另外一種模式致燥，所謂的“舵式導航”,我不太了解為什么取這個名字排截，因為整個底欄像舵輪？
這種設計更加突出中間重要且操作頻繁的主功能
特征App:微博脱吱、閑魚急凰、得到
2.頂部導航欄
適用于平衡內容和分類的展示抡锈，每個類別的使用率都很高
特征App:網(wǎng)易云乔外、讀讀日報、豆瓣電影
3.側邊導航欄
側邊導航欄可以有效的節(jié)約屏幕的空間撇簿，創(chuàng)造更沉浸式的瀏覽環(huán)境四瘫，減少次要信息的干擾，同時可以將完全不相關的功能整合在一起
適用于在使用過程中需要不斷的在導航選項間進行來回切換操作饼暑、需要頻繁的在低層級和高層級頁面之間來回跳轉弓叛、導航選項較多诚纸、層級結構較深的App
特征App：百詞斬、Telgram毕籽、圖解電影
萬變不離其宗关筒，Web導航欄變來變去就那么幾種：“頂欄”“側邊”平委，App的導航欄亦是如此：“頂欄”“底欄”“側邊欄”夺谁，正如同一生二二生三三生萬物，這幾個有限的導航欄創(chuàng)造了現(xiàn)今無限的交互蜡塌。
未經(jīng)允許馏艾，謝絕轉載
