How to improve the style of APP interface in details?

[[140092]]

The times are always changing in a spiral, and so are design trends. With the advancement of mobile flat design, more and more designers are not satisfied with the boring combination of color blocks, icons and system fonts, but put more thought into the visual design of excellence. The techniques derived from graphic design play a finishing touch at this time: some details have greatly enhanced the brand style of the mobile product interface.

For example, Yahoo Weather! and Yahoo Digest, two star apps of Yahoo, are well-known for their exquisite designs. In addition to the extreme and outstanding performance in product design, the blurring and beveling techniques have brought the brand temperament of the entire product to a new level. Yahoo Weather! is exquisite in layout, fonts and color, and the Gaussian blurring is smooth when sliding. The beveling of Yahoo Digest highlights a "break", which can not only make it visually different without affecting the content of the photo, but also cleverly leaves a corner for the color label in the layout. Compared with a flat cut, it is more flexible and balanced.

We have seen many excellent cases abroad, but Chinese apps are often not comparable to Western apps in visual design. Due to various reasons, such as font defects, even if they are copied, they are still inferior to the originals. This frustration adds a lot of trouble to Chinese app designers. But there are always talented people, so let's pay attention to the people around us and summarize how some new Chinese apps in recent years have improved their product quality through detailed design.

Choose a font that matches the product’s temperament

Fonts are one of the important weapons of designers. Appropriate use of fonts can double the expression of product positioning and content emotions. For font selection and font and product temperament, please refer to the other two articles, so I won’t go into details here. ([English font selection] / [Font and product temperament]) However, one thing that bothers many designers is that no matter which platform, the Chinese fonts that come with the mobile system are too few and have no characteristics. Embedded fonts have become a solution for some App designers who pursue perfection.

As a writing platform app for "exchanging stories and ideas", Jianshu has chosen Source Han Sans as its built-in font to optimize the reading experience, so that users can publish in simplified Chinese, traditional Chinese, Japanese and Korean with relatively ideal performance. The product concept of Food Color is to discover and share the city's delicacies with "lifestylers", so the delicate and exquisite Fangzheng Lanting Xianhei is chosen as the main interface font. Users can feel the difference in temperament from other products when they use it for the first time.

In addition to the built-in concise and friendly sans-serif fonts, products such as Lohas, which are fresh and emphasize the sense of natural life, will use the old font of Tian's Song style or Fang Zheng Lanting Song style, which can reflect the ancient charm and have a very simple and textured serif font to express the product positioning and temperament.

How to Use Typography Skills in Graphic Design

As the saying goes, the more homely the dishes are, the more they test the chef's skills, such as scrambled eggs with tomatoes. The simpler the elements, the more they test the designer, such as black text on a white background, or white text on a black background. We can deeply appreciate the beauty of black and white from the works of master Kenya Hara. On the white surface, the black text is both text and decoration, both dots and lines. By adjusting the volume and spacing, the picture is formed in a staggered manner and the rhythm is constructed.

The IDEAT App inherits the concept of the French IDEAT magazine, focusing on the "contemporary life" content that showcases design, art and fashion. In addition to the content pictures, there are almost no other color elements on the App interface except black and white. The bright white text with a black background is both content and decoration, running through the entire App design elements; adjusting the spacing between these texts and other content, and playing different functions as points, lines, and even surfaces in the layout.

Of course, if it is not a content-based app and does not have too many layout requirements, you might as well be like iFashion, or ENJOY, a limited edition food app produced by Fanben, which uses direct black line divisions to create a neat and clean design.

Watermark decoration adds points to the picture

The success of Watermark Camera tells us that users also like to use watermarks to enhance the quality of their pictures. In apps like Over that focus on photo decoration, text watermarks can be sold at a good price.

When used in product interfaces, watermarked title images can also give people a pleasant surprise. "WOW!" In Big, a high-quality pictorial sharing app, each title image of Big Newspaper has been specifically watermarked, striving to allow users to see a bigger world and discover more "high-end" content. Although there are only text and a small amount of decoration in the layout, the overall sense of the font and color is relatively strong, and the unity and harmony appear very grand.

More eye-catching poster-style picture sharing

In addition to the product itself, sharing is a way to let more unfamiliar users understand the product. If it is just a paragraph of text with a picture, do you think it is a bit outdated? Poster-style picture sharing is a good way to catch the attention of passers-by in the era of information explosion, and naturally requires more design skills. People who know the Daily Forbidden City App are probably not because of its name or any advertisements, but because of its exquisite sharing posters. The simple and textured background map, combined with the antique fonts, is not amazing because it reflects the historical sense of the Forbidden City, but the refined modern atmosphere it exudes. What the Daily Forbidden City conveys to users is not a "Forbidden City of the past", but "The Forbidden City of Today".

In addition, for apps where users produce their own content, combining the user's pictures and text content into a well-formatted template and then sharing it is also a way to demonstrate design skills. Tiantian Ptu's poster puzzle is a functionalized poster-style sharing. Users can add their own photos to the designed poster template, modify the corresponding theme and copy, and the program can automatically identify the time and location of the photo. With simple operations, you can put together a poster of your own. The photos shared through poster puzzles are not only the result of improving the user's photo style through the template designed by the designer, but also the result of the interweaving of the user's temperament and the product's temperament.

Compared with other similar poster-style sharing apps, Yeye, which focuses on recommending and sharing food among friends, has added a little trick: through the Baidu translation API, the text entered by the user is converted into Traditional Chinese, Japanese, Korean and Classical Chinese, and displayed with embedded fonts - such as Wen Yue Ancient Song Style - so that the shared pictures have a unique flavor.

The animated interface is more impressive

It seems that traditional design (well, although I don't like this way of calling it) has been greatly overshadowed by interface design, especially mobile design, in recent years. However, as mentioned at the beginning of the article, design trends are also constantly changing in a spiral. For designers, the most important thing is to design for a reason, and both tools and methods need to be integrated. In addition to keeping up with the cutting-edge technology and design trends of the times, reviewing classics, examining life, and practicing details are also important methods for refining design concepts. Of course, in addition to graphic design elements, a carefully planned video-style startup page (not an animation!) also adds a lot to the product's style.

In summary

How to show your style? It is to simplify things and see the big picture from the small. To achieve the desired effect, you need not only skills but also "heart". Carefully create the product temperament from the details, bring pleasure to users, gain recognition for the brand, and form a unique product aura. Who can say that this is not a kind of style? Adhering to this idea, our product Tiantian Ptu has been striving to transform itself towards creating its own style since its birth. In the future, we will also carry out the original intention of striving for excellence and bring more surprises to users.

If you are also making or working on making an App with style, welcome to communicate with us~

Original address: Tencent isux

Author: Orange