Mobile Internet Interpretation: 7 guidelines that product managers must know

If you're an app fanatic, you'll spend a lot of time in the early adopters of a variety of apps, and you'll obviously feel that some apps are using a distinctive design language to flaunt their uniqueness, make their own design style, and even lead the way in design. Last year we were concerned with the impact of Metro design style and the release of IOS7, the app obviously began to try flat design language, in addition, what are the dominant design language to emerge?

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

　　 One, the only main tone | Simple Color Schemes

Why do we define a multi-color interface? Is it possible to express the interface level, important information and show good visual effect with only one main tone? As a matter of fact, with the release of IOS7, we see more and more of the only main tone style design, using a simple color scale, matching the gray scale to show the level of information, but never adopt more colors.

Qatar Company Aviation is such a design case, the entire interface using the main color of pink, from the title bar to the tab, from the action button to cue information, in addition to black and white ash, all using pink design, the introduction of the color style, but played a very good message to convey the effect, but also has good visual expression, The designer's skills in content typesetting are really extra points.

The readability is designed in red main tones, with the background color of the cue information, the linear buttons and the icons in red main tones, and the interface and logo are completely tonal. The Vivino uses the blue main tone design, the information uses the dark blue, the light blue to be isolated. The eidetic is designed in orange main tones, where the key operation buttons are even illuminated in orange, and the information icons are expressed in dark orange and light orange.

Can say the only main tone design method, is really to do the mobile app to minimize (Minimal) design, reduce the interference of redundant information, so that users focus on the main information acquisition.

　 two, multi-color | Hypercolour

And the only main tone to form a control relationship, is the Metro led multi-color style, why I must give my own product definition of a main tone, multi-color can not be the main color? So there are different pages, different pieces of information block using color multi-color way to design the style, even the same interface can be used in the local color contrast, but also produced a lot of excellent design.

Uniqlo recipe is a brilliant design case, multi-color design style into the entire app, whether it is to switch tabs, or in the content block scrolling, will change the different theme colors. When the color switch, there will also fade the effect, so that the switch becomes natural, completely not blunt. Recipe Tomato Clock Timer module, will play while playing a beautiful background music, while switching different main color, with the main color changes, all the foreground copy, picture will become more of the color, plus the high definition of food pictures, is really visual + auditory double enjoyment. Recipe is really a good design that is rare in 2013 years.

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

However, for some content-based apps, it may not be appropriate, such as Googlekeep's colorful cards, is indeed in the content of reading will play a counter-effect. Baidu Cloud Notepad first version of the design is also multi-color, but later consider the text of more than a note, in order to provide a good text reading experience, or the multi-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 experimenting with data visualization and infographics, making the interface more than just a list, as well as more intuitive pie charts, sector charts, broken lines, histograms, and many more expressive ways. It may not seem like a difficult thing to do on the surface, but if you really want to achieve it, the complexity behind it is not a small glimpse.

Nice weather use a graph to express the temperature change, Jawbone up with a histogram to express the daily completion, PICOOC with a line chart to express daily weight, body fat changes. Mobile apps take advantage of data visualization, which allows for more stereoscopic presentation of content in smaller screen spaces.

　　 Four, card | Cards

The card is also a kind of use more design language form, cannot elaborate this kind of card design, is popular from Metro's tiles, or from Pinterest waterfall Stream popular up. In short, we can find that Google's mobile product design has been fully card-like, and even web-side use of this unified design language, is said to be Google search experience leader led by the design language unified upgrade.

Luvocracy's card stream highlights the information itself, attracting users with large and headline text, enhancing the endless browsing experience and attracting users to scroll down. Google now cards are more customizable and personalized. Some cards are used for user education, some cards are used to inform the weather, and some cards are presented to the contact list, a little card is displayed to do things. Different cards are played and designed within a uniform width and style card. It ensures the independence between card and card, and ensures the uniform design of service and service. Shazam uses a fun card style to present albums and songs.

　　 v. Content is king | Content First

App product development, the final path is bound to be the same as the Web products, highlighting content, content for the king, when the bustling faded, spotless, and then re-see the meaning 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 way of expression, and the real value of the app, must be content to win. Facebook bought WhatsApp for $19 billion, an app built with integrated controls, not because his design was superior, but because his service was valuable enough.

Artsy's picture waterfall stream, does not use the line and polygon to distinguish the information block, but is uses the content itself to make the typesetting, the user can focus on the picture content more. Prismatic uses typography, as much as possible to pre-set the content, weakening icons and actions, allowing users to focus on content reading. Mr Porter uses product images, names, and prices to design directly, allowing users to focus on the product itself.

　 vi. Application of the Circle | Circle Design

The prototype is the most comfortable shape, especially in the screen filled with various boxes of mobile phones, add some mellow shape embellishment, will immediately increase the lively atmosphere, the rise of goodwill. An interesting phenomenon is that the iphone's dial-up numeric keypad, beginning with a rectangular design, iterative to IOS7, has become a circular, can be said to be a tribute to the traditional telephone, it can be said to enhance the soft feeling of the interface. Of course, the corresponding, but also to deal with the actual contact area of the circle, not because the design into a circular Click area is also smaller, resulting in a drop in the accuracy of the click, aesthetics increased ease of use has been affected.

Beats Music to choose like the label design into a circle, which is more than the normal list, rectangular tag feel much better, more interesting and more exploratory. Movse the number of steps per day and calories burned are rounded, and are the best examples of data visualization and key information dominance. Tumblr chooses the type of content to be created, designs it with the Mask + Circle option button, and makes the selection more focused, clear, and less rigid.

　　 Seven, the large view background | Bigger Vision image Background

With the banner of the picture as a background, also become a popular trend this year, or as the entire app background, or as a content block background, not only enhance the visual performance, but also enriched the app emotional elements. Some information or operation, floating on the picture. This method of design requires higher and more difficult fonts and typography, but it is extremely easy to render an atmosphere.

Large field of view background map style is divided into two, a like secret, the Whole Pantry, the content block using a large view background, the advantage is that you can use the image to do block segmentation, the difficulty is the image after stitching the effect is not necessarily good-looking, so may also need to coordinate with the stroke, Stay white and other design methods to optimize stitching. Another is to want to Vsco, Flink, Mindie, Soundwave such, full-screen background picture even through the status bar, the foreground to do content layout, navigation, operation. The advantage is that the design is very life, all have friends to this style is also called a plan design, said is to return to the nature of the design method. But the risk is also very obvious, that is, the foreground of the information layout design is actually a great challenge, it will be too much interference in the background of the colorful attention, resulting in the future of the text content of the readability will weaken. So need to be important operation with a clear button area, reading text with the background map to use the obvious inverse color, or not, the text floating on the translucent layer, to solve the readability problem.

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

Mobile Internet Interpretation: 7 guidelines that product managers must know