界面的header稱之為頁首區(qū)域或頂部區(qū)域。

頂部區(qū)域的導(dǎo)航對一個(gè)產(chǎn)品的用戶體驗(yàn)至關(guān)重要，根據(jù)用戶的瀏覽習(xí)慣：從左到右，從上到下的瀏覽順序，他們進(jìn)入產(chǎn)品后頂部導(dǎo)航是他們首先看到的內(nèi)容。

頂部水平欄導(dǎo)航是頂部區(qū)域?qū)Ш降闹饕Ｊ?。常做為產(chǎn)品主導(dǎo)航，放在產(chǎn)品所有界面頂部區(qū)域。

有些產(chǎn)品經(jīng)理認(rèn)為頂部內(nèi)容沒什么可設(shè)計(jì)的，無非是logo和一些文字鏈接組合起來。但事實(shí)并不是這樣。

首先，我們來看一下頂部區(qū)域常包含的內(nèi)容有哪些：

l品牌logo

l菜單

l搜索框

l提示消息

l登錄／注冊

l聯(lián)系方式

l語言切換

l其他產(chǎn)品或者移動端app的下載鏈接

l行為召喚鏈接（我要投稿，我要發(fā)博）

這些都是頂部區(qū)域中常見元素，設(shè)計(jì)時(shí)根據(jù)產(chǎn)品自身實(shí)際情況取舍。

在這些內(nèi)容中，以導(dǎo)航形式存在的菜單尤為重要，常見的導(dǎo)航設(shè)計(jì)模式分為兩種：

模式一：漢堡導(dǎo)航

頂部區(qū)域很小，導(dǎo)航中的內(nèi)容很多，怎么辦？當(dāng)然要通過內(nèi)容的取舍完成導(dǎo)航設(shè)計(jì)。

取舍意味著保留和舍棄，在交互設(shè)計(jì)中舍棄不代表不要某些內(nèi)容，而是隱藏一些內(nèi)容，在用戶發(fā)起交互后再顯示。這樣的隱藏，體現(xiàn)了按需查看的原則，當(dāng)用戶需要時(shí)再展現(xiàn)在用戶面前。

漢堡導(dǎo)航就是這種典型思路的導(dǎo)航模式。

常見的漢堡導(dǎo)航由三條水平線條構(gòu)成，像兩層面包一層肉的漢堡包，所以我們形象的稱之為漢堡導(dǎo)航。

漢堡導(dǎo)航通過將一些次要的信息隱藏來節(jié)約界面的使用空間，使頂部區(qū)域更加清爽簡潔，用戶注意力可以更好的集中在重要的信息上。

漢堡導(dǎo)航在web界面導(dǎo)航設(shè)計(jì)中使用頻繁，用戶很熟悉這種導(dǎo)航模式，不會額外增加用戶的學(xué)習(xí)成本。

漢堡導(dǎo)航設(shè)計(jì)時(shí)需要注意的是漢堡按鈕很容易被用戶忽視，所以在設(shè)計(jì)的時(shí)候要通過按鈕形式的設(shè)計(jì)來適當(dāng)?shù)囊龑?dǎo)用戶。也就是說，漢堡按鈕設(shè)計(jì)要做到清晰展示，又不占據(jù)太大空間。

=============

模式二：水平欄導(dǎo)航

頂部水平欄導(dǎo)航設(shè)計(jì)模式有時(shí)伴隨著下拉菜單，當(dāng)鼠標(biāo)移到某個(gè)項(xiàng)上時(shí)彈出它下面的二級子導(dǎo)航項(xiàng)。

頂部水平欄導(dǎo)航一般特征

導(dǎo)航項(xiàng)是文字鏈接，按鈕形狀，或者選項(xiàng)卡形狀

水平欄導(dǎo)航通常直接放在鄰近網(wǎng)站logo的地方

它通常位于折疊之上

頂部水平欄導(dǎo)航的缺點(diǎn)

頂部水平欄導(dǎo)航最大的缺點(diǎn)就是它限制了你在不采用子級導(dǎo)航的情況下可以包含的鏈接數(shù)。對于只有幾個(gè)頁面或類別的網(wǎng)站來說，這不是什么問題，但是對于有非常復(fù)雜的信息結(jié)構(gòu)且有很多模塊組成的網(wǎng)站來說，如果沒有子導(dǎo)航的話，這并不是一個(gè)完美的主導(dǎo)航菜單選擇。

何時(shí)使用頂部水平欄導(dǎo)航

頂部水平欄導(dǎo)航對于只需要在主要導(dǎo)航中顯示5-12個(gè)導(dǎo)航項(xiàng)的網(wǎng)站來說是非常好的。這也是單列布局的網(wǎng)站的主導(dǎo)航的唯一選擇(除了通常用于二級導(dǎo)航系統(tǒng)的底部導(dǎo)航)。當(dāng)它與下拉子導(dǎo)航結(jié)合時(shí)，這種設(shè)計(jì)模式可以支持更多的鏈接。

2.側(cè)邊欄/豎直導(dǎo)航

模式一：側(cè)邊豎直導(dǎo)航

側(cè)邊欄導(dǎo)航的導(dǎo)航項(xiàng)被排列在一個(gè)單列，一項(xiàng)在一項(xiàng)的上面。它經(jīng)常在左上角的列上，在主內(nèi)容區(qū)之前——根據(jù)一份針對從左到右習(xí)慣讀者的導(dǎo)航模式的可用性研究，左邊的豎直導(dǎo)航欄比右邊的豎直導(dǎo)航表現(xiàn)要好。

側(cè)邊欄導(dǎo)航設(shè)計(jì)模式隨處可見，幾乎存在于各類網(wǎng)站上。這有可能是因?yàn)樨Q直導(dǎo)航是當(dāng)前最通用的模式之一，可以適應(yīng)數(shù)量很多的鏈接。

它可以與子導(dǎo)航菜單一起使用，也可以單獨(dú)使用。它很容易用于包含很多鏈接的網(wǎng)站主導(dǎo)航。側(cè)邊欄導(dǎo)航可以集成在幾乎任何種類的多列布局中。

側(cè)邊欄導(dǎo)航的一般特征

文字鏈接作為導(dǎo)航項(xiàng)很普遍(包含或不包含圖標(biāo))

很少使用選項(xiàng)卡(除了堆疊標(biāo)簽導(dǎo)航模式)

豎直導(dǎo)航菜單經(jīng)常含有很多鏈接

豎直/側(cè)邊欄導(dǎo)航缺點(diǎn)

因?yàn)榭梢蕴幚砗芏噫溄?，?dāng)豎直菜單太長時(shí)有時(shí)可能將用戶淹沒。嘗試限制你引入的鏈接數(shù)，取而代之可以使用飛出式子導(dǎo)航菜單以提供網(wǎng)站的更多信息。同時(shí)考慮將鏈接分放在直觀的類別當(dāng)中，以幫助用戶很快地找到感興趣的鏈接。

何時(shí)使用豎直/側(cè)邊欄導(dǎo)航

豎直導(dǎo)航適用于幾乎所有種類的網(wǎng)站，尤其適合有一堆主導(dǎo)航鏈接的網(wǎng)站。

????????????????????????3.頁腳區(qū)導(dǎo)航????????????????????????

模式一：頁腳次導(dǎo)航

頁腳導(dǎo)航通常用于次要導(dǎo)航，并且可能包含了主導(dǎo)航中沒有的鏈接，或是包含簡化的網(wǎng)站地圖鏈接。

訪客通常在主導(dǎo)航找不到他們要找的東西時(shí)會去查看頁腳導(dǎo)航。

頁腳導(dǎo)航的一般特征

頁腳導(dǎo)航通常用于放置其它地方都沒有的導(dǎo)航項(xiàng)

通常使用文字鏈接，偶爾帶有圖標(biāo)

通常鏈接指向不是那么關(guān)鍵的頁面

頁腳導(dǎo)航的缺點(diǎn)

如果你的頁面很長，沒有人愿意僅僅為了導(dǎo)航而滾動到頁面底部。對于較長的頁面，頁腳導(dǎo)航最好作為重復(fù)鏈接和簡要的網(wǎng)站地圖的地方。它不適合作為主導(dǎo)般形式。

何時(shí)使用頁腳導(dǎo)航

絕大多數(shù)網(wǎng)站都有這樣那樣的頁腳導(dǎo)航，即使它只是重復(fù)其它地方的鏈接。考慮什么放在那有用，以及你的訪客可能最想找什么。

WEB端&移動端常見導(dǎo)航模式

1.Web端常見導(dǎo)航模式

模式一：選項(xiàng)卡導(dǎo)航

選項(xiàng)卡導(dǎo)航可以隨意設(shè)計(jì)成任何你想要的樣式，從逼真的，有手感的標(biāo)簽到圓滑的標(biāo)簽，以及簡單地方邊的標(biāo)簽等。它存在于各種各樣的網(wǎng)站里，并且可以納入任何視覺效果。

選項(xiàng)卡比起其它類別的導(dǎo)航有一個(gè)明顯的優(yōu)勢：它們對用戶有積極的心理效應(yīng)。人們通常把導(dǎo)航與選項(xiàng)卡關(guān)聯(lián)在一起，因?yàn)樗麄冊?jīng)在筆記本或資料夾里看見選項(xiàng)卡，并且把它們與切換到一個(gè)新的章節(jié)聯(lián)系在一起。這個(gè)真實(shí)世界的暗喻使得選項(xiàng)卡導(dǎo)航非常直觀。

選項(xiàng)卡導(dǎo)航的一般特征

樣子和功能都類似真實(shí)世界的選項(xiàng)卡(就像在文件夾，筆記本等中看到的一樣)

一般是水平方向的但也有時(shí)是豎直的(堆疊標(biāo)簽)

選項(xiàng)卡導(dǎo)航的缺點(diǎn)

選項(xiàng)卡最大的缺點(diǎn)是它比簡單的頂部水平欄更難設(shè)計(jì)。它們通常需要更多的標(biāo)簽，圖片資源以及CSS，具體根據(jù)標(biāo)簽的視覺復(fù)雜度而定。選項(xiàng)卡的另一個(gè)缺點(diǎn)是它們也不太適用于鏈接很多的情況，除非它們豎直地排列(即使這樣，如果太多的話它們還是看起來很不合適)。

何時(shí)使用選項(xiàng)卡導(dǎo)航

選項(xiàng)卡也適合幾乎任何主導(dǎo)航，雖然它們在可以顯示的鏈接上有限制，尤其在水平方向的情況下。將它們用于擁有不同風(fēng)格子導(dǎo)航的主導(dǎo)航的較大型網(wǎng)站是個(gè)不錯(cuò)的選項(xiàng)。

模式二：面包屑導(dǎo)航

面包屑的名字來源于Hansel和Gretel的故事，他們在沿途播撒面包屑以用來找到加家的路，這可以告訴你在網(wǎng)站的當(dāng)前位置。這是二級導(dǎo)航的一種形式，輔助網(wǎng)站的主導(dǎo)航系統(tǒng)。

面包屑對于多級別具有層次結(jié)構(gòu)的網(wǎng)站特別有用。它們可以幫助訪客了解到當(dāng)前自己在整站中所處的位置。如果訪客希望返回到某一級，它們只需要點(diǎn)擊相應(yīng)的面包屑導(dǎo)航項(xiàng)。

面包屑的一般特征

一般格式是水平文字鏈接列表，通常在兩項(xiàng)中間伴隨著左箭頭以指示層及關(guān)系

從不用于主導(dǎo)航

面包屑導(dǎo)航的缺點(diǎn)

面包屑不適于淺導(dǎo)航網(wǎng)站。當(dāng)網(wǎng)站沒有清晰的層次和分類的時(shí)候，使用它也可能產(chǎn)生混亂。何時(shí)使用面包屑導(dǎo)航。面包屑導(dǎo)航最適用于具有清晰章節(jié)和多層次分類內(nèi)容的網(wǎng)站。沒有明顯的章節(jié)，使用面包屑是得不償失。

模式三：標(biāo)簽導(dǎo)航

標(biāo)簽經(jīng)常被用于博客和新聞網(wǎng)站。它們常常被組織成一個(gè)標(biāo)簽云，導(dǎo)航項(xiàng)可能按字母順序排列(通常用不同大小的鏈接來表示這個(gè)標(biāo)簽下有多少內(nèi)容)，或者按流行程度排列。

標(biāo)簽是出色的二級導(dǎo)航而很少用于主導(dǎo)航。他可以提高網(wǎng)站的可發(fā)現(xiàn)性和探索性。標(biāo)簽云通常出現(xiàn)在邊欄或底部。如果沒有標(biāo)簽云，標(biāo)簽則通常包括于文章頂部或底部的元信息中，這種設(shè)計(jì)讓用戶更容易找到相似的內(nèi)容。

標(biāo)簽導(dǎo)航的一般特征

標(biāo)簽是以內(nèi)容為中心的網(wǎng)(博客和新聞?wù)?站的一般特性

僅有文字鏈接

當(dāng)處于標(biāo)簽云中時(shí)，鏈接通常大小各異以標(biāo)識流行度

經(jīng)常被包含在文章的元信息中

標(biāo)簽導(dǎo)航的缺點(diǎn)

人們通常把標(biāo)簽和博客和新聞網(wǎng)站聯(lián)系在一起(有時(shí)候也可能是電子商務(wù)網(wǎng)站)，所以如果你的網(wǎng)站與這些網(wǎng)站有本質(zhì)的不同，它可能對你就沒有幫助。標(biāo)簽也會給內(nèi)容創(chuàng)作者帶來一定量的工作量，因?yàn)闉榱耸箻?biāo)簽系統(tǒng)有效，每篇文章都需要打上準(zhǔn)確的標(biāo)簽。

何時(shí)使用標(biāo)簽

如果你擁有很多主題，為內(nèi)容打上關(guān)鍵詞標(biāo)記是很有利的。如果你僅有幾個(gè)頁面(可能你的網(wǎng)站是一個(gè)公司網(wǎng)站)，可能就不需要給內(nèi)容打標(biāo)簽了。是否結(jié)合標(biāo)簽云或只是將標(biāo)簽包含在元信息中得取決于你的設(shè)計(jì)。

模式四：出式菜單和下拉菜單導(dǎo)航

出式菜單(與豎直/側(cè)邊欄導(dǎo)航一起使用)和下拉菜單(一般與頂部水平欄導(dǎo)航一起使用)是構(gòu)建健壯的導(dǎo)航系統(tǒng)的好方法。它使得你的網(wǎng)站整體上看起來很整潔，而且使得深層章節(jié)很容易被訪問。

他們通常結(jié)合水平，豎直或是選項(xiàng)卡導(dǎo)航一起使用，作為網(wǎng)站主導(dǎo)航系統(tǒng)的一部分。

出式菜單和下拉菜單導(dǎo)航的一般特征

用于多級信息結(jié)構(gòu)

使用JavaScript和CSS來隱藏和顯示菜單

顯示在菜單中的鏈接是主菜單項(xiàng)的子項(xiàng)

菜單通常在鼠標(biāo)懸停在上面時(shí)被激活，而有時(shí)候也可能是鼠標(biāo)點(diǎn)擊時(shí)激活

出式菜單和下拉菜單導(dǎo)航缺點(diǎn)

除非你在主導(dǎo)航鏈接邊上放置一些標(biāo)識(通常是箭頭圖標(biāo))，不然訪客可能不知道那有包含子導(dǎo)航項(xiàng)的下拉或出式菜單，因此使這些標(biāo)識很明顯是非常重要的。同時(shí)出式菜單和下拉可能使得導(dǎo)航在移動設(shè)備上非常難用，所以要確保你的移動樣式表處理了這種情況。

何時(shí)使用出式菜單和下拉菜單導(dǎo)航

如果你想在視覺上隱藏很大的或很復(fù)雜的導(dǎo)航層次，出式菜單和下拉是很好的選擇，因?yàn)樗層脩魶Q定他們想看見什么，以及什么時(shí)候可以看見它們。它們可以用來在不弄亂網(wǎng)頁的情況下按需顯示很大數(shù)量的鏈接。它們還可以用來顯示子頁面和局部導(dǎo)航，并且不需要用戶首先點(diǎn)擊打開新的頁面。

模式五：雙層菜單

雙層菜單的樣式在近來的頂部欄設(shè)計(jì)中也愈發(fā)受到設(shè)計(jì)師的青睞。因?yàn)殡S著產(chǎn)品功能的不斷增加與完善，漸漸出現(xiàn)了一些單層菜單無法解決的情況，那就是頂部欄需要展示的內(nèi)容過多，而且某些特定功能不屬于同一層級。為了更好的應(yīng)對這類情況，設(shè)計(jì)師們創(chuàng)造性的使用雙層菜單這種樣式。

以上面的網(wǎng)站為例，上層的菜單有社交網(wǎng)絡(luò)的鏈接（Facebook,Instagram和Twitter），企業(yè)logo，搜索框，購物車和漢堡按鈕。下層的菜單有產(chǎn)品種類，營業(yè)網(wǎng)點(diǎn)地址，新聞，關(guān)于我們和聯(lián)系我們。

在這種情況下，如果將這些信息以傳統(tǒng)的單行菜單展示，勢必會放不下，造成頂部欄的過度擁擠。

雙層菜單設(shè)計(jì)要點(diǎn)

大部分用戶不會一個(gè)字一個(gè)字去讀頁面中的信息，他們是“掃描”式閱讀。所以頂部欄上的文字設(shè)計(jì)首要考慮的是可讀性，要讓用戶在短時(shí)間內(nèi)就可以獲取這些信息。所以我們的文字要做到能夠從背景中凸顯出來，必要的時(shí)候可以加粗字體樣式。

模式六：：固定型頂部導(dǎo)航

固定頂部欄代表著另一種設(shè)計(jì)思路：無論用戶進(jìn)行何種操作，頂部欄對用戶來說都是可見的。這類的頂部欄適用于頁面內(nèi)容比較多，需要用戶不斷下拉滑動的網(wǎng)站。

這種交互模式可以很好的提升頂部欄的易用性，但是這是建立在犧牲一部分頁面空間的基礎(chǔ)上換來的，所以我們在使用的時(shí)候一定要謹(jǐn)慎。

在上面我一直強(qiáng)調(diào)頂部欄設(shè)計(jì)要簡潔明了，要讓用戶一眼就能看明白。因?yàn)轫敳繖趯儆趯?dǎo)航體系的一部分，是為了避免用戶迷路，幫助他們更好的使用產(chǎn)品。歸根結(jié)底用戶使用你的產(chǎn)品是為了你提供的內(nèi)容或服務(wù)，而不是來看狂拽酷炫的頂部欄。所以我們不能本末倒置，將頂部欄做的過于花哨，進(jìn)而分散用戶的注意力。

此外極簡風(fēng)格很適合響應(yīng)式設(shè)計(jì)，可以在多設(shè)備上追求一致的用戶體驗(yàn)。

簡約設(shè)計(jì)的另一大優(yōu)點(diǎn)就是，設(shè)計(jì)師會經(jīng)常遇到臨時(shí)的迭代需求，領(lǐng)導(dǎo)突然讓你在這里加一個(gè)按鈕那里加一個(gè)文字標(biāo)簽，簡約設(shè)計(jì)為這種突然的迭代需求提供了操作空間。

2.移動端常見導(dǎo)航模式

模式一：Tab/分段控件導(dǎo)航欄

Tab左右切換頂部導(dǎo)航欄與分段控件頂部導(dǎo)航欄，都是頂部有多個(gè)標(biāo)題切換的導(dǎo)航欄樣式，分為選中標(biāo)題與未選中標(biāo)題，如下圖：

分段控件頂部導(dǎo)航欄一般有2~5個(gè)可選項(xiàng)，且不能左右滑動。Tab左右切換頂部導(dǎo)航欄的可選項(xiàng)可以擴(kuò)展很多(如愛奇藝的首頁頂部Tab切換有24個(gè)可選項(xiàng))，并且可以左右滑動切換，選中樣式也比較豐富，常見的有底部加上小短線、字體顏色變化、字號放大等(多個(gè)合并使用更能突出選中標(biāo)題)，如下圖：

?

模式二：通欄導(dǎo)航欄

通欄導(dǎo)航的背景層一般與下方的模塊打通了，在視覺上看起來更為統(tǒng)一，還能一定程度上節(jié)約界面空間。如下圖：

通欄導(dǎo)航欄常用在電商、旅游等界面復(fù)雜或是需要烘托氛圍的界面中（多伴隨著背景處理），有些也會放在頂部通欄Banner上，節(jié)省空間的同時(shí)減少割裂感。

通欄導(dǎo)航欄的背景處理方式一般有三種:

1.特殊背景處理：與下方模塊整體風(fēng)格保持一致，多采用與下方一致的圖片背景；

2.顏色、漸變背景：采用純色或是漸變背景，常見于卡片風(fēng)格的界面；

3.黑色透明漸變蒙層：采用一層漸變蒙層，常見于圖片Banner上，保證導(dǎo)航欄文字的可識別性。

?

模式三：小程序?qū)Ш綑?/strong>

微信的小程序?qū)Ш綑冢陧敳坑疑戏接幸粋€(gè)不可去除也無法編輯的Titlebar按鈕，微信配置了一深一淺兩種風(fēng)格。

從APP轉(zhuǎn)換到小程序時(shí)，要注意調(diào)整APP的頂部導(dǎo)航欄的位置以及搜索框的大小，避免被Titlebar遮擋，如下圖：

上圖中，豌豆公主的頂部導(dǎo)航欄整體下移，并且減小了搜索框的高度，提高屏幕的利用率。

關(guān)于導(dǎo)航設(shè)計(jì)的若干思考

1.為市場部做推廣的導(dǎo)航欄怎么做？

百度通過層層導(dǎo)航來抓取網(wǎng)站數(shù)據(jù)。關(guān)于導(dǎo)航欄重要的一點(diǎn)是，網(wǎng)站導(dǎo)航通常出現(xiàn)在網(wǎng)站的頂部，所以如果導(dǎo)航欄被網(wǎng)絡(luò)推廣，流量權(quán)重可以傳遞到目錄頁。

一個(gè)清晰的導(dǎo)航系統(tǒng)是網(wǎng)站設(shè)計(jì)的一個(gè)重要目標(biāo)，它對網(wǎng)站信息架構(gòu)和用戶體驗(yàn)有著重要的影響。在設(shè)計(jì)導(dǎo)航欄時(shí)，網(wǎng)絡(luò)推廣也越來越成為一個(gè)需要考慮的因素。

從SEO的角度來看，在網(wǎng)站導(dǎo)航欄中應(yīng)該注意以下幾點(diǎn)?

l網(wǎng)站導(dǎo)航包含關(guān)鍵詞
一般來說，網(wǎng)站導(dǎo)航一般包括核心關(guān)鍵詞和長尾關(guān)鍵詞。為了使頁面看起來簡潔美觀，通常只選擇一個(gè)關(guān)鍵詞代替，用標(biāo)題標(biāo)簽來表達(dá)完整的關(guān)鍵詞。當(dāng)然，在這里需要提醒的是，為了增加某個(gè)關(guān)鍵詞的密度，一些企業(yè)網(wǎng)站在網(wǎng)站導(dǎo)航中加入了關(guān)鍵詞，并刪除了超鏈接。雖然這是一種策略，但還是有輕微的作弊嫌疑。

l網(wǎng)站導(dǎo)航中合理使用H2-H3標(biāo)簽
除了特殊的SEO單頁優(yōu)化，多個(gè)H1標(biāo)簽將出現(xiàn)。一般來說，正規(guī)網(wǎng)站的每個(gè)獨(dú)立頁面基本上只包含一個(gè)獨(dú)立的H1。因此，在設(shè)計(jì)導(dǎo)航欄時(shí)，需要合理地分配標(biāo)記H2-H3。給出相應(yīng)的列來增加重要性。

l避免內(nèi)容頁面與網(wǎng)站導(dǎo)航關(guān)鍵詞之間的沖突
網(wǎng)站的錨文本是由每個(gè)網(wǎng)絡(luò)推廣人員設(shè)置的，但在這里我們經(jīng)常忽略一個(gè)小細(xì)節(jié)。一般來說，搜索引擎只記錄某個(gè)鏈接在該國出現(xiàn)的錨文本關(guān)鍵詞。基于搜索引擎的爬行順序，從上到下，從左到右，如果關(guān)鍵字出現(xiàn)在導(dǎo)航欄中，盡量不要在內(nèi)容頁面上使用它們。給這個(gè)鏈接相同的錨文本，就可以使用語義相關(guān)的單詞。

2.從用戶角度，導(dǎo)航設(shè)計(jì)要解決什么問題?

l問題一：我在哪里?

用戶可以從任何內(nèi)部頁面進(jìn)入網(wǎng)站，有時(shí)也可以從主頁進(jìn)入，點(diǎn)擊多個(gè)鏈接后，用戶已經(jīng)忘記了如何到達(dá)當(dāng)前頁面。導(dǎo)航系統(tǒng)需要清楚地告訴用戶現(xiàn)在是網(wǎng)站整體結(jié)構(gòu)的哪一部分。頁面設(shè)計(jì)風(fēng)格的統(tǒng)一，面包屑導(dǎo)航的使用，以及主導(dǎo)航系統(tǒng)當(dāng)前類別的突出顯示，都可以幫助用戶判斷他們現(xiàn)在所處的位置。

l問題二：接下來想去哪里?

有時(shí)用戶知道他想要做什么，頁面的導(dǎo)航設(shè)計(jì)告訴用戶點(diǎn)擊哪里來完成他的目標(biāo)。有時(shí)候用戶不知道自己應(yīng)該做什么，網(wǎng)站導(dǎo)航需要給用戶一個(gè)全國性的建議，引導(dǎo)用戶到達(dá)網(wǎng)站目標(biāo)完成頁面。合理的導(dǎo)航和品類名稱，文字中的相關(guān)鏈接，引導(dǎo)用戶將產(chǎn)品放入購物車的按鈕，相關(guān)產(chǎn)品推薦，網(wǎng)站地圖，網(wǎng)站搜索框等都有助于用戶點(diǎn)擊進(jìn)入下一步。

標(biāo)簽：