化繁为简——网易云音乐WP1.0设计思考
项目背景
Windows Phone一直是各家公司缺少投入的平台,WP用户不得不经常面对一个成熟的APP到了WP上就变得各种功能缺失、体验支离破碎,他们渴望应用软件在体验上能和其它平台一样受到同等重视,音乐APP也不例外。作为一款有诚意的音乐产品,打造名副其实“云”的概念,网易云音乐当然不会忽视WP用户的呼声,历经重重困难于近期重磅推出“功能无阉割”的WP客户端,还WP用户一个完整的音乐体验。
崭新的平台,改变的契机
与众不同的WP风格设计,决定了云音乐WP版在现有平台上找不到任何可以直接移植的设计。不过,也正因为从零开始,设计师得以放下“破坏用户已有习惯”的思想包袱,重新审视这些年产品的痛,在WP上做一次大胆的改变。
化繁为简,从不是件简单事。如何既保证功能体验完整,又体现WP平台自身极简、轻量的特点,成了贯穿我们设计始终的思考。
一.更加简洁、高效的导航
为支撑起云音乐丰富的内容,现有手机端均出现了原本PC/Web上才会出现的双层甚至多层嵌套的导航结构,以使信息更外显。而WP极度扁平的导航结构显然无法消化云音乐日益扩充的内容。如果将目前层级结构直接移植到WP,则“发现音乐”下的4个二级导航要变为入口。这种设计用户第一眼看不到任何有效信息,推荐等核心内容的层级变深了,也不利于产品运营。
但若不考虑云音乐自身内容的复杂性与可扩展性,为了扁平而扁平,将所有内容平铺,表面上信息是外显了,实际上获取信息的效率反而降低:过多的横滑选项让人迷失,越靠后的内容越难以到达。
因此内容显示的优先级还是要有所取舍。扁平化的最终目的是让用户更快到达所需,任何风格规范只是辅助达到目的的方法。为此,我们打破现有结构,重新梳理了不同用户类型及其使用情境,最终将一级导航精减到4个:
- 将原先“发现”里和推荐相关的内容单独提取出来作为一分支。这部分内容在表现形式上讲求直接呈现具体信息,方便“无目标”型用户快速发现云音乐的优质内容。
- 余下“发现”里的内容则更针对“有目标”型用户,对于这类用户来说,入口设计方便他们纵览所有内容模块,从而快速定位自己所需。
这样,不同用户都可以快速切入主题,运营内容和社交元素都得到了恰当的展现,入口设计减少加载,保证首页全景图横向浏览过程中的流畅体验。
二.减少迷失感
全景图式导航(Panorama)在体验上最大的一个弊端是,你无法在当前屏看到全部导航,无法快速切换导航,只能通过依次横滑去到达。如何减少这种周而复始地横向浏览所带来的迷失感,让用户更快找到自己需要的东西?
除了精减导航个数之外,我们也重新规划了导航优先级,以便更重要的内容更容易在第一时间被发现:将“我的音乐”作为默认进入页,因为这是每个用户的“家”。然后从“家”出发去探索,根据内容优先级,依次经过推荐、发现和朋友动态。在设计上讲究横向浏览过程中页面布局的变化,用户可通过视觉辅助确认自己当前所在模块。
另外,旋律识别、搜索、设置等功能则被定义为“常用工具”,常驻在底部应用栏(App Bar)。这样,用户处在首页任何地方都能一键调用,无需记忆和寻找。
三.利用平台特性,让信息更扁平
歌单是云音乐的内容核心。产品功能迭代至今,歌单界面已经变得臃肿不堪,但仍就有很多信息难以被发现。巴掌大的手机界面,如何尽可能让信息外显,同时界面又不失优雅?WP平台的一些全新特性让我们看到了机会。
UI扁平化后,可点击区域变得不可预期。在WP歌单页,我们将信息与操作分离得更彻底,除了与歌曲列表关系紧密的播放、下载,其它所有针对歌单的操作都放置在应用栏(App Bar),不再让用户满屏地探索,使交互更加可预期。同时,利用WP轴心图(Pivot),将歌单的列表、介绍和评论并列呈现,无需跳转,横滑即可到达,使信息更外显。这样,歌单层次变得清晰,所有信息一目了然,所有功能一触即达。
四:扁平≠平庸
UI扁平化削弱了不同应用之间的辨识度,在WP上似乎所有应用都长得差不多。我们一直坚信与众不同的视觉能赋予产品强烈的个性,触动人心。
播放页是整个软件的视觉中心也是情感中心。在视觉设计过程中,我们也尝试了许多更为扁平化的方案以适应WP风格,但始终觉得缺乏自己的特色。最终在扁平化和差异化的抉择中,我们选择保留标志性的黑胶唱盘和血槽进度条,同时在其它细节上处理得更轻盈,营造一种沉浸式体验。
信息回归本质后,视觉亦然。视觉首先要符合其所处的环境,其次才是自己的性格。鲜艳的大色块只适合首页,内容页则以黑白灰为主色调以突显信息本身,但是完全素色的界面又显得死气沉沉。通过反复尝试红色运用在不同细节上的效果,最终达到红色使界面更有个性的同时不抢内容。
设计过程中对色彩、间距、字号的精益求精,开发过程中的百余次微调,对设计师和开发都是极大的考验。
总结:
“真正的简洁不是删繁就简,而是在纷繁中建立秩序”。打造全功能版的网易云音乐WP端,无论是设计还是开发都经历了从混乱到有序的过程。
作为云音乐大家族最晚起步的平台,Windows Phone平台小众,项目资源少,平台限制多……尽管过程中遇到很多阻碍,我们仍然力求在这个用户数不多的平台上打造最好的体验,并为之日夜奋战。
改变意味着风险,我们在WP1.0做了很多不一样的尝试,同时也意识到这个版本还有很多事来不及做。WPer,让你们久等了,你们的支持与理解是我们不断前进的动力!
——写在WP1.0上线之际
真的很不错,但是可以考虑导航页面非瓷砖化,比如列表,和其他音乐APP区别开来
功能确实强大,细节地方,应该还是再努力下,比如对大屏,高分屏手机1520这种。
歌词界面,下面有空白。。
@HelyCheng 感谢反馈,我们会持续优化
@WP 谢谢建议,我们自身也在不断加深对WP设计的理解,希望和大家一起探讨
非常感谢你们为windowsphone用户开发了这么优质、流畅的应用(从今天去,我就是网易云音乐的铁杆粉丝喽)。希望以后的更新加入动态磁贴,更多的皮肤;尽可能的加入一下动态的交互,使得应用显得更加活泼。
非常好 学习了
@liusir 感谢你的支持和建议~后续版本我们会考虑一步步优化动态效果。
great 学习了啊
方便与习惯到底那种该有限考虑那!
很高兴在WP平台看到网易云音乐,之前从QQ音乐到虾米然后到网易云音乐的转变,的确是不管寻找更好的音乐播放器的过程。非常感谢!希望以后更够加入动态磁贴、皮肤(配色),同时整个应用在不同页面的过渡中加入更加平滑的动画(类似iOS版本),相信会更好~~另外,由于Lumia 1520、930都是1080P屏幕,所以这个App的适配也希望能够加强~~最后问一个问题,之前购买的流量包,在WP平台上没有这个功能,是否也同样享受流量包月无限听这种服务呢?
必须肯定网易云音乐团队的优秀成果,你们的努力和重视为wper带来了希望,即便属于小众也不希望被忽略,而真正优秀且受尊重的团队首先是提现在对用户和产品的负责上,感谢你们。期待网易的其他应用,包括博客,lofter等等也推出优秀的wp客户端。加油。
因为用的网易云音乐的WPApp,我会尝试接触使用网易的其他App和服务。一个App的品质,体现一个公司的态度。
不能后台下载,必须亮着屏才行,屏幕暗了就停了
界面策划和设计的很好,学习了。做好一个设计,还是下很多功夫的,上海策划公司 http://www.shinerayad.com/
期待更多功能
云音乐确实是用心之作,WP上很难得的好app
因为wp和混acg的原因真的很喜欢云音乐。希望早日能推出windows pad版本吧
之前听到有人这样说:WP第三方音乐软件,一个酷我,一个网易云,一个落网,还有其他
考虑把桌面的动态磁铁利用起来啊。如播放音乐的时候可以显示专辑内容甚至控制播放。
@Majirefy 感谢你的建议~流量包会在后续版本跟上,请给我们开发一点时间:-)
非常期待动态磁贴功能!
如果WP7也能拥有这样一个版本该有多好,毕竟留给过时WP7的精美应用越来越少了。很喜欢这种风格,更希望能做到全平台覆盖。加油!
从内心敬佩你们,网易云音乐,良心之作,谢谢你们!!
超级喜欢网易云音乐。看到这篇文章中使用的音乐是lost stars,我表示更喜欢了,你们的口味居然和我的一样!!
T_T从网易云音乐上看到了这个世界对WP用户仅存的善意T_T,UI太良心了(自己做大作业的时候借鉴过~效果拔群)。表示对网易的好感度蹭蹭往上涨!