導(dǎo)航欄 Navigation Bar
「導(dǎo)航欄」將網(wǎng)站的內(nèi)容以結(jié)構(gòu)化的形式呈現(xiàn)給用戶崔拥，幫助用戶定位到當(dāng)前位置和目的地蛾绎。「導(dǎo)航欄」通常由站點(diǎn)ID辕羽、欄目和工具構(gòu)成。
站點(diǎn)ID：①快速定位首頁(yè)罪佳；②提示用戶仍然處于網(wǎng)站范圍內(nèi)
欄目：①告訴用戶目前所在的位置逛漫；②給出可供用戶前往的位置
工具：搜索、消息赘艳、設(shè)置等酌毡，輔助用戶使用網(wǎng)站
一、導(dǎo)航的基礎(chǔ)分類
按照導(dǎo)航作用的范圍可以分為全局導(dǎo)航蕾管、局部導(dǎo)航
1.全局導(dǎo)航
全局導(dǎo)航是「全」且「一致」的：①全面地展現(xiàn)了產(chǎn)品的關(guān)鍵頁(yè)面和功能枷踏；②無(wú)論用戶身處網(wǎng)站何處，總是可以以一致的交互獲取一致的全局導(dǎo)航掰曾。
2.局部導(dǎo)航
局部導(dǎo)航是全局導(dǎo)航的補(bǔ)充旭蠕，只能在特定模塊的頁(yè)面使用。全局導(dǎo)航通常是全面地展現(xiàn)網(wǎng)站信息架構(gòu)中的第一層級(jí)旷坦，當(dāng)網(wǎng)站系統(tǒng)復(fù)雜到一定程度時(shí)掏熬，信息架構(gòu)呈現(xiàn)多層，一個(gè)大模塊由多個(gè)子功能構(gòu)成秒梅，則需要局部導(dǎo)航協(xié)助用戶更好地使用該模塊的功能旗芬。
按照導(dǎo)航的布局方式可以分為水平導(dǎo)航、垂直導(dǎo)航捆蜀、混合導(dǎo)航
1.水平導(dǎo)航
水平導(dǎo)航讓第一層級(jí)的欄目以水平的形式固定在頁(yè)面上方疮丛，適用于系統(tǒng)比較簡(jiǎn)單的網(wǎng)站。
優(yōu)點(diǎn)：水平導(dǎo)航常見且符合用戶的「從左至右辆它，從上至下」的瀏覽方式誊薄，易讀性高；無(wú)側(cè)邊欄干擾锰茉，沉浸感高呢蔫。
缺點(diǎn)：橫向擴(kuò)展性較差——因?yàn)闄M向空間有限而使得所能容納的欄目有限，對(duì)欄目名稱的長(zhǎng)度也有限制飒筑；縱向擴(kuò)展性較差——通常只能呈現(xiàn)到第二層級(jí)咐刨，所以不適用于復(fù)雜系統(tǒng)昙衅。
2.垂直導(dǎo)航
垂直導(dǎo)航讓第一層級(jí)的欄目以垂直的形式呈現(xiàn)在頁(yè)面左側(cè)，適用于比較復(fù)雜的網(wǎng)站定鸟，多用于后臺(tái)設(shè)計(jì)而涉。
優(yōu)點(diǎn)：垂直排布且運(yùn)用滾輪滑動(dòng)側(cè)邊欄，使得所能容納的欄目數(shù)量大大增加联予；因無(wú)需像水平導(dǎo)航那樣節(jié)省空間啼县，欄目名稱的長(zhǎng)度限制可以更寬松；可以利用「手風(fēng)琴式菜單交互」加增設(shè)一豎欄呈現(xiàn)到信息架構(gòu)的第三層沸久。
缺點(diǎn)：相比水平導(dǎo)航呈現(xiàn)的「細(xì)橫條狀」季眷，垂直導(dǎo)航以「塊狀」占據(jù)了頁(yè)面左側(cè)，對(duì)頁(yè)面主體內(nèi)容的干擾更大卷胯，易影響沉浸體驗(yàn)子刮。此時(shí)，可以合理設(shè)計(jì)垂直導(dǎo)航的收縮態(tài)窑睁，減少對(duì)用戶的干擾挺峡，增強(qiáng)沉浸感。
3.混合導(dǎo)航
混合導(dǎo)航同時(shí)使用了水平導(dǎo)航和垂直導(dǎo)航担钮，通常是使用水平導(dǎo)航顯示第一層級(jí)橱赠，使用垂直導(dǎo)航顯示第二、第三層級(jí)箫津，適用于功能模塊多狭姨、復(fù)雜度高的網(wǎng)站，多用于復(fù)雜的后臺(tái)設(shè)計(jì)苏遥。
優(yōu)點(diǎn)：擴(kuò)展性高饼拍，最高能呈現(xiàn)到信息架構(gòu)的第四層級(jí)。
缺點(diǎn)：同時(shí)使用水平導(dǎo)航和垂直導(dǎo)航田炭，距離較遠(yuǎn)师抄，使得切換效率下降；對(duì)空間的占用較大诫肠，容易影響用戶的沉浸體驗(yàn)司澎。
二欺缘、云產(chǎn)品的導(dǎo)航設(shè)計(jì)
復(fù)雜內(nèi)容下的快速定位
1.快速調(diào)出全局導(dǎo)航——巧用面積栋豫、妙用hover
云產(chǎn)品模塊較多、復(fù)雜程度較高的特點(diǎn)谚殊，使得云產(chǎn)品在設(shè)計(jì)時(shí)通常使用「混合導(dǎo)航」丧鸯。但是大型的云服務(wù)商提供了大量的產(chǎn)品和服務(wù)，使得「水平導(dǎo)航」無(wú)法滿足呈現(xiàn)信息架構(gòu)第一層級(jí)的需求嫩絮，常見的做法是在「水平導(dǎo)航」設(shè)置控件調(diào)出全局導(dǎo)航丛肢。其中围肥，筆者認(rèn)為比較高效的交互方式就是使用hover調(diào)出，如騰訊云蜂怎、阿里云穆刻。
AWS和華為云在布局上與騰訊云、阿里云相似杠步，都是在「水平導(dǎo)航」上設(shè)控件調(diào)出面積巨大的全局導(dǎo)航氢伟，但在交互方式上略有不同，他們都采用了點(diǎn)擊而不是hover來(lái)觸發(fā)幽歼，相比hover多了一步朵锣。
* *Google Cloud Platform和青云都采用側(cè)邊導(dǎo)航作為全局導(dǎo)航，把眾多的服務(wù)欄目容納在狹長(zhǎng)的空間甸私，大大增加了搜尋成本诚些，效率比較低，故不推薦皇型。
2.分組——合理分組
① 最常見的分組方式就是根據(jù)功能模塊來(lái)劃分诬烹，其中阿里云還專門為大的功能模塊設(shè)置了導(dǎo)航，協(xié)助快速定位犀被。
②AWS和華為云在全局導(dǎo)航面板中提供了歷史記錄椅您，而騰訊云的「最近訪問(wèn)」則直接在首頁(yè)中呈現(xiàn)。
③由于英文和中文的差異寡键，AWS除了提供功能模塊分組掀泳，還提供了A-Z的首字母分組，在云產(chǎn)品的海外版中也可以增設(shè)首字母分組西轩。
3. 快速查找——自動(dòng)獲焦
為了提高在全局導(dǎo)航中搜尋的效率员舵，AWS、騰訊云藕畔、阿里云马僻、華為云均在全局導(dǎo)航面板設(shè)置了搜索，其中AWS和阿里云都設(shè)置了自動(dòng)獲焦注服，方便用戶高效查找韭邓。
4. 快速訪問(wèn)常用項(xiàng)——設(shè)置收藏
① 水平呈現(xiàn)的收藏：利用水平導(dǎo)航的空間，優(yōu)勢(shì)在于比較直觀溶弟、快捷女淑，劣勢(shì)在于空間有限，對(duì)小屏不友好辜御。
② 垂直呈現(xiàn)的收藏：在水平導(dǎo)航中設(shè)置控件調(diào)出鸭你，優(yōu)勢(shì)在于能容納的欄目數(shù)量較多，對(duì)屏幕大小要求低，劣勢(shì)在于比較隱藏袱巨，不直觀阁谆。
同樣是隱藏起來(lái)的收藏欄，阿里云比華為云的優(yōu)勢(shì)在于：①hover調(diào)出比點(diǎn)擊調(diào)出更加快捷愉老，②空間更大场绿，③上下選擇的距離也比左右選擇的距離更短。
復(fù)雜內(nèi)容下的專注保持
1.利用配色突出內(nèi)容
當(dāng)導(dǎo)航與內(nèi)容區(qū)域底色相近時(shí)嫉入，導(dǎo)航和內(nèi)容區(qū)域會(huì)互相干擾裳凸，易顯得頁(yè)面花哨，難以讓用戶集中注意力劝贸。配色的強(qiáng)對(duì)比會(huì)加大空間的分割感姨谷，使得用戶注意力可以在導(dǎo)航和內(nèi)容區(qū)域之間合理切換，而不易被干擾映九。
2.設(shè)置垂直導(dǎo)航的收縮態(tài)
為了減少垂直導(dǎo)航對(duì)內(nèi)容的干擾梦湘，可以設(shè)置導(dǎo)航的收縮態(tài)，如果是有圖標(biāo)的導(dǎo)航件甥，則收縮至只顯示圖標(biāo)捌议，如果是沒有圖標(biāo)的導(dǎo)航，則需要提供小標(biāo)提示導(dǎo)航被隱藏引有。
云產(chǎn)品設(shè)計(jì)的數(shù)值
