網站導航設計方法總結

一、網站導航簡介

使用者浏覽網頁時，是有固定的浏覽習慣的，一般會先大概掃一眼首頁資訊，然後就會尋找導航欄。通過導覽列了解網站的内容和資訊的分類方式，判斷網站是否有自己需要和感興趣的内容。

擁有一個有吸引力的導航不僅可以增強網站的優勢，提高網站的易用性，還可以大大提升使用者體驗，有助于提高轉化率。

二、導航在網頁中的位置

根據眼動試驗結果，使用者的注意力往往呈現F形，是以左側和頂部是注意力中心。

是以，最佳導航欄位置通常在網站的頂部和左側。對使用者來說，這兩個位置最先看到。

1、導覽列在網頁頂部

起初，受浏覽器屬性和下載下傳速度的影響，下載下傳網頁的相關内容時，都是從上到下下載下傳，是以，重要的網站資訊都會放置在頁面的頂部。

現在，盡管下載下傳速度已不再是決定導航位置的重要因素，但很多網站依然使用頂部導航結構。

頂部導航适用于網站頁面内容較多的情況，可以節省頁面空間。不僅符合使用者的視覺習慣，還可以友善使用者快速捕捉網頁資訊，引導使用者使用網站。

2、導覽列在網頁左側

一般來說，左側導航結構，比較符合人們的視覺習慣，即自左向右浏覽。适用于網站頁面内容較少的情況，可以有效彌補因網頁内容少而導緻的頁面空洞感。

導航是網站與使用者溝通最直接，最快速的工具，它具有較強的引導作用，可以有效避免因使用者無方向地浏覽網頁帶來的諸多不便。

是以，為了使網站導航更加醒目，友善使用者了解網站，可以采用不規則的圖形來設計導航，也可以運用鮮豔的色塊作為背景與導航文字形成鮮明的對比，但需要考慮整個頁面的協調性。

三、導航設計的基本原則

1、易用性。

網站導航應該滿足使用者以最少點選的方式去通路到期望的内容，既容易進入，也容易退出。這是網站導航易用性最重要的表現。

2、準确傳遞資訊。

設計導航一定要注意一點，千萬千萬不要讓使用者猜。好的導航欄菜單的設計就像設計優秀的交通辨別，簡明清晰，指明方向，讓使用者一目了然，知道網站是做什麼的，服務範圍有哪些，并且清楚了解自己所處的位置。

隻有準确傳遞資訊才能真正發揮“引導”的作用，引導浏覽者找到所需的資訊。

3、減少選項數目。

學會将資訊進行合理分類，盡量減少導航的數目，可以平衡導航的深度和廣度，進而提高使用者查找資訊的效率，也會提高使用者對網站的好感度。

4、提供導航标志。

提供導航标志可以加強使用者定位，減少由于導航選項過多而給使用者造成的迷失。

在很多網絡應用中，會通過顔色、圖示或者頁面頂端的标簽條這些視覺資訊給使用者提供清晰的導航選項，進而有效的幫助使用者定位導航位置。

5、提供總體視圖。

界面總體視圖與導航标志的作用相同，都是幫助使用者定位。不同的是，總體視圖幫助使用者定位内容，而不是位置。

基于網絡的應用，總體視圖通常以文本的形式出現，即通常所說的“面包屑”導航和無處不在的層級顯示。

這個好處是不僅起到标示使用者在網絡應用中的位置的作用，還可以直接操作，實作不同界面之間的跳轉。

6、提供具體、完整的導航。

導航的完整性意味着使用者可以獲得整個網站範圍内的領域性導航，能涉及網站中全部的資訊及其關系。

7、保持頁面的一緻性。

保持網頁的一緻性是成功網頁設計的标準之一。

如果每個頁面的色彩搭配，風格樣式、内容排版都天差地别，使用者點進去後會産生過大的視覺反差，造成不适。是以保持頁面一緻，并且盡量保持在相同的位置，使用相同的功能。可以有效提高使用者的閱讀體驗。

8、避免複雜的嵌套關系。

在程式編寫中經常會将代碼層級嵌套，但在導航設計中應該盡量避免這種層級關系，因為在實體世界中，例如檔案櫃，資訊的存儲和檢索存在于一個單層分組中，而不會存在于嵌套的層次中。在使用者的概念模型中傾向于以單層分組來組織資訊，避免嵌套結構過于抽象和複雜。是以在導航設計中避免選項之間過于複雜的層級嵌套是非常必要的。

9、讓使用者知道他們「在哪」。

使用者隻有了解自己所處的位置，才能确定下一步要做什麼。

10、導航一直可見。

人機互動學博士Jakob Nielsen說過：“見到什麼比記得什麼更容易”。是以導航一直可見可以最小化使用者的記憶。

不要期望說當使用者有需求時再出現，到那時，使用者的耐心已經磨損，很可能會影響到對網站的整體印象。