如果一個(gè)網(wǎng)站有良好的可用性，基本的需求是良好的導(dǎo)航設(shè)計(jì)。

本文結(jié)合社區(qū)優(yōu)秀的網(wǎng)頁(yè)導(dǎo)航設(shè)計(jì)案例，總結(jié)了網(wǎng)頁(yè)導(dǎo)航設(shè)計(jì)的10項(xiàng)技能。

復(fù)制鏈接到瀏覽器：http://mtw.so/5EVHKG

1.進(jìn)行網(wǎng)頁(yè)導(dǎo)航規(guī)劃

在設(shè)計(jì)網(wǎng)頁(yè)菜單導(dǎo)航時(shí)，出發(fā)點(diǎn)是了解網(wǎng)站的功能和顯示信息的層次結(jié)構(gòu)。早期的網(wǎng)站菜單通常被稱(chēng)為“網(wǎng)站地圖”，顯示為圖表或電子表格，以顯示不同級(jí)別的信息。創(chuàng)建網(wǎng)站地圖沒(méi)有對(duì)錯(cuò)之分，可以方便用戶(hù)使用。

2.明確網(wǎng)頁(yè)主導(dǎo)航主導(dǎo)航

主要導(dǎo)航應(yīng)在整個(gè)網(wǎng)站中突出并保持一致。一般來(lái)說(shuō)，主菜單將位于頁(yè)面頂部的中心，或與頁(yè)面的左右對(duì)齊。主菜單通常設(shè)計(jì)成與所有其他內(nèi)容進(jìn)行比較，以吸引用戶(hù)的視覺(jué)。

3.將網(wǎng)頁(yè)標(biāo)識(shí)鏈接設(shè)置為返回主頁(yè)

logo通常放置在左上角或頂部，也被稱(chēng)為返回主頁(yè)的鏈接。我們都知道主頁(yè)是所有其他頁(yè)面連接的中心區(qū)域。所以一定要讓用戶(hù)知道如何快速輕松地回到主頁(yè)。使用網(wǎng)站標(biāo)志作為返回主頁(yè)的按鈕也可以幫助建立品牌標(biāo)志。

4.實(shí)施網(wǎng)頁(yè)大頁(yè)腳設(shè)計(jì)

通常，這個(gè)空間是為隱私和法律鏈接保留的，但顯示電子郵件注冊(cè)字段、詳細(xì)地址信息和社交鏈接也變得相當(dāng)標(biāo)準(zhǔn)。如果用戶(hù)必須瀏覽頁(yè)腳鏈接才能找到他們正在尋找的內(nèi)容，那么人工智能可能不會(huì)以應(yīng)有的方式工作。盡管如此，頁(yè)腳通常是許多游客的最后一個(gè)停留點(diǎn)，通常用于內(nèi)容繁重的網(wǎng)站或支付方式非常重要的零售網(wǎng)站。大頁(yè)腳的網(wǎng)頁(yè)導(dǎo)航設(shè)計(jì)不僅可以為喜歡在底部導(dǎo)航的用戶(hù)提供有用的鏈接，還可以作為框架布局的設(shè)計(jì)元素。

5.網(wǎng)頁(yè)導(dǎo)航設(shè)計(jì)顯示當(dāng)前位置

無(wú)論菜單是突出顯示、面包屑可見(jiàn)還是主橫幅圖像顯示頁(yè)面標(biāo)題，都是一次很好的體驗(yàn)。目前的位置簡(jiǎn)單明了，用戶(hù)沒(méi)有混淆的余地。

6.使用大型菜單網(wǎng)頁(yè)導(dǎo)航設(shè)計(jì)

超級(jí)菜單是一個(gè)大型導(dǎo)航面板，通常從全球?qū)Ш綑谙吕蝻w出。雖然它們不適合每個(gè)網(wǎng)站，但如果它們做得好，它們可以給用戶(hù)帶來(lái)優(yōu)秀的導(dǎo)航體驗(yàn)。大型菜單的主要優(yōu)點(diǎn)是可以同時(shí)顯示多個(gè)選項(xiàng)。大型菜單適用于類(lèi)別列表非常大的零售網(wǎng)站。菜單不僅簡(jiǎn)單明了地展示了一些產(chǎn)品的主要類(lèi)別，而且還展示了特定產(chǎn)品的細(xì)分。雖然下拉菜單包含了許多選項(xiàng)，但清晰的層次結(jié)構(gòu)和布局使這些信息易于用戶(hù)理解，整體設(shè)計(jì)簡(jiǎn)單、干凈、優(yōu)雅。

7.使用易于理解的網(wǎng)頁(yè)導(dǎo)航標(biāo)簽

如果是特定行業(yè)的網(wǎng)站，確保用戶(hù)能夠理解專(zhuān)業(yè)術(shù)語(yǔ)。例如，如果商店區(qū)域被標(biāo)記為“市場(chǎng)”，用戶(hù)會(huì)發(fā)現(xiàn)很難理解，任何需要一秒鐘以上才能理解的鏈接都會(huì)損害用戶(hù)體驗(yàn)。如果你想看看哪個(gè)標(biāo)簽更適合主導(dǎo)航，你可以進(jìn)行一些A/B測(cè)試。通常，最好保持主導(dǎo)航簡(jiǎn)單易懂。如果您想添加個(gè)性化，您可以嘗試使用彈出窗口和通知。

8.網(wǎng)頁(yè)導(dǎo)航設(shè)計(jì)添加搜索功能

如果你的網(wǎng)站很復(fù)雜，添加搜索欄是幫助用戶(hù)輕松瀏覽自定義網(wǎng)頁(yè)設(shè)計(jì)的另一種方式。假設(shè)頁(yè)面太多或者一頁(yè)內(nèi)容太多，在菜單中添加網(wǎng)站搜索可以讓用戶(hù)搜索關(guān)鍵詞和主題，獲得更好的體驗(yàn)。

9.采用響應(yīng)網(wǎng)頁(yè)導(dǎo)航設(shè)計(jì)

響應(yīng)網(wǎng)頁(yè)導(dǎo)航設(shè)計(jì)可以讓你的網(wǎng)站適應(yīng)任何設(shè)備，這通常使用“漢堡菜單”的緊湊導(dǎo)航風(fēng)格。漢堡圖標(biāo)由三條稍微分開(kāi)的水平線(xiàn)組成，當(dāng)你解構(gòu)主要元素時(shí)，你會(huì)得到兩塊面包和中間的肉。漢堡菜單可以作為移動(dòng)設(shè)備的導(dǎo)航，而不占用太多空間，其本質(zhì)功能是滑動(dòng)、滑動(dòng)或彈出。在設(shè)計(jì)漢堡菜單時(shí)，清楚地設(shè)計(jì)菜單級(jí)別是非常重要的，這樣用戶(hù)就不會(huì)對(duì)如何導(dǎo)航感到困惑。

10.固定網(wǎng)頁(yè)導(dǎo)航

固定導(dǎo)航的網(wǎng)頁(yè)導(dǎo)航設(shè)計(jì)本質(zhì)上是鎖定在適當(dāng)位置的網(wǎng)站菜單，以便用戶(hù)在向下滾動(dòng)頁(yè)面時(shí)不會(huì)消失。您可以為任何網(wǎng)站打開(kāi)固定菜單，這取決于它是否適合設(shè)計(jì)和導(dǎo)航。