数极客首页

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

一. 概述

在网店系统的产品细致
页面中,展示

产品细节触及
多张产品图片和相关的媒体文件、pdf、doc等,可供顾客阅读
产品细节、中止

试读、试听、试看等,从各个角度来引见
产品,这些内容越丰厚
越有利顾客了解

产品, 也越有利顾客做出置办

决议

但产品细致
页面自身

就有很多信息,包括产品称号
、价钱
、描画

、规格参数、评论等,假定

还加上这么多图片和媒体文件,那么该页面将会显得十分

臃肿,招致
排版艰难

,读取速度变慢等问题。

往常

通用的处置

方式是设计一个特地
的产品图片橱窗页面(Product Photo Gallery)。

该页面的入口普通
是直接点击产品细致
页面的产品大图然后弹出层或者弹出新页面。该页面侧边列出当前产品一切
的产品图片的缩略图,点击缩略图时,中间区域显现
对应的大图,有些还提供放大功用
,供顾客查看关注的细节。

产品图片橱窗的完成
方式目前常见的是两种:

  • Flash图片橱窗
  • Javascript图片橱窗

下面凑合
这两种方式做细致
阐明

.

二. Flash 图片橱窗

典型的例子是淘宝,完成
方式是设计一个Flash程序,读取指定目录下的指定文件(若干个),但是淘宝做得并不好,觉得
会招致
图片失真,所以绝大部分

店主都是在细致
页面中插入图片的方式显现
给顾客。

Flash方式的益处

是不容易被复制或者做盗链,有利于维护
图片,而且假定

做得好,效果也很漂亮,淘宝在这点上做得太过粗糙了,常常
会掩盖了Flash橱窗的优点。

这里有很多优秀的Flash Galley,可做参考:

http://flash-gallery.com/

下面是该网站中两个例子的截图:

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

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

但Flash橱窗比较

不好的一点是不利于SEO,而且假定

要完成
更多的和效劳
器端的互动操作,需求
对Flash的编程言语
ActionScript较为熟习
才行。这关于
习气
于javascript的开发人员就得学习一种新的技术了。

三.  Javascript图片橱窗

Javascript完成
产品图片橱窗是常见的处置
方式,有利于SEO优化,而且经过
JS+Html+CSS能够

完成
更多复杂的效果和互动功用
。至于避免

盗链,笔者觉得经过
在图片上做水印才是彻底的处置

方式。

Javascript Galley的最佳参考例子是Amazon了,读者致使

能够

将Amazon的产品图片橱窗的完成
代码下载下来参考自创

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关联举荐

,这点和其它产品有所不同了。

总结

  • Flash固然
    效果很漂亮,但是国内运用
    Flash做产品橱窗做得好的暂时没有发现,我提供的参考例子只是一些样例,并没有理论

    的整合到网店系统中的优秀案例,而且由于
    它对SEO不友好,加上需求
    开发人员控制
    一门新的技术,所以并不举荐

    运用

  • 采用Javascript + Html + CSS能够

    完成
    更为复杂的功用
    和展示

    方式(炫目的效果并不是首要的,友好的功用
    才是最重要的),这是完成
    产品图片橱窗模板的最佳选择。

  • 应该支持规格的个性图片橱窗展示

    ,有利于顾客查看指定规格的产品图片,而不是大杂烩的混在一同

  • 支持多套橱窗模板,如Amazon.com这样,还能够

    思索
    进一步的扩展,比如

    将Dvd影片类产品的试看功用
    、Mp3类产品的试听功用
    都整合到橱窗模板中,针对不同的产品目录、产品类型而作相应调用。

来源:http://blog.ebizer.org/picture-window-design/

给大家举荐

我国新一代大数据用户行为剖析

与数据智能平台:数极客(https://www.shujike.com),是支持无埋点、前端埋点、后端埋点、API导入四种混合数据采集方式,整合剖析

用户行为数据和业务数据,能够

自动监测网站、APP、小程序等多种渠道推行
效果剖析

,是增长黑客们必备的互联网数据剖析

软件。数极客支持实时多维剖析

、漏斗剖析

、留存剖析

、途径
剖析

等十大数据剖析

办法

以及APP数据剖析

网站统计网站剖析

小程序数据统计用户画像等应用场景,业内首创了六种提升转化率的数据剖析

模型,是用户行为剖析

范畴
首款应用定量剖析

与定性剖析

办法

数据剖析

产品

发表评论

评论已关闭。

相关文章