Different case View website user experience "Concise Atmosphere" design Guide

How can we make the product design "simple atmosphere"? When you are not inspired, take a look at the suggestions in this article.

God horse is "simple atmosphere"?

Now people relish the flat design has undoubtedly become the endorsement of these four words, but also seemed to leave the people's view of the graphic design brought new thinking, we found that many design methods are still very classic.

Whether it is with the customer's communication or product manager PK, in the first n+1 change is still no inspiration, may wish to draw on the following small suggestions to rescue.

　　Adjust the chart rate to change the impression

The addition of pictures is the most immediate way to change and replace the overall impression of the magic weapon.

The chart rate is the concept often mentioned in the magazine layout: The ratio of the area of the picture in the page. The high plate rate of the magazine page will bring a young and active impression, on the contrary, all is text, the chart rate is 0, such a page appears calm many.

　　Enlarge the picture and increase the display space

Although in the product NetEase Weibo has been tepid, but in the design of a large picture of the revision so that the overall has a concise sense of the trend, and each refresh the change of the cover picture so that the daily login process also become interesting.

　　Change Picture proportions

Even all pictures can change the chart rate. The product display often has this kind of picture to list the form, the ordinary nine Sudoku design although neat, but did not have the change and the visual focal point, will several picture bits merge becomes one to carry on the demonstration to have the stronger special effect.

　　Color blocks for repeated composition typesetting

When the picture resources are not sufficient, such as message class information and picture juxtaposition, you can use the same size as the image of the color block to maintain the unity and simplicity of the interface.

　　Use icons instead of text

Using an explicit icon instead of text can help the navigation and other operating areas separate from the text reading area.

　　Create Rhythm

You know what? The viewer and a simple poster design also produce an interactive process.

When you are 20 meters away will be attracted by its characters and colors, approached to 5 meters when you will see its slogan, and go to the front will find new small print information. Posters create a level of reading by viewing the changes in distance, and guide you through the deep.

The same, in addition to the use of explicit information in the interface to guide the vision, but also to consider in the interaction to join the rhythm, I do not think in the flat design era we do not need to create a space relationship, through the change of gestures to create a different interface depth effect, you can make the interface full of breathing.

For example, Appflow in the Drop-down refresh, the background picture will be from far to near, in the sense of expansion of the visual space.

　　Use bright colors to create a gas field

Wear clothes we pay attention to "gas field", and the design of the use of color should be clear, to avoid the use of ambiguous colors, so that the elements between the interface is compared.

　　Quit the full of inertia

Gestalt psychology mentions a deletion principle, that is, to exclude unimportant parts from the image of a composition, and to retain only those parts that are absolutely necessary to achieve visual simplification. Don't fill it with what we often say, the design needs to be subtracted from the product.

In the actual project, the author often encountered such a dialogue:

"Why do you put this function here?" he said.

"This feature doesn't look empty, but what if the user uses it?"

“......”

People used to consume the same price, in the end, people will choose seemingly full-featured items, in the information competition and function of the era, inertia will make you want to add enough function or information to meet the user, in this case, the full information of the page if not the deletion of the processing, The formation of a certain level of grouping and organized processing, it will become a helpless TV remote control.

In fact, consider the interface empty problem should be given to the designer to solve, through a certain degree of white can achieve good results, we only need to confirm the need for this function, how many needs, characters do not meet the user's use of the scene?

　　Hide and merge

When facing the function that cannot be removed, we can adopt "main interface priority mode", hide some function.

For example, in reading, in order to more immersed in the reading experience, often use gestures to hide the functions outside the reading stream, such as pro-left-slip for comments and forwarding, watercress reading full screen reading.

The main interface is also reflected in the reduction of frequent switching interfaces, such as the common view large image features, in the past we often used to slide to the new page to see the picture details, but really need so much trouble?

In the Appflow and NetEase Application Center application of the home page, through gestures down to the current page to enlarge the picture, preview the App interface effect, this experience is very concise.

In addition to hiding features, we can combine features to reduce the number of UI controls, thereby saving space, such as the following for the music playback progress and playback control integration.

Design is to create a new possibility of the process, hope that the above summary of these small experience can make the design better return content, the use of the lightest, simple design to convey the core information, but also let designers early farewell bitter forced overtime day.

Design makes life better.