關(guān)于網(wǎng)站的頂部導(dǎo)航設(shè)計(jì)和側(cè)邊導(dǎo)航的設(shè)計(jì)指南

關(guān)于頂部導(dǎo)航和側(cè)邊導(dǎo)航的爭(zhēng)論是每個(gè)設(shè)計(jì)師在某些時(shí)候都會(huì)面臨的。關(guān)于哪個(gè)更好沒有明確的共識(shí)，這通常歸結(jié)為個(gè)人喜好。然而，最近的研究表明，導(dǎo)航的選擇會(huì)對(duì)用戶交互產(chǎn)生重大影響。

我們將探討這項(xiàng)研究的結(jié)果，并就如何為您的UI界面選擇正確的導(dǎo)航提供指導(dǎo)。在UI界面設(shè)計(jì)方面，用戶體驗(yàn)至關(guān)重要。用戶應(yīng)該能夠快速輕松地找到他們需要的東西。但是您如何確保您的導(dǎo)航滿足這些需求呢？最近的一項(xiàng)研究（網(wǎng)頁(yè)設(shè)計(jì)建設(shè)的三級(jí)菜單導(dǎo)航結(jié)構(gòu)比較）根據(jù)導(dǎo)航時(shí)間、用戶猶豫、光標(biāo)移動(dòng)和用戶偏好等標(biāo)準(zhǔn)比較了各種菜單布局。這項(xiàng)研究的結(jié)果可以幫助您為您的界面選擇正確的導(dǎo)航。

哪種導(dǎo)航更容易被看到？
人們基于眼動(dòng)追蹤研究以F型的視線模式掃描網(wǎng)頁(yè)。這種模式的特點(diǎn)是許多注視點(diǎn)集中在頁(yè)面的頂部和左側(cè)。換句話說：用戶首先以水平移動(dòng)方式閱讀，通?？缭絻?nèi)容區(qū)域的上部。 所以我們可以假設(shè)頂部和左側(cè)導(dǎo)航在這方面似乎定位良好。在這種情況下，左側(cè)導(dǎo)航會(huì)顯著提高速度。

更大程度的節(jié)省空間
如果您查看普通筆記本電腦或固定計(jì)算機(jī)屏幕并比較不同導(dǎo)航組件占用的部分，您肯定會(huì)注意到左側(cè)導(dǎo)航通常會(huì)比頂部導(dǎo)航占用 3 甚至 4 倍以上的空間。 最重要的是，讓我們?yōu)樗阉骰蚱渌兀ㄈ缤ㄖ騻€(gè)人資料信息）添加一些可擴(kuò)展的保留空間。

提升擴(kuò)展性的規(guī)模
隨著產(chǎn)品的增長(zhǎng)，它需要可擴(kuò)展性。這對(duì)設(shè)計(jì)師意味著什么？我們需要預(yù)測(cè)未來?；氐綄?dǎo)航選項(xiàng)，通常取決于設(shè)備和字體大小（因?yàn)檫@些指標(biāo)可能會(huì)改變），您將能夠在折疊上方的側(cè)導(dǎo)航中顯示至少兩倍的導(dǎo)航鏈接數(shù)量。當(dāng)您的信息架構(gòu)有許多無(wú)法在邏輯上分組為多個(gè)塊的頂級(jí)項(xiàng)目時(shí)，側(cè)邊導(dǎo)航欄會(huì)更好地工作。將來，隨著產(chǎn)品的增長(zhǎng)，您可以添加更多項(xiàng)目。額外的點(diǎn)去側(cè)面導(dǎo)航。

側(cè)邊導(dǎo)航 = 可定制的導(dǎo)航
對(duì)于想要配置自己的導(dǎo)航的用戶來說，側(cè)邊導(dǎo)航是最佳選擇的原因有很多。一方面，它比其他選項(xiàng)更具可擴(kuò)展性。自定義和可變菜單也很常見。側(cè)邊導(dǎo)航的另一個(gè)優(yōu)點(diǎn)是它允許分層菜單，這對(duì)于組織信息非常有幫助。

與桌面的一致性
桌面應(yīng)用程序中的頂部導(dǎo)航和側(cè)邊欄導(dǎo)航之間存在一些關(guān)鍵區(qū)別。一方面，側(cè)邊欄在 macOS 和 Windows 應(yīng)用程序中的使用更為廣泛。這可能是因?yàn)樗鼘?duì)用戶來說感覺更自然或原生。此外，與頂部導(dǎo)航相比，側(cè)邊欄通常為鏈接和其他信息提供更多空間。基于這些因素，如果您正在使用桌面應(yīng)用程序，您可能需要考慮使用左側(cè)邊欄進(jìn)行導(dǎo)航。

懸停激活的子菜單
左側(cè)導(dǎo)航中的抽屜式子菜單可能難以與光標(biāo)一起使用，尤其是在對(duì)角線移動(dòng)時(shí)。此外，無(wú)論子菜單中有多少項(xiàng)目，側(cè)面導(dǎo)航通常會(huì)阻止屏幕上的其他垂直窗格。

打造超級(jí)菜單
懸停激活的大型菜單是網(wǎng)站導(dǎo)航的流行選擇，尤其是在電子商務(wù)網(wǎng)站上。它們提供了一種很好的方式來組織大量信息或一目了然地顯示較低級(jí)別的頁(yè)面。這種布局還為產(chǎn)品展示和廣告提供了更多空間，這對(duì)于電子商務(wù)的成功至關(guān)重要。

響應(yīng)式網(wǎng)站設(shè)計(jì)
兩種版本的導(dǎo)航都各有利弊——這取決于您要查找的內(nèi)容。如果您希望在平板電腦縱向視圖上顯示所有導(dǎo)航鏈接，那么頂部導(dǎo)航是您的最佳選擇。但是，如果您想要在所有屏幕尺寸上保持一致的導(dǎo)航視圖，那么側(cè)邊菜單是更好的選擇。

在為您的產(chǎn)品選擇導(dǎo)航設(shè)計(jì)系統(tǒng)時(shí)，需要全盤綜合考量，從不同的角度看待并了解自身產(chǎn)品，您將能夠做出正確的選擇。