云音乐app：WP台上的扁平化设计探索

2014-09-22 

开发背景

Windows Phone还是个缺少公司加入的平台，WP用户经常要面对如何将成熟的APP导入WP后，出现功能缺失、体验支离破碎的问题，因而特别渴望应用软件在体验上能跟别的平台一样受到重视，音乐APP也不例外。

作为一款名副其实云服务的音乐app，网易云音乐自然会重视WP用户的需求，其于近期重磅推出了功能完整的WP客户端，让WP用户拥有完整的音乐体验。

全新平台带来的改变契机

独树一帜的WP风格设计，注定音乐app的WP版，无法在现有平台上找到丝毫能够被直接借鉴的设计。也因此，设计师能够在WP上做大胆的变革。

在进行网易云音乐设计时，我们注重在确保功能体验完整的同时，又体现WP平台的极简、轻量特点。

1、导航更加简洁、高效

WP极度扁平的导航结构，难以彰显云音乐日益丰富的内容。倘若将如今层级结构直接移植过来，那“发现音乐”下的四个二级导航就得变成入口。如此一来，用户首先无法一眼看到丝毫有效信息，推荐等核心内容的层级却变深了，对产品的运营不利。

而如果忽略了云音乐内容的复杂性与扩展性，纯粹追求扁平化设计，将内容都平铺、外显了，获取信息的效率反而更低：用户容易迷失在众多的横滑选项中，无法达到靠后的内容。

扁平化设计的终极目标是让用户更快实现需要，而风格规范只是一种辅助方法而已。因而，我们打破已有的结构，将一级导航精减到4个：

1、将先前的“发现”里和推荐相关的内容独立成一块。该内容在表现形式上，追求具体信息直接呈现，让没有目标的用户能尽快从音乐app中找到优质的内容。

2、“发现”里剩下的内容，则为有目标而来的用户准备的。对此类用户而言，入口设计能让他们明确一切内容模块，快速找到自己所需的。

这种扁平化设计，让各种类型的用户都能够快速进入主题，运营内容与社交元素也能得到很好的展现，减少了入口加载量，确保首页全景图横向浏览时流畅无碍。

2、弱化迷失感

全景图式导航最大的问题是，无法从当前屏看到全部导航，难以在导航间快速切换，必须依靠一次次横滑才能到达目的。要怎么样才能减少如此周而复始浏览所引起的迷失感？

我们除了把导航个数进行精简外，还重新进行导航优先级的规划，有助于让重要的内容优先被发现：我们把“我的音乐”设为默认进入页，然后让用户从这里出发去探索，在按照内容优先级，先后给用户呈现推荐、发现和朋友动态等。

此外，在扁平化设计时，我们把旋律识别、搜索、设置等“常用工具”放在底部应用栏中。如此一来，用户不管在首页何处，都可以一键调用，不必再回忆和寻找。

3、以平台特性实现信息扁平化设计

作为云音乐内容核心的歌单。随着产品功能迭代，现在界面已经变得很冗余。如何让小小的手机界面展现出更多的信息来，却又不造成界面臃肿？

WP平台的全新特性让设计师有了新机会。

UI扁平化设计后，可点击区域就有了不确定性。在WP歌单页面上，我们彻底分离了信息与操作，除了播放、下载外，其它针对歌单的操作全放置在应用栏上，避免用户再满屏探索，提升了交互水平。此外，我们利用WP轴心图，将歌单的列表、介绍、评论等并排，不必再跳转，只要横滑就能到达，信息外显性更强。如此一来，音乐app的歌单层次更清晰，信息更明显，功能更容易到达。

4、扁平化设计不等于平庸

UI扁平化设计降低了应用之间的辨识度，导致WP上的所有应用，好像样式都差不多。我们始终相信，独树一帜的视觉能给产品予强烈的个性，更能触动心灵。

播放页可以说是整个音乐app的视觉、情感中心。因此，视觉设计时，我们做了不少更加激进的扁平化设计方案，以跟WP风格适应，但终究觉得特色不足。最后，我们在扁平化与差异化的考量里，选择将标志性的黑胶唱盘和血槽进度条保留下来，同时让其它细节处理更轻盈，创造出沉浸式的体验。

设计时，对色彩、间距、字号的来回琢磨，开发过程中的一次次的微调，都给设计师们巨大的挑战。

结语：

全功能版的WP端云音乐app，不管是设计还是开发，都是一个从混乱到有序的过程。

WindowsPhone平台小，项目资源少，限制多……在云音乐开发过程中，给我们带来许多阻碍，不过，我们仍在WP1.0上进行了诸多与众不同的尝试，虽然这个版本尚有许多地方要精益求精。