來(lái)點實實在在能(néng)給設計(jì)師(£¥shī)幫上(shàng)忙的(de)！面包屑£ε&是(shì)有(yǒu)效提升購(gòu)物(wù)體(tǐ)驗的(d≥£e)一(yī)大(dà)殺器(qì)，很(hěn)多(duō)電(di‌​≠àn)商網站(zhàn)（亞馬遜也(yě)中槍）這(zhè)方面都(dōu)不(bù)夠細>‌心，今天@AnyForWeb_UDC 的(de)同學總結了(le)8個®←Ω≠(gè)特别實用(yòng)的(de)面包屑導航設計(jì)技(jì)巧，•φ→ 有(yǒu)對(duì)比有(yǒu)案例，嚼勁十足，來(lái)一←£&≥(yī)頓設計(jì)大(dà)餐吧(ba)！

　　@AnyForWeb_UDC ：網站(zhàn)中的(de)面包屑導航（Breadcr↕∑÷umb Navigation）是(shì)一(yī)種作(zuò)為(wèi)輔助和(hé)補充的∏>(de)導航方式，它能(néng)幫助用(yòng)戶明(míng)确當下(xià)所在的 ♦(de)網站(zhàn)內(nèi)位置，并快(kuài)捷返回之前的(d←↔e)路(lù)徑。

　　面包屑的(de)由來(lái)出自(zì)一(yī)個(gè)童話✔•'(huà)，兩個(gè)孩子(zǐ)為(wèi)了(le)不★™(bù)在森(sēn)林(lín)裡(lǐα★≠$)迷路(lù)，于是(shì)沿途灑下(☆πxià)了(le)面包屑作(zuò)為(wèi)↑≥✘标記，幫助自(zì)己能(néng)夠原路(lù)返回。通(tōng)過Ω→這(zhè)個(gè)故事(shì)我們可(kě)以看(kàn)出，之所以被÷®♠™稱為(wèi)面包屑導航，正是(shì)因為(wèi)它在網站(zh₽↔àn)中也(yě)起了(le)相(xiàng)同的(de)​∞φ作(zuò)用(yòng)，讓用(yòng)戶既能(n¥♣φ★éng)看(kàn)清自(zì)己在網站(zhàn)中所處的(de)位置，也(yě)能(néng)'λ≥快(kuài)速的(de)找到(dào)其他(tā)同類型産品。

　　一(yī)個(gè)小(xiǎo)小(xiǎo)的(de)面包屑是(shì)最能(néng♦→♦≈)體(tǐ)現(xiàn)網站(zhàn)用(yòng)戶體(tǐ)驗的(de)×∏部分(fēn)之一(yī)。電(diàn)商網站(zhàn)的(de)子(zε&‍∏ǐ)頁面數(shù)不(bù)勝數(shù)，而面包屑是(shì)指引÷✘©用(yòng)戶的(de)一(yī)盞明(míng)燈，由此可(kě)見(jiàn)面> 包屑導航對(duì)于用(yòng)戶浏覽的(dβ↑e)重要(yào)性。

　　一(yī)、關鍵詞統一(yī)，避免用(yòng)詞重複

　　面包屑導航的(de)存在就(jiù)是(shì)為(w≥∑'èi)了(le)讓用(yòng)戶能(néng)最直觀的(de)$φ了(le)解自(zì)己所處的(de)位置，因此，用(yòng)詞精簡直₹↕接并且唯一(yī)，是(shì)面包屑必須遵守的(de•σ→)原則。也(yě)就(jiù)是(shì)說(shuō)，每一(÷$↑≈yī)個(gè)産品頁面都(dōu)有(yǒu♠₩Ω≠)屬于它的(de)唯一(yī)導航，這(zhè)樣能(néng)減少(shǎo)用(yòng)戶在• ‌購(gòu)物(wù)時(shí)産生(shēng)的(de× )疑問(wèn)。在用(yòng)詞方面也(yě$↑$)要(yào)盡量避免有(yǒu)歧義的(de)用(yòng)詞，京東(dōng)的(d∏π↑e)面包屑導航在這(zhè)方面做(zuò)的(de)就(jiù)不(bù)夠好(hǎo)。一(© yī)級分(fēn)類和(hé)二級分(fēn)類分(fēn)&ε>×别為(wèi)“家(jiā)用(yòng)電(diàn)器(qì↔×£)”和(hé)“生(shēng)活電(diàn)器(qì)”，這(zhè) ≈♠兩個(gè)含義相(xiàng)近(jìn)的(de₹± ±)詞彙增加了(le)用(yòng)戶的(de)思$↕γ©考時(shí)間(jiān)。因此，近(jìn)★‍✔±義詞和(hé)平級詞彙應該在面包屑中盡量避免。

　　淘寶網中的(de)面包屑就(jiù)相(xiàng)∏ 對(duì)直觀。從(cóng)“所有(yǒu)分(fēn)類”到(dào)“女(nǚ)裝”再到(↔λΩ​dào)“羽絨服”，每一(yī)個(gè)大(dà)分(fēn)類都(dōu)沒有•©(yǒu)重複性，讓用(yòng)戶能(néng)在第一(yī)時(shí)間(jiān)&π↓做(zuò)出反應。

　　二、顯示層級頁面的(de)産品數(shù)量

　　用(yòng)戶使用(yòng)面包屑的(de)目的(de)主要(yào)有(yǒ×¥u)兩種，一(yī)種是(shì)想要(yào)返回上(shàng)級，第二種就(€★jiù)是(shì)查看(kàn)頁面中展示産品的(de)類型。在用(yβ òng)戶的(de)實際操作(zuò)中，這(zhè)兩種需求的(↓↓de)重要(yào)程度不(bù)分(fēn)上(shàng)下(xià)，但(dà↑∏↓n)是(shì)大(dà)多(duō)數(shù)電(d∏≤∞iàn)商網站(zhàn)都(dōu)忽¥✘略了(le)後者。其實，這(zhè)方面的(de)改善并不(bù)困×π難，隻要(yào)在層級頁面的(de)分(fēn)類中展現(xiàn)™Ω‍≠出商品的(de)數(shù)量，用(yòng)戶就(jiù)‌ &♥能(néng)很(hěn)清晰的(de)看(kàn)到(dào)所需商品的(de)種 ε​₽類數(shù)量，便于用(yòng)戶挑$÷✘選。

　　優購(gòu)時(shí)尚商城(chéng)的(de)面包屑導航就(jiù)注意到$>(dào)了(le)這(zhè)方面的(de)小(xiǎo)細節。系統會(←≈δ↑huì)根據用(yòng)戶對(duì)條件(jiàn)的(de)篩選自(zì)動≤✘®¶抓取商品種類的(de)數(shù)量，讓用(yòng)♦ ∏≥戶根據商品的(de)實際情況進行(xíng)選擇。

　　三、分(fēn)類少(shǎo)也(yě)能∑→(néng)使用(yòng)面包屑

　　傳統意義上(shàng)都(dōu)建議(yì≈<)當網站(zhàn)的(de)層級分(fēn<®)類很(hěn)多(duō)的(de)時(shí)‌↑候可(kě)以使用(yòng)面包屑，如(rú)果網站(zhàn)分(fē ®§n)類較少(shǎo)就(jiù)可(kě)以省去(qù)這(zhè)₹$個(gè)部分(fēn)。但(dàn)我們認為(wèi)，面包屑還(hái)能(néng)≥≠有(yǒu)助于用(yòng)戶明(míng)确産品定位。當用(yòng)戶對‌¥(duì)産品沒有(yǒu)目标性時(shí)，定&>≥‌位式面包屑就(jiù)能(néng)讓用(yòng)戶擁有(yǒu)更加順暢的(↕∑de)購(gòu)物(wù)體(tǐ)驗。

　　聚美(měi)優品的(de)商品分(fēn)類其實并不(bù)算(suàn)少(shǎo♦♠≠£)，但(dàn)他(tā)們仍然選擇使用(yòng)定位式的(de)面包屑設計‌α(jì)。設計(jì)師(shī)将産品大(dà)分(fēn)類和(hé)用(yòng)戶容易更改$ δ的(de)部分(fēn)做(zuò)了(le)一(yī)些(♥∞×&xiē)小(xiǎo)間(jiān)隔，便于用(yòng)戶對(duì)條件(ji♦£‌∏àn)進行(xíng)修改。

　　四、使用(yòng)具有(yǒu)指向性的(de♥×♣)符号

　　面包屑的(de)從(cóng)用(yòng)戶體(tǐ)驗上(shΩ àng)來(lái)說(shuō)是(sh♦ ì)一(yī)個(gè)“重要(yào) ₹↕的(de)小(xiǎo)角色”，既要(yào)讓用(yòng)戶看(kàn)得(de)♣붙清楚，又(yòu)不(bù)能(néng)太醒§ 目，因此，在色彩上(shàng)主要(yào)以黑(hēi)、灰為(wèi)主，形狀上(shàng•ε∏)可(kě)以采用(yòng)單獨連接符号，多(duō)考慮關鍵字之間(jiān)的(deγ≥←‌)包含關系，并且具有(yǒu)指示性。

　　亞馬遜網站(zhàn)的(de)面包屑在符号上(shàng)↕☆±用(yòng)戶體(tǐ)驗很(hěn)不(bù)令人(rén)滿β§π♦意，“：”既不(bù)能(néng)明(míng)确的(de)顯示出字詞之間‍ γσ(jiān)的(de)概括性，指示性也(yě)遠(yuǎnε£®Ω)不(bù)如(rú)箭頭那(nà)麽直接。

　　而魅力惠的(de)面包屑符号就(jiù)滿足了(le)所有(yǒu)的(de)标準，符₽€ 号顔色和(hé)字詞相(xiàng)同，大(dà)小(xiǎo)也(yě)很(hěn)适中，讓ε₹"用(yòng)戶在有(yǒu)需要(yào)的(de)時(s® αhí)候能(néng)馬上(shàng)找到(dào)它，但(dàn)又(yò±' u)毫不(bù)耀眼。

　　五、降低(dī)幹擾

　　面包屑導航的(de)設計(jì)應該始終遵循這(zhè)樣一(yī)個(gè)經驗法則：它不(→<bù)應該抓住用(yòng)戶的(de)注意力。一(yī)個(gè)稱職的(de)面包屑一(yδ≤ī)定不(bù)能(néng)起到(dào)主宰頁面的(de)→>作(zuò)用(yòng)，低(dī)調的"÷(de)扮演著(zhe)協助主導航的(de)角色，讓用(yòng)戶§ 在購(gòu)物(wù)時(shí)完全不(bù)受♠ε→∏到(dào)它的(de)幹擾。

　　銀(yín)泰的(de)面包屑設計(jì)不(☆<↔bù)像大(dà)多(duō)數(shù)£®網站(zhàn)選擇全透明(míng)背景，而是(shì)使用(yòng)了(le♦×)與周圍背景色很(hěn)相(xiàng↕<Ω')近(jìn)的(de)灰色。這(zhè)種做(z←♣♣uò)法很(hěn)容易讓面包屑就(jiù)此融入全局中，不(bù)産生(shēng)用(₹¥yòng)戶使用(yòng)時(shí)的(de)任何φ₽€困擾。

　　六、避免重複主導航的(de)形式

　　現(xiàn)在的(de)電(diàn)商網站‌♣♦(zhàn)都(dōu)很(hěn)熱(rè)衷于在小(xiǎo)細節上(shàng)♠δ​ 做(zuò)文(wén)章(zhāng)，他(tā)們的(de)出發點是(shì¥>)希望在細節中體(tǐ)現(xiàn)出優良的(de)用(yòng)戶體(tǐ)驗，就(jiù∞₩<∏)比如(rú)在原本簡單的(de)面包屑中添加下(xià)拉菜•→↔♠單。網站(zhàn)方認為(wèi)這(zhè✘π↔✔)樣做(zuò)能(néng)讓用(yòng)戶在更短(duǎn) β★'的(de)時(shí)間(jiān)內(nèi)找到(dào)自↓ ↕→(zì)己需要(yào)的(de)商品，但(dàn)其實意義♦ 并不(bù)大(dà)。

　　以一(yī)号店(diàn)為(wèi)例，電(diàn)子(zǐ)商務網站(zhàn)的☆∑♥π(de)主導航基本都(dōu)有(yǒu)下(xià)拉擴展分(fē€$n)類的(de)功能(néng)，所以，面包屑導航如(rú)果也(yě)采用(yòng) ✔÷相(xiàng)同的(de)形式就(jiù)會(huì)變得(de)很(hδ↔σ ěn)重複，而在實際功能(néng)上(♦§♠shàng)其實差異也(yě)不(bù)大(dà∑‍)。

　　京東(dōng)的(de)網站(zhàn)就(jiù)避免了(le)這(zhè)一(yī)點$♥♠γ，主導航是(shì)常規的(de)下(xià)拉菜單形式，✔γ←面包屑的(de)設計(jì)也(yě)比較簡單明(míng)了(le)，沒∏​÷¥有(yǒu)過多(duō)的(de)功能(néng)≤₽。

　　七、盡量精簡層級

　　精簡面包屑導航層級原因不(bù)僅僅為(wèi)了₹☆₽>(le)提升用(yòng)戶體(tǐ)驗，也(yě)為(wèi)了(le)利于∞"搜索引擎的(de)抓取。盡量把面包屑控制(zhì)在4個(gè)層級以內(nèi)，對(α✘✘≤duì)用(yòng)戶視(shì)覺和(hé)SEO都(dōu)有(yǒu)很(hěn‌λ©)大(dà)的(de)好(hǎo)處。

　　唯品會(huì)的(de)面包屑就(jiù)顯得(de)過于拖₽✘≠σ沓繁瑣了(le)。雖然從(cóng)分(fδ©→ēn)類上(shàng)來(lái)說(shuō)比較精細，分(fēn)©∑門(mén)别類十分(fēn)清晰，但(dàn)是(shì)“傻瓜式”的(de)面包屑更± ≤>适合實際使用(yòng)。

　　蘇甯易購(gòu)的(de)面包屑與唯品會(huì)的(de)風(fēng)格就(jiù)完∑∑×α全不(bù)一(yī)樣，蘇甯易購(gòu)的(de®≥)面包屑默認控制(zhì)在4層以內(nèi)，其他(t±↔≈ā)的(de)多(duō)元化(huà)選項在另外(wài)一(yī)個σ¶<(gè)區(qū)域中存在，降低(dī)了(le)用(yò‍¶φλng)戶在使用(yòng)時(shí)的(de)受幹擾程度。

　　八、在面包屑中使用(yòng)關鍵字Ω∞∏

　　面包屑對(duì)于網站(zhàn)的(de)SEO有(yǒu)著(εγ$★zhe)很(hěn)大(dà)的(de)影(yǐng)響作($δ♥zuò)用(yòng)，因此把握關鍵字的(d₩↔e)設置也(yě)許能(néng)為(wèi)網站(zhàn)帶來(lái)更多(duō)的£✔(de)流量。

　　正如(rú)天貓的(de)案例所示，在面包屑導航的(de  )第四層級中，用(yòng)戶可(kě)以根據自(zì)己的(dγ↔γe)時(shí)機(jī)需求篩選關鍵字，讓呈現(​♦↕xiàn)出的(de)産品更加準确。

　　總結：

　　我們認為(wèi)，面包屑是(shì)每個(gè)電(diàn)子(zǐ)商務網站(zh ↓÷πàn)的(de)一(yī)個(gè)必備模塊，用(yòng)戶體(tǐ)驗是(shγ ★ì)否過關在這(zhè)裡(lǐ)可(kě)以有(yǒu)很(hě"αn)好(hǎo)的(de)體(tǐ)現(xiàn)。所有™ ≤γ(yǒu)的(de)網站(zhàn)元素可(kě)能(néng)都(dō☆¶u)講究創新改變，但(dàn)是(shì)面包屑卻始終如(rú)一(yī)，用(®₹βyòng)最簡單的(de)方式來(lái)滿​•&足用(yòng)戶的(de)浏覽需求。