导读：电子商务网站的设计重点在于提高用户的转化率，所以我们在访问某个电子商务网站页面时，总会看到许多其他类型或同类型的推荐商品。这也是设计中经常使用的交叉销售和向上销售。这样做的目的只有一个，尽可能提供用户感兴趣的商品，从而促成更多的销售。因此本文主要讨论如何在不同的页面中设计商品的展示方式，从而能更好的提高用户的专户率。

你注意到了吗，当展示交叉销售和向上销售（cross-sells and upsells）时（译者注：向上销售含义），许多电子商务网站会将用户从正在浏览的网页劫持到他们想推荐的商品网页，并且经常没有提供“返回”的链接。显然，这不是最有效的产品推销方式，有提升商品购买转换率的可能。

很明显，交叉销售可用性是能否达成效力提升的关键因素。但如何做到在不打断用户浏览流程的前提下更好的给用户展示商品信息呢？

AJAX 浮层效果

我最推崇的展示交叉销售/向上销售的方式是通过鼠标悬浮（pre-click）来显示相关产品信息。这能以AJAX “hover” 效果来实现。至少，你能展示商品的标题、价格和库存情况。也可以展示下大致的商品信息、物流选项、顾客平均评分/销售评分、可选颜色等。Barnes and Noble甚至还能允许用户快速将该商品加入到购物车：

VI设计域名投资服务器托管个人建站SEO教程虚拟主机网络营销标志设计

但这里有一个潜在的问题，太多的信息会充斥在一个小的悬浮窗口中，像TheFind的前端功能竟然还包含标签：

快速预览

Foot Locker给消费者“快速预览”的选项：

设计知识资源网
你能选择产品尺寸、颜色等，甚至添加进购物车且不需要离开初始产品页面。唯一有些棘手的是，如果你不点击右侧的预览小图就会直接读取产品全尺寸大图页面。这就是一些针对快速查看和快速预览功能的可用性总结。然后，如果你偶然读取页面，Foot Locker会在副栏提供一个最近查看过的商品列表。

对比阵

服务器托管域名注册网站制作域名投资免费建站网站推广域名个人建站列

当建议的是“向上销售”（建议购买属于同一系列的更多更贵版本的产品）或“可选产品”（同一品类且价格相似的产品）的商品时，如果提供一个复选框（check box）来提供功能比较矩阵来对比各个产品功能将会非常有用。我已经看到一些实现的案例，下方是一个有点类似的原型：

这种功能对“交叉销售”没有意义，因为将苹果、习惯和甜甜圈做功能上的对比没有意义。

将几种商品打包加入购物车

Amazon和Sears允许用户将多种商品打包加入收藏夹，并提供选项来删除那些你不需要的建议商品：

设计知识资源网