時(shí)尚電商網(wǎng)站交互分析
最近一直在收集和整理歐美、日、韓一些主流的電商網(wǎng)站,包括品牌垂直化的,還有全網(wǎng)搜索比價(jià)類型的。在從這些電商網(wǎng)站中我們或多或少都會(huì)看到一些共通的地方和交互模式值得國(guó)內(nèi)電商網(wǎng)站去借鑒的,這次我們主要對(duì)其搜索結(jié)果頁(yè)進(jìn)行了分析,總結(jié)出了幾點(diǎn)供大家參考與討論:
閱讀全文
l 頁(yè)面結(jié)構(gòu);
l 類目、屬性導(dǎo)航;
l 商品信息的陳列;
l 快速預(yù)覽;
l 翻頁(yè)導(dǎo)航;
l 側(cè)邊欄廣告等
一,頁(yè)面結(jié)構(gòu)
根據(jù)電子商務(wù)管理咨詢公司Groove Commerce 對(duì)全球100家電子商務(wù)網(wǎng)站的統(tǒng)計(jì)數(shù)據(jù),采用兩欄式布局的電子商務(wù)網(wǎng)站占到79%,可見兩欄式排版是現(xiàn)階段購(gòu)物網(wǎng)站中最常見的布局方式之一。
優(yōu)點(diǎn):相對(duì)一欄式布局,它可以容納更多內(nèi)容,相對(duì)三欄式布局,信息不至于過(guò)度擁擠和零亂。
缺點(diǎn):不具備一欄式布局的視覺沖擊力和三欄式的超大內(nèi)容量的優(yōu)點(diǎn)。
此次分析的網(wǎng)站中,搜索結(jié)果頁(yè)的布局多采用左窄右寬型的兩欄式布局,這種形式的布局通常采用左邊導(dǎo)航(以樹狀導(dǎo)航或一系列文字鏈的形式),右邊是內(nèi)容的設(shè)置。此時(shí)左邊不適宜放次要信息或者廣告,否則會(huì)過(guò)度干擾用戶瀏覽主要內(nèi)容。用戶瀏覽習(xí)慣通常是從左到右,從上到下,因此這類布局的頁(yè)面更符合偏理性的操作流程,更能夠引導(dǎo)用戶通過(guò)導(dǎo)航查找內(nèi)容,使操作具有可控性,適用于內(nèi)容豐富、導(dǎo)航分類清晰的網(wǎng)站。
二、類目、屬性導(dǎo)航
歐美較大型的在線購(gòu)物網(wǎng)站,通常都是將當(dāng)前用戶瀏覽或搜索相關(guān)比較高的類目和屬性篩選導(dǎo)航放置在左側(cè),右側(cè)的大面積區(qū)域留給展現(xiàn)商品結(jié)果,同時(shí)配合有瀏覽商品結(jié)果相關(guān)的按價(jià)格、銷量排序、瀏覽模式切換、設(shè)置每一頁(yè)顯示的商品個(gè)數(shù)等功能。
本文地址: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ì)理論(上)
- 如何通過(guò)設(shè)計(jì)提升banner點(diǎn)擊率?
- 晉小彥視覺設(shè)計(jì)系列文章(二):全屏