Amazon的产品图片橱窗的设计包含多种方式:

前面两种是大多数产品公用的,而第三种则是专门针对图书类产品。笔者猜测Amazon的产品图片橱窗模板是可以指向到产品目录级别的。其中第一种和第二种是写在一个模板内,然后通过判断产品是否支持规格来做不同的显示,该模板为通过模板,比如叫GlobalGallery.jsp。第三种则是独立的橱窗模板,在Books Category中关联调用,比如叫BooksGallery.jsp。

3.1设计说明

B2C网店系统产品图片橱窗设计参考

点击一个普通的无规格的产品的产品大图即会弹出上面的截图。

普通型橱窗的设计相当的简单,分为上中下三部分,上面是大图显示的主体部分,中间是功能栏,有放大、缩小和恢复正常三个。下面是多个图片的缩略图。

B2C网店系统产品图片橱窗设计参考

点击一个带有规格的产品的产品大图即会弹出。 http://www.amazon.com/KitchenAid-KSM150PSWH-Artisan-5-Quart-Mixer/dp/B00005UP2K/ref=sr_1_3?ie=UTF8&s=kitchen&qid=1276958964&sr=1-3

从上图的设计上可以看出,这是在普通型的基础上增加了右侧的规格列表框构成的。

点击任一个规格,左下侧的缩略图列表将会变成该规格相应的图片,比如选择黑色,那么将会显示黑色规格的所有图片。

这个扩展的设计很棒,建议在网店系统中实现。

B2C网店系统产品图片橱窗设计参考

点击一个图书产品的产品图片弹出的层(注意是层而不是新的页面)。该类橱窗比上面两种都要复杂得多:

左侧是该产品概述栏,有加入购物车按钮,下面是Book sections导航,并提供Search inside this book功能(只有当前的图书有电子版才能实现吧)。

右侧是浏览历史和Also Bought形式的产品推荐。

中间是该图书的当前页面(可以从第一页看到最后一页),并提供放大缩小功能。

顶部右侧还提供了一些小功能,如Feedback、Help、Expanded View(将该层展开,占满浏览器屏幕)和Close。

这个橱窗页面的设计较为复杂,是专门针对图书类商品设计。

对于图书类产品,顾客在试读的过程中往往会做出购买决定,而且图书类产品基本不会涉及产品规格,所以在该页面整合了Add to Cart按钮和Also Buy关联推荐,这点和其它产品有所不同了。

总结

 2/2   首页 上一页 1 2 下一页

文章TAG:摄影设计  
下一篇