對于網(wǎng)站的導(dǎo)航設(shè)計有很對人認(rèn)為這些并不是什么重要的事兒，但是今天成都創(chuàng)新互聯(lián)的網(wǎng)站建設(shè)工程師則要告訴大家，您這么想并不是錯，可能只是理解的稍微有點偏差和少分析了一部分，下面我們就一起來詳細(xì)的了解一下吧。

“如果人們在瀏覽網(wǎng)站時遇到困難，他們就會猶豫是否要回到該網(wǎng)站?！?br />
你以前可能經(jīng)歷過類似的情況，如果你下載了一個app，卻要花時間去尋找你想要的東西，那么你不可能長期呆在這里，甚至不會回來。

那要做網(wǎng)站如何設(shè)計出“清晰，簡單，一致”的導(dǎo)航呢？

想象一下，你周日早上出去買自己喜歡的巧克力。走進商店，你首先看到的是貨品分區(qū)的名字掛在墻上。（它們夠大，可以在商店的任何地方看到他們）。

“啊，雜貨區(qū)?！蹦阋贿呄胍贿叧@個方向走去然后找到了你想要的巧克力。

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

現(xiàn)在，將商店比作你的Web應(yīng)用程序，將你視為訪問Web應(yīng)用程序的客戶。

當(dāng)你在訪問Web應(yīng)用程序時，你將經(jīng)歷與商店中相類似的感受，并試圖在其中找到一些東西。

“一個用戶沒有必要記住他在你的網(wǎng)頁應(yīng)用上瀏覽的方式，導(dǎo)航應(yīng)該是在最前面的，而且應(yīng)該非常明顯?！?br />
成都做網(wǎng)站和商店之間的一個區(qū)別就在于，前者是沒有導(dǎo)購站在客戶的身邊，引導(dǎo)客戶。 而導(dǎo)航就要充當(dāng)導(dǎo)購的角色：搜索 - 在搜索框中輸入關(guān)鍵字，然后跳到需要的鏈接列表。

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

通常，在整個Web App中都有一個靜態(tài)全局導(dǎo)航（Global Navigation），其他主要部分都有一個子導(dǎo)航。

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

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

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

它告訴我們這里有什么

通過讓層次結(jié)構(gòu)可見，導(dǎo)航可以告訴我們該應(yīng)用程序包含了哪些內(nèi)容，即導(dǎo)航顯示的內(nèi)容！而且，揭示這款應(yīng)用的功能可能比指導(dǎo)我們更重要。

它幫助我們?nèi)绾问褂迷搼?yīng)用程序

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

它讓我們對創(chuàng)造它的人更有信心

每當(dāng)我們進入一個網(wǎng)絡(luò)應(yīng)用程序的時候，我們都會有一種精神冥想：“這些家伙知道他們在做什么嗎？”這是讓我們返回應(yīng)用程序的主要因素之一。

簡單明了，經(jīng)過深思熟慮后的導(dǎo)航是應(yīng)用程序可以利用的最佳機會之一，從而給用戶創(chuàng)造良好的第一印象。

為回答如何創(chuàng)建眾所周知的“清晰、簡單、一致”的導(dǎo)航，我總結(jié)了以下網(wǎng)絡(luò)的基本導(dǎo)航慣例:

全局導(dǎo)航——什么與為什么？

現(xiàn)在不要急著往下看，畢竟他會跟著我們的。

網(wǎng)站設(shè)計人員使用“持久化導(dǎo)航”(或全局導(dǎo)航)來描述在應(yīng)用程序的每個頁面上出現(xiàn)的導(dǎo)航元素集合。

持久的導(dǎo)航——用一種平靜、理性的聲音說:

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

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

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

關(guān)鍵部分：

關(guān)鍵部分——有時被稱為“主導(dǎo)航”——是應(yīng)用程序主要部分的鏈接，也是應(yīng)用程序的層次結(jié)構(gòu)的最高級。

在某些設(shè)計中，持久導(dǎo)航還將包含顯示二級導(dǎo)航的空間：當(dāng)前部分中的小節(jié)列表。

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

成都做網(wǎng)站的面包屑導(dǎo)航——您的導(dǎo)航指南

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

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

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

網(wǎng)站建設(shè)的面包屑向您顯示從主頁到您所在的位置的路徑，讓你輕松地在應(yīng)用程序中移回到更高的層次結(jié)構(gòu)。

很長一段時間，面包屑導(dǎo)航是一個奇怪的現(xiàn)象，只在應(yīng)用程序中才有大量的數(shù)據(jù)，但現(xiàn)在它們在Ui/ UX中是必不可少的。

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

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

2.使用>層級

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

3、最后一項使用粗體

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

標(biāo)簽

選項卡是少數(shù)幾個在用戶界面中采用暗喻的例子之一。就像一個三環(huán)的活頁夾里的文件一樣，它們會把東西分成不同的部分。通過點擊它的標(biāo)簽(或者，在做好的網(wǎng)站上點擊它)來打開內(nèi)容是很容易的。

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

我認(rèn)為這是一個非常優(yōu)秀的導(dǎo)航選擇。這也是為什么我喜歡他們的原因：

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

不容錯過

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

操作平滑

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

對于網(wǎng)站建設(shè)的導(dǎo)航設(shè)計，我們可以說看起來并不是很難，但是要設(shè)計到用戶可以更好的使用，其實并不是一件容易的事情。以上就是從事成都做網(wǎng)站12年的創(chuàng)新互聯(lián)網(wǎng)站建設(shè)工程師的分享，希望大家能夠喜歡。

當(dāng)前題目：淺談:成都做網(wǎng)站的導(dǎo)航設(shè)計指南
網(wǎng)站地址：http://jinyejixie.com/news36/321636.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供網(wǎng)站內(nèi)鏈、網(wǎng)頁設(shè)計公司、標(biāo)簽優(yōu)化、手機網(wǎng)站建設(shè)、網(wǎng)站策劃、外貿(mào)建站

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請盡快告知，我們將會在第一時間刪除。文章觀點不代表本網(wǎng)站立場，如需處理請聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時需注明來源： 創(chuàng)新互聯(lián)