您當(dāng)前位置:圖趣網(wǎng)(Tuquu) >> 網(wǎng)頁(yè)設(shè)計(jì)教程 >> 交互設(shè)計(jì) >> 瀏覽設(shè)計(jì)教程

時(shí)尚電商網(wǎng)站交互分析(2)

 

 

韓國(guó)、日本的知名購(gòu)物搜索比較網(wǎng)站也同樣采用了“左側(cè)類目+屬性導(dǎo)航”的布局方式:

 

 

為了能讓用戶更快捷的到達(dá)他要找的類目或商品,這些網(wǎng)站還會(huì)在靠近搜索結(jié)果的區(qū)域上方,放置一些導(dǎo)購(gòu)性質(zhì)的導(dǎo)航入口。

例如:Ebay針對(duì)包、鞋等類目的導(dǎo)航做了可視化的設(shè)計(jì)處理,通過圖形加類目名的方式,便于用戶進(jìn)行判斷和快速篩選。

  默認(rèn)狀態(tài):

 

選中后:

 

在ebay搜索“iphone4s”后,會(huì)出現(xiàn)和這款機(jī)型關(guān)聯(lián)最高的運(yùn)營(yíng)商、容量、顏色這三個(gè)常用屬性給到用戶,進(jìn)行快速篩選定位。

選中屬性后:

 

同時(shí)在當(dāng)前模塊中還提供了iphone其它型號(hào)下的下拉菜單,便于用戶進(jìn)行快速切換:

 

http://www.ebay.com/sch/Cell-Phones-Smartphones-/9355/i.html?_nkw=iphone4

 

 

在Amazon 搜“Dresses“后,當(dāng)用戶選中了女裝下的連衣裙子類目后,會(huì)在右側(cè)搜索結(jié)果區(qū)域上方提示要不要先選個(gè)款式給到用戶。

 

 

在右側(cè)面包屑導(dǎo)航中,高亮顯示了當(dāng)前類目,還提供了鼠標(biāo)Hover后刪除當(dāng)前類目的操作。

默認(rèn)狀態(tài):

 

鼠標(biāo)Hover后:

http://www.amazon.com/s/ref=sr_nr_n_0?rh=n%3A1036592%2Ck%3Adresses%2Cn%3A%211036682%2Cn%3A1040660%2Cn%3A1045024&bbn=1040660&keywords=dresses&ie=UTF8&qid=1348465871&rnid=1040660

[教程作者:admin]
免責(zé)聲明:本站文章系圖趣網(wǎng)整理發(fā)布,如需轉(zhuǎn)載,請(qǐng)注明出處,素材資料僅供個(gè)人學(xué)習(xí)與參考,請(qǐng)勿用于商業(yè)用途!
本文地址:http://m.likemindfilms.com/tutorial/id1216.html
交互網(wǎng)頁(yè)設(shè)計(jì)實(shí)例:你好,對(duì)話框
關(guān)于注冊(cè)登錄的設(shè)計(jì)原則之二:讓注冊(cè)過程更加輕松 (by: adaptive path \ 翻譯搬運(yùn):HuJiping)
圖趣網(wǎng)微信
建議反饋
×