時(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://m.likemindfilms.com/tutorial/id1216.html
您可能還喜歡
- 關(guān)于第三方注冊(cè)和本地注冊(cè)的選擇
- 8大網(wǎng)頁(yè)前端界面必備jQuery插件
- 掌上指路標(biāo) —– APP架構(gòu)與導(dǎo)航設(shè)計(jì)
- 時(shí)尚電商網(wǎng)站交互分析
- 軟件推薦為移動(dòng)設(shè)計(jì)而生-Justinmind
- TGideas實(shí)例:加載,不只是少一點(diǎn)點(diǎn)
- 網(wǎng)頁(yè)設(shè)計(jì)中引人入勝的引導(dǎo)頁(yè)設(shè)計(jì)
- 體驗(yàn)新版Apple AppStore ——App設(shè)計(jì)從
- 確認(rèn)按鈕在左邊,取消按鈕在右邊?
- 交互設(shè)計(jì)從登錄開始
- 專訪:石墨文檔產(chǎn)品總監(jiān)羅穎
- UI設(shè)計(jì)不得不知的移動(dòng)端UI尺寸適
- 光音移動(dòng)設(shè)計(jì)規(guī)范 — 表單類
- 體驗(yàn)設(shè)計(jì)中的排序問題
- 網(wǎng)頁(yè)設(shè)計(jì)精粹 網(wǎng)頁(yè)中那些迷人的按
- aliued:響應(yīng)式設(shè)計(jì)的現(xiàn)狀與趨勢(shì)
- 10個(gè)智能對(duì)象處理的ps技巧
- 網(wǎng)頁(yè)UI - 原子設(shè)計(jì)理論(上)
- 如何通過設(shè)計(jì)提升banner點(diǎn)擊率?
- 晉小彥視覺設(shè)計(jì)系列文章(二):全屏