NetEase Cloud Music WP1.0 design project actual combat

WP platform is a lot of designers are rarely involved in the place, excellent set before a WP design guidelines, today, NetEase students continue to dry goods, to a WP design project combat! As a sincere music app, this design process is very attentively, it is worth studying a lot of places to learn.

Project background

Windows phone has been a lack of investment platform for each company, WP users have to often face a mature app to the WP has become a variety of functional deficiencies, experience fragmentation, they are eager to apply software in the experience and other platforms like the same attention, music app is no exception. As a sincere music products, to create a veritable "cloud" concept, NetEase cloud music will certainly not ignore the voice of WP users, after many difficulties in the recent heavy launch of "functional without castration" WP client, but also WP users a complete music experience.

A new platform, a chance to change

Unique WP style design, decided that the cloud music WP version on the existing platform can not find any direct transplant design. However, it is also because from the beginning, the designer to put down the "damage users have the habit of" the ideological baggage, re-examine the pain of these years products, in WP make a bold change.

It's never easy to simplify. How to ensure that the functional experience intact, but also embodies the WP platform itself minimalist, lightweight characteristics, has become a cross-cutting design throughout our thinking.

　　One, more concise and efficient navigation

In order to support the rich content of cloud music, the existing mobile phone has appeared on the original pc/web on the two or even multi-layer nested navigation structure to make information more explicit. and WP extremely flat navigation structure is obviously unable to digest the increasingly expanding content of cloud music. If you migrate the current hierarchy directly to WP, the 4 level two navigation under Discover music becomes a portal. This design users first see no effective information, recommendations, such as the level of core content has become deeper, also not conducive to product operations.

But if you do not consider the complexity and scalability of the cloud music itself, in order to flat and flat, all the content tile, on the surface of the information is explicit, in fact, the efficiency of access to information is reduced: too many horizontal sliding options to get lost, the more the more difficult to reach the content.

So the priority of the content display is still a trade-off. The ultimate goal of flattening is to enable users to get to the desired speed faster, and any style specification is only a way to assist in achieving the goal. To this end, we break the existing structure, comb the different user types and their usage scenarios, and eventually reduce the level of navigation refinement to 4:

Separate the original "discovery" and recommendation-related content separately as a branch. This part of the content in the form of emphasis on direct presentation of specific information to facilitate the "no target" users quickly find the quality of cloud music content.

The remaining "discovery" content is more targeted to "targeted" users, for such users, the portal design to facilitate their overview of all content modules, so as to quickly locate their needs.

In this way, different users can quickly cut to the theme, operating content and social elements have been properly demonstrated, the entrance design to reduce loading, to ensure that the first panoramic view of the landscape across the smooth experience.

　　Ii. reducing the sense of disorientation

Panorama map Navigation (panorama) in the experience of the biggest disadvantage is that you can not see all navigation in the current screen, can not quickly switch navigation, only through the horizontal slide to reach. How can you reduce the sense of disorientation that comes with a round-and-round browsing that allows users to find what they need faster?

In addition to refining the number of navigation, we have also redesigned the navigation priority, so that more important content is easier to be found at the first time: "My Music" as the default entry page, because this is the "home" of each user. Then from the "home" to explore, according to the content priority, followed by recommendations, discovery and friends dynamic. In the design of the horizontal browsing process in the layout of the changes in the page, users can use visual aids to confirm their current module.

In addition, melody Recognition, search, settings and other functions are defined as "common tools", resident in the bottom of the application bar (app bar). In this way, users in the home page anywhere can be a key call, no memory and search.

　　Third, the use of platform features to make information more flat

Song is the core of the content of cloud music. Product feature iterations So far, the song single interface has become bloated, but there is still a lot of information difficult to find. Slap a big mobile interface, how to make the information as far as possible, while the interface without losing elegance? Some of the new features of the WP platform let us see the opportunity.

When the UI is flattened, the clickable area becomes unpredictable. In WP song single page, we separate the information from the operation more thoroughly, in addition to a close relationship with the song list play, download, all the other action for the song is placed in the application bar (app bar), no longer allow users to explore the full screen, so that the interaction is more predictable. At the same time, the use of WP axis (Pivot), will be the list of songs, introduction and Comments side by side, without jumping, horizontal sliding can be reached, so that information more explicit. In this way, the level of the song becomes clear, all the information at a glance, all the features reach.

　Four, flat ≠ mediocre

The flattening of the UI weakens the identification between different applications, and it seems that all applications are similar in WP. We have always believed that the distinctive vision can give the product a strong personality, touch the heart.

The playback page is the entire software of the visual center and also the emotional center. In the visual design process, we also tried a lot of more flat to adapt to WP style, but always feel the lack of their own characteristics. Finally, in the choice of flattening and differentiation, we choose to retain the iconic vinyl disc and the Blood Groove progress bar, while dealing with other details more lightweight, creating an immersive experience.

When information returns to its essence, so does vision. Vision should first conform to its environment, followed by its own character. Bright large color block only suitable for the home page, content pages to the black and white gray as the main color to highlight the information itself, but the completely plain interface and appear lifeless. Through repeated attempts to use red in different details of the effect, and finally achieve red to make the interface more personalized while not rob content.

The design process of color, spacing, font size of excellence, the development process of Baiyuzh fine-tuning, designers and development is a great test.

　Summarize:

"The real simplicity is not shanfanjiujian, but the creation of order in the complex." To create a full functional version of NetEase Cloud music WP end, whether the design or development have experienced from chaos to orderly process.

As a big family of cloud music, the latest platform, Windows phone platform small audience, less project resources, more platform restrictions ... Despite a lot of obstacles in the process, we are still trying to build the best experience on a few platforms with few users and fight for it day and night.

Change means risk, and we do a lot of different things in WP1.0, and we realize that there's a lot more to be done in this version. Wper, keep you waiting, your support and understanding is the driving force for our continuous progress!

--written on the occasion of WP1.0 online