“如果用戶在導(dǎo)航上遇到困難，他們通常會(huì)猶豫是否要回到網(wǎng)站上。”

大多數(shù)人可能有過這樣的體驗(yàn)，當(dāng)你打開了一個(gè)APP，由于沒有導(dǎo)航或者導(dǎo)航設(shè)計(jì)不合理，你花費(fèi)了很多時(shí)間去尋找你需要的東西。那么你很可能不會(huì)逗留在這個(gè)頁面，甚至不會(huì)再想使用這個(gè)網(wǎng)站。

那么你如何創(chuàng)造出“清晰，簡(jiǎn)單，一致”的導(dǎo)航呢？

讓我們來模擬一個(gè)場(chǎng)景，你在一個(gè)星期天的早晨出門去買自己喜歡的巧克力。走進(jìn)商店，你首先會(huì)看到墻上掛著各類商品區(qū)的名稱。（ 因?yàn)樗鼈冏銐虼?，你可以在商店的任何地方看到它們。?/p>

“哦，應(yīng)該是食品雜貨區(qū)！”你心想，一邊朝著那個(gè)方向走，一邊去購買你正在尋找的巧克力。

再來一次，我們使用完全相同的場(chǎng)景，進(jìn)行較小的更改。這次沒有任何商品區(qū)的名稱，你就會(huì)對(duì)這些巧克力的位置一無所知。

現(xiàn)在，把商場(chǎng)看作是你設(shè)計(jì)的Web應(yīng)用程序，而你是訪問Web應(yīng)用程序的用戶。

當(dāng)你訪問一個(gè)網(wǎng)頁APP時(shí)，你會(huì)經(jīng)歷和去商店一樣的過程，你通常會(huì)試圖找到一些東西。然后你會(huì)明白：

“用戶永遠(yuǎn)不會(huì)認(rèn)為他們有必要記住在網(wǎng)站中的訪問路徑。這里應(yīng)該有一個(gè)導(dǎo)航，它應(yīng)該放在頂部，而且是非常明顯的位置。“

網(wǎng)站和商場(chǎng)的一個(gè)區(qū)別在于，前者沒有任何人站在你的身邊，告訴你尋找的東西在哪里。在網(wǎng)頁上，代替尋找方向的功能是搜索——在搜索框中輸入你想搜索的關(guān)鍵詞，然后返回到可能出現(xiàn)的地方的鏈接列表。

在Web應(yīng)用程序中，你可以通過一個(gè)有層次結(jié)構(gòu)的導(dǎo)航來引導(dǎo)你。

通常，在一個(gè)Web應(yīng)用程序的固定位置會(huì)有一個(gè)保持靜態(tài)的導(dǎo)航欄(全局導(dǎo)航)，其他主要分區(qū)導(dǎo)航下都可能有一個(gè)子導(dǎo)航欄。

導(dǎo)航的兩個(gè)主要目的是顯而易見的：

幫助我們找到我們正在尋找的東西，并告訴我們我們?cè)谀睦铩?/strong>

但導(dǎo)航也有一些同樣重要且很容易被忽略的功能：

向用戶展示網(wǎng)站內(nèi)容 

通過使層次結(jié)構(gòu)可見，導(dǎo)航可以告訴我們?cè)摼W(wǎng)站呈現(xiàn)包含哪些部分。而對(duì)于用戶來說，展示這款應(yīng)用的具體內(nèi)容可能比引導(dǎo)或快速定位更重要。

告訴用戶如何使用該網(wǎng)站

如果導(dǎo)航是有效的，它會(huì)提示你從哪里開始，以及你的選擇是什么。如果操作正確，它應(yīng)該會(huì)提供你需要的所有指令。（這聽起來不錯(cuò)，因?yàn)榇蠖鄶?shù)用戶無論如何都會(huì)忽略其他指令。）

加強(qiáng)用戶對(duì)網(wǎng)站建立者的信心

每當(dāng)我們進(jìn)入一個(gè)網(wǎng)站時(shí)，我們都會(huì)好奇：“這些家伙知道他們?cè)谧鍪裁矗?rdquo;這是讓我們回到Web應(yīng)用程序的主要因素之一。

結(jié)構(gòu)清晰，精心設(shè)計(jì)的導(dǎo)航是網(wǎng)站創(chuàng)造良好的第一印象的最佳機(jī)會(huì)之一。

如何創(chuàng)造“清晰，簡(jiǎn)單，一致”的導(dǎo)航？以下是Web的基本導(dǎo)航慣例：

全局導(dǎo)航是什么？為什么要?jiǎng)?chuàng)建它？

Web設(shè)計(jì)人員使用術(shù)語持久導(dǎo)航（或全局導(dǎo)航）來描述出現(xiàn)在應(yīng)用程序的每個(gè)頁面上的一組導(dǎo)航元素。

持久化導(dǎo)航一般會(huì)以平靜而令人舒服的口吻提示你：

“這里是導(dǎo)航部分，有些區(qū)域會(huì)根據(jù)你在Web應(yīng)用程序中所處的位置而有所變化，但它會(huì)一直在這里，并且始終以同樣的方式為你服務(wù)。”

持久化導(dǎo)航就像商店里各區(qū)域的名稱一樣，不管你在哪里，如果你想知道你身在何處，你只需抬頭仰望看看商店名稱。你就可以快速找到自己喜歡的巧克力。

只要導(dǎo)航保持一致的外觀出現(xiàn)在每個(gè)頁面的相同位置，你就能立即確認(rèn)你仍然在同一個(gè)應(yīng)用中 -這比你想象的重要得多。（行為科學(xué)）在整個(gè)應(yīng)用程序中保持一致意味著你只需要弄清楚它是如何工作的。

分區(qū)導(dǎo)航 – 一個(gè)關(guān)鍵部分

分區(qū)導(dǎo)航 - 有時(shí)稱為主導(dǎo)航 - 是應(yīng)用程序主要部分的鏈接，即應(yīng)用程序?qū)哟谓Y(jié)構(gòu)的頂層。

在某些設(shè)計(jì)中，持久化導(dǎo)航還包含顯示二級(jí)導(dǎo)航的空間，即當(dāng)前導(dǎo)航部分的子列表。

在其他情況下，指向一個(gè)分區(qū)名稱或點(diǎn)擊它會(huì)顯示一個(gè)下拉菜單。而且在某些情況下，點(diǎn)擊將帶你到該區(qū)域的首頁，在那里你會(huì)發(fā)現(xiàn)二級(jí)導(dǎo)航。

面包屑導(dǎo)航 – 你的坐標(biāo)

面包屑導(dǎo)航就像“你在這里”的坐標(biāo)一樣，它可以顯示你在一個(gè)Web應(yīng)用程序上的位置。

面包屑導(dǎo)航，顧名思義，它們不會(huì)占用太多空間，但能提供給用戶一個(gè)方便快捷的方式來做你最需要做的兩件事情：返回上一頁或者回到主頁。

這個(gè)導(dǎo)航之所以被稱為面包屑導(dǎo)航，是因?yàn)樗鼈冏屓讼肫鹜捁适?quot;漢賽爾和格萊特“。當(dāng)漢賽爾和格萊特穿過森林時(shí)，不小心迷路了，但是他們發(fā)現(xiàn)在沿途走過的地方都撒下了面包屑，這些面包屑幫助他們找到了回家的路。

面包屑導(dǎo)航會(huì)顯示從主頁到你所在的位置的路徑，并可以輕松地在應(yīng)用程序的層次結(jié)構(gòu)中移回到更高級(jí)別。

在很長(zhǎng)一段時(shí)間里，面包屑導(dǎo)航僅僅應(yīng)用于APP中，在這些APP中的應(yīng)用實(shí)際上只是存儲(chǔ)大量的數(shù)據(jù)，但現(xiàn)在它們?cè)赨I / UX中也是必需的設(shè)計(jì)元素。

以下是實(shí)現(xiàn)這些導(dǎo)航的最佳實(shí)踐

1. 把它們放在頂部

如果將他們放置在頁面的頂部，面包屑導(dǎo)航可以很好地發(fā)揮作用。我認(rèn)為這可能是因?yàn)樵O(shè)計(jì)師使它們與頁面邊緣結(jié)為一體，使他們看起來更自然，就像書籍或雜志的頁碼一樣。

2.級(jí)別之間使用“>”

多次的試驗(yàn)和失敗總結(jié)似乎表明，級(jí)別之間的最佳分隔符是“大于”操作符（>），可能是因?yàn)樗谝曈X上顯示了向下移動(dòng)的效果。

3.最后一欄加粗

列表中的最后一欄應(yīng)該是當(dāng)前頁面的名稱，并將其加粗，從而突出其應(yīng)有的重要性。因?yàn)檫@是你當(dāng)前使用的網(wǎng)頁，所以它自然也不會(huì)是一個(gè)鏈接。

選項(xiàng)卡

選項(xiàng)卡是少數(shù)幾個(gè)在用戶界面中實(shí)際使用物理隱喻的例子之一。它就像是三環(huán)活頁夾中的標(biāo)簽分隔符或文件抽屜中的文件夾標(biāo)簽，可以將任何東西分成不同的部分。通過點(diǎn)擊它的標(biāo)簽(或者，在Web上點(diǎn)擊它)，你可以很容易地打開其中某個(gè)部分。

如果你還沉浸在購物中心和巧克力的例子中，那好。標(biāo)簽就類似于商場(chǎng)某一個(gè)部門里的貨架，他們可以幫助你精確定位商品。你可以在不同的貨架上看到不同種類的巧克力，供需要的人購買。

我認(rèn)為它們是一個(gè)非常棒的導(dǎo)航選擇。以下是為什么我喜歡它們的原因：

1.淺顯易懂

我從來沒有見過任何人（不管是不是“計(jì)算機(jī)文盲） 看了標(biāo)簽的界面會(huì)說：“嗯，我不知道那些標(biāo)簽是干嘛的？“

2.顯而易見

當(dāng)我做可用性測(cè)試時(shí)，令我很驚訝的是，用戶往往會(huì)忽略網(wǎng)頁頂部的水平導(dǎo)航欄。但是選項(xiàng)卡在視覺上非常獨(dú)特，因此很難被忽略。而且除了導(dǎo)航，它們很難被誤認(rèn)為是其他什么，所以它們成功創(chuàng)建了導(dǎo)航和內(nèi)容之間的那種顯而易見的劃分。

3.并非華而不實(shí)

網(wǎng)頁設(shè)計(jì)師總是在努力讓頁面更具視覺上的趣味性。但如果設(shè)計(jì)得當(dāng)，選項(xiàng)卡也可以更加精美，并提供有用的功能。

結(jié)論

理解導(dǎo)航可能很困難，但要想實(shí)現(xiàn)它更加困難。但是無論你設(shè)計(jì)，你都必須確保你的導(dǎo)航能帶給用戶最終想要看到的東西。這很重要，因?yàn)樗饶阆胂笾懈Ｍ?ldquo;買到喜歡的巧克力“。

如果你是一名UI / UX設(shè)計(jì)師，你使用的是哪種導(dǎo)航風(fēng)格呢？

作者：Aakriti Chugh

地址：https://uxplanet.org/designing-navigation-labels-and-breadcrumbs-2a6220bb0cc6