2014流行網頁導航設計總結分享

w2bc發表於2014-08-20

  導航的功能是為了讓使用者更容易地找到需要的資訊,可以對網站的資訊架構和站內搜尋進行分析和優化,也能對使用者起到很好的引導作用。一個有吸引力的導航能夠吸引使用者去瀏覽更多的網站內容,增加使用者在網站的停留時間。導航在網站設計中的地位舉足輕重,它引導著使用者進行瀏覽和查詢,一個良好的導航系統能讓使用者在離開網站時感覺享受了一次愉快的旅程。

  1.頂部水平欄導航

  頂部水平欄導航是當前兩種最流行的網站導航選單設計模式之一。它最常用於網站的主導航選單,且通常地放在網站所有頁面的網站頭的直接上方或直接下方。頂部水平欄導航對於只需要在主要導航中顯示5-12個導航項的網站來說是非常好的。這也是單列布局的網站的主導航的唯一選擇(除了通常用於二級導航系統的底部導航)。當它與下拉子導航結合時,這種設計模式可以支援更多的連結。所有重要的資訊都會固定在頂部,對於使用者來說這樣使用起來會更簡便舒適。

  2.抽屜式導航設計

  預設情況下,導航選單根本就不顯示,只有當觸控到右上角指定的小圖示時,第一個內容層才會開啟。當觸控到其中一個欄目時,第二個內容層才會逐漸展開,給使用者一個非常清晰明瞭的內容導航。使用抽屜式導航來組織複雜內容是一個非常方便和流行的方式。通常,複雜的網站會使用抽屜式的導航來設計。

  3.固定式側邊欄導航

  側邊欄導航選單可以相容不同的螢幕尺寸。適合一個非常明亮乾淨的排版佈局的網站,可以很好地做到了和使用者之間的互動,讓人一眼就把精力集中在導航欄上。側邊導航欄的優美之處主要表現在空間夠大,大量的空白讓使用者感覺整個網站有呼吸之處,顯得非常微妙而自由。通過擁有獨特的設計,引起使用者的注意。

  4.隱藏式側邊欄導航

  側邊欄選單將會是2014的一個新趨勢!側邊導航給人的感覺就像是你在窺視頁面背後或者是掀開了一個玩具盒的蓋子看看裡面到底有些什麼。在需要的時候導航欄應該一直在那裡,而當使用者想要專注於某個特定的任務時,導航欄則應該優雅的隱藏起來。隱藏式側邊導航非常方便使用,滑鼠懸停在瀏覽器左側即可出現,主體部分即時出現的旋轉效果也很帶感,可以很好的引導使用者的注意力。將導航隱藏起來同時也實現了介面的簡潔,使網站的瀏覽體驗非常的愉悅,因為網站並沒有留下太多無用的資訊去分散使用者的注意力。

  5.圖示式導航

  圖示式導航的好處是節省空間,讓介面更簡潔。圖示也可用於細緻的分類,提供更明顯的視覺線索,而且圖示具有直觀的語義顯示,每一個圖示代表每一個不同的事件,吸引使用者的注意,從而更好的引導使用者操作。如果再加上優秀的動效轉換能夠吸引使用者注意,讓使用者迅速找到導航選單。

  6.選項卡導航

  選項卡導航可以隨意設計成任何你想要的樣式,從逼真的、有手感的標籤到圓滑的標籤,以及簡單地方邊的標籤等。它存在於各種各樣的網站裡,並且可以納入任何視覺效果。選項卡比起其它類別的導航有一個明顯的優勢:它們對使用者有積極的心理效應。

  7.響應式導航設計

  響應式導航的設計遵循了響應式Web設計理念,頁面的設計往往會根據使用者行為以及裝置環境(系統平臺、螢幕尺寸、螢幕定向等)進行相應的調整。通過同比例縮減元素尺寸、調整頁面結構佈局以及內容的優化調整等方式,使使用者在不同的平臺上有著獨一無二的使用者體驗,達到更好的閱讀效果。響應式導航的優勢是在不同的螢幕解析度下保持相同的視覺和感覺。

  總之,網站導航各種各樣的通用和大家熟知的設計模式,都可以用來作為為網站建立有效地資訊架構的基礎。導航欄的設計可以是靜態的、動態的、可擴充套件的等多種方式,甚至只是隱藏在一個微妙的符號裡面。任何導航在網站裡面都扮演者不可或缺的角色,所以,探索網站採用何種導航方式是很有必要的。

相關文章