久久九九久精品国产_成人区精品一区二区婷婷_国产激情一区二区三区_窝窝午夜理论片影院

　　面包屑是眾所周知的導(dǎo)航工具，它經(jīng)常出現(xiàn)在頁(yè)面內(nèi)容的頂部，告訴你你在哪里。它小巧、方便、普通、簡(jiǎn)單。但是，即使是這樣的UI控件，在設(shè)計(jì)上也是很精致的。今天就來(lái)說(shuō)說(shuō)面包屑吧~

　　面包屑作為輔助導(dǎo)航系統(tǒng)，可以幫助用戶清晰定位自己的網(wǎng)站。這個(gè)詞來(lái)源于童話里帶著面包屑回家的孩子，網(wǎng)頁(yè)里的面包屑是幫助用戶找到自己位置的UI控件。

　　面包屑通過(guò)路徑顯示告訴用戶他們?cè)谀睦铮裉斓奈恼聦⒂懻撊绾卧O(shè)計(jì)一個(gè)可用的網(wǎng)頁(yè)面包屑，并通過(guò)最佳實(shí)踐展示面包屑的正確使用。

　　面包屑導(dǎo)航提供可用性

　　面包屑作為一種視覺(jué)指南，為用戶揭示了網(wǎng)頁(yè)的層次結(jié)構(gòu)。因此，面包屑已經(jīng)成為用戶了解網(wǎng)站背景信息、幫助用戶理解以下問(wèn)題答案的重要途徑：

　　我在哪里？根據(jù)整個(gè)網(wǎng)站的層次結(jié)構(gòu)，面包屑可以讓用戶知道自己在哪里。還能去哪里？面包屑提高了整個(gè)網(wǎng)站的可搜索性。面包屑的存在揭示了整個(gè)網(wǎng)站的結(jié)構(gòu)，用戶也知道網(wǎng)站的其他部分是什么。應(yīng)該多瀏覽嗎？面包屑揭示網(wǎng)站有更多內(nèi)容可以探索，鼓勵(lì)用戶多瀏覽。面包屑的出現(xiàn)反過(guò)來(lái)降低了網(wǎng)站的跳轉(zhuǎn)率。

　　減少操作次數(shù)

　　從可用性的角度來(lái)看，面包屑減少了用戶跳轉(zhuǎn)到更高級(jí)頁(yè)面的操作次數(shù)，從而避免了用戶使用瀏覽器的后退按鈕和翻找導(dǎo)航來(lái)查找更高級(jí)頁(yè)面的復(fù)雜交互。

　　占用空間小

　　寬度是一個(gè)設(shè)計(jì)元素，在頁(yè)面上占據(jù)很小的空間。基本以鏈接文本的形式存在，通常只有一行。

　　面包屑不會(huì)打擾用戶

　　這種小的設(shè)計(jì)元素占用的空間很小，但是給用戶帶來(lái)的便利卻比可能出現(xiàn)的問(wèn)題和麻煩更多。

　　什么時(shí)候用面包屑？

　　網(wǎng)站是否使用面包屑主要取決于網(wǎng)站的結(jié)構(gòu)。看看你的網(wǎng)站地圖或者整體結(jié)構(gòu)圖，分析使用面包屑是否可以提高用戶在網(wǎng)站內(nèi)不同類別和目錄導(dǎo)航的便利性：

　　當(dāng)你的網(wǎng)站有一個(gè)多層次的線性結(jié)構(gòu)，有明確的分類和組織時(shí)，你應(yīng)該使用面包屑。例如，在一個(gè)產(chǎn)品種類繁多的電子商務(wù)網(wǎng)站中，面包屑是相當(dāng)有用的。當(dāng)網(wǎng)站沒(méi)有邏輯層次結(jié)構(gòu)時(shí)，不要使用面包屑。

　　面包屑的類型

　　廣度是基于網(wǎng)站邏輯結(jié)構(gòu)的導(dǎo)航組件，可以基于位置和路徑顯示，也可以基于屬性存在。

　　基于位置的面包屑

　　基于位置的面包屑設(shè)計(jì)通常可以反映網(wǎng)站的結(jié)構(gòu)特征。它們直接向訪問(wèn)者展示網(wǎng)站的層次結(jié)構(gòu)，包括多個(gè)層次(通常超過(guò)2個(gè)層次)。這種層次化的面包屑對(duì)于從外部來(lái)源(如搜索引擎)進(jìn)入網(wǎng)站的用戶有明顯的引導(dǎo)作用。基于路徑的面包屑

　　基于路徑的面包屑通常被稱為“歷史足跡”，它顯示的不是網(wǎng)站結(jié)構(gòu)，而是訪問(wèn)者到達(dá)特定頁(yè)面的完整路徑。這個(gè)面包屑路徑不是靜態(tài)的，而是動(dòng)態(tài)生成的。基于路徑的面包屑有時(shí)會(huì)幫助用戶，但有時(shí)會(huì)讓用戶感到困惑。——有些用戶瀏覽網(wǎng)站時(shí)，瀏覽路徑過(guò)于天馬行空。這種基于路徑的面包屑可以幫助他們記錄，而無(wú)需瀏覽歷史或使用瀏覽器的后退按鈕返回到特定位置。此外，這種基于路徑的面包屑對(duì)于一次到達(dá)特定位置的用戶是沒(méi)有用的。

　　以下是使用基于路徑的面包屑導(dǎo)航的案例和原理描述：

　　基于屬性的面包屑

　　這種基于屬性的面包屑在電子商務(wù)網(wǎng)站中很常見(jiàn)，產(chǎn)品往往根據(jù)類別和屬性組織成不同的子目錄。基于屬性的分類使用戶更容易理解產(chǎn)品之間的關(guān)系，并提供更多不同的瀏覽路徑。

　　等級(jí)制度還是歷史？

　　根據(jù)實(shí)踐經(jīng)驗(yàn)，在大多數(shù)情況下，面包屑更適合展現(xiàn)等級(jí)制度而不是瀏覽歷史。因此，基于位置和屬性的面包屑被廣泛使用，而基于路徑的面包屑相對(duì)較少。

　　面包屑導(dǎo)航最佳實(shí)踐

　　當(dāng)您開(kāi)始設(shè)計(jì)面包屑導(dǎo)航時(shí)，您應(yīng)該記住以下幾點(diǎn)：

　　1.不要用面包屑代替網(wǎng)頁(yè)的主導(dǎo)航系統(tǒng)

　　面包屑只是輔助導(dǎo)航系統(tǒng)，不能代替主導(dǎo)航系統(tǒng)。記住，為了方便用戶，它只是一個(gè)次要選項(xiàng)，用于到達(dá)其他級(jí)別的快速定位鏈接系統(tǒng)。

　　2.不要將當(dāng)前頁(yè)面鏈接添加到面包屑中

　　面包屑的最后一級(jí)是當(dāng)前頁(yè)面，這個(gè)項(xiàng)目不應(yīng)該在面包屑中鏈接，因?yàn)樗黄鸬秸故竞投ㄎ坏淖饔茫瑳](méi)有任何意義。

　　3.使用分隔符

　　在面包屑中，用于分隔不同級(jí)別的最常見(jiàn)的面包屑大于符號(hào)(

　　)，常用的方法是“父類別”

　　子類別”。當(dāng)然，分隔符的使用并不限于此，包括箭頭()、書(shū)名()和斜線(//)。使用哪種分隔符通常取決于整體風(fēng)格和設(shè)計(jì)師的偏好。

　　4.選擇合適的尺寸和間距

　　設(shè)計(jì)時(shí)要仔細(xì)考慮大小和間距，不同面包屑層次之間要有足夠的間距，保證用戶能夠識(shí)別。當(dāng)然，你也不希望面包屑在頁(yè)面上占據(jù)太多空間。如果面包屑比頂導(dǎo)航大，看起來(lái)會(huì)很尷尬。

　　5.不要讓它成為視覺(jué)焦點(diǎn)

　　面包屑本身就是輔助導(dǎo)航。如果使用過(guò)于花哨的字體和醒目的顏色，會(huì)讓它顯得鋪天蓋地，過(guò)于醒目。應(yīng)該不是用戶在瀏覽時(shí)的視覺(jué)焦點(diǎn)。下面的面包屑設(shè)計(jì)還不錯(cuò)，但是太顯眼了，比頂部導(dǎo)航更吸引用戶的注意力。Google的面包屑設(shè)計(jì)并不搶眼，但是用戶還是可以很好的使用。

　　6.不要在移動(dòng)頁(yè)面上使用面包屑

　　如果你認(rèn)為你想在手機(jī)頁(yè)面上使用面包屑，說(shuō)明你的手機(jī)深圳網(wǎng)頁(yè)設(shè)計(jì)有問(wèn)題：可能是網(wǎng)站太復(fù)雜(嵌套層次太深)，不適合手機(jī)使用場(chǎng)景。為了解決問(wèn)題，你要盡量簡(jiǎn)化整個(gè)系統(tǒng)，保證手機(jī)上不出現(xiàn)面包屑。

　　標(biāo)簽

　　面包屑讓用戶更容易瀏覽整個(gè)網(wǎng)站，回到上級(jí)頁(yè)面，找到相關(guān)產(chǎn)品，對(duì)整個(gè)網(wǎng)站結(jié)構(gòu)有意義。它的功能并不復(fù)雜，主要功能是增加易用性，所以千萬(wàn)不要把面包屑復(fù)雜化。