2020-9-25 周周
牛津詞典上有對Navigation一詞在互聯網領域的解釋：
the way that you move around a website or the Internet when you are looking for information
翻譯為：你在瀏覽網頁時四處移動尋找信息的方式
也就是說用戶看到的，影響其尋找信息的因素都可視為導航。
交互上：
用戶在使用傳統方式閱讀時，所處的空間是單向的，只能向前或向后翻頁；
而在網頁領域，所有的內容都存放在各自的URL里，信息在多維度多空間里相互交錯，各有聯系，可跳躍的閱讀方式讓用戶很容易失去位置感。
試想一下我們在大型商場里暈頭轉向的場景，會常常抱怨其導視系統的糟糕，網站有過之而無不及。
業務上：
從潛在用戶想要了解某個產品時，導航就開始起作用了
影響點擊量：網站排名高低，搜索帶來的點擊量
影響轉化：網站的易用性，訪問者轉化為潛在客戶和客戶的概率
設計者創造易用的表單，展示有用的信息，建立流暢的交互，這些都要靠導航來引導用戶達到。
內容涉及到的東西很多，內容之間的相互關系也不確定，因此不同內容導航需要不同的導航模式
1）種類
不同行業，不同業務重點對內容的分類方式不同
種類可以是符合大眾認知，具有并列關系的信息，
也可以是按照設計者的意圖創造出的種類，并區分其優先級
種類導航的出現無形中建立了用戶心中對某類產品的預期信息架構，使其在瀏覽信息時更有方向性，例如在瀏覽一家服裝店鋪時，用戶在進入導航列表前就對種類有了預期，諸如男士上裝，男士下裝，女士上裝、女士下裝、配飾，包袋等。
2）字母
以字母順序排列信息。適用于信息量超大，且不存在主次、重要級關系的內容。常見于聯系人列表，地區導航，介紹人名，合作伙伴等場景。
3）自然屬性
以時間，地理位置等屬性組織信息架構。
時間：展示在一段時間內發生的事情，以時間為導航可以直觀地感受到信息的變遷，立體感更強。例如一個企業的發展歷史
地理位置：展示在不同地理位置的事件信息，空間感更強
也叫做結構導航，根據信息的上下級關系、主體信息架構等因素將信息有序排列。分為全局導航和局部導航。
全局導航往往指頁眉和頁腳，存在于網站的大部分頁面，便于用戶隨時跳轉。
頁眉：用戶進入網站關注到的點，將網站進行功能分類后，將導航文字放置在頁眉上
頁腳：此空間是為隱私和法律鏈接保留的，還會加上聯系方式，也有許多內容繁重的網站會把站點地圖放置在頁腳。
雅各布·尼爾森把全局導航在網站中的作用形象地比喻為機艙座位下的救生衣 ，你只要知道它哪 ，而不必時時關注它，需要時立即找到穿上即可。
局部導航是是更深層級的導航，不作用于全局，存在于特定的功能區，可分布在頁面各部分。
業務上必要的一些功能入口，通常貫穿全局，例如很多網站的個人信息，用戶需要在大部分時刻都可直接接觸到該功能。根據用戶的心理模型，這類功能會存在于頁面的右上角。
用戶使用較多，也是最重要的導航方式之一。當帶有明確的目的性或無法通過內容，層級導航找到想要的信息時，用戶會在搜索框內嘗試輸入一些信息。
而讓用戶主動搜索會出現下面的情況：用戶無法清晰表達或錯誤地表達其想要搜索的內容，導致系統無法匹配上對應的信息，
為了讓搜索導航更有效地發揮其作用，出現了自動填充，模糊搜索，推薦搜索，搜索歷史，搜索糾正等一系列導航功能，這些功能都是為了想辦法將用戶引導到他可能需要的頁面上。
以類似地圖的樣式來展示網站頁面之間的層級關系，并提供相應的鏈接。可視性強，便于用戶找到想要的信息。
考慮到排版布局，樣式美觀，除了用文字本身的含義用作導航外，圖標也經常被用作導航，分為純圖標導航和文字+圖標導航，這里圖標的風格會很大程度上影響這個頁面的視覺效果
將導航文字橫向有序地排列，獨立性強，占用空間較少，可放置的導航條目有限，但這個局限性也可以成為優點，它要求設計師創造出簡短，易于理解，且滿足業務需求的標題。
當內容過多時會選擇在單個導航下放置下拉顯示二級導航，下拉顯示的二級導航可以很長或采用滾動顯示的方式，這種臨時的模態導航可以最大限度地利用到屏幕空間。
很多網頁的橫向頁眉導航會保持滑動時固定的樣式，便于用戶時時找到主頁面的入口。
占用空間較多，通常放置在頁面左邊位置，用不同的底色或分割線將其與主內容分開，內容文字一般采用左對齊，便于閱讀，導航層級過多時會采用點擊展開的樣式，上下滾動的常用交互也讓豎向導航容納的內容更多。
部分豎向導航是可隱藏或收縮的
在擁有復雜信息的網頁中，會將橫向導航，豎向導航等其他樣式混合使用，
面包屑導航是位于頁面頂部或底部的一行內部鏈接，在不同層級的鏈接之間用“>”分隔，可讓訪問者快速返回上一版塊或根網頁。許多面包屑導航都將內容最寬泛的頁面（通常為根網頁）設置為最左邊的首個鏈接，并在右側列出更具體的部分。
占用很少的空間并提供主導航實現不了的深層次定位功能。
面包屑的使用讓網站的結構更加清晰，強化用戶的心理層級模型，并實現跨層級跳躍
分頁顯示的內容數量固定，有時用戶可自定義內容數量，此外頁面上通常有當前頁，任意頁，上一頁，下一頁，首頁，末頁的鏈接。具有定位性，當用戶需要回到之前瀏覽過的某個位置時，可采用分頁的形式
無限滾動希望用戶只注意當前頁的內容且不能快速到達頁面的底部，適用于無法預測用戶何時能夠找到需要的信息的情況。在一些圖片展示，內容推送的網站上設計者不知道用戶想要的內容，同時也要展現網站內容豐富，資源庫深不見底的特質會采用交互上更簡單的無限滾動模式。
一些設計者想要用戶優先注意到的內容，會采用突出的版面設計，通過改變文字圖形的大小，顏色等與其他一般性內容形成對比或使用海報，彈窗等形式試圖引導用戶行為。
根據上面第三和第四點，分別從信息層和表現層給出導航設計的建議
1.信息結構盡可能扁平
多花一些時間去考慮信息體系結構，可根據首頁規劃全局的導航，首頁是用戶在網站中導航的起點，考慮如何讓用戶盡可能方便地從網站上的寬泛內容（首頁）轉到他們所需的更加具體的內容。
2.重視導航的順序
當同一級別的導航數量很多時，順序變的更加重要。根據用戶的認知習慣，開頭和結尾作為關注度（看到的）和保留度最高（剛剛發生的）的地方，其內容更加突出。
3.SEO優化
良好的網站導航結構可以幫助搜索引擎了解哪些是網站站長認為重要的內容，盡量用一些具體的描述詞語而非大而寬泛的詞匯，例如“產品”，“服務”。雖然搜索引擎的搜索結果是在頁面級別提供的，但它也希望了解頁面在網站這個更大層面上的角色。導航中關鍵詞的使用會影響其在搜索引擎中被搜到的質量。
4.創建網站地圖
用于顯示網站結構的一個簡單頁面，通常包含網站頁面的分層列表。如果在網站上查找頁面時遇到問題，用戶可能會訪問此頁面。此外搜索引擎也會訪問此頁面，以便使抓取范圍盡量覆蓋網站的全部頁面。
1.一致性
同一類型導航的視覺表現與交互操作在整個網站頁面中要保持一致，清晰一致的導航可以讓用戶預見每一步操作的結果。
2.清晰性
顏色與大小：文字顏色與背景顏色的對比，標題與內容的字號大小，這些最基本的元素直接影響導航的清晰度
留白與裝飾：與平面設計中原理一樣，留白讓網站頁面布局平衡，張弛有度；裝飾與留白相結合，讓導航表現得更精美，也有助于視覺分割
強調與弱化：有些導航起引導作用需要突出，有些起輔助作用需要弱化，強弱對比結合豐富了視覺層次，并讓導航起到它該起的作用
3.凸顯超鏈接
將可點擊的超鏈接文本與常規文字在樣式和交互上進行區分，常見做法有下劃線，文字顏色，加粗，鼠標懸浮變色。
4.在常規位置放置導航
網頁發展的幾十年讓用戶對網頁產生了一些常識性認識，例如用戶會在進入一個網站時去頁眉或側邊欄尋找主導航，盡量遵循這些常規用法。
5.導航數量不宜過多
無論是全局或局部導航，數目越多用戶處理和記住信息的難度越大，可以通過分組分層來提高信息瀏覽效率
6.側邊欄
側邊欄導航會占據一部分的屏幕空間，將其與主內容部分進行分割有助于用戶，例如用反差較大的背景色形成導航區與內容區
加入導航收縮功能，以便更好地利用屏幕空間，特別是在一些小尺寸屏幕上。
在做完網頁設計后可以根據瀏覽網頁的一般習慣，通過以下幾個方面對導航設計進行簡單審查
問自己以及團隊其他成員以下幾個問題
1.這是什么網站
2.網站有哪些主要內容
3.導航看上去是否像是導航，可點擊的
4.導航的名稱是否會引起歧義
5.現在處在網站的哪個層級
6.如何進退
7.具體的功能是否會在預想的地方出現
8.怎么進行內容搜索
借助工具
9.使用Google Analytics對網站的訪問情況進行回顧并進行一些評估
例如一些頁面的瀏覽量極低于預期或相較于同類頁面瀏覽差距過大，就要考慮是否是指向該頁面的導航出現了問題。
導航的最終目的是簡化獲取信息的過程，具體以何種方式表達還需要取決于業務內容，但總體上要以用戶易接受的方式呈現。用戶若是能在獲取信息的過程中按照設計者所想的方式前進并感受到暢通無阻的快感，導航便是成功的。