网易云音乐 | LOOK直播页改版设计

最近在使用网易云音乐App时，发现LOOK直播页在内容层、框架层、表现层方面存在部分体验问题，也有数据反应从「首页直播入口-看看-听听」的流量衰减严重…

针对这些问题，我以用户+设计师的双重身份，对LOOK直播页做一次「非官方」的改版设计，主要目的是提高LOOK直播页的点击UV。

 

01 用户数据分析

 

年龄分布

从百度指数中可以看出，云音乐用户的年龄范围主要集中在19-29岁

 

性别比例

其中，男性用户约占67%，女性用户约占33%，男性用户占比高于女性

 

地域分布

用户大部分集中在广东、浙江、北京、江苏等地，一、二线城市居多

 

消费偏好

从移动观象台中可以发现，主流用户消费能力较低，对于奢侈品牌以及高端品牌的消费并不多，而对大众和时尚品牌消费比重较高

 

日活用户

在比达咨询2018年10月数字音乐APP日活用户中，QQ音乐日活用户数7491.9万，酷狗音乐日活用户7388.5万，网易云音乐日活用户3751.3万，位居第三

 

02 用户画像

 

第一类：大学生群体

• 基本信息：萧兰妍，20岁，女，大学生
• 用户特征：时间相对而言比较充裕但是消费能力有限，有尝试新事物的勇气，有很强的社交欲望
• 用户需求：可以通过账号查找并关注周围的人和喜欢的歌手；有优秀的个性化推荐系统，通过用户的听歌习惯，来推荐给用户相似的歌曲

 

第二类：年轻职场人

• 基本信息：沈才，28岁，男，职场白领
• 用户特征：生活节奏快，上下班通过公交以及地铁出行的比例高，这些碎片时间和场景的娱乐需求较高
• 用户需求：拥有优秀的歌曲查找功能，有丰富的歌单并且可以按照歌单查找歌曲，每首歌曲都能够有相应的歌词以及MV，拥有FM功能

 

第三类：年龄较大的人群

• 基本信息：叶昭松，42岁，男，淘宝店主
• 用户特征：这一部分人不是云音乐的主流用户，但是他们拥有很强的消费能力和经济实力，来满足自己的需求
• 用户需求：通过软件能够下载到所需要的歌曲，并有良好的分类功能以及账号管理功能，PC端和移动端的数据可以互通

 

第四类：音乐内容生产者

• 基本信息：东寒，30岁，男，自由音乐人
• 用户特征：音乐提供者包括音乐的上传者，歌词的提供者以及音乐主播，他们是网易云音乐内容的主要生产者
• 用户需求：希望可以通过云音乐平台，让更多的人听见自己的音乐作品，并能定期通过网络直播与粉丝互动，获取一定的打赏收益

 

03 LOOK直播业务

 

商业战略层

从商业化角度来看，如同短视频玩家进军直播领域，通过直播手段变现，LOOK直播承担的更是网易云音乐平台和音乐人的变现重任，目前LOOK直播已有用户打赏功能

 

产品设计层

网易云音乐有意使直播内容更加垂直，除了直播内容均围绕音乐展开，向音乐人倾斜资源外，LOOK直播相较于其他直播应用，也突出了不少更具音乐性的特色功能，例如：横屏模式、高清音画、动态歌词

云音乐的定位是音乐类直播，包括演唱表演、乐器演奏、声乐教学、演出现场等音乐相关内容。为平台内音乐人及歌手、音乐达人提供适合音乐表演的线上平台，促进音乐人与用户的交流

 

04 用户反馈

 

发现的问题

从七麦数据上可以看出，用户对LOOK直播功能的负面评价较多，包括：
在云音乐上看直播的意愿较低、对直播栏目的频繁推送感到厌烦、对直播内容的满意度较低…

 

思考与分析

对于大部分音乐消费用户来说，
核
心需求依然是“纯粹地听音乐”，他们对于直播的形式，短期内未能完全理解和接受，因此在云音乐观看直播的频次较低，可能是导致用户从直播入口>>看看页>>听听页流量衰减的原因之一

 

05 产品/设计/运营

 

内容层

• 1.直播类型不完全垂直：除了音乐表演类直播以外，还充斥着其他类型的直播，比如：脱口秀、情感、疗愈等。与其他直播产品未完全形成差异化，也使云音乐的音乐氛围受到干扰，影响了老用户的粘性
• 2.直播内容质量参差不齐：包括主播的表演水准、拍摄环境、视频/音频清晰度等，没有形成良好的品质标准，使用户满意度降低

 

框架层、表现层

页面整体
缺少音乐直播的氛围感；封面图大多是生活化，
与音乐相关性弱；文字信息布局分散，层级对比度低，
视觉焦点不集中；缺少适当的元素动效，
对用户的吸引度不够

这些可能是导致用户从直播入口>>看看页>>听听页流量衰减的原因之二

 

06 竞品分析

 

分析目的

找到提升LOOK直播页点击UV的设计点

 

分析维度

• 1.框架层：一级/二级导航、开播按钮、排行榜入口、Feed流、音乐播放条
• 2.表现层：图标、配色、字体、布局、动效

 

竞品选择

• 1.QQ音乐：QQ音乐一起听页将开播按钮置于导航栏右侧，符合用户操作习惯；并且将用户正在听的歌曲以播放条形式置底，使用户在浏览直播内容时，也可以快速播放/暂停原歌曲
• 2.抖音短视频：抖音首页将关注人的直播动态外露，能有效吸引用户点击观看；深色背景皮肤，视觉上突出了视频内容，同时也符合年轻用户的属性特征
• 3.唱吧：唱吧直播页将开播、排行榜，都置于导航栏右侧，符合功能的逻辑结构和用户的操作习惯；唱吧和QQ音乐的直播封面都展示了直播标题、主播昵称、在线观看人数、属性标签，对用户点击行为进行刺激引导

 

分析结论（对LOOK直播页优化的借鉴）

• 开播按钮，可以借鉴放置于导航栏右侧
• 顶部可展示关注人的动态，提高点击率
• 采用深色背景主题，突出视频内容，增强直播氛围感
• 可将正在听的歌曲，放置LOOK直播页底部，便于用户快速操作

 

07 方案一：结构层/框架层/表现层设计

 

原版体验问题

• 1.用户反馈：通过对用户反馈分析得出，LOOK直播页在内容层存在优化提升空间；
• 2.竞品对标：对比分析QQ音乐、抖音、唱吧等相关页面，发现在框架层和表现层方面有优化机会点

 

设计目标

• 1.提升LOOK直播页的点击UV
• 2.增强视频和音乐直播的氛围感
• 3.提高布局合理度、内容易读性

 

设计策略

• 1.采用深色背景主题，突出直播内容，增强音乐直播氛围感；
• 2.顶部展示关注人的直播动态，提升点击UV；
• 3.对导航栏、开播按钮、排行榜入口、Feed流、音乐播放条重新布局，提升易用性和美观性

 

09 框架拆解分析

 

导航栏

开播和排行榜按钮，放置于导航栏右侧，并使用渐变色凸显，增加曝光率和点击率；页面标题居左，视觉平衡

 

关注的人

将关注人的直播动态外露，能有效吸引用户点击观看；点击头像进入直播间或主页，数量超过6个时，支持左右滑动

 

一级/二级标签

标签字体放大，同时底部的音乐动线突起并高亮，强调当前位置，提升音乐氛围感；二级标签分类更垂直，形成音乐直播的差异化

 

音乐播放器

音乐播放器以浮窗形式固定在页面左下角，视觉上采用黑胶唱片风格，增强趣味性，支持播放/暂停操作

 

10 方案二：结构层/框架层/表现层设计

 

设计目标

• 1.提升LOOK直播页的点击UV
• 2.与云音乐APP整体保持一致性的视觉体验
• 3.提高布局合理度、内容易读性

 

设计策略

• 1.遵循云音乐整体设计语言和品牌调性
• 2.视觉上突出排行榜和开播入口，增加曝光率和点击率
• 3.提供直播封面图展示规范，强化音乐的相关性，以符合用户预期

 

12 框架拆解分析

 

导航栏

导航栏标题与标签切换合二为一，降低层级复杂度，提高全局操作的直观性

 

排行榜/开播

以瓷片的形式+主副文案引导+2.5D风格图标，突出排行榜和开播入口，增加曝光率和点击率

 

二级标签

二级标签分类更垂直，形成音乐直播的差异化；选中后高亮，交互上支持左右滑动和展开更多选项

 

音乐播放器

底部音乐播放器延用云音乐的UI控件，保持一致性的体验，添加半透明模糊属性，增加浏览Feed流时的通透性

 

写在最后

以上就是LOOK直播页改版的思路，
这是一个发散性的改版设计，所以设计方面没有做过多的限制，一切围绕设计目标展开。对我个人而言也是一次从发现问题-分析问题-解决问题的练习过程，收获很多，如有考虑欠佳之处，欢迎留言交流~

某些情况下，设计能解决的问题是有限的，设计师首先要做好自己的本职工作，然后再去推动其他部门，更重要的还需要产品、运营、技术等角色协同配合，才有可能打造出一款大众喜爱的产品。

 

原文地址：
彭彭设计笔记（公众号）

作者： 
Neil彭彭