Why define an interface with multiple colors? There is only one main color, can it express the interface level and important information well and show a good visual effect? In fact, it is. With the release of iOS7, we see more and more designs with unique main color tone style, which will use simple color levels and matching gray levels to express information levels, but never use more colors.
Qatar Airways
Qatar Airways is such a design case. The main color of the whole interface is pink, from the title bar to the tab page, from the operation buttons to the prompt information, except black, white and gray. This simple color matching style, on the contrary, plays a good role in conveying information and has a good visual expression. The designer's skill in content typesetting is really a bonus.
The readability adopts the red main color design, even the background color, linear buttons and icons of the prompt information adopt the red main color, and the interface and LOGO are completely in the same color system. Vivino adopts the blue main color design, and the information is separated by dark blue and light blue. Eidetic adopts the orange main color design, in which the key operation buttons are even highlighted in orange, and the information icons are also represented in dark orange and light orange.
It can be said that the only main color design method is to truly achieve the minimalist design of mobile APP, reduce the interference of redundant information, and let users focus on the acquisition of main information.
Second, multicolor | super color
In contrast to the only main color, the multi-color style headed by Metro. Why should I define a main color tone for my products, so multicolor can't be the main color tone? Therefore, different pages and different information blocks are designed in multi-color way, and even some parts of the same interface can be compared in multi-color, which also produces many excellent designs.
RECIPE produced by Uniqlo is a striking design case. The whole application incorporates a variety of color design styles. Whether you switch tabs or scroll through content blocks, you will change different theme colors. When switching colors, there will be a fade-in and fade-out effect, which will make the switching natural and not blunt at all. RECIPE's tomato clock timer module will play beautiful food background music at the same time and switch different theme colors at the same time. With the change of the main color, all the foreground copywriting and pictures will be changed into this color system, plus high-definition food pictures, which is really a double enjoyment of vision and hearing. RECIPE is really an excellent design of 20 13.
Peek Calendar, EveryWeather and Harmony are all design cases of multi-color lists. I don't know if it's popular now. Get back on your feet from Clear. Distinguishing information with bright colors can really play a prominent role and is extremely eye-catching visually.
However, for some content-based apps, it may not be applicable, such as the color card of GoogleKeep, which will really have the opposite effect on content reading. The design of the first edition of Baidu Cloud Notepad is also multi-color, but later, considering that there are many words to remember, in order to provide a good text reading experience, the multi-color design is changed into a gray micro-texture design.
Third, data visualization | data visualization
Regarding the presentation of information, more and more apps are trying to visualize data and chart information, so that the interface is not only a list, but also a more intuitive pie chart, fan chart, line chart, bar chart and other rich forms of expression. On the surface, it doesn't seem very difficult, but if it is really to be realized, the complexity behind it cannot be underestimated.
Nice Weather uses charts to represent temperature changes, Jawbone UP uses histograms to represent daily completion, and PICOOC uses line charts to represent daily weight and body fat changes. With data visualization, mobile APP can display content more stereoscopically in a smaller screen space.
Four, card | card
Card is also a widely used design language. It is impossible to study whether the design of this card is popular from tiles in Metro or waterfalls in Pinterest. In short, we can find that Google's mobile product design has been comprehensively combed.
Well, even the Web side has followed this unified design language, which is said to be a unified upgrade of the design language led by the experience leader of Google search.
Luvocracy's card flow highlights the information itself, attracts users with big pictures and titles, strengthens the endless browsing experience and attracts users to continue scrolling. Google Now cards are more customized and personalized. Some cards are used for user education, some cards are used to inform the weather, some cards are used to present contact lists, and some cards are used to display to-do items. Different cards follow a card with uniform width and style for development and design. It not only ensures the independence between cards, but also ensures the unified design of services and services. Shazam presents albums and songs in an interesting card style.
Verb (abbreviation of verb) content is king | content comes first.
Artsy's picture waterfall stream does not use lines and faces to distinguish information blocks at all, but uses the content itself to typeset, so users can pay more attention to the picture content. Prism adopts font typesetting, putting content in front as much as possible, weakening icons and operations, and making users pay more attention to content reading. Mr. Porter directly uses the pictures, names and prices of products to design, so that users can focus on the products themselves.
VI. Application of Circular Design
Prototype is the most comfortable shape, especially in the mobile phone screen filled with various boxes. Adding some rounded shapes will immediately increase the lively atmosphere and goodwill. An interesting phenomenon is that the iPhone's dial-up numeric keyboard was designed to be rectangular at first, and it became round when it was iterated to iOS7. It can be said that it is a tribute to the traditional telephone, and it can also be said that it enhances the flexibility of the interface. Of course, correspondingly, we should also deal with the actual touch area of the circle. Don't reduce the click accuracy because the click area is designed as a circle, which will affect the improvement of aesthetics and ease of use.
Beats Music designs favorite labels into circles, which are much better than ordinary lists and rectangular labels, and are more interesting and exploratory. Movse's daily steps and calories are carried by circles, which is the best case of data visualization and key information visualization. Tumblr selects the content type to be created, and designs a mask+round option button, which makes the selection focus clear and less rigid.
Seven. Large field of view background | larger field of view image background
Using banner pictures as the background has also become a popular trend this year, either as the background of the whole APP or as the background of content blocks, which not only enhances the visual expression, but also enriches the emotional elements of the APP. Some information or operation floats on the screen. This design method has higher requirements for font and typesetting design and is more difficult, but it is very easy to render the atmosphere.
There are also two styles of large-field background images. One is like a secret and the whole pantry. The advantage of using a large field of view background image in a content block is that it can be segmented by images, but the difficulty is that the effect of image mosaic is not necessarily good-looking, and it may be necessary to optimize the mosaic by using design means such as strokes and blank space.
The other is like Vsco, flink, Mindy, Sonic. The full-screen background image even opens the status bar, and the front desk does content typesetting, navigation and operation. The advantage is that the design is lively. All my friends call this style planning and design, which means a design technique of returning to nature. But the risk is also obvious, that is, the information layout design of the foreground is actually very challenging, and the colorful background will interfere with attention too much, making the readability of the text content in the foreground weak. Therefore, clear buttons should be used to distinguish important operations, and the reading text should be clearly reversed from the background image, otherwise the text will float on the translucent mask to solve the readability problem.
Finally, to sum up, the seven design languages that impressed me deeply in 20 14 are: unique main color, multi-color, data visualization, card-type, content-oriented, cyclic application, and wide-field background map. In fact, it is difficult to have a brand-new design style, and it is also a process of constant reincarnation. In order to highlight the content, the APP is designed in a light and thin direction, but there is no guarantee that one day it will subvert the original heavy texture imitation design.