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

1、一. 概概述在网店系系统的产产品详细细页面中中，展示示产品细细节涉及及多张产产品图片片和相关关的媒体体文件、pdff、dooc等，可供顾顾客浏览览产品细细节、进进行试读读、试听听、试看看等，从从各个角角度来介介绍产品品，这些些内容越越丰富越越有利顾顾客了解解产品，也越越有利顾顾客做出出购买决决定。但产品详详细页面面本身就就有很多多信息，包括产产品名称称、价格格、描述述、规格格参数、评论等等，如果果还加上上这么多多图片和和媒体文文件，那那么该页页面将会会显得非非常臃肿肿，导致致排版困困难，读读取速度度变慢等等问题。现在通用用的解决决方式是是设计一一个专门门的产品品图片橱橱窗页面面（Prroduu

2、ct Phooto Galllerry）。该页面的的入口一一般是直直接点击击产品详详细页面面的产品品大图然然后弹出出层或者者弹出新新页面。该页面面侧边列列出当前前产品所所有的产产品图片片的缩略略图，点点击缩略略图时，中间区区域显示示对应的的大图，有些还还提供放放大功能能，供顾顾客查看看关注的的细节。产品图片片橱窗的的实现方方式目前前常见的的是两种种：Flassh图片片橱窗 Javaascrriptt图片橱橱窗 下面将就就这两种种方式做做详细说说明.二. FFlassh 图图片橱窗窗典型的例例子是淘淘宝，实实现方式式是设计计一个FFlassh程序序，读取取指定目目录下的的指定文文件（若若干个），

3、但是是淘宝做做得并不不好，感感觉会导导致图片片失真，所以绝绝大部分分店主都都是在详详细页面面中插入入图片的的方式显显示给顾顾客。Flassh方式式的好处处是不容容易被复复制或者者做盗链链，有利利于保护护图片，而且如如果做得得好，效效果也很很漂亮，淘宝在在这点上上做得太太过粗糙糙了，往往往会掩掩盖了FFlassh橱窗窗的优点点。这里有很很多优秀秀的Fllashh Gaalleey，可可做参考考： HYPERLINK / httpp:/flaash-galllerry.ccom/下面是该该网站中中两个例例子的截截图：但Flaash橱橱窗比较较不好的的一点是是不利于于SEOO，而且且如果要要实现更更

4、多的和和服务器器端的互互动操作作，需要要对Fllashh的编程程语言AActiionSScriipt较较为熟悉悉才行。这对于于习惯于于javvasccrippt的开开发人员员就得学学习一种种新的技技术了。三. Javvasccrippt图片片橱窗Javaascrriptt实现产产品图片片橱窗是是常见的的处理方方式，有有利于SSEO优优化，而而且通过过JS+Htmml+CCSS可可以实现现更多复复杂的效效果和互互动功能能。至于于防止盗盗链，笔笔者觉得得通过在在图片上上做水印印才是彻彻底的解解决方式式。Javaascrriptt Gaalleey的最最佳参考考例子是是Amaazonn了，读读者甚至

5、至可以将将Amaazonn的产品品图片橱橱窗的实实现代码码下载下下来参考考借鉴。Amazzon的的产品图图片橱窗窗的设计计包含多多种方式式：普通型：列出缩缩略图和和当前的的大图的的普通形形式。 规格关联联型：每每一个独独立的规规格（如如颜色、尺寸）都关联联该规格格的产品品图片，通过点点击规格格进行切切换。 图书试读读型：专专门针对对图书阅阅读，并并提供关关联推荐荐和其它它若干功功能的. 前面两种种是大多多数产品品公用的的，而第第三种则则是专门门针对图图书类产产品。笔笔者猜测测Amaazonn的产品品图片橱橱窗模板板是可以以指向到到产品目目录级别别的。其其中第一一种和第第二种是是写在一一个模板板

6、内，然然后通过过判断产产品是否否支持规规格来做做不同的的显示，该模板板为通过过模板，比如叫叫GlooballGalllerry.jjsp。第三种种则是独独立的橱橱窗模板板，在BBookks CCateegorry中关关联调用用，比如如叫BoookssGalllerry.jjsp。3.1设设计说明明普通型橱橱窗截图图 点击一个个普通的的无规格格的产品品的产品品大图即即会弹出出上面的的截图。普通型橱橱窗的设设计相当当的简单单，分为为上中下下三部分分，上面面是大图图显示的的主体部部分，中中间是功功能栏，有放大大、缩小小和恢复复正常三三个。下下面是多多个图片片的缩略略图。规格关联联型 点击一个个带有规

7、规格的产产品的产产品大图图即会弹弹出。 htttp:/wwww.amaazonn.coom/KKitcchennAidd-KSSM1550PSSWH-Arttisaan-55-Quuartt-Miixerr/dpp/B0000005UPP2K/reff=srr_1_3?iie=UUTF88&s=kittcheen&qqid=1277695589664&ssr=11-3从上图的的设计上上可以看看出，这这是在普普通型的的基础上上增加了了右侧的的规格列列表框构构成的。点击任一一个规格格，左下下侧的缩缩略图列列表将会会变成该该规格相相应的图图片，比比如选择择黑色，那么将将会显示示黑色规规格的所所有图片

8、片。这个扩展展的设计计很棒，建议在在网店系系统中实实现。图书试读读型 点击一个个图书产产品的产产品图片片弹出的的层（注注意是层层而不是是新的页页面）。该类橱橱窗比上上面两种种都要复复杂得多多：左侧是该该产品概概述栏，有加入入购物车车按钮，下面是是Boook ssecttionns导航航，并提提供Seearcch iinsiide thiis bbookk功能（只有当当前的图图书有电电子版才才能实现现吧）。右侧是浏浏览历史史和Allso Bouughtt形式的的产品推推荐。中间是该该图书的的当前页页面（可可以从第第一页看看到最后后一页），并提提供放大大缩小功功能。顶部右侧侧还提供供了一些些小功能

9、能，如FFeeddbacck、HHelpp、Exxpanndedd Viiew（将该层层展开，占满浏浏览器屏屏幕）和和Cloose。这个橱窗窗页面的的设计较较为复杂杂，是专专门针对对图书类类商品设设计。对于图书书类产品品，顾客客在试读读的过程程中往往往会做出出购买决决定，而而且图书书类产品品基本不不会涉及及产品规规格，所所以在该该页面整整合了AAdd to Carrt按钮钮和Allso Buyy关联推推荐，这这点和其其它产品品有所不不同了。总结Flassh虽然然效果很很漂亮，但是国国内使用用Flaash做做产品橱橱窗做得得好的暂暂时没有有发现，我提供供的参考考例子只只是一些些样例，并没有有实际的的整合到到网店系系统中的的优秀案案例，而而且因为为它对SSEO不不友好，加上需需要开发发人员掌掌握一门门新的技技术，所所以并不不推荐使使用。 采用Jaavasscriipt + HHtmll + CSSS可以实实现更为为复杂的的功能和和展示方方式（炫炫目的效效果并不不是首要要的，友友好的功功能才是是最重要要的），这是实实现产品品图片橱橱窗模板板的最佳佳选择。 应该支持持规格的的个性图图片橱窗窗展示，有利于于顾客查查