在網站設計中我們應該如何設計出“清晰，簡單，大氣”的網站導航條呢?

你以前可能經歷過“當你在瀏覽網站時遇到困難，你是否會生出是否要關掉該網站的念頭。”畢竟現在同類競爭很激烈，如果你的網站讓用戶瀏覽困難時，他就可能離開，訪問競爭對手的網站。

如果還是不理解，那么想象一下，你周日早上出去打算購買自己喜歡的商品這里比如是草莓餅干。走進超市的時候，你首先看到的是貨品分區的名字掛在墻上。(假設它們夠大，可以在商店的任何地方看到他們)。

“啊，零食專區區。”你一邊想一邊朝著這個方向走去然后找到了你想要的草莓餅干。

在完全相同的場景下，只需一點小小的改動，去掉貨品分區，那你可能對草莓餅干放在哪一無所知了。

現在，將超市比作你的Web應用程序（網站），將你視為訪問Web應用程序的客戶。

當你在訪問Web應用程序時，你將經歷與超市中相類似的感受，并試圖在其中找到一些東西。

“一個用戶沒有必要記住他在你的網頁應用上瀏覽的方式，導航應該是在最前面的，而且應該非常明顯。”

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

在Web應用程序中，您可以通過一個層次結構，使用導航欄來作為引導。

通常，在整個Web App中都有一個靜態全局導航(Global Navigation)，其他主要部分都有一個子導航欄。

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

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

但導航也有一些重要且容易被忽視的功能：它告訴我們這里有什么。

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

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

導航的主要任務就在于，它會告訴你從哪里開始，以及你要選擇什么。如果做的正確，它應該符合你所需要的所有指令。(這聽起來不錯，但是大多數用戶都會忽略其他指令。)

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

簡單明了，經過深思熟慮后的導航是應用程序可以利用的最佳機會之一，從而給用戶創造良好的第一印象。

為回答如何創建眾所周知的“清晰、簡單、一致”的導航，我總結了以下網絡的基本導航慣例:

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

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

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

就像商店里的各個部門的名字一樣，不管你在哪里，如果你想知道你的位置，你總是會抬起頭來，然后你可以以自己的方式找到你最喜歡的巧克力。

只要導航出現在每個頁面的相同位置，并且保持一致的外觀，就可以立即確認你仍然在同一個應用程序中——這比你想象中的更為重要，在整個應用程序中保持一致意味著你只需要知道它是如何工作的。

關鍵部分：

關鍵部分——有時被稱為“主導航”——是應用程序主要部分的鏈接，也是應用程序的層次結構的最高級。

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

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

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

就像“你在這里”的指示器一樣，面包屑導航會告訴你你在應用程序的具體位置。

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

他們之所以被稱為面包屑，是因為它們讓人想起漢斯在樹林里掉落的面包屑，使得他和格萊特爾可以找到回家的路。

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

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

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

1、置頂

面包屑導航在置頂中似乎是做的最好的，我想這可能是因為把它們邊緣化了——讓它們看起來像一個附屬品，就像書或雜志里的頁碼一樣。

2.使用>層級

試驗和錯誤似乎表明，層級之間的最佳分隔符是“大于”符號(>)，可能是因為它將向下移動可視化。

3、最后一項使用粗體

列表中的最后一個項目應該是當前頁面的名稱，并使其為粗體，以突出其應有的重要性。 因為這是當前使用頁，自然它不是一個鏈接。

標簽

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

如果你還記得購物中心和巧克力，那也很棒了。標簽類似于商場的一個貨架，它會告訴你你的所想之物在哪里，你可以在不同的貨架上看到不同種類的巧克力，供不同的人購買。

我認為這是一個非常優秀的導航選擇。這也是為什么我喜歡他們的原因：

1、簡潔明了

我從來沒見過任何人——哪怕是“電腦文盲”——看一個選項卡界面，然后說，“嗯，我想知道這些是怎么做的?”

2、不容錯過

當我做可用性測試時，很吃驚的是，人們在網頁頂部經常忽略水平導航欄。而選項卡的視覺特征是如此的與眾不同，以至于很難被忽略。因為除了導航，它們很難被誤認為是其他的什么，所以它們創建了導航和內容之間的那種“顯而易見”的劃分。

3、操作平滑

網頁設計師總是在努力讓頁面看起來更有趣一點。如果操作正確，選項卡還可以為你的導航潤色，并提供其他實用功能。

結論

理解導航可能是困難的，實現它也許更加困難。但是無論你做什么，你都必須確保你實現的導航是終端用戶想要看到的。這非常重要，因為用戶比你想象中的更想快速的找到自己想要的東西。如果想要設計更好的導航，更加貼切用戶使用習慣，那么你可以咨詢麥格網站設計，廈門地區專業的網站設計公司