Website user experience design guide for different cases

[Core tips] How can we make the product design "concise "? If you are not inspired, take a look at the suggestions in this article.

Is Shenma a "concise atmosphere "?

Now, the flat design that people talk about is undoubtedly the endorsement of these four words. It also brings new ideas to the graphic design that seems to have left people's vision. We find that many design methods are still very classic.

No matter whether it's communication with the customer or the product manager's PK, when the N + 1 change is still uninspired, you may wish to use the small suggestions provided in the workshop for help.

　Adjust the chart version rate to change the impression

Adding images is the most effective way to immediately change and change the overall impression.

The print rate is a concept that is often mentioned in the magazine layout: that is, the ratio of the area occupied by images on the page. The magazine pages with a high graphic version rate will bring a young and active impression to people. On the contrary, they are all text, and the graphic version rate is 0, so the page looks much more calm.

　Enlarge the image to increase the display space

Although Netease Weibo has been tepid in terms of products, the design of the big picture version gives the overall sense of a simple trend, and every time you refresh the changed cover image, the daily logon process becomes interesting.

　　

 

　　

 

　　Change image proportion

Even if all images are images, the image version rate can be changed. This type of image listing is often used in product display. Although the ordinary jiugongge design is neat, it does not change and has no visual focus, merging several image spaces into one presentation can produce stronger topical effects.

　　

 

　　Color Block for repeated typographical

When there are not enough image resources, such as message information and image parallel, you can use color blocks of the same size as the image to maintain the uniformity and simplicity of the interface.

　　

 

　　Use icons instead of Text

Using clear icons instead of text can help you separate the navigation and other operation areas from the text reading area.

　　

 

　Create a sense of rhythm

Do you know? The viewer and A Simple poster design will also have an interactive process.

When you reach the distance of 20 meters, you will be attracted by the characters and colors above it. When you approach the distance to 5 meters, you will see its slogans, and when you come to the front, you will find new text information. The poster creates a sense of attention by watching the changes in distance and guides you into the future.

　　

 

Similarly, in addition to using clear information grouping to guide the visual interface, you can also consider adding a rhythm to interactions. I do not think that we do not need to create a space relationship in the flat design era, by changing gestures, different depth-of-Depth Effects on the interface can be created, making the interface breathe.

For example, when the AppFlow pull-down refresh is performed, the background image will be from far to near, and the visual space will be expanded without knowing it.

　　

 

　　Use clear colors to create an aura

When wearing clothes, we pay attention to the "Gas Field", and the colors used in the design should also be clear, to avoid the use of mixed colors, so that the elements between interfaces are compared.

　　

 

　　Stop full inertia

As mentioned in the style tower psychology, the deletion principle is to exclude unimportant parts from the graphic image, and only retain those absolutely necessary components to simplify the vision. Don't fill it out, that is, we often say to leave it white. The design here needs to be reduced with the product.

In actual projects, I often encounter such conversations:

"Why is this function available here? It seems that the user cannot use it ......"

"This function does not seem empty here, and what if it is used by the user ?"

"……"

In the past, people used to purchase products at the same price. In the end, people will choose products that seem fully functional. In the era of information competition and functionality, inertia will make you want to add enough functions or information to meet your needs. In this case, if the page with full information is not cut down, a certain level of grouping and organization processing will be formed, it will also become a helpless TV remote control.

In fact, the problem that the interface is not empty should be solved by the designer. with a certain degree of white space, we can achieve good results. We only need to confirm whether this function is required or not, does it conform to the user's use scenario?

　Hide and merge

When faced with features that cannot be removed, we can use the "Master interface priority mode" to hide some features.

For example, in reading, for a more immersive reading experience, gestures are often used to hide functions outside the reading stream. For example, if you slide your Pro to the left to review and forward, full Screen reading of Douban reading.

　　

 

　　

 

The main interface is prioritized by reducing frequent page switching. For example, the common function of viewing a large image is to slide to a new page to view image details, but does it really need to be so troublesome?

On the AppFlow and Netease Application Center Application home pages, you can scroll down with a gesture to enlarge the current page of the image and preview the interface effect of the App. This provides a simple experience.

　　

 

In addition to the hidden functions, we can merge functions to reduce the number of UI controls and save space. For example, the integration of the following music playback progress and playback control.

　　

 

Design is a process of constantly creating new possibilities. We hope that the small experience summarized above will allow the design to better return to the content and use the most lightweight and simple design to transmit core information, it also allows designers to say goodbye to the days of hard work.

Design makes life better.