2015 Mobile end Ui/ux Design Trend Report

Whether it's on a mobile screen, on a browser, or on a watch-only screen, design is one of the most important drivers for product and user interaction. From flat to Material design, from small screen to large screen, I analyzed the trend of design trends, and share with you some of my humble opinion. What are the trends? What are the benefits of these trends for users? And that's what the future is going to be about. That's what today's article is all about.

As the most representative design style in recent years, we may as well start with the flat wind and Material design, and talk about how they appear and how they have become the trend of the designs nowadays.

Lighter weight Design

Shot by Ghani Pradita

What is it

Compared with the physical and chemical design with a large number of gradient and shadow piling details, flat design has a more obvious advantage in aesthetics, programming and fashion trends. Flat design for the use of negative space has a higher demand, no longer on the gradient and shadow have too much reliance, with a minimalist interface, focus on the core of information, the process can not improve the user's operational efficiency of the design elements removed.

Why

Lightweight design can avoid user distraction, guide users to focus on the screen more meaningful and important content, navigation is therefore easier, fashion, modern, minimalist aesthetics is also more in line with the current brand design demands.

Use a single font throughout the design

Shot by Brian Plemons

What is it

Reduce the number of Single-screen font types, so as to enhance the layout of the design and aesthetic sense. Different fonts have different temperament, bring different feelings, the size of the font and the arrangement of the density can better distinguish between the intimacy of the content.

Why

Embracing consistent design through a single font across the entire design is not something that only brand design will do, and applications, desktops, and mobile sites can be optimized to unify multi-platform experiences. In addition, a single font can make the interface more simple and easy to use, enhance the content of recognition.

Use space to Interval

Shot by Eric Atwell

What is it

Dividing blocks of content by lines and delimiters is a popular way to handle it, but it can make the interface crowded. Dividing blocks through blank space can make the interface more transparent and build a better and cleaner interface.

Why

Removing split lines and delimiters can provide a more modern look for the interface, focusing on features such as zooming in on images and fonts, providing a clearer hierarchy and better usability. Dividing blocks through space intervals is a non intrusive design that matches the current popular style and design needs.

Highlighted data

Shot by Morgan Allan Knutson

What is it

Users prefer a simple interface, large fonts and eye-catching colors, and want specific data to be displayed in the most important locations, and the highlighted data will change flexibly as the user's state changes.

Why

By increasing the size of the font and conspicuous color to the user's attention to specific areas, this way more subtle, not abrupt. Under such a design, users will receive information and data more quickly and navigate more efficiently.

Micro-interaction

Shot by Kirill

What is it

To enhance the visual effects of a particular use case by subtly moving or interacting. Usually when you complete a process, such as storing an item, or pop-up a cue box, subtle animations reinforce these actions and distinguish them from other elements.

Why

These micro-interactions can be used as cues to alert users to the completion of actions and tasks, which are simpler, more interesting, and more appealing. Micro-interaction gives the interface a more powerful vitality through subtle details and dynamic effects.

A simple color

Shot by Ari

What is it

Flat wind in 2013 began a large-scale popular, so that the simple design of the wind became the trend. In order to better fit the simple design concept, designers and users are gradually starting to like to use less color to complete the design.

Why

The use of color is an essential part of creating emotion, attracting users ' attraction and building brand consciousness. Less color can make the brand more prominent, the reduction of color means cohesion of the promotion, users are more likely to buy, because it is not easy to distract people, highlighting the main features and content.

Layered interface

Shot by Roman Nurik

What is it

The design of materialization was dominated by the design field a few years ago, and then the flat design revolution will be materialized. But with the passage of time, more levels, more details of the Flat 2.0 appeared, layered flat interface so that the two-dimensional flat wind has a depth and more dimensions, for users to bring a more "real" experience.

Why

The early flat design had the risk of being "too flat", and flattened 2.0 of the appearance, let the flat design has the level, with material design as the representative of this kind of style, through the shadow and layered display, let the interface into the class, so that different layers have a corresponding Z axis coordinates. The interrelationships between the different components are beginning to become clearer.

Phantom button

Shot by Gleb Kuznetsov

What is it

The Phantom button is a transparent button with no color fill, its boundaries are outlined with very slender lines, and their shapes are usually rounded rectangles or squares, and the names of these buttons are identified with simple text.

Why

These clean and stylish button designs can also capture the user's appeal, while not appearing too abrupt. The Ghost button lets the button have a higher degree of integration in the interface, and even the buttons can have different levels in the interface. In the material design, the Phantom button also has a slight shadow to represent the hierarchy.

Gesture operation

Shot BU Javi Pérez

What is it

With the help of gyroscope and motion sensor, the equipment can perceive the parameters of speed, acceleration and direction, and recognize movement and gesture. The interaction between the user and the screen extends from a simple click to a real-life gesture, motion, and other interactive ways.

Why

Users are familiar with gestures, when users need to delete entries, regardless of age, sex, social background, moving entries out of the screen is a subconscious and easy to understand operation. With fewer clicks, more scrolling and sliding makes the user experience a great boost.

Dynamic effect

Shot by Eddie Lobanovskiy

What is it

With the development of technology, developers can now use style sheets to fully control the animation effect. Dynamic design includes different forms, transition effects, animations, and even 3D effects with depth and texture. The existence of dynamic effect can help users to understand the content, familiar with the interface, so that more important part of the passive effect presented.

Why

Action will attract the attention of the user, but not be dispersed. Through visual changes, improve the user's sense of participation, and pleasing users.

Shorter process

Shot by the Losert

What is it

More and more applications begin to use a single page to handle the entire operation process or multiple steps, instead of the popular multiple-interface navigation, reducing the user's time and effort during the operation.

Why

The characteristics of the mobile end itself determines that the mobile end users have higher requirements for the process and ease of use of the program, and minimizing the operation process will help to improve the user experience of the mobile end, thus increasing the conversion rate and operating frequency of the operation.

Design standards

Shot by Bill S Kenney

What is it

At the beginning of the design project, set up a set of standardized visual language, including color, icon, font, typesetting and other factors.

Why

A standardized design helps build consistency between applications and platforms, allowing the project to move more smoothly, easier to modify, and less error-prone.

Prototype design

Shot by Ramil Derogongun

What is it

This is an early available version of the product for the preparation phase. Prototyping helps designers and developers understand the capabilities of the product, and at the lowest cost, discover viable solutions and potential possibilities to enhance the user experience.

Why

The prototype "Low-cost experiment" allows the product and the necessary parts of the project to be more clearly articulated, defining the scope and requirements of the function. Using prototypes gives developers enough time and energy to put them where they need to, get information from tests, and set the direction for an iterative product.