Design Essentials of Ui/ux design for moving end

Do you have an app project in hand? Are there any design plans for the system? Do you design directly, or will you stop to study the real needs of end users? Do you know what the user wants to see when they open the app first?

When considering which user experience related technology, their aesthetic characteristics may be quite worthy of our thinking. The design concepts and techniques that we see on many websites are actually well put into app design, but the details and styles may need to be tweaked to fit smaller, high-definition screens. For designers familiar with desktop-side UI design, the next 7 design points will help you quickly turn to the mobile-side design, making you look like a professional mobile-end Ui/ux designer.

　1. Bold and bright typesetting

Simpler typography is more readable on a small screen, especially if the light is darker or backlighting, which is one of the important reasons for the wider use of the non liner fonts on the mobile end.

A few years ago, with the dramatic shift in design trends, designers were more inclined to choose font types that were more thick and bolder in style. In addition, the size of the font is also important. More and more mobile end of the design began to borrow large size, highly expressive font, creating a clear outlook and background contrast, to create a dazzling effect, so that users can browse, navigation.

The advantage of this trend is that people are beginning to pay more attention to the readability of the interface content. However, in the English interface, there is a problem to be noted, is to try to exercise restraint in the use of capital letters. Take the Weather Channel as an example, the word "SUNNY" is only 5 letters, but if the number of letters used in other weather is too large, it may be very visually burdensome. In the Chinese font design also try to avoid too long, too complex problems.

Therefore, two things should be noted here:

• Layout and content should be kept as simple as possible

• The contrast between background and text should be as obvious as possible to maintain maximum readability

　2, layer and depth

As the most important design trend, Material has been repeatedly emphasized and mentioned, which is not unreasonable.

First, it is Google's launch of the design platform, as a powerful giant launch of the product, will undoubtedly attract a large number of relevant practitioners to follow up, and the current situation is the case. Material design itself is quite intuitive, both for the design and the user, is quite good.

The most striking thing about Material design is that the layer creation is a great help to both user and interactive designs. Today, the Material design-style interface has sprung up, and many iOS applications are beginning to follow this code.

The technique that really makes these layers work is very subtle. The distinction between layers depends on the shadows that once were "abandoned by everyone", they are very shallow but natural, and they are also visual and interactive clues. The bottom layer is the portal of information, and the top-level layer is the interactive tool and element.

Look at the design of the Uber, map layer is located at the bottom of the entire screen, by moving the base layer to set the car position, the top button is used to place a single, different layers assume different functions, providing different ways of interaction.

　　3, monochrome color scheme

Using the purest black-and-white color on a small screen is a great way to attract the attention of your users. In addition, you can also use a relatively rare, bold color, so it is easy to stand out. Or use the Add other color scheme to let users choose their own favorite color scheme.

The advantage of monochrome color scheme is that it is easier to create a consistent, unified visual experience and feeling. As with the design of the Streeks application, users can set goals and the app will remind you to complete the task. Users can set colors based on task types and push simple messages to tell you what needs to be done.

Monochrome colors, icons, and minimalist fonts together create stunning combinations that are easy to read and interact with, and are designed to be smooth enough to entice users to add more to their to-do list.

　4. Focus on micro-interaction

Those apps that are good enough often include many smooth, seamless, excellent micro-interactions to communicate different interfaces, actions, and interactions. Micro-interactions are often easily overlooked, but in many apps they exist as a necessary transition, interaction guidance, and effect hint, so it is quite important.

The existence of micro-interaction, mainly to help users to complete some things. From text message notification, message push to micro blog on the tip of praise, almost everywhere. They also have one major feature: pleasing the user.

The main functions of micro-interaction can be summed up in this way:

• Provide feedback, such as the prompt effect after the Instagram midpoint

• Presentation action, such as the point of praise after the heart shape will be from transparent hollow into red

• Help users to manipulate or discover the existence of something, such as the point of praise, there will be push information appear in the notification bar, or pop-up box directly to inform

　5. Card Type Design

Card design was first seen in Pinterest, then in Facebook, SoundCloud and other sites on the popular, became the real meaning of the mainstream design. But today's card-style design is largely influenced by material.

Cards are a reliable vehicle for a large amount of content, both for design and for development. Each card can carry different elements, as different modules, to achieve different functions.

So, you can have a card play the video, the next card is linked to another application, and the bottom of the card is placed directly in a long text. Another advantage of card design on the mobile side is that it is very easy to use, especially in the app. Most apps will carry two cards in a single screen, like SoundCloud, or a screen is a card, so that even if the user's fingers are thicker they will not miss anything!

　6. Simple navigation

Hidden menus, pop-up navigation, and large buttons are key points of design that cannot be overlooked. Now the number of menus used in app's first screen is gradually decreasing, and the app home page is no longer placed with a large number of menu buttons, followed by the popularity of hidden menus.

Interestingly, more and more users are not annoyed by hidden designs, and they are already familiar with the more options hidden in the Burger menu. Of course, the trick with the burger menu is that the hidden menu should be a very useful feature and option, and the menu button itself should be conspicuous and sensitive.

Slack is definitely the model of navigation menu design, its menu can be displayed from the left and right side of the screen, while the main function menu is pop-up from the right-hand side, and the menu for the specific channel is pop-up from the left.

　　7, with animation to polish

Interesting and beautiful animations are another way to make your application feel extraordinary. Reasonable animation can improve the ease of use of the application, make it easier for users to notice the focus, and even more directly to bring them happiness.

You can not know when and where users will access your application, even more can not know what kind of network connection users use, so the use of small, lightweight, not dependent on the network animation is very necessary.

Strava is one of those apps that contains a lot of interesting little animations, many of which are small enough to be inadvertently overlooked. Transitions between different interfaces can have interesting transition effects, such as the challenge page above. There's a pulse effect when you load the map, and when you're moving, you'll see dots moving along the path.

　　Conclusion

When you're going to let your mobile app stop being conceived, look at the current design trends in Web pages and digital design, and see which of them can be adapted to the mobile-side design. Many unexpected ideas may make for a very great design trend.