最近一直在收集和整理歐美、日、韓一些主流的電商網(wǎng)站，包括品牌垂直化的，還有全網(wǎng)搜索比價(jià)類型的。在從這些電商網(wǎng)站中我們或多或少都會(huì)看到一些共通的地方和交互模式值得國(guó)內(nèi)電商網(wǎng)站去借鑒的，這次我們主要對(duì)其搜索結(jié)果頁(yè)進(jìn)行了分析，總結(jié)出了幾點(diǎn)供大家參考與討論： 

1. 頁(yè)面結(jié)構(gòu)； 

2.類目、屬性導(dǎo)航； 

3. 商品信息的陳列； 

4.快速預(yù)覽； 

5.翻頁(yè)導(dǎo)航；

 6. 側(cè)邊欄廣告等 

一、頁(yè)面結(jié)構(gòu) 

根據(jù)電子商務(wù)管理咨詢公司Groove Commerce 對(duì)全球100家電子商務(wù)網(wǎng)站的統(tǒng)計(jì)數(shù)據(jù)，采用兩欄式布局的電子商務(wù)網(wǎng)站占到79%，可見(jiàn)兩欄式排版是現(xiàn)階段購(gòu)物網(wǎng)站中最常見(jiàn)的布局方式之一。 

優(yōu)點(diǎn)：相對(duì)一欄式布局，它可以容納更多內(nèi)容，相對(duì)三欄式布局，信息不至于過(guò)度擁擠和零亂。

 缺點(diǎn)：不具備一欄式布局的視覺(jué)沖擊力和三欄式的超大內(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ù)等功能。 

 

 

 

 

韓國(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ì)處理，通過(guò)圖形加類目名的方式，便于用戶進(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)行快速切換： 

示例網(wǎng)址http://www.ebay.com/sch/Cell-Phones-Smartphones-/9355/i.html？_nkw=iphone4 

標(biāo)簽： 電子商務(wù) 網(wǎng)站建設(shè) 網(wǎng)頁(yè)設(shè)計(jì) 

版權(quán)申明：本站文章部分自網(wǎng)絡(luò)，如有侵權(quán)，請(qǐng)聯(lián)系：west999com@outlook.com
特別注意：本站所有轉(zhuǎn)載文章言論不代表本站觀點(diǎn)！
本站所提供的圖片等素材，版權(quán)歸原作者所有，如需使用，請(qǐng)與原作者聯(lián)系。