Product picture Design for Business E-commerce website

The importance of the product picture for the shopping website is self-evident, for online shop designers how to design to meet the needs of online shop pictures, this for the experience of designers, of course, in the design we can refer to some foreign shopping website product pictures, learning and inductive experience for the future design can play a multiplier effect.

1 importance

In the online sales system, it is difficult to achieve the "WYSIWYG" product display effect, no matter how many pictures, from all angles, high resolution, superb shooting skills, or video, 3D display and so on technical means, are directly unlimited close to the physical reality of shopping real feelings: Get the clothes, touch with the hands of the material, Close taste design, try to wear and so on, online shopping everything is wonderful, but it will take your time (some people treat this as enjoyment, hehe) and bear the extra cost of the shop at the price.

That even if online shopping will be less than the physical experience, online shopping has its unique advantages, convenient, save time, price concessions, etc., but if because the product is not enough to understand, buy not gratified products, customers in addition to return or silently bear losses, and then vowed not to shop online, We will never (at least for some time) lose this precious customer.

Simple product map display features and rough product pictures are not appropriate. Only one or two pictures, the resolution is still very low, this is not respect for customers, you do not expect customers will come shopping, will believe that you are selling authentic.

In turn, provide a wealth of pictures, all angles, to provide a local amplification function, so that customers see more clearly, handle the background, models, shooting light, do lossless scaling processing, etc., so that customers fully understand the product and feel the seriousness of your site, From the product show began to take seriously before there may be serious sales and after-sales service.

I think as the designer of the shop should attach great importance to the product picture function design and picture processing.

2 reference to excellent design

Design excellent product picture function, the best way is to refer to the corresponding design of the major excellent site, a learning.

2.1 Amazon.com features Powerful

Amazon.com is undoubtedly the development of E-commerce systems must refer to one of the systems, textbook-like design, even if you want to alternate channels, but
Full knowledge is always obtained.

The image above is Amazon.com's product detail page, which identifies 1 ~ 5 digits, representing different parts.

Plot area and FLV video. The map area on the left is consistent with the web browsing habits, after the study of people's web browsing is according to F-type, so
The top left side is the first position of sight, which conforms to the purpose of the product detail page.
In addition, the default figure has a Play button, which is an FLV video introduction.

Multi-thumbnail: Below is a thumbnail of the other pictures, the mouse will switch to the corresponding picture.
"Note" By looking at the code, 1 and 2 is a full flash, so the switch can add effects, and the load speed will be somewhat elevated.

Zoom in and out function.
Zoom out function In other sites will also be provided, such as clothing category site. This is a technique for displaying high-resolution pictures. otherwise directly
Display the high-resolution picture, the page will hold up very large.
Spin: Rotate function. It is also not difficult to achieve, just a product around a central axis to take a loop of photos (such as 36), and then
Looping through each frame, there is the effect of rotation. Use Flash or JS to play all can.

Click "See all Customer Images": That is to view the customer (may be the customer who purchased the product) can upload their own use of the product
Figure, share with other customers the experience and happiness of using the product (this is a good feature, it deserves special analysis).

Multi-picture Pop-up display window: Click on the pop-up, in the window, you can zoom in, zoom out, reset, rotate, and so on.

Brief design reference of 2.2 gap.com clothing category

Mouse Focus Zoom In: When the mouse is moved to the main image, zoom in and see the details. Domestic clothing class site common functions.

View larger: See larger image. After clicking the big picture, this is also a commonly used technique, but the gap will be multiple graphs and color specifications
The corresponding figure is also processed to facilitate the customer to see the effect of each color. That is, each SKU will correspond to a separate picture.

Multiple thumbnails: Like Amazon, the necessary features, the common way to display.

Color Rule map: The above image is covered by the enlarged image, the reader can view it, when the mouse is moved to the color block, the main diagram will be followed by the switch.

2.3 Bule Nile

Buile Nile also has amplification function, but unlike the gap is the mouse move on the display immediately, but after the mouse moved
Display zoom+ Click Tips. Different treatment methods, can be taken into account the diamond, ring and other commodities small, local amplification effect is not small.

Multiple graphs are also shown below, but if there are more, use more to express, you can go to the pop-up layer view of multiple graphs.

2.4 Buy.com

Buy.com's display is somewhat similar to Amazon's, and the default is an FLV video. Here are a number of larger graphs, and then over 5 pictures,
Show more links, click on the pop-up image display page.

In addition to the video (can directly click on the main arrow or below videos), but also provide demo demo, is really too rich.

The importance, reference and generalization of the product picture

3 Induction

Location: Basically on the left side, this is in line with browsing habits.

Main show bit: show default picture and default video playback button.

Multi-thumbnail: when there are multiple graphs, place thumbnails below the main image, or switch automatically when the mouse is moving or when clicked.

More map more: When more than 5 pictures, display more, to avoid the following too much typesetting. But this is not a problem, if the layout of the design when the branch occurs
No effect, you can not use more.

Zooming in and out: Common features, recommended implementations, and one of the techniques for dealing with high-resolution images.

Rotation: There is a significant increase in the number of pictures that have their business value but will cause the page to load. Therefore, we should consider the optimization of technology implementation.

SKU Specific Picture: Common is set for color, many sites only to the default color to provide pictures, which is not reasonable.

Large picture display area: General use pop-up new Window form, will be independent design, later I will specialize analysis. This is what I propose to achieve.

Video: Now more popular in the FLV (FLASH video) format videos, file share of low, good quality, small size, very suitable for the production of video products.
will be integrated in the system.