網站導航設計指南

如下內容由Mockplus團隊翻譯整理，僅供學習交流，Mockplus是更快更簡單的原型設計工具

 

「若是人們在瀏覽網站時遇到困難，他們就會猶豫是否要回到該網站。」

你之前可能經歷過相似的狀況，若是你下載了一個app，卻要花時間去尋找你想要的東西，那麼你不可能長期呆在這裏，甚至不會回來。

那要如何設計出「清晰，簡單，一致」的導航呢？

想象一下，你週日早上出去買本身喜歡的巧克力。走進商店，你首先看到的是貨品分區的名字掛在牆上。（它們夠大，能夠在商店的任何地方看到他們）。

「啊，雜貨區。」你一邊想一邊朝着這個方向走去而後找到了你想要的巧克力。

在徹底相同的場景下，只需一點小小的改動，去掉貨品分區，那你可能對巧克力放在哪一無所知了。

如今，將商店比做你的Web應用程序，將你視爲訪問Web應用程序的客戶。

當你在訪問Web應用程序時，你將經歷與商店中相相似的感覺，並試圖在其中找到一些東西。

「一個用戶沒有必要記住他在你的網頁應用上瀏覽的方式，導航應該是在最前面的，並且應該很是明顯。」

網絡應用程序和商店之間的一個區別就在於，前者是沒有導購站在客戶的身邊，引導客戶。 而導航欄就要充當導購的角色：搜索 - 在搜索框中輸入關鍵字，而後跳到須要的連接列表。

在Web應用程序中，您能夠經過一個層次結構，使用導航欄來做爲引導。

一般，在整個Web App中都有一個靜態全局導航（Global Navigation），其餘主要部分都有一個子導航欄。

導航的兩個主要目的是顯而易見的：

幫助咱們找到想要的東西，並告訴咱們在哪。

但導航也有一些重要且容易被忽視的功能：

它告訴咱們這裏有什麼。

經過讓層次結構可見，導航能夠告訴咱們該應用程序包含了哪些內容，即導航顯示的內容！並且，揭示這款應用的功能可能比指導咱們更重要。

它幫助咱們如何使用該應用程序。

導航的主要任務就在於，它會告訴你從哪裏開始，以及你要選擇什麼。若是作的正確，它應該符合你所須要的全部指令。(這聽起來不錯，可是大多數用戶都會忽略其餘指令。)

它讓咱們對創造它的人更有信心。

每當咱們進入一個網絡應用程序的時候，咱們都會有一種精神冥想：「這些傢伙知道他們在作什麼嗎？」這是讓咱們返回應用程序的主要因素之一。

簡單明瞭，通過深思熟慮後的導航是應用程序能夠利用的最佳機會之一，從而給用戶創造良好的第一印象。

爲回答如何建立衆所周知的「清晰、簡單、一致」的導航，我總結了如下網絡的基本導航慣例:

全局導航——什麼與爲何？

如今不要急着往下看，畢竟他會跟着咱們的。

Web設計人員使用「持久化導航」(或全局導航)來描述在應用程序的每一個頁面上出現的導航元素集合。

持久的導航——用一種平靜、理性的聲音說:

「這個元素在這裏。有些部分會根據你在網頁應用中的位置而有所改變，但它會一直在這裏，並且老是以一樣的方式引導用戶。」

就像商店裏的各個部門的名字同樣，無論你在哪裏，若是你想知道你的位置，你老是會擡起頭來，而後你能夠以本身的方式找到你最喜歡的巧克力。

只要導航出如今每一個頁面的相同位置，而且保持一致的外觀，就能夠當即確認你仍然在同一個應用程序中——這比你想象中的更爲重要，在整個應用程序中保持一致意味着你只須要知道它是如何工做的。

關鍵部分：

關鍵部分——有時被稱爲「主導航」——是應用程序主要部分的連接，也是應用程序的層次結構的最高級。

在某些設計中，持久導航還將包含顯示二級導航的空間：當前部分中的小節列表。

在其餘狀況下，指向一個名稱或點擊它會顯示一個下拉菜單。而在某些狀況下，單擊它將帶你到該部分的首頁，在那裏你會發現輔助導航。

麪包屑導航——您的導航指南

就像「你在這裏」的指示器同樣，麪包屑導航會告訴你你在應用程序的具體位置。

其做用固然是不言而喻的，不佔用太多空間，卻提供了一個方便和一致的方式來作你最須要作的兩件事情：回到上一個頁面或者首頁。

他們之因此被稱爲麪包屑，是由於它們讓人想起漢斯在樹林裏掉落的麪包屑，使得他和格萊特爾能夠找到回家的路。

麪包屑向您顯示從主頁到您所在的位置的路徑，讓你輕鬆地在應用程序中移回到更高的層次結構。

很長一段時間，麪包屑導航是一個奇怪的現象，只在應用程序中才有大量的數據，但如今它們在UI/ UX中是必不可少的。

如下是一些最佳實踐方法：

一、置頂

麪包屑導航在置頂中彷佛是作的最好的，我想這多是由於把它們邊緣化了——讓它們看起來像一個附屬品，就像書或雜誌裏的頁碼同樣。

2.使用>層級

試驗和錯誤彷佛代表，層級之間的最佳分隔符是「大於」符號（>），多是由於它將向下移動可視化。

三、最後一項使用粗體

列表中的最後一個項目應該是當前頁面的名稱，並使其爲粗體，以突出其應有的重要性。 由於這是當前使用頁，天然它不是一個連接。

標籤

選項卡是少數幾個在用戶界面中採用暗喻的例子之一。就像一個三環的活頁夾裏的文件同樣，它們會把東西分紅不一樣的部分。經過點擊它的標籤(或者，在Web上點擊它)來打開內容是很容易的。

若是你還記得購物中心和巧克力，那也很棒了。標籤相似於商場的一個貨架，它會告訴你你的所想之物在哪裏，你能夠在不一樣的貨架上看到不一樣種類的巧克力，供不一樣的人購買。

我認爲這是一個很是優秀的導航選擇。這也是爲何我喜歡他們的緣由：

一、簡潔明瞭

我歷來沒見過任何人——哪怕是「電腦文盲」——看一個選項卡界面，而後說，「嗯，我想知道這些是怎麼作的？」

二、不容錯過

當我作可用性測試時，很吃驚的是，人們在網頁頂部常常忽略水平導航欄。而選項卡的視覺特徵是如此的不同凡響，以致於很難被忽略。由於除了導航，它們很難被誤認爲是其餘的什麼，因此它們建立了導航和內容之間的那種「顯而易見」的劃分。

三、操做平滑

網頁設計師老是在努力讓頁面看起來更有趣一點。若是操做正確，選項卡還能夠爲你的導航潤色，並提供其餘實用功能。

結論 

理解導航多是困難的，實現它也許更加困難。可是不管你作什麼，你都必須確保你實現的導航是終端用戶想要看到的。這很是重要，由於用戶比你想象中的更想快速的找到本身想要的東西。

若是你是一名UI / UX設計師，你喜歡使用哪一種導航風格呢？

備註： 若是你喜歡閱讀這個，請與你的朋友分享。

做者：Aakriti Chugh

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

學習工具，但不受限於某種工具。Mockplus作原型，更快更簡單，如今下載Mockplus，免費體驗暢快的原型設計之旅。