電子商務(wù)網(wǎng)站設(shè)計(jì)分析之面包屑導(dǎo)航
AnyForWeb正式推出電子商務(wù)網(wǎng)站設(shè)計(jì)分析的系列文章,每月更新,本次主題為電商網(wǎng)站的面包屑導(dǎo)航設(shè)計(jì),歡迎關(guān)注!
網(wǎng)站中的面包屑導(dǎo)航(Breadcrumb Navigation)導(dǎo)航是一種作為輔助和補(bǔ)充的導(dǎo)航方式,它能幫助用戶明確當(dāng)下所在的網(wǎng)站內(nèi)位置,并快捷返回之前的路徑。
面包屑的由來(lái)出自一個(gè)童話,兩個(gè)孩子為了不在森林里迷路,于是沿途灑下了面包屑作為標(biāo)記,幫助自己能夠原路返回。通過(guò)這個(gè)故事我們可以看出,之所以被稱為面包屑導(dǎo)航,正是因?yàn)樗诰W(wǎng)站中也起了相同的作用,讓用戶既能看清自己在網(wǎng)站中所處的位置,也能快速的找到其他同類型產(chǎn)品。
一個(gè)小小的面包屑是最能體現(xiàn)網(wǎng)站用戶體驗(yàn)的部分之一。電商網(wǎng)站的子頁(yè)面數(shù)不勝數(shù),而面包屑是指引用戶的一盞明燈,由此可見(jiàn)面包屑導(dǎo)航對(duì)于用戶瀏覽的重要性。
1.關(guān)鍵詞統(tǒng)一,避免用詞重復(fù)
面包屑導(dǎo)航的存在就是為了讓用戶能最直觀的了解自己所處的位置,因此,用詞精簡(jiǎn)直接并且唯一,是面包屑必須遵守的原則。也就是說(shuō),每一個(gè)產(chǎn)品頁(yè)面都有屬于它的唯一導(dǎo)航,這樣能減少用戶在購(gòu)物時(shí)產(chǎn)生的疑問(wèn)。在用詞方面也要盡量避免有歧義的用詞,京東的面包屑導(dǎo)航在這方面做的就不夠好(如下圖)。
一級(jí)分類和二級(jí)分類分別為“家用電器”和“生活電器”,這兩個(gè)含義相近的詞匯增加了用戶的思考時(shí)間。因此,近義詞和平級(jí)詞匯應(yīng)該在面包屑中盡量避免。
淘寶網(wǎng)中的面包屑就相對(duì)直觀。從“所有分類”到“女裝”再到“羽絨服”,每一個(gè)大分類都沒(méi)有重復(fù)性,讓用戶能在第一時(shí)間做出反應(yīng)。
2.顯示層級(jí)頁(yè)面的產(chǎn)品數(shù)量
用戶使用面包屑的目的主要有兩種,一種是想要返回上級(jí),第二種就是查看頁(yè)面中展示產(chǎn)品的類型。在用戶的實(shí)際操作中,這兩種需求的重要程度不分上下,但是大多數(shù)電商網(wǎng)站都忽略了后者。其實(shí),這方面的改善并不困難,只要在層級(jí)頁(yè)面的分類中展現(xiàn)出商品的數(shù)量,用戶就能很清晰的看到所需商品的種類數(shù)量,便于用戶挑選。
優(yōu)購(gòu)時(shí)尚商城的面包屑導(dǎo)航就注意到了這方面的小細(xì)節(jié)。系統(tǒng)會(huì)根據(jù)用戶對(duì)條件的篩選自動(dòng)抓取商品種類的數(shù)量,讓用戶根據(jù)商品的實(shí)際情況進(jìn)行選擇。
3.分類少也能使用面包屑
學(xué)習(xí) · 提示
相關(guān)教程
- 經(jīng)驗(yàn)分享!如何準(zhǔn)確的向工程師傳達(dá)動(dòng)效設(shè)計(jì)?
- 聊聊界面設(shè)計(jì)過(guò)程中,遇到視覺(jué)BUG時(shí)的處理方法
- 排版布局,關(guān)于響應(yīng)式布局
- 視覺(jué)設(shè)計(jì)師怎樣讓前端100%實(shí)現(xiàn)設(shè)計(jì)效果?
- Duang!給設(shè)計(jì)稿特技加特技?
- 實(shí)用好文,介紹一些產(chǎn)品經(jīng)理快速找到順手圖片資源的小技巧
- 手機(jī)拍照也能高大上,盤(pán)點(diǎn)照片后期需要的技巧及經(jīng)驗(yàn)
- 設(shè)計(jì)建議,如何讓一個(gè)網(wǎng)站看起來(lái)高大上且更有設(shè)計(jì)感?
- 大數(shù)據(jù)時(shí)代的設(shè)計(jì)特點(diǎn),不了解這個(gè)你做不了今天的設(shè)計(jì)
- 素材知識(shí),教你如何找到高質(zhì)量的圖片素材
推薦教程
- 調(diào)色知識(shí),簡(jiǎn)單實(shí)用的調(diào)色原理
- 顏色管理,讓自己的照片在網(wǎng)上正確地顯示
- UI知識(shí),尺寸對(duì)UI設(shè)計(jì)的影響
- 圖片畫(huà)冊(cè)平面設(shè)計(jì)排版ps理論教程
- 色彩知識(shí),講解顏色基礎(chǔ)知識(shí)和配色理論
- Photoshop初級(jí)教程-命令的技巧
- 移動(dòng)設(shè)計(jì),移動(dòng)應(yīng)用導(dǎo)航模式設(shè)計(jì)方法
- 設(shè)計(jì)界面最常用最舒服的12種顏色(含色
- 用戶體驗(yàn),分享20個(gè)有影響力的包裝設(shè)計(jì)
- 用戶體驗(yàn),如何讓用戶心動(dòng)?