The new trend of mobile interface design in the 2014 How much do you know?

Intermediary transaction SEO diagnosis Taobao guest Cloud host technology Hall

In this article, I would like to share some increasingly dominant design language, let people remember its style at a glance, some have been with the exploration of excellent designers, into the domestic mobile product design, and some, is really just in the bud stage, need to further explore and try.

One, the only main color | Simple Color Schemes

Why do we define an interface with multiple colors? With only one main color, is it possible to express the interface level, important information, and to show good visual effects? In fact, with the release of IOS7, we see more and more unique master-style designs that use simple levels of color, A complete set of gray levels to show the level of information, but never use more color.

Qatar Airlines

Qatar Airlines is such a design case, the entire interface uses the pink main color, from the title bar to the label page, from the Operation button to the hint information, in addition to black and white gray, all uses the pink design, this kind of introduction's color style, has played the very good information transmission effect, also has the good visual expression, The designer's skill in content typesetting is really an added bonus.

Readability adopts the red main hue design, even the hint information background color, the linear button and the icon all adopt the red main color, the interface and the logo also is completely a color. The Vivino adopts the blue main hue design, and the information is separated by dark blue and light blue. Eidetic uses orange main tone design, the key operation button even entire uses orange to brighten, the information icon also uses the dark orange, the light orange to express the degree.

It can be said that the only main color design, is really to achieve the mobile end of the app minimization (minimal) design, reduce the interference of redundant information, so that users focus on the main information acquisition.

Two, multi-color | Hypercolour

And in contrast to the single main hue, which is the multi color style that Metro leads, why do I have to define a dominant hue for my own product, and how many colors can't be the main hue? So there are different pages, different pieces of information in the style of color-hit color design, Even the same part of the interface can be used to color, but also produced a lot of excellent design.

Uniqlo produced recipe, is a bright design case, multi-color design style into the entire app, whether it is to switch tabs, or in the content of the block scrolling, will change different theme colors. Color switching time, there will be fading effect, so that the switch becomes natural, completely not blunt. Recipe's Tomato clock timer module, on the side of the time playing a beautiful gourmet background music, while switching between the main colors, with the main color changes, all the foreground copy, the picture will become more this color, coupled with very high definition of food pictures, is really visual + auditory double enjoyment. Recipe is really an excellent design that is rare in 2013 years.

and Peek Calendar, everyweather and harmony These three apps, is a list of multicolor design cases, this list is more colorful, do not know whether from clear began to pop up again, with bright multi-color to distinguish information, indeed can play a prominent effect, Visually extremely eye-catching.

But for some content-type apps, it may not be true, such as Googlekeep's colorful cards, which are really counterproductive in content reading. Baidu Cloud Notepad first version of the design is also more colorful, but then take into account more text, in order to provide a good text reading experience, or to change the color into a gray-white micro-texture design.

Iii. Visualization of Data | Data Visualization

As for the presentation of information, more and more apps are beginning to try data visualization, information charting, so that the interface is not only a list, there are more intuitive pie, pie graph, fold style, histogram and so on rich expression. Seemingly not very difficult things, but if you really want to achieve, the complexity of the background is not a small glimpse.

Nice weather graphs to express the temperature change, Jawbone up with a histogram to express the daily completion, PICOOC use line chart to express the daily weight, body fat changes. Mobile app uses data visualization to display content in a smaller screen space.

Iv. Card | Cards

Card is also a form of more design language, can not look at the design of this card, is from the metro tiles popular, or from the Pinterest waterfall Stream popular. In short, we can find that Google's mobile end product design has been fully card, and even the web side has used this unified design language, is said to be Google search experience lead the design language unified upgrade.

Luvocracy's card stream highlights the information itself, with large graphics and headline text to attract users, strengthen the endless browsing experience, and attract users to keep rolling. Google Now's cards are more customized and personalized. Some cards are used to do user education, and some cards are used to inform the weather, some cards are to render the contact list, a bit of cards are displayed to do things. Different cards are followed in a uniform width and style of cards, play and design. Not only guarantee the independence between card and card, but also guarantee the unified design of service and service. Shazam uses an interesting card style to present albums and songs.

V. Content for King | Content A

The development of app products, the final path will be the same as the Web products, highlighting content, the content of the king, when the bustling faded, spotless, and then again to see the meaning of the existence of the app, nothing more than to provide users with better service. Compared with the content, all the design and packaging, is nothing more than a means of expression, and the real value of the app, must be content to win. Facebook bought the WhatsApp with 19 billion dollars, a app built with a control system, not because of how outstanding his design was, but because of the value of his service.

Artsy's picture waterfall flow, completely does not use the line and the surface to differentiate the information block, but is uses the content itself to do the typesetting, the user may focus more on the picture content. Prismatic uses typography to make the most of the content before, weakening icons and operations, allowing users to focus more on content reading. Mr Porter, however, uses the product's image, name and price directly to make the design, so that users focus on the product itself.

Six, the use of the Circle | Circle Design

Garden shape is the most easy to feel comfortable shape, especially in the cell phone screen filled with various boxes, add some mellow shape embellishment, immediately will increase the lively atmosphere, to increase goodwill. An interesting phenomenon is that the iphone's dial-up digital keypad, the first is a rectangular design, iterative to iOS7, have become a circle, can be said to the traditional phone salute, can be said to enhance the interface of the soft feeling. Of course, the corresponding, but also to deal with the actual contact area of the circle, do not because the design of the circular Click Area also become smaller, resulting in a drop in the accuracy of clicks, aesthetics improve ease of use has been affected.

Beats Music to choose the favorite label design into a circle, which is more than the ordinary list, rectangular tag feeling better, more interesting more exploratory. Movse Walk every day, the number of calories consumed by the circular load, is the data visualization, key information dominance of the best case. Tumblr the type of content to be created, with the Mask + Circle option button to design, so that the choice becomes focused and clear, and less rigid.

Background map of large field of vision | Bigger Vision image background

Using Banner's picture as the background, it has become a popular trend this year, either as the background of the whole app, or as the background of the content block, both enhance the visual performance and enrich the affective elements of the app. Some information or manipulation, floating in the picture. This design method, the font and typesetting design requirements higher, more difficult, but very easy to render the atmosphere.

Large-field background image style is also divided into two kinds, such as secret, The Whole Pantry, the content block using a large field of vision background, the advantage is that you can use the image to do block segmentation, the difficulty is the image stitching after the effect is not necessarily good-looking, so may also need to match the stroke, White and other design methods to optimize stitching. Another kind is want Vsco, Flink, Mindie, Soundwave such, full screen background picture even through the status bar, foreground do content typesetting, navigation, operation.

The advantage is that the design is very life, so a friend of this style also called a plan design, said is the return to the nature of the design techniques. But the risk is also very obvious, is the foreground information arrangement design actually has the very big challenge, must by the colorful background too disturbs the attention, causes the foreground the text content readability will weaken. Therefore, it is necessary to separate the important operation with a clear button area, reading text and background image to use the obvious inverse color, or not, the text floating on the translucent layer, to solve the readability problem.

Finally, in the 2014, I was impressed by the 7 design languages, the only main colors, multi-color, data visualization, card, the content of the king, the use of circular and large field of view background map. In fact, the design style is difficult to have a new, but also the process of continuous reincarnation, in order to highlight the content of the app are in the direction of light and light design, but not guaranteed which day, and subversion back to the beginning of the heavy texture of the design of the material.