UI界面中的導(dǎo)航組件的設(shè)計(jì)所包含內(nèi)容和設(shè)計(jì)指南

首先一起看一下什么是導(dǎo)航設(shè)計(jì)組件？我們?cè)?a href="/" target="_self">UI用戶界面中使用導(dǎo)航組件來幫助用戶在應(yīng)用程序或網(wǎng)站上找到自己的方式，以便他們能夠輕松實(shí)現(xiàn)目標(biāo)。

具體導(dǎo)航所包含的組件有：
1、搜索框
2、面包屑
3、翻頁
4、標(biāo)簽
5、圖標(biāo)
6、導(dǎo)航菜單

1. 搜索框
搜索框允許用戶搜索特定關(guān)鍵詞，并應(yīng)返回與它們最相關(guān)的搜索結(jié)果。
a.搜索框使用簡(jiǎn)單明了的設(shè)計(jì)，不需要額外的只會(huì)混淆用戶的無用元素。
b.將搜索框放在用戶希望找到的位置。

2.面包屑
面包屑允許用戶識(shí)別他們當(dāng)前的位置，并為他們提供一個(gè)可點(diǎn)擊的頁面軌跡作為導(dǎo)航。
a.不要用面包屑導(dǎo)航替換部分中的全局導(dǎo)航欄或本地導(dǎo)航。
b.面包屑導(dǎo)航不應(yīng)顯示會(huì)話歷史記錄，而是顯示用戶在站點(diǎn)層次結(jié)構(gòu)中的當(dāng)前位置。
c.面包屑導(dǎo)航中的最后一項(xiàng)應(yīng)該始終是當(dāng)前頁面。
d.確保從面包屑導(dǎo)航中的當(dāng)前頁面中刪除鏈接。
e.對(duì)于 1 或 2 級(jí)深度的網(wǎng)站，沒有必要使用面包屑導(dǎo)航。

3.翻頁
翻頁元素用于將內(nèi)容劃分為頁面，并允許用戶根據(jù)需要通過跳過來輕松導(dǎo)航它們。
a.對(duì)分頁組件使用簡(jiǎn)單明了的布局。
b.使用顏色突出顯示當(dāng)前頁面，以區(qū)別于其他頁面。

4.標(biāo)簽
標(biāo)簽為用戶提供了瀏覽某些類別的內(nèi)容的可能性。
a.在標(biāo)簽組件中使用相關(guān)關(guān)鍵字。
b.將標(biāo)簽放置在它們鏈接到的內(nèi)容附近。

5.圖標(biāo)
圖標(biāo)是最直觀的符號(hào)，尤其對(duì)于移動(dòng)端產(chǎn)品而言，以引導(dǎo)用戶更輕松地通過UI界面。它們可以用在按鈕上，也可以單獨(dú)使用，它們應(yīng)該代表與它們交互后所采取的操作。
a.將圖標(biāo)放在標(biāo)簽的左側(cè)。因?yàn)楦鶕?jù)用戶的瀏覽視線的路徑，是從左側(cè)開始掃描，左側(cè)有一個(gè)圖標(biāo)可以幫助他們更輕松地瀏覽網(wǎng)站或應(yīng)用程序。
b.不要使用太多的圖形細(xì)節(jié)。
c.默認(rèn)情況下，圖標(biāo)很小，添加大量元素可能會(huì)使用戶混淆它們所代表的含義。
d.對(duì)于移動(dòng)設(shè)備，請(qǐng)使用至少 16x16 像素的圖標(biāo)，以確保它們易于查看和點(diǎn)擊。

6.導(dǎo)航菜單
導(dǎo)航菜單通過提供可隨時(shí)訪問的頁面列表來幫助用戶輕松瀏覽應(yīng)用程序或網(wǎng)站，無論他們?cè)趹?yīng)用程序或網(wǎng)站上的哪個(gè)位置。
a.確保為頁面使用有代表性的標(biāo)簽。
b.鏈接到目標(biāo)頁面。
c.對(duì)具有復(fù)雜IA架構(gòu)的網(wǎng)站使用下拉導(dǎo)航菜單。
d.對(duì)于移動(dòng)設(shè)備的響應(yīng)能力，導(dǎo)航菜單應(yīng)轉(zhuǎn)換為漢堡菜單。

最后，導(dǎo)航設(shè)計(jì)組件是我們幫助用戶瀏覽網(wǎng)站或應(yīng)用程序的最佳通道。通過使用此處介紹的元素，我們確保我們的目標(biāo)受眾能夠通過使用我們的產(chǎn)品有效地實(shí)現(xiàn)他們的目標(biāo)。在為您的產(chǎn)品進(jìn)行設(shè)計(jì)時(shí)，起到指南的作用。