化繁为简!网易云音乐WP1.0设计项目实战 - 优设网 - UISDC

化繁为简!网易云音乐WP1.0设计项目实战

2014/09/04 12581评论区

163-cloud-music-wp-1

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

那篇值得收藏的规范右戳:《UI设计师干货!Windows Phone 8 UI 设计指南》,赶紧Ctrl + D !
see-more-WP-guideline

项目背景

Windows Phone一直是各家公司缺少投入的平台,WP用户不得不经常面对一个成熟的APP到了WP上就变得各种功能缺失、体验支离破碎,他们渴望应用软件在体验上能和其它平台一样受到同等重视,音乐APP也不例外。作为一款有诚意的音乐产品,打造名副其实“云”的概念,网易云音乐当然不会忽视WP用户的呼声,历经重重困难于近期重磅推出“功能无阉割”的WP客户端,还WP用户一个完整的音乐体验。

崭新的平台,改变的契机

与众不同的WP风格设计,决定了云音乐WP版在现有平台上找不到任何可以直接移植的设计。不过,也正因为从零开始,设计师得以放下“破坏用户已有习惯”的思想包袱,重新审视这些年产品的痛,在WP上做一次大胆的改变。

化繁为简,从不是件简单事。如何既保证功能体验完整,又体现WP平台自身极简、轻量的特点,成了贯穿我们设计始终的思考。

iPad的项目实战!干货更多!《项目实战!网易云音乐iPad V1.0设计总结》
see-more-163-ipad

一、更加简洁、高效的导航

为支撑起云音乐丰富的内容,现有手机端均出现了原本PC/Web上才会出现的双层甚至多层嵌套的导航结构,以使信息更外显。而WP极度扁平的导航结构显然无法消化云音乐日益扩充的内容。如果将目前层级结构直接移植到WP,则“发现音乐”下的4个二级导航要变为入口。这种设计用户第一眼看不到任何有效信息,推荐等核心内容的层级变深了,也不利于产品运营。

6

但若不考虑云音乐自身内容的复杂性与可扩展性,为了扁平而扁平,将所有内容平铺,表面上信息是外显了,实际上获取信息的效率反而降低:过多的横滑选项让人迷失,越靠后的内容越难以到达。

7

因此内容显示的优先级还是要有所取舍。扁平化的最终目的是让用户更快到达所需,任何风格规范只是辅助达到目的的方法。为此,我们打破现有结构,重新梳理了不同用户类型及其使用情境,最终将一级导航精减到4个:

  1. 将原先“发现”里和推荐相关的内容单独提取出来作为一分支。这部分内容在表现形式上讲求直接呈现具体信息,方便“无目标”型用户快速发现云音乐的优质内容。
  2. 余下“发现”里的内容则更针对“有目标”型用户,对于这类用户来说,入口设计方便他们纵览所有内容???,从而快速定位自己所需。

这样,不同用户都可以快速切入主题,运营内容和社交元素都得到了恰当的展现,入口设计减少加载,保证首页全景图横向浏览过程中的流畅体验。

3

二、减少迷失感

全景图式导航(Panorama)在体验上最大的一个弊端是,你无法在当前屏看到全部导航,无法快速切换导航,只能通过依次横滑去到达。如何减少这种周而复始地横向浏览所带来的迷失感,让用户更快找到自己需要的东西?

除了精减导航个数之外,我们也重新规划了导航优先级,以便更重要的内容更容易在第一时间被发现:将“我的音乐”作为默认进入页,因为这是每个用户的“家”。然后从“家”出发去探索,根据内容优先级,依次经过推荐、发现和朋友动态。在设计上讲究横向浏览过程中页面布局的变化,用户可通过视觉辅助确认自己当前所在???。

2

另外,旋律识别、搜索、设置等功能则被定义为“常用工具”,常驻在底部应用栏(App Bar)。这样,用户处在首页任何地方都能一键调用,无需记忆和寻找。

1

三、利用平台特性,让信息更扁平

歌单是云音乐的内容核心。产品功能迭代至今,歌单界面已经变得臃肿不堪,但仍就有很多信息难以被发现。巴掌大的手机界面,如何尽可能让信息外显,同时界面又不失优雅?WP平台的一些全新特性让我们看到了机会。

UI扁平化后,可点击区域变得不可预期。在WP歌单页,我们将信息与操作分离得更彻底,除了与歌曲列表关系紧密的播放、下载,其它所有针对歌单的操作都放置在应用栏(App Bar),不再让用户满屏地探索,使交互更加可预期。同时,利用WP轴心图(Pivot),将歌单的列表、介绍和评论并列呈现,无需跳转,横滑即可到达,使信息更外显。这样,歌单层次变得清晰,所有信息一目了然,所有功能一触即达。

5

四、扁平≠平庸

UI扁平化削弱了不同应用之间的辨识度,在WP上似乎所有应用都长得差不多。我们一直坚信与众不同的视觉能赋予产品强烈的个性,触动人心。

播放页是整个软件的视觉中心也是情感中心。在视觉设计过程中,我们也尝试了许多更为扁平化的方案以适应WP风格,但始终觉得缺乏自己的特色。最终在扁平化和差异化的抉择中,我们选择保留标志性的黑胶唱盘和血槽进度条,同时在其它细节上处理得更轻盈,营造一种沉浸式体验。

4

信息回归本质后,视觉亦然。视觉首先要符合其所处的环境,其次才是自己的性格。鲜艳的大色块只适合首页,内容页则以黑白灰为主色调以突显信息本身,但是完全素色的界面又显得死气沉沉。通过反复尝试红色运用在不同细节上的效果,最终达到红色使界面更有个性的同时不抢内容。

设计过程中对色彩、间距、字号的精益求精,开发过程中的百余次微调,对设计师和开发都是极大的考验。

总结:

“真正的简洁不是删繁就简,而是在纷繁中建立秩序”。打造全功能版的网易云音乐WP端,无论是设计还是开发都经历了从混乱到有序的过程。

作为云音乐大家族最晚起步的平台,Windows Phone平台小众,项目资源少,平台限制多……尽管过程中遇到很多阻碍,我们仍然力求在这个用户数不多的平台上打造最好的体验,并为之日夜奋战。

改变意味着风险,我们在WP1.0做了很多不一样的尝试,同时也意识到这个版本还有很多事来不及做。WPer,让你们久等了,你们的支持与理解是我们不断前进的动力!

——写在WP1.0上线之际

网易人才济济,而且都是帅男美女呦,来看看他们的生活!

有梦想有实力,我就是网易设计师!
网易设计师专访:一个南方姑娘的徒步梦想

爱生活爱自己,阳光美女设计师专访!
网易设计师专访:视觉设计师常雅莉的成长故事

网易前设计总管,一边分享经历一边教你入门!
《网易美女设计主管!交互设计菜鸟如何入门?》

原文地址:uedc.163
关于优设网================
“优设网
ag亚游集团“是国内人气最高的网页设计师学习平台,专注分享网页设计、无线端设计以及PS教程。
【特色推荐】
设计师需要读的100本书:史上最全的设计师图书导航:http://hao.uisdc.com/book/。
设计微博:拥有粉丝量77万的人气微博@优秀网页设计 ,欢迎关注获取网页设计资源、下载顶尖设计素材。
设计导航:全球顶尖设计网站推荐,设计师必备导航:http://hao.www.offshoring-digest.com
———————————————————–
想在手机上、被窝里获取设计教程、经验分享和各种意想不到的”福利”吗?
添加 优秀网页设计 微信号:【youshege】优设哥的全拼
您也可以通过扫描下方二维码快速添加:

sdcweixin

优设大课堂

非特殊说明,本文版权归原作者所有,转载请注明出处
本文地址:http://www.offshoring-digest.com/163-cloud-music-wp

发表评论 加载中....

评论加载中....

uisdc

评论区都快饿瘪了,看看我期盼的小眼神...

版式设计 交互设计师 界面设计 排版布局 职场 设计师干货 优设专访 优设大课堂 设计达人 配色 视觉设计 web前端开发 素材下载 AI教程 设计流程 设计理论 神器下载 字体下载 设计师专访 psd下载 设计规范 用户体验设计 海报设计 设计趋势 平面设计 动效设计 logo设计 图标设计 ICON 产品设计 神器推荐 App设计 字体设计 职场规划 酷站推荐 交互设计 ui设计 优秀网页设计 设计师职场 ps技巧 酷站 用户体验 PS教程 网页设计 经验分享

您还没有登录

优设启用更安全省心的 微信扫码登录

微信扫码

300万设计师聚集地!优设网是极具人气的设计师平台
2012年成立至今,一直专注于设计师的学习成长交流

把好文章收藏到微信

打开微信,扫码分享
学设计 优设网 在这里