由于搜索引擎的普及，許多網(wǎng)站的新用戶(hù)，他們的著(zhù)陸頁(yè)是在內頁(yè)而不是首頁(yè)。著(zhù)陸在內頁(yè)的用戶(hù)，由于是搜索引擎將他們帶進(jìn)的網(wǎng)站，他們并不知道頁(yè)面的層級關(guān)系，以及上一級的頁(yè)面是在什么位置，因此他們更容易在網(wǎng)站中迷路。

關(guān)于如何避免用戶(hù)在網(wǎng)站中迷路，新銳也發(fā)布過(guò)一些文章，比如如何通過(guò)設計有效的將他們帶回首頁(yè)。而本篇文章，新銳將結合實(shí)例告訴你，如何有效的告知用戶(hù)所在位置，制作網(wǎng)站的“導航牌?！?/p>

網(wǎng)站一般使用以下元素來(lái)告知用戶(hù)所處位置：

1.品牌Logo：在頁(yè)面上展示logo可以標識內容所有權，讓在內頁(yè)著(zhù)陸的用戶(hù)明白自己是在哪個(gè)網(wǎng)站上。通常，我們將logo放置于左上角，已保證當用戶(hù)希望找到它時(shí)，可以迅速的發(fā)現它。

2.導航上的視覺(jué)差異：借用導航文字的下劃線(xiàn)，或者文字顏色的變化等等，告知用戶(hù)自己是在哪個(gè)欄目里。研究發(fā)現這種方式在用戶(hù)識別位置上非常有效。

3.頭部信息：在正文標題左上方放置的頭部信息也可以起到幫助用戶(hù)明確位置的作用。同時(shí)由于空間相比導航更廣，因此可以羅列更多的層級信息，在位置信息上的呈現可以更加豐富。

4.頁(yè)面標題：頁(yè)面標題是寫(xiě)在html里的，對頁(yè)面內容作出的最高度詮釋。在瀏覽器的標簽、搜索引擎的搜索結果、歷史訪(fǎng)問(wèn)記錄、收藏夾里呈現的都是頁(yè)面的標題。描述性的、獨特的標題有助于表明所有權、信息組織和頁(yè)面的特定內容。

5.url：一個(gè)靜態(tài)化的可讀的url同樣也是告知用戶(hù)位置的一個(gè)重要標識。其中與導航相關(guān)聯(lián)的層級信息非常實(shí)用，比如文章頁(yè)面的url帶有英文的article或者拼音的wenzhang等等都可以。

6.面包屑導航：與url相同，面包屑導航同樣彰顯了頁(yè)面的層級關(guān)系，相比url，面包屑導航用錨文本的形式可以更加清楚地描述各級頁(yè)面的主題。

7.文章線(xiàn)索：文章的發(fā)布日期，標簽，頁(yè)面圖標，配圖等等都可以表現出站點(diǎn)的信息結構或者時(shí)間的信息。

8.頁(yè)面視覺(jué)變化：不同色彩的文字，logo的變化以及其他清晰可見(jiàn)的視覺(jué)化差異，都可以讓用戶(hù)明確自己所處的網(wǎng)站位置已經(jīng)發(fā)生了改變。

結合實(shí)例，我們來(lái)看一下這些元素是怎么被使用的：

BBC使用了這四個(gè)元素來(lái)告知用戶(hù)所處位置：1.品牌與logo2.導航欄視覺(jué)差異3.頭部信息4.文章線(xiàn)索

這個(gè)網(wǎng)頁(yè)采用了1.品牌名2.導航欄視覺(jué)差異3.面包屑導航4.頭部信息這四個(gè)元素來(lái)告知用戶(hù)所處位置。在截圖上未體現出來(lái)的其頁(yè)面標題與url也很具有層次感。

紐約公共圖書(shū)館的網(wǎng)頁(yè)同樣使用了導航欄的視覺(jué)差異(黑色→紅色)來(lái)告知用戶(hù)所處位置。帶有顏色的按鈕不光可以有效抓住用戶(hù)視覺(jué)，同時(shí)其描述文本極為清晰的闡明了該頁(yè)面的主要作用—支持搜索的圖書(shū)館明細列表。

在一些目錄層次很深的網(wǎng)站上，借用導航欄的視覺(jué)差異來(lái)說(shuō)明所處位置與網(wǎng)站的信息結構非常困難。比如相冊類(lèi)網(wǎng)站，按照年月日進(jìn)行歸類(lèi)的照片內頁(yè)，其所在的層級結構非常深。這時(shí)候，面包屑導航起到的作用會(huì )被放大，這種情況下通?？梢詫⒚姘紝Ш皆O計的更明顯一些。該網(wǎng)頁(yè)中最明顯的位置標識就是面包屑導航。