Design of the "door"-Web login page on the Web page

　　

 

The logon page is the portal for users to enter the website, just like the portal for us to enter the home and the company.

Suppose we are in an environment surrounded by doors. Which door will we choose to open? Where is this door attractive to us? Can we find the door handle accurately?

In fact, these questions also apply to login pages. Do you have enough charm for login pages to make users feel free to log on? Can you accurately distinguish the information to be filled in? (For example: is it a username or phone number, where is the quick switch button?) Can you find the logon or Registration button accurately? The visual hierarchy and Interaction Relationship of these elements are as follows, it directly affects the experience of the entire page.

Logon page elements

　　

 

As shown in, generally, the logon page contains the above five important elements: LOGO, login box, advertisement diagram, help center, and bottom navigation.

Among the five elements, Logo and logon boxes are two essential elements. The Logo reflects the product brand. The logon box is the final intention of the user to enter this page. The Logo and logon box have already formed the simplest logon page. With the improvement of user experience, the advertisement diagram, help center and bottom navigation are gradually reflected in the login page.

　Logon Page Style

1. Brand

　　

 

　　

 

This type of login page is mostly composed of two elements: LOGO and login box. The page texture is strong and the operability is strong. Users can quickly enter and log on to such a login page, at the same time, the brand of the product can be clearly understood. The whole page is presented with a rational design without any visual interference.

If it is hard to say that there is interference, the possible target of interference is designers. Designers have a keen observation on high-Texture Design, the design details (such as gradient, shadow, and highlight) on the page may stop the designer for a short period of time, and then quickly complete the registration.

2. Interesting design

　　

 

　　

 

　　

 

When such a style of login page is displayed in front of the user, the user's first visual center is often shown in this picture, and the second is the login box. However, these ad charts convey product-related information, such as the brand (what product) and nature (what is this product used ), or convey a festive atmosphere (Spring Festival, National Day, etc ).

Although the first visual center is not in the login box, these advertisement images clearly interpret the meaning of this product and deepen the user's understanding of this product. At the same time, these advertisement images are more interesting, although it is an advertisement, it does not make users feel disgusted.

There is also a similar advertising image. The advertisement itself has little to do with this product. The content of these images is more like an artistic conception and an emotion, such as memories, visions, fantasies, and fairy tales, can bring users into an artistic conception and resonate with each other.

　　

 

　　

 

3. Scenario

　　

 

　　

 

This background-wide logon page uses a large background image to show more casual situations. In the login box design, it is easy to feel constrained. It is suitable for personal space, blog, and other products.

　　Meaning of advertisement Diagram

　　

 

The types of advertising images are actually expressed in four meanings: brand promotion, related advertising, situational design, and festival-related.

The changes in the advertisement diagram on the login page often witness the transition from promoting the "product brand" to promoting the "product concept. In the first stage of brand promotion, many times we use straightforward product features as a publicity point. With the product operation, the second stage will package product features and combine interesting design languages, so that the product features contain some meanings, in the next stage, will be integrated into more and more emotional design, emotional text, allowing users to understand the brand at the same time, also deepen understanding of the product concept.

Reprinted please indicate from "Baidu MUX"