Diagram of login page-how to design the login page of APP

How to design a WEB login page to make the page mediocre, user activity is one of the important indicators to test the success of the product. Merchants in traditional industries attach great importance to the decoration of the facade, because a good facade can gather popularity and attract more customers. In ancient times, stone lions or other ornaments placed in front of the courtyard of a large family were very beautiful, with a certain theory of geomantic omen, which could better show the status of the host family. It can be seen that "facade" is as important to a person's image as a person's face, and the login page of the WEB is quite traditional.

Nowadays, more and more large websites design login and homepage together, which shows the importance of login page. A brilliant login interface will improve the quality of products and give them a unique temperament. The login interface is also a battlefield for military strategists to display their emotional design, enhance the user experience and narrow the distance with users. This paper will discuss some design forms of Kan Kan user login page, not talking about trends, interactions and technologies. I hope these design expressions can bring some inspiration and inspiration to everyone.

Elegant and generous

If iPad is a product between traditional computer and mobile phone, tumblr is a service between blog and twitter. Compared with twitter, its function is more complex, its content is more revealing, and it pays more attention to the application of multimedia. Tumblr, as the originator of light blog, brings a brand-new visual experience. Anthony de Saint-Exupery once said, "Perfection means that a little more means too much, and a little less means too little." Tumblr's login page is elegant and generous, without too much visual interference. All the elements exist for users to log in better, and the login process is very smooth.

Exquisite texture performance

ICloud is a cloud synchronization service provided by Apple, and users have 5GB of free storage space. Cordell Ritzlaff, who is in charge of Macintosh user interface design, recalled: "Jobs would check every detail on the screen pixel by pixel to ensure that the relevant images were accurately aligned. He attaches great importance to detail, which has reached the pixel level. If a problem is found, Jobs will immediately yell at an engineer. " The design of iCloud login page inherits Apple's demand for details, detailed texture, subtle shadows, exquisite texture and perfect details. The metallic luster can move with the mouse pointer, and the icons at the bottom can adapt to the resolution, changing the arrangement mode and ensuring the browsing experience of users.

ICloud taught us a good lesson. There is a saying that everyone has heard, but it may not be possible. Details determine success or failure. Rich details can enhance the value of a design, and it is also one of the very important criteria to judge the quality of a design. Exquisite and comfortable texture gives users an immersive and full of surprises, which is a great way of expression.

Small fresh illustrations

In web design, illustrations are very expressive and closely related to the art of painting. Therefore, most design positions are especially favored by people with outstanding hand-drawing ability, and many expression techniques are based on painting art. The combination of illustration art and web design has unique artistic charm and is more expressive. More and more designers apply illustrations to web design. Vivid, interesting and warm fresh illustrations can quickly catch users' eyes and make the login interface more friendly.

163 The login page of the mailbox uses large illustrations, and the postman quickly awakens the memory of waiting for a letter from the 1980s. Illustrations with stories establish emotional connection with users, arouse their hearts and make them feel more belonging.

Vimeo is a website providing high-definition video storage services, where you can find many very creative designers from all over the world. I believe that friends who have logged in Vimeo have a deep memory of Vimeo's landing page.

Brand communication of humanistic care

People-oriented design, people-oriented design can not only improve the quality of products, but also improve the artistic level of design, and the landing page is an excellent position to reflect humanistic care and spread brand ideas.

Every time you refresh the QQ email login page, you can see different contents, or use Haizi's poems or Michael Jackson's lyrics to arouse users' * * * *. The design method is concise, the main information is prominent, the direction is clear, and there are no redundant elements. The most important operation "Login" button in the interface uses green, which is popular in traffic, instead of blue, and the details are very elegant, and every detail is infused with humanistic care.

Sina Weibo designed the login box as a scarf, and every login of users is a process of brand communication, which conforms to Sina's brand concept of scarves and the concept of weaving scarves is deeply rooted in people's hearts.

Bigger and bigger login box

More and more input boxes are designed to make users feel comfortable when inputting, and the login process is very pleasant. Today, with more and more monitors, mailchimp's large input box is full of domineering. It is very thoughtful to see such a design in the WEB login box for the first time. It is this eclectic design that transformed mailchimp from an internal project into one of the company's most successful commercial products.

Simple but not simple

The style of web design tends to be more and more concise, and a large number of blanks on the login page can make the login box more prominent. Minimize user distraction. Visually, the simple design is very calm, and the redundant elements, colors, shapes and textures have been cut off. You can't use eye-catching design elements, you can only create visual appeal by leaving blank space. If the balance and simplified design of the layout are not in place, it will easily become monotonous. Wordpress background login page uses appropriate projection, clever use of gray and shaking tips for errors, making the whole login page concise but not simple. It's a model.

Reference:

How to design the login page of APP The design and development of the login page need to list the operation of a process first, and then develop the login page according to the design process.

Mobile application classification:

The functional application directly used belongs to the tool class.

Nonmandatory login

Mainly some information and life applications, you can choose to register immediately or not when you start for the first time, and directly enter the main interface, so users can use some functions without logging in.

This kind of application is very familiar with personal privacy, so for the safety and privacy protection of users, it is necessary to log in forcibly.

Login page design process:

Select the login mode first.

The background of the whole interface is filled with color.

Multi-effect mixed mode.

Select the fill of the picture.

Before visual design, it is necessary to make clear the logic of the interface and where the clicks of each element in the interface come from. App has different login and registration methods because of different product account systems. There are four ways to log in and register. Each method can adopt different forms of background image design. The first point: understand the mentality of your target customers.

1. Target customers for micro-tasks (such as watching news, listening to songs, watching movies and chatting gossip anytime and anywhere):

This solution is to design an app, preferably small and refined, not big and comprehensive. The more comprehensive the functional application, it can only mean that all aspects of this application are mediocre.

2. Target customers like to use it as tools: for example, finding maps, watching weather and checking data.

This solution is that we try our best to meet the situational needs of users. Extreme and simple.

3, boring customer base, used to kill time: no demand, aimless.

This solution is to show the content that users are interested in as much as possible to help customers kill time.

The second point: Discussion on the production and design of app prototype.

This link is crucial. Draw a prototype carefully according to the design requirements.

Common tools for app prototype drawing: mobile app prototype design artifacts pop, axure, foreui, etc.

The third point: app visual design and design points.

(1) About the design part, there are app startup page design, app interface design size specification, app icon design, etc.

Generally speaking, the mobile phone screen is laid out from top to bottom, and important information will be placed on the top. But in operation, most people hold their mobile phones with one hand, and common operations should be placed at the bottom of the interface.

Another principle is that the minimum touch unit is generally 44 pixels. If it is small, your thumb is difficult to touch, or it is easy to cause misoperation. At the same time, don't make the interface too crowded

Therefore, designers must use subtraction design, which takes time to think and simplify elements.

You must remember: (1) hidden design or subtraction design (2) partition or classification (3) help users to make decisions (4) improve interactive and innovative design (5) make people refreshing and novel (6) immerse themselves in emotions and grasp users' psychology in design. (Talk about how to design products and emotional design of products)

A master once said, "The real minimalist design is that the work must be simplified and changed again and again until the design is finally formed."

20 14, the design style of app tends to be flat and card-shaped. Cardization and flattening will be the trend of mobile app design! I believe that card design does have the advantages of "imitation" and "minimalism"!

The fourth point: app interface design process.

(1). When designing an app interface, you should learn to seek inspiration from excellent app interface design works. Previous masters of art made a lot of designs with a small amount of resources.

It is helpful to have a rest after work. Everything about flat and simple design is related to the differences in details. Therefore, instead of meditating for a long time, it is better to have a rest and then go back to work with a new vision.

(3) It is also helpful to compare each layout side by side. Even if it takes 20 minutes to move a line down by 5 pixels and save it separately, you can quickly distinguish the good from the bad by comparing the two layouts.

(4) Because the relative proportion of physical display is very important, it is necessary to test on different target devices as soon as possible.

(5) Keep asking yourself, "Do you really need it?" . When supporting the project, it will be easy and attractive to find some clever ways, such as adding some interesting elements and styles, but we must always pay attention to eliminating unnecessary elements and constantly streamlining. It is always difficult to give up what you have worked hard for, but the process of revision must be crucial.

Fifth point: app interface design test and preview correction.

After the design is completed, we can import the design into the mobile phone for testing or correction. Previously released online testing tool: a method to quickly preview the design renderings of app interface on the mobile side. Finally, a good app interface design work must be constantly upgraded and iterated.

Several common website design styles are minimalism:

The less, the more classic. "This is the design style followed by many design masters."

The principle of "the fewer good designs, the better" also applies to web design.

Unless there is necessary information, each additional element in the page will cause too many users, and even hinder users from completing their goals and tasks.

The advantage of minimalist design is that it can save users' time cost to the maximum extent.

Wind without borders:

The boundary here refers to any type of decorative container.

Enhance the design sense of the basic content by removing the decorative container.

Improve the picture quality and typesetting layout, thus changing the visual expression of the whole container without decoration.

Illustration style:

In addition to using a large number of pictures as background or theme elements,

Using diagrams is also a good method.

Banner can use illustrations to express the theme of the website, and at the same time, with the help of illustration icons, the website looks fresh and interesting, which strengthens the uniqueness of the website itself.

Flat wind:

Flat design can be said to be the most commonly used web design style at present, which weakens materials, gradients and shadows, and removes graphic elements and typesetting of redundant information. This style design can make pictures appear smoother, improve the visual level of website content information, and make it easier for users to find what they need quickly. At the same time, the flat interface can better realize the conversion of different sizes. This is also a style adopted by Internet companies for a long time.

3D style:

The 3D styles mentioned here are not pure 3D environments that make people feel immersive, but those styles that use a small amount of 3D effects to make the whole page look more agile. On the basis of flattening, adding some vivid non-flattening elements brings the original lack of depth to the website and enhances the visual appeal of the subject.

Vertical segmentation:

The 3D styles mentioned here are not pure 3D environments that make people feel immersive, but those styles that use a small amount of 3D effects to make the whole page look more agile. On the basis of flattening, adding some vivid non-flattening elements brings the original lack of depth to the website and enhances the visual appeal of the subject.