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

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

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

傳統(tǒng)意義上都建議當(dāng)網(wǎng)站的層級分類很多的時候可以使用面包屑,如果網(wǎng)站分類較少就可以省去這個部分。但AnyForWeb認(rèn)為,面包屑還能有助于用戶明確產(chǎn)品定位。當(dāng)用戶對產(chǎn)品沒有目標(biāo)性時,定位式面包屑就能讓用戶擁有更加順暢的購物體驗(yàn)。

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

聚美優(yōu)品的商品分類其實(shí)并不算少,但他們?nèi)匀贿x擇使用定位式的面包屑設(shè)計。設(shè)計師將產(chǎn)品大分類和用戶容易更改的部分做了一些小間隔,便于用戶對條件進(jìn)行修改。

4.使用具有指向性的符號

面包屑的從用戶體驗(yàn)上來說是一個“重要的小角色”,既要讓用戶看得清楚,又不能太醒目,因此,在色彩上主要以黑、灰為主,形狀上可以采用單獨(dú)連接符號,多考慮關(guān)鍵字之間的包含關(guān)系,并且具有指示性。

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

亞馬遜網(wǎng)站的面包屑在符號上用戶體驗(yàn)很不令人滿意,“:”既不能明確的顯示出字詞之間的概括性,指示性也遠(yuǎn)不如箭頭那么直接。

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

而魅力惠的面包屑符號就滿足了所有的標(biāo)準(zhǔn),符號顏色和字詞相同,大小也很適中,讓用戶在有需要的時候能馬上找到它,但又毫不耀眼。

5.降低干擾

面包屑導(dǎo)航的設(shè)計應(yīng)該始終遵循這樣一個經(jīng)驗(yàn)法則:它不應(yīng)該抓住用戶的注意力。一個稱職的面包屑一定不能起到主宰頁面的作用,低調(diào)的扮演著協(xié)助主導(dǎo)航的角色,讓用戶在購物時完全不受到它的干擾。

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

銀泰的面包屑設(shè)計不像大多數(shù)網(wǎng)站選擇全透明背景,而是使用了與周圍背景色很相近的灰色。這種做法很容易讓面包屑就此融入全局中,不產(chǎn)生用戶使用時的任何困擾。

6.避免重復(fù)主導(dǎo)航的形式

現(xiàn)在的電商網(wǎng)站都很熱衷于在小細(xì)節(jié)上做文章,他們的出發(fā)點(diǎn)是希望在細(xì)節(jié)中體現(xiàn)出優(yōu)良的用戶體驗(yàn),就比如在原本簡單的面包屑中添加下拉菜單。網(wǎng)站方認(rèn)為這樣做能讓用戶在更短的時間內(nèi)找到自己需要的商品,但其實(shí)意義并不大。

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

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

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

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

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