The style of the big change of QQ music V5 star set

QQ Music This year's major update, style completely changed a sample, want to understand the design behind the idea? Today, Tencent's students will share 5.0 design processes and thoughts >>> ideas from frame, UI, graphic quality and animation.

Quietly, QQ music has been with everyone for ten years, from the PC Internet age to the mobile internet era of QQ music has been exploring and adhere to the minimalist fashion design language. After several iterations, content-oriented page layout is slightly conservative, the new version of the visual in the brand elements, highlighting the expression of music elements, try to interpret the simple and fashionable design language from a new perspective.

Today's mobile application software design is no longer simply follow the mobile phone system design, there is a brand-specific product will be more users like. Through user research, we also understand the user's demand for personalized interface, such as cool skin, large graphics mode and animation design. Products and design hope that the new version of the vision in the personalized and brand sense of a breakthrough, on the one hand to meet user demands, on the other hand can consider the integration of integrated design, to solve the problem of multiple terminal adaptation.

In the past, more content-oriented typography lacked the performance of musical elements, in the new version, not only in terms of content, we would prefer to bring more quiet music to the user visually, in the play page we restore the traditional [record] of the form, as well as the real disc rotation and switching animation, giving the interface more vitality, The user no longer thinks it is a row of play buttons, but a jukebox.

So how do you make a record more real and vivid? Combined with transparent cover fuzzy background + flat record + smooth dynamic effect. Not only to the user to maintain a simple fashion style, but also do not need to worry about adding to the heavy texture of the materialized and outdated.

What should be the scene of enjoying the music? --café/bar/concert/night sky/...

Through a variety of scene exploration, the night sky can give users to enjoy the atmosphere of music, but also combined with many users of the night mode of demand, the new version of the QQ music debut " Hyun-Black Mode ", in order to better match the brand Green, we chose the dark cyan blue tone, with warm color as a slight auxiliary light and shade, and then through the flat processing into the main background, so that the interface is transparent and not thick.

We designed the night sky as the theme of the warm-up page and the Welcome page. In the warm-up stage, the use of the star combination of the QQ music logo, starlight from weak to bright, and finally reached the line when the Stars Shine Welcome page. Blue sky, sparkling starlight, two people are sharing music, allowing users to open the Welcome page when the mood of the night sky generation.

Of course, we also consider in some scenarios not suitable for the black mode or user preferences, we still retain the traditional "minimalist mode" and support one-click Switch. Also for the subsequent personalized customization of the skin formally stepped out of the first step.

With the advent of the iphone 6/6 Plus, and the big screens such as the Android 720/1080p are becoming mainstream, we have taken more account of the problems associated with screen space utilization. On the UI we have reduced most of the cell style and redundant lines, reduced the layout structure, the overall details page unified through the navigation bar, reducing the page fragmentation, so that the picture more immersed. Music should be fashionable personality, the new version of the singer page for the singer set aside a larger display area, as far as possible to show the singer's personalized performance.

　　Detail Polishing

The new version of QQ Music continues to polish the visual details for the first time we try to use a more slender and stylish font – The Orchid Pavilion fine blackbody. Compared to the system font will make the interface more neat and concise, reading more comfortable. In addition, in the icon, also continued the original line design for fine carving, some of the icons are redrawn, to simplify, and strive for each icon concise, understandable.

　Dynamic Performance Design

Today, Ling Lang everywhere in the app, how to stand out in the design of the designers need to consider, not only a reasonable display of product structure and function, more important is to think about whether the app can be simple and understandable, but also give users a sense of novelty?

Dynamic design is becoming a very important and essential component in the design of mobile terminals.

QQ Music 5.0 in the original single boring and lifeless mode of operation, increase the smart and real dynamic effect.

1. Miniplayer Fast Cut Song

Miniplayer in the new framework as a resident module, users can be in any page by sliding the bottom of the operation. and left and right cut song using gestures and animation, reduce the external switch icon at the same time, so that the operation is convenient, greatly reduce the past need to enter the time to play page cut song.

　　2. Simulate Real Records

That is, to maintain a simple flat visual style, and do not want to join the physical sense and interface, then how to make the performance of the record more real? Only through the performance of the delicate action to solve. But there is one detail that may not have been noticed – the playlist is about a bit slower than the Miniplayer record speed. In order to synchronize the recording rotation in the visual, adjust the angular speed to ensure the speed of the disc rotation is consistent, so the sense speed of the big record is more moderate.

　　3. Miniplayer Switch to Playback page

In order to make the Miniplayer and the playback page switch back and forth the flow degree, the design uses divides into the animation the form. The bottom, the information layer and the album cover layer use different trajectory and animation principle, through the physics dynamics principle, the designer and the development colleague, through the Simulation object Movement track research and the speed unceasing adjustment, simulates the comfortable real animation feeling.

　4. Global switching

Users can not only click on the top of the navigation page to switch, add the left and right hand gestures, can be controlled in the pages of the page between the conversion, greatly reduce the use of efficiency, fast and convenient.

Responsive interaction, full of implied excesses, pleasing details. After mastering these characteristics, it will play an icing on the cake.

Orchestrated dynamic design can more effectively attract users ' attention, and let users focus on the operation of different steps, experience different processes, a meaningful dynamic design can be in the interface changes, elements rearranged process, so that the overall experience more comfortable.

　　Summarize

QQ Music 5.0 New design came, open the page stars Bright night sky, look forward to the new version will give you a refreshing feeling. The above is a number of projects in the process and experience, for users to bring more cool and easier to use the music software QQ, the designer has been working hard.