Mobile product login interface design

First of all, let me introduce the background of the project. It is a real estate customer resource management APP. The target group is our company’s sales staff of about 3,000 people. Previously, They mainly use the backend management system for customer resource management, but there are often situations where the data is not followed up in a timely manner, or the data entry is incomplete. This time, it has been improved and some new functions have been added to the APP.

I am mainly responsible for the design of the interface this time. The entire interface design was completed relatively smoothly. However, the login interface has been delayed because we thought that our product is a tool and needs to be logged in before entering the interface. operation, so the login interface is the first interface everyone sees when entering the APP. In terms of design, I adopted a full-screen, large-picture business style and used a real estate-related and business-type picture.

However, the boss later reported that the background image of the login interface had a layer of fog. He suggested that the picture should be a blue sky and white clouds that look more lively and not make you angry.

Everyone may laugh when they see the blue sky and white clouds. Is this design too low? I thought so at first, but then I thought about it. The boss just feels that this interface is lifeless and lively. Our target group is originally the sales staff of our company, so the design must be full of vigor.

Later, I tried a variety of picture types: business offices, sea view rooms, purely intentional pictures, etc., but I felt that they could not be expressed well. At this time, my colleague saw that I was a little entangled, so he reminded me that if I change my mind, I don’t necessarily have to design it in this full-screen large picture style. Nowadays, many APP login interface designs are relatively simple, and there is no need to stick to one style. So what other styles are more suitable? So when I went home at night, I sorted out the design style of the login interface. I mainly started from three aspects:

1. How to collect references?

2. What should I do after collecting references?

3. How to choose a design style that suits the product?

How to collect references

Collect references for everyone It can also be understood as looking for references. Whether it is style references or layout references, there must be a collection process in the early stages of design. The collection can be divided into online resources and project resources. Online resources are also well-known design platforms such as Petal, Zhuibo, Behance, Zokuu, and UI China. Through these platforms, you can learn about current fashion trends, styles, interface analysis, etc. Get help.

In addition, we can also collect excellent APPs and competing products from various industries to analyze them, so this collection step is essential. The picture below is an APP that I always have on my mobile phone that I think is pretty good:

Since I am doing a login interface this time, I first went through the login interfaces of these APPs in general to understand the characteristics of each industry. Then I collected some resource management and tool apps (competitive product analysis is essential).

After the collection is completed, we can select two to three APPs in each industry to take screenshots, and the collection work is completed here. (Although the collection work is simple, through long-term accumulation, you will become familiar with the design characteristics of each industry. You will know that a certain APP has been updated, why it needs to be updated, what are the benefits after the update, etc.)

Reference collection completed What to do next

After collecting the references, you need to classify the screenshots collected above (style classification, display content classification, etc.). Since our content has been determined during design, we only need to Just classify the styles. Here I divide the styles of the login interface into six categories: white simplicity, light decoration, solid color background, full-screen large pictures, half-screen pictures, and illustration backgrounds. Through classification, we can understand the design methods they adopt in different industries.

1. White concise style

The white concise style is a more common style at present. Its purpose is to enter information. It is mostly used in relatively large APPs. There is no Using more complex decorative elements, the entire interface is mainly designed with simplicity, and the design is mainly the layout design of information display. As shown in the figure below:

Take Get, Tudou, and Lagou as examples. There is not much difference in display. The main design is the layout of information. Similar to Lagou, Get and Lagou use a line input box and a layout style on the left. Tudou uses an elliptical rectangular input box, centered layout, and also adds a logo to reflect the brand feel.

2. Light decorative background

Light decorative background is to add some brand decoration elements on the basis of simple style. Compared with simple style, this design can better reflect the interface details and increase The interface has a brand feel and does not affect the entry of information. As shown in the figure below:

Light decoration can have four display effects in design: the first is similar to NetEase Cloud Music and NetEase Aesthetics, using product-related elements for decoration; the second is similar to Curiosity Daily for blurring processing Increase the layering of the interface; the third is similar to NetEase Cloud Classroom by adding intentional pictures; the fourth is similar to Youku and 36Kr by adding geometric elements for decoration.

3. Solid color background

Solid color backgrounds often use brand colors when used, and are designed with logos to reflect the brand feel. It should be noted that this method is mostly used in interfaces with simple login information or third-party login. As shown in the figure below:

Keep, Questionnaire.com, and Tencent Classroom all use brand colors for design. At the same time, it can be seen that they have less login information and are relatively simple in visual design.

4. Full-screen large image

Full-screen large image is filled in the form of pictures below the login information. The advantage is that pictures are more likely to attract attention and convey emotions more easily. Arouse buzz from users. If you use product-related pictures, you can also give users an expectation in advance. Its disadvantage is that the integration of information and background is high, which is not suitable for some larger products and is mostly used in vertical apps. As shown in the picture below:

Full-screen large picture The picture is the core of the entire interface, so it is not easy to find a picture that matches the product. When searching for pictures, we also need to search with purpose. , for example, the pictures related to products selected by Gudong and DingTalk; the daily eye-opening, Suitan, and corporate search used more intentional pictures; Mafengwo uses full-screen animations to make the entire login interface more vivid (use animations with caution, because users It often takes too long to view and lengthens the login time).

5. Half-screen pictures

Similar to full-screen pictures, half-screen pictures can convey the core functions of the product through pictures, or convey the product branding through intention images, but the key point of half-screen pictures is It is mainly based on login information. Its disadvantage is that it is not easy to stand out in design. Currently, only a small number of APPs adopt this style, as shown in the figure below:

Xiaozhu Short-term Rental, NOTHING, and Ant Short-term Rental all use half-screen images. In the form, it can be seen that the login operation module is in the prime position of the interface, and the entire interface design will have a certain sense of segmentation.

6. Illustration background

Compared with picture design, illustration background has the advantage that you don’t need to look for pictures everywhere by hand-drawing them yourself, and you don’t have to worry about the copyright issues of the pictures. Illustration production of own products. It should be noted that it is best to add brand identification elements or brand-related elements to the illustration design, so that it will appear meaningful. As shown in the picture below:

Evernote uses alarm clocks and documents to let people know its note-taking function at a glance. The slogan of in is that interesting people are in in. This illustration just shows this. Meaning, the brand octopus cartoon image is used on the far right to make the interface identifiable.

How to choose a design style that matches the product

Above we have collected references, classified screenshots and done a simple style analysis. Now we need to sort out these styles combined with our actual products and select a design method that suits our current design.

The design of any interface is well-founded, that is, our design needs to be screened based on our design purpose, boss's expectations, and competitive product analysis.

1. Design purpose

First of all, let’s look at what are the main purposes of the login interface? Here I have mainly summarized four aspects: personal information entry, brand display, and information transmission (business information, product core role), story or humanistic sentiment of the product. These purposes correspond to different design styles.

Personal information entry:

Mainly used in larger projects. Its main purpose is to help users log in quickly and efficiently. Combined with the above style analysis, we can launch the white Simple style, half-screen picture display style, and light decorative style are mainly used for personal information entry.

Brand display:

If you feel that the cookie-cutter white simple style has no characteristics, you can also add brand recognition as needed, such as adding a logo to the interface and adding pictures related to the product. , illustration elements, etc. Combined with the above style analysis, there are mainly light decorative styles, solid color backgrounds, illustration backgrounds, and full-screen large pictures that can better enhance branding.

Transmitting information:

When your login information is relatively simple, such as only third-party or simple login information, then the login interface is not only based on personal input, but also It also plays a role in transmitting business information, product information, etc. Combined with the above style analysis, there are mainly light decorative styles, full-screen large pictures, and half-screen pictures that can better convey product information.

The humanistic sentiment of the story or product:

This is a niche product. We know that pictures are the best way to convey emotions, so full-screen pictures are a good choice, of course. If the product budget is high, we can also make it into a video, which can arouse users' enthusiasm.

After the analysis, we need to make a selection based on the design purpose of our product. It is simple to communicate our login interface information according to the early needs. At the same time, users need to log in before entering the interface, so the display is displayed with the brand and conveying information mainly, so we can launch our products which are more suitable for light decorative style, solid color background, illustration background, full-screen large picture.

2. The boss’s expectations

Sometimes your analysis may not be correct. You can share your analysis with the manager. The manager will know better than you what the boss wants. kind. I also mentioned in the preface that the boss wants the login interface to be more active to reflect the vitality of the sales industry. So we need to consider this factor when designing.

3. Competitive product analysis

Competitive product analysis can often determine which style we should adopt. Our project positioning is very obvious, which is customer resource management, and the target group is only our company’s sales. People use it, so it can be classified as a tool-type APP. The common design methods in tool-type APPs mainly include: white and simple, solid color background, and full-screen large pictures.

There are very few excellent APPs in the customer resource management category, so here I looked for APPs that focus on using tools. Beike House Search targets a wider group of people and mainly provides information on house hunting for everyone. Its users The main group is users. Of course, he hopes that users can log in quickly, so he adopts a white and simple style that can be operated efficiently. I asked the manager about this style from the side and felt that it was not suitable. In the end, we decided to make two styles, solid color flat style and business background, which can better reflect the branding.

Finally, in order to improve the rejection rate, I designed a draft of the final solid color background and full-screen large image style, and submitted them to the boss for feedback. They chose a style with a solid color background, and we have successfully passed the draft here.

You may find this analysis process very cumbersome. In fact, when you classify and compare the collected pictures, you can basically determine which style to use. I would like to remind you that your analysis may differ from your boss’s. It is expected that there will be discrepancies, so it is best to design two versions for the boss to choose, and at the same time explain the reasons for using them respectively, so that the rejection rate can be greatly improved.

Summary

Today we mainly take the login interface as an example. When sharing design ideas with you, we can sort them out through three aspects: collection, classification, analysis and comparison, to help us have a rational basis. Find the design solution suitable for the product and improve the draft rate.

1. Collection: Usually collect more excellent APPs. When you don’t know what to do, we can combine them with competing products and go through these APPs roughly to understand the design characteristics of each industry and prepare for subsequent classifications. Be prepared.

2. Classification: Through classification, we can know what styles there are and understand their design advantages and disadvantages, which can help us know what they are.

3. Analysis: Based on the product design purpose and combined with the above style analysis, select a design method suitable for our products.

The above is a summary of the problems I encountered in the project. I hope it will be helpful to everyone. After reading this, you can find an interface to analyze and try to see if this is the case.

7 styles of illustrations

Characteristics - flat, popular, common style, concise and clear

Flat illustrations simply simplify complex relationships and make the picture more refreshing and tidy. It is also a more commonly used style now, and many business tool apps will choose to use this style. For example, hooks, nails...

Features - a variation of flat illustrations, increased graininess, texture, and good light and shadow relationship

Texture illustrations, as the name suggests, are added to illustrations Some textures (such as noise) and light are essentially similar to flat illustrations. Some pages that want to reflect texture will use this style. Below are some of the designers’ work.

Features - The highest requirements for art skills, wide application, and rich display content. Hand-drawn style illustrations are also widely used, including some illustrations in picture books, story scene designs, etc. The following are excerpts from the works of illustrator Gu Xin.

Characteristics - simplicity, roundness, cuteness, breakpoints

MBE illustration (a designer from dribbble created this style), its main characteristics are roundness, cuteness and sillyness Cute and simple. The guide page, startup page and default page in APP are also widely used.

Features - beautiful, similar colors, bright colors.

The gradient illustrations feel a bit like Japanese comic scenes, and the style is particularly beautiful and romantic. The sense of light is relatively strong, so it is also called low-light illustration. The colors are generally similar, and there should not be too many types of colors.

Features - 2.5d illustrations, strong three-dimensionality and strong visual impact.

Three-dimensional illustrations are also called 2.5D illustrations, which represent three-dimensional things in a two-dimensional space. So now more and more designers are learning C4D software. Although AI and PS can also do it, it will be more troublesome. Many e-commerce apps will choose to use this style. For example, Jingdong...

Features - shapes, strokes, abstract painting processing

In addition to using shapes, stroke illustrations also use strokes on their outer contours, which can Express abstract things very clearly. It is often used on some icons, such as Xianyu, Zhuanzhuan... What kind of person is suitable for choosing illustration as a side job? How big is the demand for illustrations in the market?

Go to some vertical websites to become a professional illustrator, take orders for drawings, and also work on Huoshan Video, Xigua Video,

Douyin

Video, Today

Today's Toutiao

Video platforms such as Toutiao share the whole process of mapping, provide some explanations, and attract fans. Both sides can make money, just like Dr. Zhao, an otologist. Work and network are not delayed. A painting with a story is considered to have a soul, and there are two aspects involved here. One is that the painting itself can tell a story, in other words, people who see it can associate it with many things or meanings; on the other hand, the person must be able to tell a story, that is, when someone asks you or you take the initiative to introduce your painting, you can describe it. Tell an impressive story.

Because I am not very clear about this industry, I look at this matter from a non-professional perspective. When it comes to commercial illustrations, everyone must be familiar with it. Especially in recent years, with the rapid development of online sales, e-commerce and technology companies, the market for commercial illustrations is expanding rapidly, and the demand for illustrations is also increasing. ! Judging from the development trend of illustrations in the past century and the general environment of the Internet, in the next ten years, the market demand for commercial illustrations will only increase, and the requirements will become bigger and bigger!

One thing can It cannot be sustained for a long time. It depends on whether the environmental factors and the feedback from the internal environment are good. The external environment refers to whether drawing illustrations can continuously bring you the most ideal benefits, social identity, career growth, self-worth recognition, etc. The internal structure is itself, and its own abilities, layout, long-term development, etc., including physical health, may affect the outcome of this problem. If it can continue to develop steadily, it can naturally be a lifelong career.

It should be pretty good. This is a new industrial chain that has emerged in recent years. The development prospects are good, and the prospects for commercial illustration are still very good. At this stage, the illustration industry is still quite blank abroad, and excellent talents are in urgent need. An optimistic speculation says: "Business illustrators will be far ahead among the 17 emerging industries in the future, and will become a high-income group like celebrities, hair engineers, fashion designers and other professions."

Commercial illustrators are talents in urgent need in the field of computer graphics. They are widely used in game character setting, advertising poster design, cartoon mascot design, publishing illustrations, etc.

Commercial illustration liberates traditional artistic creation from paper and pen, and achieves the best visual impact through a computer and a

hand-drawn tablet

. The key is to have good thoughts

"Go Left, Go Right"

This is a love story that only takes you ten minutes. The book should not exceed 1,000 words. The success of this book, a book in which paintings are more important than words, unexpectedly made the illustrator become popular. Better illustrators are not necessarily all professional, the most important thing is to have good ideas so that they can express the merchant's intention vividly. If you want to learn business, you can also go to a specialized training institution to study. Companies like China Illustration Network have their own training institutions. Take a look yourself.