五星好评!网易云音乐Win10 Beta版的设计经验总结 - 优设网 - UISDC

五星好评!网易云音乐Win10 Beta版的设计经验总结

2016/07/08 8748评论区

163-music-windows-10-beta-1

Win 10是一个全新的系统,没有完善的交互设计规范、也没有足够多的成熟的设计案例可供参考。这样一个横跨PC、平板和手机的应用,原本在各个平台的细分体验应该如何平衡和取舍呢?来看网易云音乐如何通过打磨设计细节,拿到压倒性的五星好评!

探索合适的导航框架

在导航设计上,UWP应用就给我们出了道难题。不同于一般的信息展示类应用,云音乐功能??槎嗲衣呒慵陡丛?,并且在大小屏幕上都早已探索出了一套适合各自平台的、截然不同的导航结构,无法单纯的用响应式设计去解决,或多或少得牺牲掉现有各自平台的一些交互习惯。

最终,我们决定在PC和平板上采用类似PC端的结构,充分发挥大屏幕的优势,侧边栏承载了应用的主要功能???,使信息最大程度的扁平化。同时融入Win10的设计语言,比如能自动或手动控制收起的汉堡菜单,使用户获得更佳的沉浸式体验。

wyy201607081

在灵活的鼠标和笨拙的手指之间徘徊

在Win10设计过程中,我们争议最大的地方莫过于,同一个应用程序,既可以用鼠标、又可以用手指作为输入媒介。如何更好地设计交互,以致在使用这两种截然不同的工具时都能获得较好的操作体验?

1、最频繁使用的歌曲列表

对于音乐软件中出镜率最高的歌曲列表,如果你是用鼠标的PC用户,会习惯性的双击播放;如果你是用相对不够灵巧的手指操作的平板或手机用户,则会觉得单击一下就应该播放了吧!那UWP应用该如何处理是好?

参考了Win10系统自带的Groove音乐应用,我们引入单击歌曲呈选中状态,出现播放icon,点击icon开始播放音乐,同时为PC用户适配了双击播放。至此舍弃了触屏界面的单击播放交互,心里是相当纠结的。

wyy201607082

又比如列表中的歌手名和专辑名,是否应该响应点击事件?可以看到在PC布局下,歌手名和专辑名都有足够大的展示空间和热区,显然是可以点击直接去查看更方便啊。

wyy201607083

但一旦响应式到了手机布局下,这时候如果歌手和专辑再能响应点击的话,就会大大增加误操作的几率。

wyy201607084

2、动态列表,请给我点反应

动态列表中的一条动态,在触屏界面应该可以响应整个背景区域的点击进入动态详情页;但在鼠标操作界面又觉得不应该有如此大面积的热区,而是响应某个局部区域点击进入动态详情页(不然的话鼠标在动态页面上移动就始终处于hover状态)。

手机:

wyy201607085

PC:

wyy201607086

无处安放的帐号消息和设置

自Win10顶部把标题栏改成极窄的一条,高度也不能自定义以后,原本在PC上不假思索会安置在右上角的帐号消息和设置变得无家可归了。我们能发现Win10的一些官方应用通常将这些入口设计在汉堡菜单底部。

但运用到云音乐上并不是很合适。因为底部紧挨着播放控制条,左下角操作过于密集,看上去也不是很美观。

wyy201607087

对于这些交互细节,微软官方也并未给出明确的处理方式,或者一举两得的系统控件。因此对于Win10通用平台体验和交互的解读,设计过程中我们内部也经常存在争论。是优先PC体验、还是并重手机体验?是每一处都为各个平台做交互细分处理,还是考虑到开发简洁性而舍弃部分平台的交互体验?

之所以叫Beta版,是因为我们也在摸索。我们希望做出一个在各个平台都有着流畅体验,同时具备Win10特征的网易云音乐。

未来的Win10云音乐

云音乐Win10 Beta版上线后,压倒性的五星好评给了我们极大的鼓励,尽管还存在众多的不完善之处,但我们看到了用户的热情、理解和期待!未来,我们将持续优化Win10设计细节,如更好的响应式设计,同时不断完善功能。敬请期待!

「人气过万的优秀实战案例教程」

大众点评:《大众点评智慧餐厅LOGO设计全过程总结》

红包预热HTML 5:《聊聊刷一刷红包预热HTML 5背后的设计过程》

火影游戏HTML 5:《揭秘腾讯火影游戏HTML 5背后的设计故事》

原文地址:uedc.163

yestone-uisdc-2

【优设网 原创文章 投稿邮箱:2650232288@qq.com】

================关于优设网================
“优设网ag亚游集团“是国内人气最高的网页设计师学习平台,专注分享网页设计、无线端设计以及PS教程。
【特色推荐】
设计师需要读的100本书:史上最全的设计师图书导航:http://hao.uisdc.com/book/。
设计微博:拥有粉丝量160万的人气微博@优秀网页设计 ,欢迎关注获取网页设计资源、下载顶尖设计素材。
设计导航:全球顶尖设计网站推荐,设计师必备导航:http://hao.www.offshoring-digest.com

优设大课堂

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

发表评论 加载中....

评论加载中....

uisdc

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

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

您还没有登录

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

微信扫码

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

把好文章收藏到微信

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