“如果人們在瀏覽網(wǎng)站時(shí)遇到困難，他們就會(huì )猶豫是否要回到該網(wǎng)站?！?/p>
你以前可能經(jīng)歷過(guò)類(lèi)似的情況，如果你下載了一個(gè)app，卻要花時(shí)間去尋找你想要的東西，那么你不可能長(cháng)期呆在這里，甚至不會(huì )回來(lái)。
那要如何設計出“清晰，簡(jiǎn)單，一致”的導航呢？
想象一下，你周日早上出去買(mǎi)自己喜歡的巧克力。走進(jìn)商店，你首先看到的是貨品分區的名字掛在墻上。（它們夠大，可以在商店的任何地方看到他們）。
“啊，雜貨區?！蹦阋贿呄胍贿叧?zhù)這個(gè)方向走去然后找到了你想要的巧克力。
在完全相同的場(chǎng)景下，只需一點(diǎn)小小的改動(dòng)，去掉貨品分區，那你可能對巧克力放在哪一無(wú)所知了。
現在，將商店比作你的Web應用程序，將你視為訪(fǎng)問(wèn)Web應用程序的客戶(hù)。
當你在訪(fǎng)問(wèn)Web應用程序時(shí)，你將經(jīng)歷與商店中相類(lèi)似的感受，并試圖在其中找到一些東西。
“一個(gè)用戶(hù)沒(méi)有必要記住他在你的網(wǎng)頁(yè)應用上瀏覽的方式，導航應該是在最前面的，而且應該非常明顯?！?/p>
網(wǎng)絡(luò )應用程序和商店之間的一個(gè)區別就在于，前者是沒(méi)有導購站在客戶(hù)的身邊，引導客戶(hù)。 而導航欄就要充當導購的角色：搜索 - 在搜索框中輸入關(guān)鍵字，然后跳到需要的鏈接列表。
在Web應用程序中，您可以通過(guò)一個(gè)層次結構，使用導航欄來(lái)作為引導。
通常，在整個(gè)Web App中都有一個(gè)靜態(tài)全局導航（Global Navigation），其他主要部分都有一個(gè)子導航欄。
導航的兩個(gè)主要目的是顯而易見(jiàn)的：
幫助我們找到想要的東西，并告訴我們在哪。
但導航也有一些重要且容易被忽視的功能：
它告訴我們這里有什么。
通過(guò)讓層次結構可見(jiàn)，導航可以告訴我們該應用程序包含了哪些內容，即導航顯示的內容！而且，揭示這款應用的功能可能比指導我們更重要。
它幫助我們如何使用該應用程序。
導航的主要任務(wù)就在于，它會(huì )告訴你從哪里開(kāi)始，以及你要選擇什么。如果做的正確，它應該符合你所需要的所有指令。(這聽(tīng)起來(lái)不錯，但是大多數用戶(hù)都會(huì )忽略其他指令。)
它讓我們對創(chuàng )造它的人更有信心。
每當我們進(jìn)入一個(gè)網(wǎng)絡(luò )應用程序的時(shí)候，我們都會(huì )有一種精神冥想：“這些家伙知道他們在做什么嗎？”這是讓我們返回應用程序的主要因素之一。
簡(jiǎn)單明了，經(jīng)過(guò)深思熟慮后的導航是應用程序可以利用的最佳機會(huì )之一，從而給用戶(hù)創(chuàng )造良好的第一印象。
為回答如何創(chuàng )建眾所周知的“清晰、簡(jiǎn)單、一致”的導航，我總結了以下網(wǎng)絡(luò )的基本導航慣例:
全局導航——什么與為什么？
現在不要急著(zhù)往下看，畢竟他會(huì )跟著(zhù)我們的。
Web設計人員使用“持久化導航”(或全局導航)來(lái)描述在應用程序的每個(gè)頁(yè)面上出現的導航元素集合。
持久的導航——用一種平靜、理性的聲音說(shuō):
“這個(gè)元素在這里。有些部分會(huì )根據你在網(wǎng)頁(yè)應用中的位置而有所改變，但它會(huì )一直在這里，而且總是以同樣的方式引導用戶(hù)?！?/p>
就像商店里的各個(gè)部門(mén)的名字一樣，不管你在哪里，如果你想知道你的位置，你總是會(huì )抬起頭來(lái)，然后你可以以自己的方式找到你最喜歡的巧克力。
只要導航出現在每個(gè)頁(yè)面的相同位置，并且保持一致的外觀(guān)，就可以立即確認你仍然在同一個(gè)應用程序中——這比你想象中的更為重要，在整個(gè)應用程序中保持一致意味著(zhù)你只需要知道它是如何工作的。
關(guān)鍵部分：
關(guān)鍵部分——有時(shí)被稱(chēng)為“主導航”——是應用程序主要部分的鏈接，也是應用程序的層次結構的最高級。
在某些設計中，持久導航還將包含顯示二級導航的空間：當前部分中的小節列表。
在其他情況下，指向一個(gè)名稱(chēng)或點(diǎn)擊它會(huì )顯示一個(gè)下拉菜單。而在某些情況下，單擊它將帶你到該部分的首頁(yè)，在那里你會(huì )發(fā)現輔助導航。
面包屑導航——您的導航指南
就像“你在這里”的指示器一樣，面包屑導航會(huì )告訴你你在應用程序的具體位置。
其作用當然是不言而喻的，不占用太多空間，卻提供了一個(gè)方便和一致的方式來(lái)做你最需要做的兩件事情：回到上一個(gè)頁(yè)面或者首頁(yè)。
他們之所以被稱(chēng)為面包屑，是因為它們讓人想起漢斯在樹(shù)林里掉落的面包屑，使得他和格萊特爾可以找到回家的路。
面包屑向您顯示從主頁(yè)到您所在的位置的路徑，讓你輕松地在應用程序中移回到更高的層次結構。
很長(cháng)一段時(shí)間，面包屑導航是一個(gè)奇怪的現象，只在應用程序中才有大量的數據，但現在它們在UI/ UX中是必不可少的。
以下是一些最佳實(shí)踐方法：
1、置頂
面包屑導航在置頂中似乎是做的最好的，我想這可能是因為把它們邊緣化了——讓它們看起來(lái)像一個(gè)附屬品，就像書(shū)或雜志里的頁(yè)碼一樣。
2.使用>層級
試驗和錯誤似乎表明，層級之間的最佳分隔符是“大于”符號（>），可能是因為它將向下移動(dòng)可視化。
3、最后一項使用粗體
列表中的最后一個(gè)項目應該是當前頁(yè)面的名稱(chēng)，并使其為粗體，以突出其應有的重要性。 因為這是當前使用頁(yè)，自然它不是一個(gè)鏈接。
標簽
選項卡是少數幾個(gè)在用戶(hù)界面中采用暗喻的例子之一。就像一個(gè)三環(huán)的活頁(yè)夾里的文件一樣，它們會(huì )把東西分成不同的部分。通過(guò)點(diǎn)擊它的標簽(或者，在Web上點(diǎn)擊它)來(lái)打開(kāi)內容是很容易的。
如果你還記得購物中心和巧克力，那也很棒了。標簽類(lèi)似于商場(chǎng)的一個(gè)貨架，它會(huì )告訴你你的所想之物在哪里，你可以在不同的貨架上看到不同種類(lèi)的巧克力，供不同的人購買(mǎi)。
我認為這是一個(gè)非常優(yōu)秀的導航選擇。這也是為什么我喜歡他們的原因：
1、簡(jiǎn)潔明了
我從來(lái)沒(méi)見(jiàn)過(guò)任何人——哪怕是“電腦文盲”——看一個(gè)選項卡界面，然后說(shuō)，“嗯，我想知道這些是怎么做的？”
2、不容錯過(guò)
當我做可用性測試時(shí)，很吃驚的是，人們在網(wǎng)頁(yè)頂部經(jīng)常忽略水平導航欄。而選項卡的視覺(jué)特征是如此的與眾不同，以至于很難被忽略。因為除了導航，它們很難被誤認為是其他的什么，所以它們創(chuàng )建了導航和內容之間的那種“顯而易見(jiàn)”的劃分。
3、操作平滑
網(wǎng)頁(yè)設計師總是在努力讓頁(yè)面看起來(lái)更有趣一點(diǎn)。如果操作正確，選項卡還可以為你的導航潤色，并提供其他實(shí)用功能。
結論
理解導航可能是困難的，實(shí)現它也許更加困難。但是無(wú)論你做什么，你都必須確保你實(shí)現的導航是終端用戶(hù)想要看到的。這非常重要，因為用戶(hù)比你想象中的更想快速的找到自己想要的東西。
作者：Aakriti Chugh
聯(lián)系客服
