Internet Product user Experience Design: Waterfall Flow layout Web page design details

Article Description: 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 the top-suction navigation? The user Islands 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. Anchor point positioning of comments

Pinterest was originally designed to show all the default 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 the 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.

[1] [2] Next page