? ? 導(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)航碟嘴。
? ? 其次，如何讓用戶感到心情愉悅囊卜？那就是在用戶到達(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ò)菇存，一方面這種大入口，一目了然邦蜜，用戶的可操作性好撰筷，另一方面，也不得不承認(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è)宮格都跟客戶有關(guān)系，但是最初設(shè)計(jì)的時(shí)候才写，只想著一個(gè)是跟進(jìn)客戶葡兑，另一個(gè)是完善客戶資料，放在兩個(gè)宮格里赞草，分類(lèi)清楚讹堤，卻不知道，用戶需要在兩個(gè)宮格里跑來(lái)跑去厨疙，關(guān)聯(lián)度還是很高的洲守，也就造成了用戶反饋體驗(yàn)不好，果斷在后續(xù)迭代過(guò)程中沾凄，改進(jìn)了這點(diǎn)梗醇。
? ? 3. 抽屜式導(dǎo)航：基本都在APP的左側(cè)滑出，像抽屜一樣可推拉搭独。一般輔助性婴削、需求頻次不是很高的功能會(huì)選擇采用抽屜式導(dǎo)航設(shè)計(jì)廊镜。符合了設(shè)計(jì)原則里的隱藏原則牙肝，在展示上也更加凸顯主頁(yè)面功能。
? ? 由于抽屜式導(dǎo)航入口一般都放在左上角嗤朴，用戶手指不易觸達(dá)配椭，所以抽屜內(nèi)的內(nèi)容應(yīng)是不需要用戶參與度過(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)切換吱雏，用戶可以很方便的查看到內(nèi)容敦姻，對(duì)于標(biāo)簽過(guò)多的情況，現(xiàn)在大多APP也都提供了標(biāo)簽管理歧杏、排序的功能镰惦，用戶可根據(jù)自己的偏好，設(shè)置顯示順序犬绒。
????頂部標(biāo)簽導(dǎo)航作為第一層級(jí)的導(dǎo)航旺入，常見(jiàn)于音樂(lè)類(lèi)APP，頂部為了方便用戶播放歌曲。大多數(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è)晨雳，再多，用戶視覺(jué)會(huì)有負(fù)擔(dān)奸腺。對(duì)于產(chǎn)品特別希望用戶使用（特別是對(duì)于那種需要用戶產(chǎn)生內(nèi)容的產(chǎn)品）或用戶自身需要高頻詞操作的導(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è)面都存在，目的是為了方便用戶無(wú)論在哪個(gè)頁(yè)面隨時(shí)都能去到其他頁(yè)面。這種導(dǎo)航的弊端是會(huì)遮擋部分頁(yè)面內(nèi)容，如果應(yīng)用這種導(dǎo)航屏富，要考慮到對(duì)底層頁(yè)面內(nèi)容的展示影響大不大，權(quán)衡利弊滑燃。
? ? 最后要說(shuō)說(shuō)讓用戶感到舒服愉悅這個(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)航都做的太吸引用戶注意力衣摩，過(guò)度設(shè)計(jì)也會(huì)造成用戶注意力分散，從而形成視覺(jué)負(fù)擔(dān)捂敌。
? ? 以上就是我個(gè)人的一些總結(jié)艾扮，如有不妥之處，不吝賜教占婉。
????- E N D -
