最近一直在收集和整理欧美、日、韩一些主流的电商网站，包括品牌垂直化的，还有全网搜索比价类型的。在从这些电商网站中我们或多或少都会看到一些共通的地方和交互模式值得国内电商网站去借鉴的，这次我们主要对其搜索结果页进行了分析，总结出了几点供大家参考与讨论：

　　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

　　【小结】

　　搜索结果页中，类目、属性导航无论是左侧布局、顶部布局、还是左