Differentiated Design of image waterfall stream

After Pinterest, the waterfall could not escape from Chinese people, and it became the object of many websites competing to imitate. In terms of effect, such a layout is indeed refreshing. Meide said that mogujie.com and huaban have become a favorite websites, among which waterfall flow is indispensable.

 

Although there are many benefits, the same style will always make people feel aesthetic fatigue. Generally, waterfall streams are like this:

 

 

Its disadvantages are also obvious:

 

1. Messy. It seems to be a rich array of content, but it is dazzled. The entire middle part is all hotspot areas, increasing the psychological pressure on users.
2. The image is only displayed, and generally has no effect.
3. Dynamic Information Display is of little use. The image content is the main information point of this type of site, and the text effect on the home page is negligible.

 

Okay. From these three points, let's try to design a new waterfall stream. Make it different from the existing waterfall.

 

1. Increase the image width. Reduce the number of columns in each row. The three columns are recommended to reduce the amount of information on one screen and avoid fatigue.
2. Add some effects. For example, you don't need to place the information below it separately. You just need to slide the mouse and display a transparent mask to display the basic information (the title, time, and so on, the best effect is that you don't need any help to show your images.) similar to the effect on some banner websites. In addition, you can also consider the metro effect, that is, the Win8 tile effect, but you must control the flip frequency. Otherwise, the image will be messy when there are too many images, or the program randomly specifies the image with the flip effect, not all of them are flipped. Or the conversion of black and white and color graphs also applies the mouse sliding effect. There are many articles about the effect.
3. Dynamic information can be removed. Some practical information can be displayed through the effect in step 2. Other information can be displayed, including the number of shares and comments, directly on the left and right sides of the picture, you can use text or interesting images.

 

In fact, this is a subtraction of most existing websites, not a wide range of changes. We enlarge the image center effect and reduce the amount of information on a single screen to reduce the browsing pressure on users.

 

The information points are completely handed over to the image itself to maximize the value of the image. To change the current similar picture, the following figure shows a dynamic layout. It applies the traditional effects so that users can concentrate on the graph first, then see the word, or directly enter the graph to minimize the text effect.

 

In fact, most of the messy feelings are contained in the text of each image. Adjust the spacing properly to reduce the clutter.

 

 

Of course, this is just an idea. The purpose is only a differentiated design. In addition, with the result of your own experience, how can we test the specific effect again in practice, as a reference.

 

This type of website can be used in many products, but currently it is basically better to use shopping navigation sites, such as tourism, dating, life information, Group Buying navigation, as well as the book reviews I prepared myself can all be implemented through waterfall streaming.

 

Taking the book review site as an example, the waterfall page design on the home page must be based on the above idea. The content page is of course a book, then, the links to the collected Reading Notes/log links are shown below. Purchase links may be placed on both sides. Compared with shopping navigation, this site is dominated by comments, and the purchase link is only the second. The search bar should not be less on the top of the home page, and it will scroll down when the waterfall goes down to facilitate searching for relevant books.

 

In fact, tourism websites can also achieve good performance. The waterfall on the home page can adopt a Fully Mixed display mode, that is, the display mode with unlimited width and height, as long as the page is full, here we mainly consider the aspect ratio of the camera. This may bring great challenges to front-end engineers, but the effect is much better than a simple waterfall with several columns in a row. The content page is supplemented by user travel logs. A complete log is displayed at random and links to other user logs are listed in prominent locations.

 

Other types of websites can also be imagined by everyone. Page planning allows you to design a framework based on the characteristics of relevant types of sites.

 

Finally, we would like to say that the homogenization of products seriously hinders our innovation, and how to get out of a different path is our eternal topic. products that can be copied may be recognized. If we don't innovate, we will drown in this waterfall sooner or later, but if we have a heart, even if the effect is not good, it will not hinder the next leap of our thinking, and accumulation will usher in a leap.

 

------------------------------------------------

If you use word2007 to publish a video, the film is not displayed or you are prompted to have an attachment but no attachment, please go to the independent blog to view the complete article!

Modify and add content of the article only in the independent blog!

My independent blog: kiddie-http://www.zyblog.net/

Link: http://www.zyblog.net/post-88.html

You are welcome to reprint it. Please indicate the source of this article.