NetEase News Android Client Material design combat

Project Background

NetEase News Android version has been copying the iOS version of the interaction and vision, which to a certain extent to maintain the application of different platforms and user experience of the consistency, but also reduce the design and development of human costs. The same is true for most mobile applications on the market. So it has always been to the user that Android has no distinct visual style, but that's not the case. Not long ago Google launched the androidl system, visual language material design is also born accordingly. Google provides designers with a complete set of official interactive visual design guidelines, flat, gorgeous and stable colors, the function of the card to the fullest.

To this as an opportunity, NetEase News also tries to the platform's vision to optimize the revision. On the basis of the original architecture, the existing vision is optimized to make it more consistent with the quality of the Android platform.

Main content of optimization:

　　1, News list

Material design more use a large area of color block, the navigation style provided by the following figure:

Left Image: The default app bar + TAB bar

Right Image: Default app bar + scrollable tab bar

NetEase News of the two-level navigation columns, must be able to scroll around, the above two ways is obviously the right picture more appropriate. Then according to the visual style of the above picture and with the characteristics of NetEase news, the navigation of the headline list tried the following several improvement programs:

Programme I:

Copy Goolge navigation visual style, with NetEase News original main color red, design the following figure.

Because the red navigation bar height is too high, appears suppresses, and affects the user's reading experience, finally did not adopt this plan.

Programme II:

Remove the red navigation bar, increase the height of the head, the picture as the main body, the visual focus is more prominent; the first screen picture and text ratio 1.6:1. However, the scheme was not adopted in the end because of large changes.

The headline list pushes up red level two navigation, as follows:

Programme III:

The final online version, compared with the original version of small changes, style conservative.

　　2, left side drawer

Left drawer, the original black background to replace the white, and the icon style flat, concise and colorful.

Right drawer, in conjunction with the interaction of students to classify information, divided into the next three parts, the upper: User-related information, Central: Activity class information, bottom: function class operation entrance; and add menu item.

　　3, the article page detail adjustment

Material design is a very specific specification of the value between the size of the font and the corresponding row height, as shown in figure:

In the case of 1080*1920px's Android phone size, it is easy to read the text font size of 54px, that is, 18sp. On this basis, according to the size of the text font to adjust the balance, decide the big title, time, source, lead and other text size.

The picture is in the position relationship inside the article page demo, as follows:

For the columns at the bottom of the article page, such as: Related news, hot paste, etc., card design, the various columns for the unity of visual norms, and highlight the theme of each column, and the left drawer icon color to maintain unity, such as the relevant news and news icon color value the same; Hot posts and the color value of the icon.

　　4, the page

Material design to have the icon or avatar content to do a specific specification, left and right each have 16DP vertical margin. The content with an icon or avatar has a 72dp left margin. The following figure:

Inbox Case:

According to the above specifications, try to the news page to make the following demo design:

It can be seen that the Google specification of the various spacing in the actual application is relatively large, may also be the reason for Chinese typesetting. Then, on this basis to modify, design the following final version:

In addition to reducing the size of the head, but also narrowed the page about the spacing, the final visual effect of the text appears more compact.

　　5, write the page

The Floating action button (FAB) is a visual highlight of the meaterial design. Therefore, I also want to use this bright spot as much as possible to the NetEase news, so try to do the following program.

Programme I:

The scheme finally failed to pass. The reason is that the interactive students feel fab is not suitable for use in the writing and the content of the article has a certain reliance on the relationship between the page. It's better to publish a new idea, such as Google +.

Programme II:

Write the Paste Window Full Screen page shows that this scenario eventually failed because of the above reasons.

Programme III:

The final online version. There is no significant change compared to the previous version.

Programme IV:

Based on the design of large screen mobile phone, will write the button from the top right corner to the lower left corner, easy for users to operate one hand. This scenario is undergoing a small-scale user test.

　　6, other pages

Subscriptions, videos, pictures and other columns have been the corresponding card design optimization.

　　Written in the last

In only the visual optimization of the NetEase News Android revision, the relative restrictions too much, visual design crept up, some of these programs are not affirmed, the online design is relatively conservative, for Android's revision is not thorough enough. In advocating innovative design today, as a designer, the Android visual revision did not achieve the desired effect. Hope to be in the future work of product and interactive support, can make a visual innovation, add appropriate animation, and interactive forms. Products are always exploring innovation in the progress, we work together to do one thing, the outcome will always be in the direction of good development.