Talk about the cute little details of the waterfall streaming site.

Waterfall Flow layout, presumably designers are no longer unfamiliar, with Pinterest since 2011 began to become popular, waterfall flow-style layout by more and more sites use. Petals nets, heap sugar nets, cloth pockets, found, beautiful said, Mushroom Street, everyone shopping, where guests, and so on, copy Pinterest website in China, a rough estimate of dozens of.

Why Choose Waterfall Flow?

Now that the Pinterest-style is swarming, let's start from the experience point of view, the waterfall flow layout why good?
The author's humble opinion. With the advent of fast-food consumption in the reading age, waterfall flow for the display of pictures, is efficient and attractive, the user glanced at the fast reading mode can be in a short time to get more information, while the waterfall flow lazy load mode and avoid the user mouse click of the page, so browse up, with the mouse scrolling, is not the smallest operating cost to get long content experience, is not more easily immersed in it, not interrupted. Have you ever walked up and down the street to see the feeling of being attracted by a dazzling array of goods?
In addition, waterfall flow is the main characteristics of patchwork, set wide and indefinite high design so that the page is different from the traditional matrix picture layout pattern, clever use of visual level, the arbitrary flow of sight and ease the visual fatigue.

Pinterest

Pinterest, born in 2011, now has a 11 million per-month access to independent visitors, averaging 98 minutes a month on the site for each user, behind Tumblr and Facebook in many social platforms. Pinterest, as the originator of waterfall flow layout, must guide the direction of waterfall flow design.

1. Top-Suction Navigation

Why use ceiling-top navigation? The user Yimushihang to browse in waterfall flow mode, if quickly switch to the classification, back to the top, and then select categories, suction top navigation allows users to easily switch categories, design points, suction top navigation can not be too wide, color can not be too eye-catching, just to ensure that the user in need, it quietly in the can.

2. Comment Anchor point positioning

Pinterest was originally designed to be a default display of comment boxes, intended to encourage users to enter comments. In the recent revision, Pinterest's comment box was designed to: when the picture and the length of the comment is small, the comment box defaults, click on the Comment action button, Anchor point to the comment box, while the cursor flashing, prompting the user input text. The default comment box opens when the picture and the existing comment are longer (close to or greater than the height of a screen), because it costs too much to roll out the comment box if the user relies on the comment button.

3. Lightweight Click to view large graphic design

Click on the blank area to put up, click the big picture again to jump to the image source site. Very suitable for easy and casual reading especially when the user adapts to the design logic here, it is easy to create immersive browsing while satisfying the need to view the details.

4. Occupy the load, keep the visual experience smooth

Users in the continuous scrolling mouse wheel browsing process, the speed is not always satisfactory, so the use of placeholder loading form (preload out the picture height of the gray chart), not let the loading process of the screen too beat,

Can let the user visual experience gentle, the visual excessive fluency, as far as possible interferes the user browsing behavior.

The convenience of 5.Pin it tools

Pinterest mode is led by the waterfall streaming site Another sharp weapon is the pin it tool. Users in a variety of web browsing, with pin it first for their own collection of content, followed by the site to create content. And can be Pinterest as a user of an online Image collection folder, when users like content here, traffic is not worry.

Huaban

Petal nets are one of the earlier "class Pinterest" sites, located on the basis of interest in social sharing sites, which provide users with a simple collection tool to help users organize and collect their favorite pictures. Petals are similar to Pinterest in design and experience, but there are some intimate details of their design.

1.icon+title, make navigation more concise.

The Title property is: Specify additional information about the element. This information typically displays a ToolTip text (ToolTip text) when the mouse moves over the element. That is, when the mouse hovers, through the title of the hint can bring users more information.

Because of the content-led Web site, the framework is mostly lightweight design, so the petals of the navigation is also very simplified, can use the place of icon without words. So icon+title to maximize the savings of the layout, reduce the structure, but also not to confuse users.

2. Timeliness of thematic page design-Petals Weekly

How to give users the latest hottest content, Petal Weekly is one of the ways. Through a simple page aggregation of the most popular content, but also to help users explore the interests of one of the means.

3. Turn right page larger

In the home page, when you look at the details of a diagram, unlike Pinterest, the petals take the form of landing pages, and the right side page can help users see the other content under the artboard, while the right arrow is larger, showing more areas of Click. Through the differentiation, subconsciously help users to choose to click the right arrow to make the right page, you can let the user stay longer in the artboard.

Guang

Guang.com2012 was born at the beginning of the year, the website is dedicated to help users find like, recommend more suitable for their own consumption. Although it does not have a collection tool in a typical class Pinterest web site like pin it, waterfall flow is one of its main presentation modes.

1. The charm of numbers

From the overall sense of the design, Guang is a lively website, a dazzling array of goods like a big shopping malls, and the inside through a number of accurate embodiment of the atmosphere, more contrast. "6,600 things you might like", "2,876 recommended babies," the precise numbers make the user aware that there is a lot of content here and get more.

2. Physical and chemical design to increase the sense of taste

Theme Street leisurely rolling, coupled with the road sense of the spacing line, is not a walk and stroll feeling.

Small rocket-style return to the top, is there a "miso" for a quick feel?

Web design appropriate use of some of the fun of the small elements can add to the interest of the site, so that users feel that this is the design of love, there is Love website.

3. Functional operation is simple.

In the waterfall stream, the only operation in the Guang is "like". Like to host the collection, collection and collation of the role. The simple operation also facilitates the user to the content management. The simpler the operation, the lower the user's learning cost, the more content they contribute.

Summary：

As the saying goes, the details determine success or failure, user experience for the king of the Times, with some warm little details, impress your users, keep your users, you can subconsciously in your site to stay longer, more comfortable to use.

Of course, the production of each detail depends on the scene, the use of the crowd and design purposes three aspects. Back to the source, the design is ultimately the realization of product requirements and services, and in the product of an entire life cycle, demand is constantly optimized and change. Site with the changes in user groups and the embodiment of the data is also in constant revision of details, Internet product user experience design experience accumulation is always to endless experience and constant experimentation and exploration. This kind of update iteration is unable to match this type of analysis article, throws this small manuscript, all when oneself, welcome everybody to take the brick casually!

Source: http://udc.weibo.com