Reflection on the form of picture display

A picture is one of the basic elements that make up a Web page. The picture not only can increase the attractiveness of the Web page, convey to the user richer information, but also greatly enhance the user in browsing the Web experience. The display of the pictures is rich and diverse, and different forms of picture display also make the fun of browsing the web more diverse.

Follow us separately to experience the various present forms of image display, let our eyes to travel.

I. Multi-picture presentation

The picture limits the maximum height or width and makes the matrix tile display, which is the most common form of multiple picture representations. Different margins and distances can produce different styles, and a quick scan by users can get more information in a short time. At the same time, the mouse suspension display more information or function buttons, not only to avoid excessive repetition of elements to interfere with user browsing, but also interactive form with fun. But the traditional matrix tile display layout is slightly formal, the browsing experience is slightly boring.

500px.com in the traditional matrix tile layout on the basis of free image size consistency, the picture to the Base Area unit 1 time times, twice times, 4 times times the size of the display. Pictures of inconsistent size show the intensity of breaking the repetition, but still arrange the layout according to the base area unit, and increase the motion for the flow information. Irregular images are fun to browse, but because of irregular flow of sight, this form of presentation is not conducive to the search of information.

Pinterest waterfall Flow Patchwork, set wide and indefinite high design lets the page break through the traditional matrix picture display layout, clever use of visual level, the arbitrary flow of sight and ease the visual fatigue. Users can quickly scan through many pictures and then choose the ones they are interested in. But this also lets the user when browsing, easily misses some content.

Two. Next preview

While maximizing the display of a picture, let the user see other content in the album. The next part of the preview, more to attract users to continue to click Browse. The next thumbnail display, the next blurry display, or the next section shows that the different preview presentation is challenging the user's curiosity.

In Photodom, the user does not provide the next preview when browsing the specific picture, only the next thumbnail appears when the user hovers the mouse over the Next button. Although the animation effect of thumbnails does not allow the user to achieve the desired preview, the flash-back stimulus prompts the user to click on the next one.

DailyBooth can also preview the next picture, while previewing the next picture. This kind of more content, the user will not only be attracted by the content of the next picture, perhaps more curious about the next picture of the content of other information.

Three. Portrait of visitors and members

Visitors or members of the avatar itself is also a picture, different from the user's display of pictures, the avatar more display is historical interactive information, and can be extended interaction. Avatar Hover can display more information and function buttons, or display a larger size of the avatar.

The user's avatar in the Shrimp music network is displayed in a tiled manner, with the mouse hovering to expand some of the user's information. Interesting interactive ways to make this part of the region is not only the display area, dynamic effect to attract users to hover while also enhancing the user's click Desire.

Four. QQ Space Picture Display optimization exploration

Through the visual experience above, we can get a general idea that the focus of the picture presentation is:

1. Easy for users to browse, reduce visual fatigue

2. Show more picture information and picture related information

3. Through the mouse hover small animation, provides the experience feeling strong interactive form

4. To attract users to click, from the small picture to see the big picture, or look at the next one

5. To attract users to the relevant extension of the operation of the picture, rather than stay in the browsing

QQ space At present there are many picture elements of the module, through the above summary, we start from these modules, try a new picture presentation and interactive way, hoping to play a role in the.

A. Multi-graph dynamic

The current QQ space in the display of friends more than the picture dynamic, the first picture shows a large image, other pictures with thumbnails display. If the definition of the smallest area unit, then to 1 time times, twice times, 4 times times the display of pictures, more dynamic form, effectively reduce visual fatigue, and can match a number of pictures, users can see more pictures of more content.

B. Visitor Avatar

When the mouse hovers over the visitor avatar, the visitor avatar area is visually enhanced and displays features or information in other areas. Experience a strong interactive form can attract users to hover operation to click.

C. Next Preview

When browsing the image, display the previous and the next piece of content, the mouse hovers over the entire contents of the thumbnail, and as the previous and the next entry of the operation.

With the development of the Internet, there will be more innovative forms of picture presentation, we might as well wait and see how the Internet will give us a visual surprise experience it.

Article Source: Tencent Isux