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