Product Picture Window Design Reference

I. Overview

In the Product detail page of the online shop system, the product details are involved in multiple product pictures and related media files, pdf, Doc, and so on, for customers to browse product details, probation, audition, look, and so on, from all angles to introduce products, the richer the content of the more favorable customer understanding of products, but also the more favorable to customers to make purchase decisions.

But the Product Details page itself has a lot of information, including product name, price, description, specification parameters, comments, etc., if you add so many pictures and media files, then the page will appear very bloated, resulting in typesetting difficulties, slow reading speed and so on.

Now the common solution is to design a dedicated Product Picture Window page (Products Photo Gallery).

The entrance to the page is generally a large image of the product detail page directly clicked and then the pop-up layer or the new page pops up. The side of the page lists all the product pictures of the current product thumbnails, click on the thumbnail, the middle area to display the corresponding large image, some also provide amplification features for customers to view the details of the attention.

The implementation of the Product picture window is now common in two ways:

Flash picture window JavaScript picture window

These two ways are described in detail below.

two. Flash Picture window

A typical example is Taobao, the implementation of the way is to design a flash program, read the specified directory under the specified file (several), but Taobao did not do well, feeling will cause picture distortion, so most shopkeepers are in the detailed page of the way to insert pictures to the customer.

The advantages of flash is not easy to copy or do hotlinking, to protect the picture, and if done well, the effect is also very beautiful, Taobao in this way too rough, often will cover up the advantages of the Flash window.

There are many excellent flash galley, can be used for reference:

http://flash-gallery.com/

Below is a screenshot of two examples from this site:

But the Flash window is not a good point is not conducive to SEO, and if you want to achieve more and server-side interaction, need to flash programming language ActionScript more familiar with the line. This is a new technique for developers who are accustomed to JavaScript.

three. JavaScript picture window

JavaScript to achieve the Product picture window is a common way of processing, conducive to SEO optimization, and through the JS+HTML+CSS can achieve more complex effects and interactive functions. As for the prevention of hotlinking, I think the image by doing watermark is a complete solution.

The best reference example for Javascript Galley is Amazon, and readers can even download the implementation code of Amazon's Product picture window for reference.

Amazon's product picture window design includes a variety of ways:

: Lists the general form of thumbnails and current large graphs. Specification correlation: Each individual specification (such as color, size) is associated with the product picture of the specification, by clicking the specification to switch. Book probation: specifically for books reading, and provide related recommendations and some other functions.

The first two are common to most products, while the third is specifically for book products. I guess Amazon's Product picture window template can be directed to the product catalog level. The first and second of these are written in a template, and then judged by whether the product supports specifications for different display, the template is through the template, such as globalgallery.jsp. The third type is the independent window template, which is associated with the category in books, such as booksgallery.jsp.

3.1 Design Description General window screenshot

Clicking on a generic product with no specifications will pop up the screenshot above.

Ordinary type of window design is quite simple, divided into the next three parts, above is the big picture shows the main part of the center is the function bar, there is magnification, shrink and restore normal three. Below are thumbnails of multiple pictures.

Specification Association Type

Clicking on a product with a specification will pop up. 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

As can be seen from the design above, this is based on the normal type added to the right-hand side of the specification list box composition.

Click on any of the specifications, the lower left side of the thumbnail list will become the corresponding image of the specification, such as the selection of black, then will show all the black specifications of the picture.

The design of this extension is great, it is recommended to implement in the shop system.

Book Probation Type

Click on a book product's product picture pop-up layer (note that the layer is not the new page). This type of window is much more complex than both:

On the left is the product overview bar, the Add Shopping cart button, the following is book sections navigation, and provide search inside this book feature (only current books have electronic version to achieve it).

On the right is the browsing history and also bought form of product recommendation.

The middle is the current page of the book (you can see the last page from the first page) and offers zoom out.

The top right-hand side also provides small features such as feedback, help, Expanded View (which expands the layer, fills the browser screen), and close.

The design of this window page is more complicated, it is specially designed for the book-type commodity.

For books, customers in the process of probation tend to make a purchase decision, and the book category products will not be involved in product specifications, so the page has integrated the Add to Cart button and also buy association recommendation, this and other products are different.

Summary Flash Although the effect is very beautiful, but the domestic use of flash to do a good product window does not find, I provide a reference example is just some examples, and there is no actual integration into the online shop system of excellent cases, and because it is not friendly to SEO, coupled with the need to develop a new technology developers, So it is not recommended. JavaScript + Html + CSS to achieve more complex features and presentation (the dazzling effect is not the first, friendly function is the most important), which is the best choice to achieve the Product Picture window template. Should support the specifications of the personalized picture window display, in favor of customers to view the specified specifications of the product picture, rather than a hodgepodge of mixed together. Support for more than a set of window templates, such as Amazon.com, you can also consider further expansion, such as the DVD film products to look at the function, Mp3-class product audition function are integrated into the window template, for different product catalogs, product types for the corresponding call. Source: http://blog.ebizer.org/picture-window-design/