Just read this article! 2015 Mobile UI/UX Design Trend Report

[[144634]]

Whether it is on a mobile phone screen, a browser, or a smartwatch screen, design is one of the most important drivers of product and user interaction. From flat design to Material Design, from small screens to large screens, I analyzed the evolution of design trends and shared some of my humble opinions with you. What are the trends? How do these trends benefit users? What kind of future will they create? This is what today's article will explore.

As the most representative design styles in the design field in recent years, we might as well start with flat style and Material Design, and talk about how they appeared and how they became today's design trends.

Lighter design

Shot by Ghani Pradita

what is it

Compared to the skeuomorphic design that uses a lot of gradients and shadows to pile up details, flat design has more obvious advantages in aesthetics, program design and popular trends. Flat design has higher requirements for the use of negative space, no longer relies too much on gradients and shadows, uses a simple interface, focuses on core information, and removes design elements in the process that cannot improve user operation efficiency.

Why

Lightweight design can avoid user distraction and guide users to focus on more meaningful and important content on the screen, making navigation easier. The stylish, modern and simple aesthetics are more in line with current brand design demands.

Use a single font throughout the design

Shot by Brian Plemons

What is

Reduce the number of font types on a single screen to enhance the design and aesthetics of the layout. Different fonts have different temperaments and bring different feelings. The size and density of the font can better distinguish the closeness of the content.

Why

Embracing consistent design by using a single font across the entire design is not just something that brand design does. Apps, desktop and mobile websites can all use this optimization to unify the multi-platform experience. In addition, a single font can also make the interface simpler and easier to use, and improve content recognition.

Use space to separate

Shot by Eric Atwell

What is

Using lines and separators to divide content blocks was a popular approach before, but this would make the interface crowded. Using blank space to divide blocks can make the interface more transparent and build a better and cleaner interface.

Why

Removing dividers and separators can give the interface a more modern look, focusing on functionality, such as making images and fonts larger, providing clearer hierarchical divisions and better usability. Dividing blocks by space intervals is a non-intrusive design that is more in line with the current trend.

The style and design needs of the line.

Highlighted data

[[144635]]

Shot by Morgan Allan Knutson

What is

Users prefer simple interfaces, large fonts and eye-catching colors, and hope that specific data will be displayed in the most important position. These highlighted data will change flexibly as the user's status changes.

Why

By increasing the font size and using eye-catching colors to draw the user’s attention to a specific area, this approach is more subtle and less obtrusive. With such a design, users will absorb information and data faster and navigate more efficiently.

Microinteractions

[[144636]]

Shot by Kirill

What is

Focusing on specific use cases, enhance its visual effect through subtle and small animations or interactions. Usually when you complete a process, such as collecting an item or popping up a prompt box, subtle animations will enhance these actions and distinguish these controls from other elements.

Why

These micro-interactions can serve as signal prompts to remind users to complete actions and tasks. They are simpler, more interesting and more attractive. Micro-interactions give the interface more powerful vitality through subtle details and animations.

Simple color matching

Shot by Ari

What is

Flat design became popular in 2013, making minimalist design a general trend. In order to better fit the minimalist design concept, designers and users gradually began to prefer using fewer colors to complete the design.

Why

The use of color is an essential component to create emotions, attract user attraction, and build brand awareness. Fewer colors can make the brand image more prominent. Fewer colors means improved cohesion, which makes it easier for users to buy in because it is less distracting and highlights the main functions and content.

Layered interface

[[144637]]

Shot by Roman Nurik

What is

Skeuomorphic design dominated the design field a few years ago, but the flat design revolution pushed skeuomorphism into the background. However, as time went by, flat design 2.0 with more layers and richer details emerged. The layered flat interface gave the two-dimensional flat style depth and more dimensions, bringing users a more "real" experience.

Why

Early flat designs had the risk of being "too flat", but the emergence of Flat 2.0 has given flat designs a hierarchy. This type of design style, represented by Material Design, has made the interface step into 3D through shadows and layered display, giving different layers corresponding Z-axis coordinates. The relationship between different components has become clearer and clearer.

Ghost Button

Shot by Gleb Kuznetsov

What is

Ghost buttons are transparent buttons with no color fill. Their borders are outlined with very thin lines. The shape of the buttons is usually a rounded rectangle or square. The names of these buttons are marked with simple text.

Why

These clean and stylish button designs can also capture the user's attention without being too obtrusive. Ghost buttons allow buttons to be more integrated into the interface, and even have different levels of buttons in the interface. In Material Design, ghost buttons also have a slight shadow to show the hierarchy.

Gesture Operation

[[144638]]

Shot in Javi Perez

What is

With the help of gyroscopes and motion sensors, the device can sense parameters such as speed, acceleration, direction, and recognize movements and gestures. The interaction between users and the screen extends from simple clicks to different interaction methods such as gestures and actions in real life.

Why

Users are familiar with gestures. When users need to delete items, regardless of their age, gender, or social background, moving items off the screen is a subconscious and easy-to-understand operation. Fewer clicks and more scrolling and sliding greatly improve the user experience.

Animation

[[144639]]

Shot by Eddie Lobanovskiy

What is

With the development of technology, developers can now fully control the animation effects with the help of style sheets. Motion-based design includes different forms, transition effects, animations, and even 3D effects with depth and texture. The existence of motion effects helps users understand the content, become familiar with the interface, and let the more important parts be presented by motion effects.

Why

Motion effects attract users’ attention instead of distracting them. Through visual changes, they increase users’ sense of participation and delight them.

Shorter process

[[144640]]

Shot by Jan Losert

What is

More and more applications are starting to use a single page to handle the entire operation process or multiple steps, replacing the previously popular multi-interface navigation and reducing the time and energy users spend during the operation.

Why

The characteristics of the mobile terminal itself determine that mobile terminal users have higher requirements for the program flow and ease of use. Minimizing the operation process is conducive to improving the mobile terminal user experience, thereby increasing the conversion rate and frequency of operations.

Design Standards

Shot by Bill S Kenney

What is

At the beginning of a design project, a standardized visual language is set, including colors, icons, fonts, typography and other factors.

Why

Standardized design helps establish consistency between applications and different platforms, which allows projects to proceed more smoothly, is easier to modify, and reduces the occurrence of errors.

Prototyping

[[144641]]

Shot by Ramil Derogongun

What is

This is an early usable version of the product in the preparation stage. Prototypes can help designers and developers gain insight into the functions of the product and discover feasible solutions and potential possibilities for improving user experience at the lowest cost.

Why

Prototypes, as "low-cost experiments", can make the necessary parts of products and projects more clearly presented, clarifying the functional scope and requirements. Using prototypes allows developers to have enough time and energy to invest in necessary areas, obtain information from testing, and establish directions for iterative products.