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