通過網頁設計告訴用戶在網站中的位置？
由于(yu)搜索引(yin)擎的(de)(de)(de)普及(ji)，許多網站的(de)(de)(de)新用戶，他們(men)的(de)(de)(de)著陸頁是(shi)在(zai)內頁而不(bu)是(shi)首頁。著陸在(zai)內頁的(de)(de)(de)用戶，由于(yu)是(shi)搜索引(yin)擎將他們(men)帶進(jin)的(de)(de)(de)網站，他們(men)并(bing)不(bu)知(zhi)道頁面的(de)(de)(de)層級(ji)關系，以(yi)及(ji)上(shang)一級(ji)的(de)(de)(de)頁面是(shi)在(zai)什么位置，因此他們(men)更(geng)容易在(zai)網站中迷路。
關(guan)于如何(he)避免用戶在網站中(zhong)迷路，新銳也發布(bu)過一些文(wen)章，比如如何(he)通過設計有(you)效的(de)將他們(men)帶回(hui)首頁。而(er)本篇文(wen)章，新銳將結合(he)實例(li)告訴你，如何(he)有(you)效的(de)告知用戶所(suo)在位置，制作網站的(de)“導航牌。”
網站一般使用(yong)以下元素來告知用(yong)戶所處(chu)位置：
1.品牌Logo：在(zai)頁(ye)面(mian)上展(zhan)示logo可以標識內容所有權，讓在(zai)內頁(ye)著陸(lu)的(de)(de)用(yong)戶(hu)明白自己(ji)是在(zai)哪個網站上。通常，我們將logo放置于(yu)左上角(jiao)，已保證當(dang)用(yong)戶(hu)希望找到它(ta)時(shi)，可以迅速的(de)(de)發(fa)現它(ta)。
2.導航上(shang)的視覺差異：借用(yong)(yong)導航文(wen)字的下劃線(xian)，或者文(wen)字顏色的變(bian)化等(deng)等(deng)，告知用(yong)(yong)戶自己是(shi)在(zai)哪(na)個欄目里。研究發現這種方式在(zai)用(yong)(yong)戶識別位置上(shang)非常(chang)有效。
3.頭部信(xin)息：在正(zheng)文標題左上方放置的(de)頭部信(xin)息也可(ke)以(yi)起(qi)到(dao)幫助用戶(hu)明(ming)確(que)位置的(de)作用。同時由于空間(jian)相(xiang)比導航更(geng)(geng)廣(guang)，因(yin)此可(ke)以(yi)羅列更(geng)(geng)多(duo)的(de)層級信(xin)息，在位置信(xin)息上的(de)呈現可(ke)以(yi)更(geng)(geng)加豐(feng)富。
4.頁(ye)面(mian)標(biao)(biao)(biao)題(ti)(ti)：頁(ye)面(mian)標(biao)(biao)(biao)題(ti)(ti)是寫在html里(li)的(de)(de)(de)，對頁(ye)面(mian)內容作(zuo)出(chu)的(de)(de)(de)最高度詮釋。在瀏覽器的(de)(de)(de)標(biao)(biao)(biao)簽、搜索(suo)引(yin)擎(qing)的(de)(de)(de)搜索(suo)結果、歷(li)史訪問記錄、收藏夾里(li)呈現(xian)的(de)(de)(de)都是頁(ye)面(mian)的(de)(de)(de)標(biao)(biao)(biao)題(ti)(ti)。描述性的(de)(de)(de)、獨特的(de)(de)(de)標(biao)(biao)(biao)題(ti)(ti)有(you)助于表(biao)明(ming)所有(you)權、信(xin)息組(zu)織和頁(ye)面(mian)的(de)(de)(de)特定內容。
5.url：一個(ge)靜態(tai)化的(de)(de)(de)可讀的(de)(de)(de)url同樣也是告知用戶位(wei)置的(de)(de)(de)一個(ge)重(zhong)要標(biao)識。其中與(yu)導航相(xiang)關聯(lian)的(de)(de)(de)層(ceng)級信息非(fei)常實(shi)用，比(bi)如(ru)文章(zhang)頁(ye)面的(de)(de)(de)url帶有(you)英文的(de)(de)(de)article或者拼音(yin)的(de)(de)(de)wenzhang等等都可以。
6.面包(bao)屑導航：與url相(xiang)同，面包(bao)屑導航同樣彰顯了頁(ye)面的(de)層級(ji)關(guan)系，相(xiang)比url，面包(bao)屑導航用錨文本的(de)形式可以更加清(qing)楚地描述(shu)各級(ji)頁(ye)面的(de)主題。
7.文章線索：文章的(de)發(fa)布日(ri)期，標簽(qian)，頁面(mian)圖標，配圖等(deng)等(deng)都可以表現出站(zhan)點的(de)信息(xi)結(jie)構(gou)或者(zhe)時間的(de)信息(xi)。
8.頁面視覺變(bian)化：不同色彩的文字(zi)，logo的變(bian)化以及(ji)其他(ta)清晰可見的視覺化差異，都可以讓用戶明確自(zi)己所處的網站位置(zhi)已經發生了改變(bian)。
結合實例(li)，我們來看一下這(zhe)些(xie)元素是怎么被使(shi)用的：
BBC使用了這四(si)個元素來(lai)告知用戶所處位置：1.品牌與logo2.導航欄視(shi)覺差異3.頭部(bu)信息4.文章線索
這個網頁采用了1.品牌名(ming)2.導(dao)航欄視覺差異3.面(mian)包屑(xie)導(dao)航4.頭部信息(xi)這四個元(yuan)素(su)來告(gao)知(zhi)用戶所(suo)處位置(zhi)。在截圖上未體(ti)現出來的其頁面(mian)標(biao)題與url也很具(ju)有層次感。
紐約(yue)公共圖書(shu)館的(de)網頁同樣使用(yong)了導航欄的(de)視覺差異(黑色(se)→紅色(se))來告知用(yong)戶所處位(wei)置。帶有(you)顏色(se)的(de)按鈕不(bu)光可以(yi)有(you)效抓住用(yong)戶視覺，同時其描(miao)述文本(ben)極(ji)為清晰的(de)闡明(ming)了該頁面的(de)主(zhu)要作用(yong)—支(zhi)持搜索的(de)圖書(shu)館明(ming)細列(lie)表。
在一些目錄層次很深的(de)網站上(shang)，借用(yong)導(dao)(dao)航欄(lan)的(de)視覺差(cha)異來說明所處位置與網站的(de)信息結構(gou)非常(chang)困(kun)難。比(bi)如相冊類(lei)網站，按(an)照(zhao)年月日進行歸類(lei)的(de)照(zhao)片內頁(ye)，其(qi)所在的(de)層級(ji)結構(gou)非常(chang)深。這時候，面包(bao)屑(xie)導(dao)(dao)航起(qi)到的(de)作用(yong)會被放大，這種(zhong)情況下(xia)通常(chang)可以將面包(bao)屑(xie)導(dao)(dao)航設(she)計的(de)更明顯一些。該(gai)網頁(ye)中最明顯的(de)位置標(biao)識就是面包(bao)屑(xie)導(dao)(dao)航。
