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