[Web] 網站導航設計 Design Navigation (1)

時間：2023-09-14 02:00:02 | 來源：網站運營

時間：2023-09-14 02:00:02 來源：網站運營

[Web] 網站導航設計 Design Navigation (1)：

什么是網站導航 Navigation

說到navigation，大家往往就會想到（導航欄）navigation bar。其實呢～廣義的navigation（網站導航）包括導航欄，鏈接，按鈕，和任何其他可以點擊的項目。它們各有優(yōu)勢，通過互相協作，不僅幫助用戶方便清楚地瀏覽網站內容，更發(fā)揮了其它豐富的作用，比如說方便用戶尋找他們需要的內容和功能，展現信息的更多內涵，展示網站內容之間的相互關聯，甚至幫助人們找到他們之前并不了解的信息……一個清晰合理的導航設計可以幫助用戶和網站更好地實現目標。

不同種類的導航（針對Desktop）

• 導航欄－Navigation Bar
  

水平導航欄 Horizontal Nav Bar適用于：

1. 只有少量的top－level items
2. 不會有需求增添新的項目
3. 名稱短小精悍
4. 不需要將網頁翻譯為其它會使用長詞語／短語的語言
   
5. 想要盡可能地不占用主要內容所占的屏幕寬度

相對應地，垂直導航欄 Vertical Nav Bar適用于有很多items需要列出；需要增添或減少導航欄中的內容；有翻譯網站的需求；有很多層級的內容。

• 倒“L” —Inverted L

同時具有橫向和縱向的導航欄。這樣的導航結構常適用于內容非常復雜信息量大的大型網站或者有很多subsites的網站。

• 選項卡—Tabs

橫向導航欄的一個變體。適用范圍和橫向導航欄相同，選項卡結構下往往會有第二個層級的導航。設計時要注意凸顯出兩層導航之間視覺上的聯系。

• 下拉菜單—Drop-Down Menu

下拉菜單同樣屬于橫向導航欄的一個變體。當鼠標懸停在導航欄上的項目時，下一層級的導航內容就會出現。 下拉菜單可能會面對的問題是當顯示屏幕不夠高時，最下面的內容可能會無法顯示出來；如果下拉菜單出現得太快或者太慢，也會使可用性大大下降。所以在發(fā)布之前一定要做好充分的用戶測試。

• 側面展開－Flyout
  側面算是豎直導航欄的一個變體吧。當你點開Amazon橫向導航欄中的departments后，各個department具體的細節(jié)就采用了flyout。flyout可以用于展示多層關系，但是它和drop－down存在相同的可用性問題，設計是要尤其注意。
  

• 整頁—Whole Page

有的網站使用整個頁面來作為導航。這種情況下，導航往往和graphic element結合在一起。使用這種導航的網站，在分頁面通常都會再使用其它的方式來幫助用戶navigate。常見于趣味性較強，內容較為簡易，各個內容之間聯系緊密，受眾比較年輕的情況。舉個例子：

The Adventure School
? 頁面顯示導航項目－Page body navigation

頁面顯示導航項目提供了很多的自由度和衍生了很多的變體。它尤其適用于database－structure的有大量信息內容的網站。在這種情況下，用頁面本身導航比使用一個非常長的navigation bar要游有用很多。舉個例子：

http://www.bbc.co.uk/tv
? 超鏈接－Contextual links
使用大量的鏈接作為在頁面內部的導航。最典型的例子就是維基百科了～當使用這種導航方式的時候，設計是要注意：保證鏈接可以清除地與其它內容區(qū)分開來，保證鏈接的描述或者label要能夠清除地說明它所指向的內容。

• 漢堡－Hamburger Navigation

隨著移動端的普及，很多網站的desktop version也采用了漢堡隱藏導航內容的設計。這樣的設計往往適用于creative side?？梢詭椭脩艏凶⒁饬υ谀阕铋_始展示給他們的內容并且讓頁面顯得更“干凈”，很多agency的頁面往往會這樣設計。但是如果你的網站更偏向于讓用戶通過網站上的內容實現具體的tasks而不是偏重于展示，漢堡導航就不能說是很好的一種方式了。


在CSS Design Awards - Website Awards & Inspiration - CSS Gallery - CSSDA 里面，除了這里列出的比較常見的導航方式，經常會有很多精彩的有趣的導航方式。可以多看看～結合頁面內容，想想各種導航適用的情況，想想優(yōu)點缺點～

之后如果遇到新的內容，我會在這里補充進來～:-)