????????梳理了產(chǎn)品交互設(shè)計(jì)中常用到的導(dǎo)航欄控件，有系統(tǒng)級(jí)別的導(dǎo)航、頁(yè)面級(jí)別的導(dǎo)航，具體如下：
1、導(dǎo)航菜單 - 系統(tǒng)級(jí)別
1.1 導(dǎo)航菜單簡(jiǎn)介
????用于網(wǎng)站的信息架構(gòu)，快速導(dǎo)航，輔助用戶快速觸達(dá)目的頁(yè)面；
1.2 使用場(chǎng)景
????網(wǎng)站不同業(yè)務(wù)頻道入口，如網(wǎng)站最頂部的導(dǎo)航菜單，作為各個(gè)業(yè)務(wù)頻道的入口；
????網(wǎng)站不同功能入口，如工具型網(wǎng)站在左側(cè)的一二三級(jí)菜單；
1.3 思考與理解
????導(dǎo)航菜單個(gè)人理解可劃分為業(yè)務(wù)頻道導(dǎo)航和功能菜單導(dǎo)航：
1.3.1 業(yè)務(wù)頻道導(dǎo)航
????????應(yīng)用舉例，京東首頁(yè)最頂部的導(dǎo)航欄欄，是京東各個(gè)業(yè)務(wù)頻道的快速入口，如下圖示：
????????側(cè)重突出業(yè)務(wù)頻道，會(huì)隨業(yè)務(wù)變化而做調(diào)整，根據(jù)業(yè)務(wù)需求決定是否需要做后臺(tái)管理配置，如果更換頻繁，甚至需要根據(jù)不同用戶類型做個(gè)性化配置，則可做后臺(tái)配置，否則直接固定寫死即可，后臺(tái)配置時(shí)，可配置導(dǎo)航名稱、跳轉(zhuǎn)地址、熱門／NEW圖標(biāo)、頁(yè)面打開(kāi)方式、導(dǎo)航排序等；
????????業(yè)務(wù)頻道導(dǎo)航菜單個(gè)數(shù)，一般為7個(gè)以內(nèi)，最多不超過(guò)9個(gè)；人的眼睛一次性可處理的信息數(shù)量是7個(gè)，最多不超過(guò)9個(gè)，所以導(dǎo)航欄菜單一般不超過(guò)7個(gè)。
1.3.2?功能菜單導(dǎo)航：
????????應(yīng)用舉例，京東個(gè)人中心左側(cè)的菜單欄，是個(gè)人中心各個(gè)功能入口，如下圖示：
????????一般用于個(gè)人中心或者工具型的網(wǎng)站，側(cè)重于信息架構(gòu)的表現(xiàn)，給用戶全面清晰的信息認(rèn)知框架，且可實(shí)現(xiàn)快速導(dǎo)航，一般是固定的菜單欄，如需根據(jù)不同用戶展示不同菜單欄時(shí)，一般通過(guò)用戶權(quán)限進(jìn)行控制；
????????一般是多級(jí)的樹(shù)狀菜單，一般為兩級(jí)菜單，最多不超過(guò)三級(jí)菜單，如需要超過(guò)三級(jí)時(shí)需要想辦法在交互設(shè)計(jì)上做優(yōu)化，或者在信息架構(gòu)上再做歸納調(diào)整。
2、面包屑 - 系統(tǒng)級(jí)別
1.1 面包屑簡(jiǎn)介
????????明確告知用戶當(dāng)下所在的位置，且可快速導(dǎo)航，如下圖示：
1.2 應(yīng)用場(chǎng)景
用于信息層次比較深的頁(yè)面，頁(yè)面深度大于三層以上；
用于需要快速導(dǎo)航回到某個(gè)中間位置頁(yè)面；
需要明確告知用戶所在位置時(shí)。
1.3 理解與思考
????????是對(duì)導(dǎo)航菜單的補(bǔ)充，在導(dǎo)航菜單已經(jīng)框定好整體信息框架的基礎(chǔ)上，當(dāng)用戶進(jìn)入到某個(gè)具體頁(yè)面時(shí)，告知用戶當(dāng)下所在的位置，避免用戶的迷茫，也輔助用戶快速回到自己所想要的去的位置。
3、步驟條 - 頁(yè)面級(jí)別
3.1、步驟條簡(jiǎn)介
????????引導(dǎo)用戶按照流程完成任務(wù)的導(dǎo)航條，可表示任務(wù)進(jìn)度或步驟。
3.2、使用場(chǎng)景?
????????兩種使用場(chǎng)景：表示任務(wù)進(jìn)度或者步驟，并起到導(dǎo)航的作用。
3.2.1、進(jìn)度條：表示某事務(wù)的進(jìn)度，側(cè)重于表現(xiàn)當(dāng)前進(jìn)度，如訂單進(jìn)度；
3.2.2、步驟條：將某個(gè)任務(wù)分解成由若干步驟組成的流程，表示該任務(wù)所處的步驟，側(cè)重于表明操作步驟，通常帶有“上一步”、“下一步”操作按鈕，如資質(zhì)認(rèn)證等復(fù)雜任務(wù)；
3.3、理解與思考
????????步驟條可表現(xiàn)當(dāng)前任務(wù)的整體步驟，以及進(jìn)度情況的組件，常用于比較復(fù)雜繁瑣的任務(wù)，把任務(wù)分步進(jìn)行，簡(jiǎn)化任務(wù)，也降低用戶的畏難心理，反映任務(wù)進(jìn)度，給足用戶更多的心理預(yù)期。
????????一個(gè)清晰完整的步驟條，應(yīng)該可以使用不同的視覺(jué)元素，使得更清晰地表示過(guò)去、現(xiàn)在、將來(lái)，過(guò)去是指已經(jīng)完成的動(dòng)作，通常使用“對(duì)勾”表示；現(xiàn)在是指當(dāng)前進(jìn)行中的動(dòng)作，通常高亮即可；未來(lái)是指即將要執(zhí)行的動(dòng)作，通常置灰即可，一個(gè)清晰完整的步驟條，如第2小節(jié)的圖示。
????????不清晰不完整的步驟條舉例如下：不能清晰地體現(xiàn)當(dāng)前處于什么狀態(tài)。
3.4、小結(jié)
????????任務(wù)導(dǎo)航：清晰地體現(xiàn)任務(wù)的所有步驟，并清晰描述每個(gè)步驟，需要描述的內(nèi)容如：動(dòng)作描述、狀態(tài)描述、時(shí)間描述、人物描述等；
????????視覺(jué)元素：需清晰地表示過(guò)去、現(xiàn)在、將來(lái)；
????????信息結(jié)構(gòu)化：任務(wù)分步驟完成時(shí)，合理設(shè)計(jì)每個(gè)步驟的內(nèi)容及界限。
4、固釘 - 頁(yè)面級(jí)別
4.1 簡(jiǎn)介
????????頁(yè)面滾動(dòng)時(shí)，將頁(yè)面元素固定在可視范圍內(nèi)的特定位置上，以便隨時(shí)快速操作，如京東首頁(yè)固定的樓層導(dǎo)航條，如下圖示：
4.2 使用場(chǎng)景
需要滾動(dòng)的長(zhǎng)頁(yè)面，常用場(chǎng)景：
側(cè)邊菜單欄
長(zhǎng)頁(yè)面導(dǎo)航條
頁(yè)面關(guān)鍵操作懸浮固定，如“提交采購(gòu)”按鈕；
4.3 使用需求說(shuō)明
從以下兩個(gè)位置來(lái)說(shuō)明頁(yè)面固定元素的實(shí)現(xiàn)需求：
展示位置：該元素正常展示在頁(yè)面某個(gè)位置（如“提交采購(gòu)”按鈕顯示在商品列表底部）；
固定位置：該元素滾動(dòng)到某個(gè)位置（如瀏覽器底部）時(shí)，固定顯示在瀏覽器底部，當(dāng)該元素滾動(dòng)離開(kāi)指定位置后，跟隨網(wǎng)頁(yè)滾動(dòng)。
5、錨點(diǎn) - 頁(yè)面級(jí)別
5.1 簡(jiǎn)介
????????頁(yè)面跳轉(zhuǎn)到的位置，經(jīng)常運(yùn)用在長(zhǎng)頁(yè)面的導(dǎo)航，通過(guò)在指定位置設(shè)置錨點(diǎn)，固定跳轉(zhuǎn)到頁(yè)面指定的位置；
5.2? 使用場(chǎng)景
????????應(yīng)用在比較長(zhǎng)的頁(yè)面，或者需要引導(dǎo)用戶快速快速切換位置的頁(yè)面，如采購(gòu)商城首頁(yè)不同樓層的切換，如企業(yè)官網(wǎng)首頁(yè)不同內(nèi)容模塊的內(nèi)容導(dǎo)航；
