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