????????梳理了產品交互設計中常用到的導航欄控件擦俐，有系統(tǒng)級別的導航杆兵、頁面級別的導航，具體如下：

1、導航菜單 - 系統(tǒng)級別

1.1 導航菜單簡介

????用于網站的信息架構，快速導航烫映，輔助用戶快速觸達目的頁面锭沟；

1.2 使用場景

????網站不同業(yè)務頻道入口，如網站最頂部的導航菜單识补，作為各個業(yè)務頻道的入口；

????網站不同功能入口澎胡，如工具型網站在左側的一二三級菜單孕荠；

1.3 思考與理解

????導航菜單個人理解可劃分為業(yè)務頻道導航和功能菜單導航：

1.3.1 業(yè)務頻道導航

????????應用舉例，京東首頁最頂部的導航欄欄攻谁，是京東各個業(yè)務頻道的快速入口稚伍，如下圖示：

????????側重突出業(yè)務頻道，會隨業(yè)務變化而做調整戚宦，根據業(yè)務需求決定是否需要做后臺管理配置个曙，如果更換頻繁，甚至需要根據不同用戶類型做個性化配置受楼，則可做后臺配置困檩，否則直接固定寫死即可，后臺配置時那槽，可配置導航名稱悼沿、跳轉地址、熱門／NEW圖標骚灸、頁面打開方式糟趾、導航排序等；

????????業(yè)務頻道導航菜單個數(shù)，一般為7個以內义郑，最多不超過9個蝶柿；人的眼睛一次性可處理的信息數(shù)量是7個，最多不超過9個非驮，所以導航欄菜單一般不超過7個交汤。

1.3.2?功能菜單導航：

????????應用舉例，京東個人中心左側的菜單欄劫笙，是個人中心各個功能入口芙扎，如下圖示：

????????一般用于個人中心或者工具型的網站，側重于信息架構的表現(xiàn)填大，給用戶全面清晰的信息認知框架戒洼，且可實現(xiàn)快速導航，一般是固定的菜單欄允华，如需根據不同用戶展示不同菜單欄時圈浇，一般通過用戶權限進行控制；

????????一般是多級的樹狀菜單靴寂，一般為兩級菜單，最多不超過三級菜單百炬，如需要超過三級時需要想辦法在交互設計上做優(yōu)化，或者在信息架構上再做歸納調整妓灌。

2虫埂、面包屑 - 系統(tǒng)級別

1.1 面包屑簡介

????????明確告知用戶當下所在的位置圃验，且可快速導航，如下圖示：

1.2 應用場景

用于信息層次比較深的頁面斧散，頁面深度大于三層以上鸡捐；

用于需要快速導航回到某個中間位置頁面箍镜；

需要明確告知用戶所在位置時。

1.3 理解與思考

????????是對導航菜單的補充香缺，在導航菜單已經框定好整體信息框架的基礎上歇僧，當用戶進入到某個具體頁面時，告知用戶當下所在的位置祸轮，避免用戶的迷茫倔撞，也輔助用戶快速回到自己所想要的去的位置慕趴。

3鄙陡、步驟條 - 頁面級別

3.1、步驟條簡介

????????引導用戶按照流程完成任務的導航條趁矾，可表示任務進度或步驟毫捣。

3.2、使用場景?

????????兩種使用場景：表示任務進度或者步驟饶辙，并起到導航的作用弃揽。

3.2.1则北、進度條：表示某事務的進度，側重于表現(xiàn)當前進度涌矢，如訂單進度快骗；

3.2.2、步驟條：將某個任務分解成由若干步驟組成的流程思灌，表示該任務所處的步驟，側重于表明操作步驟熄守，通常帶有“上一步”耗跛、“下一步”操作按鈕，如資質認證等復雜任務晋南；

3.3负间、理解與思考

????????步驟條可表現(xiàn)當前任務的整體步驟姜凄，以及進度情況的組件态秧，常用于比較復雜繁瑣的任務，把任務分步進行愤诱，簡化任務捐友，也降低用戶的畏難心理，反映任務進度撮慨，給足用戶更多的心理預期砌溺。

????????一個清晰完整的步驟條，應該可以使用不同的視覺元素规伐，使得更清晰地表示過去猖闪、現(xiàn)在、將來培慌，過去是指已經完成的動作吵护，通常使用“對勾”表示；現(xiàn)在是指當前進行中的動作馅而，通常高亮即可瓮恭；未來是指即將要執(zhí)行的動作，通常置灰即可维哈，一個清晰完整的步驟條颇玷，如第2小節(jié)的圖示就缆。

????????不清晰不完整的步驟條舉例如下：不能清晰地體現(xiàn)當前處于什么狀態(tài)。

3.4竭宰、小結

????????任務導航：清晰地體現(xiàn)任務的所有步驟切揭，并清晰描述每個步驟，需要描述的內容如：動作描述廓旬、狀態(tài)描述孕豹、時間描述、人物描述等春霍；

????????視覺元素：需清晰地表示過去叶眉、現(xiàn)在、將來莲趣；

????????信息結構化：任務分步驟完成時，合理設計每個步驟的內容及界限蝶涩。

4、固釘 - 頁面級別

4.1 簡介

????????頁面滾動時绿聘，將頁面元素固定在可視范圍內的特定位置上熄攘，以便隨時快速操作彼念，如京東首頁固定的樓層導航條，如下圖示：

4.2 使用場景

需要滾動的長頁面，常用場景：

側邊菜單欄

長頁面導航條

頁面關鍵操作懸浮固定吩案，如“提交采購”按鈕；

4.3 使用需求說明

從以下兩個位置來說明頁面固定元素的實現(xiàn)需求：

展示位置：該元素正常展示在頁面某個位置（如“提交采購”按鈕顯示在商品列表底部）靠益；

固定位置：該元素滾動到某個位置（如瀏覽器底部）時胧后，固定顯示在瀏覽器底部壳快，當該元素滾動離開指定位置后，跟隨網頁滾動眶痰。

5凛驮、錨點 - 頁面級別

5.1 簡介

????????頁面跳轉到的位置黔夭，經常運用在長頁面的導航，通過在指定位置設置錨點本姥，固定跳轉到頁面指定的位置婚惫；

5.2? 使用場景

????????應用在比較長的頁面先舷，或者需要引導用戶快速快速切換位置的頁面蒋川，如采購商城首頁不同樓層的切換，如企業(yè)官網首頁不同內容模塊的內容導航缸浦；