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

時尚電商網(wǎng)站交互分析(3)

 

 

與Amazon處理方式不同的是,ebay采用了將當(dāng)前選中的類目顯示在了搜索框中,與搜索詞進行了結(jié)合。同時還提供給用戶保存當(dāng)前查詢詞的功能,便于下次直達該頁面。

 

 

對比舊版的ebay 搜索結(jié)果頁的頁頭,新版的設(shè)計將頁面中搜索框、類目瀏覽、保存搜索記錄功能進行了簡化和整合,優(yōu)化后,頁頭中的品牌Logo更加突出,頁頭的高度從210px縮減到了140px。這樣可以為展示更多的結(jié)果信息留出空間。

 

英國的asos.com(http://www.asos.com)的SRP頁采用了純粹的2欄式布局,所有的類目、屬性導(dǎo)航均放到了頁面的左側(cè),且采用了“遞進式”的篩選邏輯。用戶對每一個類目或?qū)傩赃M行篩選后,立即就可以獲知與之相關(guān)的下一級篩選選項會有哪些,同時也對搜索結(jié)果的大致范圍有了了解。

 

 

用戶進行“款式、品牌、價格、顏色等”篩選后,瀏覽搜索結(jié)果列表時,常常會產(chǎn)生修正結(jié)果的需求。

Asos.com對此還為用戶提供了一些體貼的功能。如下圖:

鼠標(biāo)Hover后,商品圖片左上角顯示“Hide this brand”,用戶點擊此處,可以將搜索結(jié)果列表當(dāng)中的所有此品牌商品信息屏蔽,從而滿足了用戶瀏覽過程中“即時修正”的需求。

 

點擊后,也同時作用于左側(cè)的“品牌篩選”欄。

 

 

在Naver Shopping 搜“襯衫“后,可以看到搶眼的圖形化導(dǎo)航區(qū)。

  

 

http://shopping.naver.com/search/all_search.nhn?query=%EC%85%94%EC%B8%A0&iq=&cat_id=

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