時尚電商網站交互分析

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

　　1. 頁面結構;

　　2.類目、屬性導航;

　　3. 商品信息的陳列;

　　4.快速預覽;

　　5.翻頁導航;

　　6. 側邊欄廣告等

　　一、頁面結構

　　根據電子商務管理咨詢公司Groove Commerce 對全球100家電子商務網站的統計數據，采用兩欄式布局的電子商務網站占到79%，可見兩欄式排版是現階段購物網站中最常見的布局方式之一。

　　優點：相對一欄式布局，它可以容納更多內容，相對三欄式布局，信息不至於過度擁擠和零亂。

　　缺點：不具備一欄式布局的視覺沖擊力和三欄式的超大內容量的優點。

　　此次分析的網站中，搜索結果頁的布局多采用左窄右寬型的兩欄式布局，這種形式的布局通常采用左邊導航(以樹狀導航或一系列文字鏈的形式)，右邊是內容的設置。此時左邊不適宜放次要信息或者廣告，否則會過度干擾用戶浏覽主要內容。用戶浏覽習慣通常是從左到右，從上到下，因此這類布局的頁面更符合偏理性的操作流程，更能夠引導用戶通過導航查找內容，使操作具有可控性，適用於內容豐富、導航分類清晰的網站。

　　二、類目、屬性導航

　　歐美較大型的在線購物網站，通常都是將當前用戶浏覽或搜索相關比較高的類目和屬性篩選導航放置在左側，右側的大面積區域留給展現商品結果，同時配合有浏覽商品結果相關的按價格、銷量排序、浏覽模式切換、設置每一頁顯示的商品個數等功能。

　　韓國、日本的知名購物搜索比較網站也同樣采用了“左側類目+屬性導航”的布局方式：

　　為了能讓用戶更快捷的到達他要找的類目或商品，這些網站還會在靠近搜索結果的區域上方，放置一些導購性質的導航入口。

　　例如：Ebay針對包、鞋等類目的導航做了可視化的設計處理，通過圖形加類目名的方式，便於用戶進行判斷和快速篩選。

　　默認狀態：

　　選中後：

　　在ebay搜索“iphone4s”後，會出現和這款機型關聯最高的運營商、容量、顏色這三個常用屬性給到用戶，進行快速篩選定位。

　　選中屬性後：

　　同時在當前模塊中還提供了iphone其它型號下的下拉菜單，便於用戶進行快速切換：

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

　　在Amazon 搜“Dresses“後，當用戶選中了女裝下的連衣裙子類目後，會在右側搜索結果區域上方提示要不要先選個款式給到用戶。

　　在右側面包屑導航中，高亮顯示了當前類目，還提供了鼠標Hover後刪除當前類目的操作。

　　默認狀態：

　　鼠標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

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

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

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

　　用戶進行“款式、品牌、價格、顏色等”篩選後，浏覽搜索結果列表時，常常會產生修正結果的需求。

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

　　鼠標Hover後，商品圖片左上角顯示“Hide this brand”，用戶點擊此處，可以將搜索結果列表當中的所有此品牌商品信息屏蔽，從而滿足了用戶浏覽過程中“即時修正”的需求。

　　點擊後，也同時作用於左側的“品牌篩選”欄。

　　在Naver Shopping 搜“襯衫“後，可以看到搶眼的圖形化導航區。

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

　　GILT對於浏覽型用戶，也提供了類似圖形化的快捷導航。

　　示例網址http://www.gilt.com/sale/women/the-sheath-dress-2805

　　【小結】

　　搜索結果頁中，類目、屬性導航無論是左側布局、頂部布局、還是左