您现在的位置：首页 --> JavaScript --> 用javascript悬停效果改善你的在线商店的12种方法

用javascript悬停效果改善你的在线商店的12种方法

浏览:2588次出处信息

我不得不承认在网页设计中我是一个钟情于“hover”或者“mouseover”功能(即悬停效果)的狂热分子。任何一个点击或者弹出窗口都会吸引作为消费者的我。我注意到一些零售商创造性地利用这种效果，远不止一般的图片放大或者弹出菜单。以下是我大爱的一些收集。

首页和导航

首页Flash

Barnes and Noble在首页的flash横幅上增加了产品详细信息和加入购物车按钮，当你把鼠标放在商品上就能看到这种效果。大多数的零售商都只是在图片上放上超链接，但悬停效果这种方法节约了我跳转页面的时间。我可以知道我是否对自己要点击的商品感兴趣。

丰富的弹出菜单

弹出菜单允许访问者不用点击便能够看到分类和子分类，能够更简单快捷地定位商品，扁平化你的网站架构(通过一次点击便能从首页到达更多的页面)。这些做法都是十分常见的，但我发现的一些你也许称之为“丰富的弹出菜单”是比较特别的，他们包含了促销信息或者产品的所旅途。比如：

American Eagle Outfitters展示了特色产品和促销信息(上图)；Best Kiteboarding展示了一个产品图片，当你把鼠标放在不同类别上时产品图片也随之改变(下图)。

站内搜索丰富的自动提示
关于这点之前的文章已经提过，许多消费者软件站点提供了一个自动提示功能，其中所谓的“丰富”是指附加的图片，文本信息和促销区域。以下是一个Apple Store的例子

分类页
分类预览
零售商们用了许多方法利用鼠标悬停功能区改善分类页面。其中一种方法就是简单的图片放大功能用来细节预览，像Bidz.com和Neiman Marcus

其他的站点则另辟蹊径，像Blue Nile展示的是产品信息或者图片和信息二者兼有。

Land’s End和Brooks Brothers允许你转换缩略图颜色。

产品页
产品图像
许多站点都提供鼠标悬停效果用来转换颜色，产品展示或者放大……

但是还有许多创造性的事是你能做的。

产品页里的分类页展示
American Eagle Outfitters允许你在产品页导航到分类页并直接显示，让你不需要点返回按钮。正如以下展示的，你能够“view all shorts”(查看所有短裤)。

库存情况
Gap展示了该尺寸或者颜色是否有货，在产品图片上显示的很清楚。

(去Gap官网看了下没找到该效果= =)

条款和政策
需要定义特征或者工业术语？看看Crutchfield 怎么做的吧。

同样的，Virgin Mobile不需要弹出窗口便展示了隐私条款。(这个网站很有意思，大多数都是用flash做的，很华丽)

加入购物车错误处理
在加入购物车之前顾客很容易忘记选择尺码、颜色或者其他必须的选项。零售商们常常将使购买按钮不可用直到所有选择都合适或者重新刷新页面提示错误信息。(这个现在已有很多改善了)。这两种方式都会使得顾客困扰。处理这些错误的最好方法便是在购物按钮旁展示错误信息，而不是在页面顶部用红字提示，因为那里比较不容易被注意到。

通过用户行为学，如果你漏选了一个尺寸或者颜色，你马上注意到的地方是在加入购物车按钮上。

货币转换
这个站点用悬停效果向你展示货币转换值。你可以不用选择一个货币而直接看到它们，并且不需要页面加载。

交叉销售预览
Barnes and Noble让你能够预览到产品建议价格、详细说明甚至让你能够直接加入购物车。

结账
政策和指示
Office Max用悬停效果解释MaxPerks ID和Tax Exempt ID 意味着什么。

滚动找出MaxPerks ID和Tax Exempt ID是什么。
你也能够用这个方法解释政策或者提供指示。

这些都只是表面文章。页面上的任何需要点击或者弹出窗口的功能都能用鼠标悬停效果解决，这样不仅能够提供一个良好的用户体验，并且能够使你的站点更时尚。
原文