當(dāng)前位置:首頁>ps入門教程>ps基礎(chǔ)教程>設(shè)計知識>教程內(nèi)容

電子商務(wù)網(wǎng)站設(shè)計分析之面包屑導(dǎo)航

來源:UDC視覺 作者:AnyForWeb 學(xué)習(xí):4761人次

AnyForWeb正式推出電子商務(wù)網(wǎng)站設(shè)計分析的系列文章,每月更新,本次主題為電商網(wǎng)站的面包屑導(dǎo)航設(shè)計,歡迎關(guān)注!

網(wǎng)站中的面包屑導(dǎo)航(Breadcrumb Navigation)導(dǎo)航是一種作為輔助和補充的導(dǎo)航方式,它能幫助用戶明確當(dāng)下所在的網(wǎng)站內(nèi)位置,并快捷返回之前的路徑。

面包屑的由來出自一個童話,兩個孩子為了不在森林里迷路,于是沿途灑下了面包屑作為標(biāo)記,幫助自己能夠原路返回。通過這個故事我們可以看出,之所以被稱為面包屑導(dǎo)航,正是因為它在網(wǎng)站中也起了相同的作用,讓用戶既能看清自己在網(wǎng)站中所處的位置,也能快速的找到其他同類型產(chǎn)品。

一個小小的面包屑是最能體現(xiàn)網(wǎng)站用戶體驗的部分之一。電商網(wǎng)站的子頁面數(shù)不勝數(shù),而面包屑是指引用戶的一盞明燈,由此可見面包屑導(dǎo)航對于用戶瀏覽的重要性。

1.關(guān)鍵詞統(tǒng)一,避免用詞重復(fù)

面包屑導(dǎo)航的存在就是為了讓用戶能最直觀的了解自己所處的位置,因此,用詞精簡直接并且唯一,是面包屑必須遵守的原則。也就是說,每一個產(chǎn)品頁面都有屬于它的唯一導(dǎo)航,這樣能減少用戶在購物時產(chǎn)生的疑問。在用詞方面也要盡量避免有歧義的用詞,京東的面包屑導(dǎo)航在這方面做的就不夠好(如下圖)。

電子商務(wù)網(wǎng)站設(shè)計分析之面包屑導(dǎo)航

一級分類和二級分類分別為“家用電器”和“生活電器”,這兩個含義相近的詞匯增加了用戶的思考時間。因此,近義詞和平級詞匯應(yīng)該在面包屑中盡量避免。

電子商務(wù)網(wǎng)站設(shè)計分析之面包屑導(dǎo)航

淘寶網(wǎng)中的面包屑就相對直觀。從“所有分類”到“女裝”再到“羽絨服”,每一個大分類都沒有重復(fù)性,讓用戶能在第一時間做出反應(yīng)。

2.顯示層級頁面的產(chǎn)品數(shù)量

用戶使用面包屑的目的主要有兩種,一種是想要返回上級,第二種就是查看頁面中展示產(chǎn)品的類型。在用戶的實際操作中,這兩種需求的重要程度不分上下,但是大多數(shù)電商網(wǎng)站都忽略了后者。其實,這方面的改善并不困難,只要在層級頁面的分類中展現(xiàn)出商品的數(shù)量,用戶就能很清晰的看到所需商品的種類數(shù)量,便于用戶挑選。

電子商務(wù)網(wǎng)站設(shè)計分析之面包屑導(dǎo)航

優(yōu)購時尚商城的面包屑導(dǎo)航就注意到了這方面的小細(xì)節(jié)。系統(tǒng)會根據(jù)用戶對條件的篩選自動抓取商品種類的數(shù)量,讓用戶根據(jù)商品的實際情況進(jìn)行選擇。

3.分類少也能使用面包屑

學(xué)習(xí) · 提示

  • 一定要打開PS,跟著教程做一遍,做完的圖到這交作業(yè):提交作業(yè)
  • 建議練習(xí)時,大家自己找素材,盡量不要用教程提供的素材。
  • 教程有看不懂的地方,可以到論壇發(fā)帖提問:新手求助
  • 加官方微信,隨時隨地,想學(xué)就能學(xué):ps_bbs,或掃右側(cè)二維碼!
  • 關(guān)注我們學(xué)更多,每天都有新教程:新浪微博 抖音視頻 微信小程序
- 發(fā)評論 | 交作業(yè) -
最新評論
暫無評論,交個作業(yè)支持一下吧~

關(guān)注大神微博加入>>

網(wǎng)友求助,請回答!