? ? 導(dǎo)航設(shè)計(jì)在產(chǎn)品設(shè)計(jì)中占有重要的位置，一個(gè)好的導(dǎo)航設(shè)計(jì)，就像你置身于人員嘈雜、紛亂的火車(chē)站，能夠快速的找到你要乘車(chē)的候車(chē)點(diǎn)一樣，令人心情愉悅?？焖俚牡竭_(dá)目的地和其中過(guò)程的心情愉悅就是我們做導(dǎo)航設(shè)計(jì)所要追求的。
? ? 首先，如何快速的到達(dá)目的地？結(jié)合自身產(chǎn)品業(yè)務(wù)，做好導(dǎo)航層級(jí)，重要的流量入口，顯示在主頁(yè)面，次要輔助的內(nèi)容可以隱藏或放到二級(jí)導(dǎo)航。
? ? 其次，如何讓用戶(hù)感到心情愉悅？那就是在用戶(hù)到達(dá)目的地前的這個(gè)過(guò)程，增加良好的交互效果或動(dòng)畫(huà)效果，入口還是那個(gè)入口，卻變的生動(dòng)有趣，讓你樂(lè)于點(diǎn)擊。
? ? 常見(jiàn)的導(dǎo)航設(shè)計(jì)，我給它們分成了兩類(lèi)：?jiǎn)螌蛹?jí)互斥型導(dǎo)航、多層級(jí)包含式導(dǎo)航。
? ? 單層級(jí)互斥型導(dǎo)航如下：
? ? 1. 列表式導(dǎo)航：列表式導(dǎo)航可分為標(biāo)題式列表、內(nèi)容式列表、卡片式列表。是現(xiàn)在大多數(shù)APP都有的一種導(dǎo)航方式。
? ????? 標(biāo)題式列表：一般只顯示一個(gè)標(biāo)題或和圖片相結(jié)合，進(jìn)入后，可能還存在二級(jí)列表式導(dǎo)航。
? ? ????內(nèi)容式列表：除了標(biāo)題以外，還有部分內(nèi)容展示，進(jìn)入后，即為內(nèi)容詳情，無(wú)其他導(dǎo)航。
????????卡片式列表：采用卡片式設(shè)計(jì)，包括圖片、標(biāo)題、內(nèi)容簡(jiǎn)介，進(jìn)入后，即為內(nèi)容詳情。
? ? 列表式導(dǎo)航方便、快捷，但要注意分類(lèi)，可采用格式塔就近原則進(jìn)行分類(lèi)，也可以通過(guò)增加標(biāo)題進(jìn)行分類(lèi)。使導(dǎo)航更清晰。
? ? 2. 宮格式導(dǎo)航：一打開(kāi)APP主頁(yè)面導(dǎo)航采用宮格式的APP越來(lái)越少見(jiàn)了，市面上我知道的就美圖秀秀還采用這種方式，在我自己開(kāi)發(fā)的APP中也采用過(guò)，一方面這種大入口，一目了然，用戶(hù)的可操作性好，另一方面，也不得不承認(rèn)，采用這種導(dǎo)航方式，也是由于功能少，這種方式自然是最合適的。
? ? 越來(lái)越多的宮格式導(dǎo)航，作為二級(jí)圖形化的形式展示。值得注意的是，由于各個(gè)宮格間內(nèi)容的互斥性，需要完成一個(gè)宮格，退出后，再操作其他宮格，所以在產(chǎn)品設(shè)計(jì)時(shí)，盡量做到各個(gè)宮格間，關(guān)聯(lián)性不大。拿我做過(guò)的APP為例，當(dāng)時(shí)兩個(gè)宮格都跟客戶(hù)有關(guān)系，但是最初設(shè)計(jì)的時(shí)候，只想著一個(gè)是跟進(jìn)客戶(hù)，另一個(gè)是完善客戶(hù)資料，放在兩個(gè)宮格里，分類(lèi)清楚，卻不知道，用戶(hù)需要在兩個(gè)宮格里跑來(lái)跑去，關(guān)聯(lián)度還是很高的，也就造成了用戶(hù)反饋體驗(yàn)不好，果斷在后續(xù)迭代過(guò)程中，改進(jìn)了這點(diǎn)。
? ? 3. 抽屜式導(dǎo)航：基本都在APP的左側(cè)滑出，像抽屜一樣可推拉。一般輔助性、需求頻次不是很高的功能會(huì)選擇采用抽屜式導(dǎo)航設(shè)計(jì)。符合了設(shè)計(jì)原則里的隱藏原則，在展示上也更加凸顯主頁(yè)面功能。
? ? 由于抽屜式導(dǎo)航入口一般都放在左上角，用戶(hù)手指不易觸達(dá)，所以抽屜內(nèi)的內(nèi)容應(yīng)是不需要用戶(hù)參與度過(guò)高的功能。
? ? 4. 頂部標(biāo)簽式導(dǎo)航：對(duì)于內(nèi)容型的產(chǎn)品，標(biāo)簽式導(dǎo)航用的比較多，主要是關(guān)于內(nèi)容的分類(lèi)過(guò)多，選用頂部標(biāo)簽導(dǎo)航配上左右滑動(dòng)切換，用戶(hù)可以很方便的查看到內(nèi)容，對(duì)于標(biāo)簽過(guò)多的情況，現(xiàn)在大多APP也都提供了標(biāo)簽管理、排序的功能，用戶(hù)可根據(jù)自己的偏好，設(shè)置顯示順序。
????頂部標(biāo)簽導(dǎo)航作為第一層級(jí)的導(dǎo)航，常見(jiàn)于音樂(lè)類(lèi)APP，頂部為了方便用戶(hù)播放歌曲。大多數(shù)都是底部導(dǎo)航和頂部導(dǎo)航配合，頂部標(biāo)簽式導(dǎo)航作為第二層級(jí)，對(duì)第一層級(jí)導(dǎo)航，做更精確的內(nèi)容分類(lèi)，在產(chǎn)品設(shè)計(jì)時(shí)，也要注意內(nèi)容分類(lèi)的互斥性。
????5. 底部全站式導(dǎo)航：底部導(dǎo)航是最常見(jiàn)的導(dǎo)航，一般不超過(guò)5個(gè)，再多，用戶(hù)視覺(jué)會(huì)有負(fù)擔(dān)。對(duì)于產(chǎn)品特別希望用戶(hù)使用（特別是對(duì)于那種需要用戶(hù)產(chǎn)生內(nèi)容的產(chǎn)品）或用戶(hù)自身需要高頻詞操作的導(dǎo)航，為了便于查找，底部導(dǎo)航的個(gè)數(shù)會(huì)設(shè)計(jì)成3個(gè)或5個(gè)，然后突出中間導(dǎo)航的設(shè)計(jì)，也稱(chēng)為舵式導(dǎo)航。
多層級(jí)包含式導(dǎo)航如下（以下完全屬于個(gè)人總結(jié)）：
??? 6. 下拉式導(dǎo)航: 展現(xiàn)形式其實(shí)就是兩個(gè)或兩個(gè)以上的下拉篩選，但是，不是沒(méi)什么關(guān)系的下拉框，后面的下拉框跟之前的下拉框存在包含關(guān)系，在技術(shù)上也叫二/三/...級(jí)聯(lián)動(dòng)。
????下拉式導(dǎo)航可以包含多個(gè)層級(jí)，不過(guò)最多也不要超過(guò)4個(gè)，對(duì)于包含關(guān)系層級(jí)多的導(dǎo)航，采用這種方式是比較好的。
? ? 7. 列表折疊式導(dǎo)航：一般兩個(gè)層級(jí)可以考慮這種導(dǎo)航，簡(jiǎn)單方便。
? ? 8. 目錄式導(dǎo)航：適用于二級(jí)包含關(guān)系的導(dǎo)航，左圖是現(xiàn)在大多數(shù)電商采用的導(dǎo)航方式，右圖是我在自己產(chǎn)品中的應(yīng)用，于下拉篩選結(jié)合，實(shí)現(xiàn)三層級(jí)的展示。
? ??9. 懸浮icon導(dǎo)航：這種導(dǎo)航比較特殊，在每個(gè)主頁(yè)面都存在，目的是為了方便用戶(hù)無(wú)論在哪個(gè)頁(yè)面隨時(shí)都能去到其他頁(yè)面。這種導(dǎo)航的弊端是會(huì)遮擋部分頁(yè)面內(nèi)容，如果應(yīng)用這種導(dǎo)航，要考慮到對(duì)底層頁(yè)面內(nèi)容的展示影響大不大，權(quán)衡利弊。
? ? 最后要說(shuō)說(shuō)讓用戶(hù)感到舒服愉悅這個(gè)事，現(xiàn)在越來(lái)越多的導(dǎo)航入口通過(guò)UI獨(dú)特創(chuàng)意或簡(jiǎn)單小動(dòng)畫(huà)，讓人感到好玩且樂(lè)于點(diǎn)擊。比如QQ底部導(dǎo)航小人兒的左右張望、淘寶底部導(dǎo)航的UI設(shè)計(jì)、36Kr在頂部導(dǎo)航切換時(shí)，良好的交互體驗(yàn)。
? ? 在一個(gè)APP中也不能所有的導(dǎo)航都做的太吸引用戶(hù)注意力，過(guò)度設(shè)計(jì)也會(huì)造成用戶(hù)注意力分散，從而形成視覺(jué)負(fù)擔(dān)。
? ? 以上就是我個(gè)人的一些總結(jié)，如有不妥之處，不吝賜教。
????- E N D -
