网易云音乐WP1.0设计项目实战

 

  WP 平台是很多设计师很少涉足的地方,优设之前发过一篇WP设计规范指南,今天网易的同学继续上干货,来一篇WP的设计项目实战!作为一款有诚意的音乐APP,这次设计过程相当用心,值得学习的地方也很多,学习来。

  项目背景

  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上线之际

时间: 2024-09-27 18:26:59

网易云音乐WP1.0设计项目实战的相关文章

网易云音乐IPAD V1.0设计总结

  网易云音乐作为网易旗下的重磅产品,无论做工还是体验都是同类软件的翘楚,从Android到iPhone,都是好评如潮.现在iPad端也上线了,产品团队分享了这款产品从调研到落地的全部过程,希望同学们阅读完之后可以了解一下专业的设计流程,对今后加入大公司参与工作,非常有帮助呦. 一切从心开始 当网易云音乐iphone平台上线的那一刻开始,项目组就不断地收到了很多用户希望iPad平台早日上线的呼声.这种期待给了我们一种无形的力量,也让我们更加坚信我们不能随随便便地把iPhone的所有设计照抄照搬,

网易云音乐 for iPhone 2.0版本在国庆节这天上线

摘要: 网易云音乐产品团队憋了两个月的大招终于放出来了,网易云音乐 for iPhone 2.0版本在国庆节这天上线.新增的36项新功能中最重要的三项分别是:主播电台功能.私人FM频道和评论. 主 网易云音乐产品团队憋了两个月的大招终于放出来了,网易云音乐 for iPhone 2.0版本在国庆节这天上线.新增的36项新功能中最重要的三项分别是:"主播电台功能"."私人FM频道"和"评论". "主播电台"是之前"DJ

网易云音乐for iPhone 2.0新增主播电台、个性化推荐

摘要: 网易云音乐产品团队憋了两个月的大招终于放出来了,网易云音乐 for iPhone 2.0版本在国庆节这天上线.新增的36项新功能中最重要的三项分别是:主播电台功能.私人FM频道和评论. 主 网易云音乐产品团队憋了两个月的大招终于放出来了,网易云音乐 for iPhone 2.0版本在国庆节这天上线.新增的36项新功能中最重要的三项分别是:"主播电台功能"."私人FM频道"和"评论". "主播电台"是之前"DJ

网易云音乐“个性化推荐”的设计改版经验总结

  网易云音乐的"个性化推荐"一直是好评如潮,但很少人注意到,这个功能从诞生到现在已历经了多次改版.在这个迭代过程中,如何优雅地让用户感知到它的功能特色?今天网易云音乐的交互设计师俞静给大家聊聊改版过程的思考和经验,这类亲历实战经验可遇不可得,建议阅读,何况这还是一个你最喜欢的(猜的)音乐App呢? 话说,云音乐是最早做歌单个性化推荐的 -- 在首页根据你的口味推荐歌单,只是一开始绝大多数用户都不知道有这个功能. 为什么呢?因为我们在展示上非常低调 -- 在首页上的表现就是,热门推荐歌

关于网易云音乐与QQ音乐你不得不看的使用对比评测

[TechWeb报道]目前的手机音乐软件竞争依然激烈,但音乐 应用市场逐渐趋于城市.qq音乐凭着腾讯的大批用户,迅速上位,通过绿钻服务实现盈利.酷狗音乐凭着多年积累的PC端资源成功站稳脚跟,多米音乐.百度音乐.酷我音乐等也着力于在线音乐.网易云音乐作为新兴的搅局者也杀了进来,主打云.社交等元素,充分吸引了眼球.你爱用手机听歌吗?选择一款舒心的手机音乐软件可不简单,今天小编为大家带来网易云音乐与qq音乐的软件对比评测.本次评测的网易云音乐为iOS2.0.1版,qq音乐为iOS4.3版.两款应用首页

Android仿网易云音乐播放界面

概述 网易云音乐是一款非常优秀的音乐播放器,尤其是播放界面,使用唱盘机风格,显得格外古典优雅.这里抛砖引玉,原文地址:http://www.jianshu.com/p/cb54990219d9  首先来看一下网易的播放效果.   要实现上面的功能,我们需要对界面进行一个拆分,拆分后大概包含如下结构: 主界面布局设计 唱盘布局设计 动态布局 唱盘控件DiscView对外接口及方法 音乐状态控制时序图 分析及实现 主界面布局设计 主界面布局从上到下可以划分几大区域,如图:   如图,由上到下主要分为

网易云音乐重磅出击 iPad版正式上线

5月22日, 网易云音乐iPad 1.0版正式上架苹果App Store,作为业界领先的互联网音乐平台,其iPad版本一直以来备受用户期待.最新上线的iPad版本不但完美适配iPad平台,同时还增加了私人电台.全高清MV等全新功能,为用户带来全新体验. iPad已成为现代人热宠的电子产品,甚至在不知不觉中成为很多人生活的必需品,闲暇之余,打开iPad听音乐,是非常轻松.惬意的享受.调查显示,不少人喜欢用iPad听音乐,iPad比手机屏幕大,听音乐.查资料都更为舒适,而相对电脑又特别方便移动.对于

网易云音乐:有诚意的半成品 更像一款社交产品

中介交易 SEO诊断 淘宝客 云主机 技术大厅 [导读]虽然网易云音乐部分功能并无太大实质意义,但网易显然并未放弃努力. 个篱/文 网易几天前发布了网易云音乐iOSApp,设计简约,主打音乐社交功能,不乏音频指纹.LBS找好友.明星DJ等亮点功能,极具诚意. 社交音乐还是音乐社交 在网易云音乐iOS应用(以下简称云音乐)中用户主要通过其它用户的歌单或电台DJ的节目来发现音乐,这与市面上普遍的榜单式找歌相比独具一格,歌单也正是云音乐构成社交音乐属性的基础.你创建一个歌单,其它用户可以收听.分享和收

网易云音乐——有诚意的半成品

网易几天前发布了网易云音乐iOS App,设计简约,主打音乐社交功能,不乏音频指纹.LBS找好友.明星DJ等亮点功能,极具诚意. 社交音乐还是音乐社交 在网易云音乐iOS应用(以下简称云音乐)中用户主要通过其它用户的歌单或电台DJ的节目来发现音乐,这与市面上普遍的榜单式找歌相比独具一格,歌单也正是云音乐构成社交音乐属性的基础.你创建一个歌单,其它用户可以收听.分享和收藏.用户的分享与收藏行为构建成一个个好友Feed和用户自己的Timeline. 首先,虽然歌单(Playlist)并非网易独创,事