前言 

对于喜欢视听的用户来说，播放界面的接触应该算是比较频繁的。今天和大家聊的一个话题便是与播放界面有关的，主要梳理了播放页的设计细节，以及众多产品的播放页在设计上是如何传递自身品牌信息和体验价值的。

本文主要为大家分享听书和音乐两类产品，希望带给你更多灵感。

 

目录 

一、播放页的起源

二、音乐类产品播放页

       2.1、设计组件

       2.2、案例分析

三、听书类产品播放页

       3.1、设计组件

       3.2、案例分析

 

一、播放页的起源 

随着移动互联网5G时代的到来以及智能手机的日益普及和应用，越来越多的人开始下载并使用音乐/听书类APP来娱乐或学习。通过对当前主流软件播放页的研究不难发现其界面趋于同质化，这也说明了此类软件已经成熟，符合当今大众用户的审美及体验。那么它又是怎样演变而来的呢，下面以音乐的传播媒介作为参考进行叙述：

 

以前听音乐需要借助庞大的留声机、电视机等媒介，后来演变成可以装进口袋但功能单一的MP3/MP4，发展到现在，互联网及手机的普及使音乐的传播方式更多，服务上也更具个性化。2014年互联网音乐播放市场一片红海，QQ音乐、酷狗音乐、酷我音乐等音乐平台已经在市场站稳脚跟。但伴随着社交软件等兴起，一匹移动互联网黑马出现在音乐用户面前，网易云音乐在短短几年内成绩斐然…互联网技术发展日新月异，互联网商业也紧随其后，这就决定了UI设计发展的重要性。随着人们对各系统操作的熟识，UI视觉设计风格也要随着用户的审美变化而不断发展。而这种发展也会是符合现在设计发展的规律，由起初简单的文本界面发展为精美雕饰的形体界面，再由繁复的界面简化为简约轻快的界面，之后还会在简单的基础上再去增加体验。总而言之，UI设计视觉设计风格的发展也会遵从由简到繁再由繁到简这样一个过程，播放界面作为中一部分当然也是如此。在播放界面中歌曲封面常采取模拟旋转的唱碟来展示，这不仅仅是为了美观，也是为与用户达成共识，让用户感到熟悉与亲切。设计源于生活，这点也得到了很好的验证。

 

二、音乐类播放页 

2.1、音乐类设计组件

  

2.2、音乐类案例分析：

 

同为音乐类软件播放页虽然功能相差不大，设计细节却有所不同，也都有自己的特色。

 

 

网易云音乐

播放页左右滑动进行切歌操作；界面中设有评论的按钮；向上滑动界面也可进入评论区；支持长按选择歌词分享。

 

分享方式：定制分享卡片、与好友一起听、歌词视频、歌词图片、歌词卡片。

 

特色：邀请好友一起听，且一次只能邀请一人，模拟现实场景，两人如同使用同一副耳机听歌，拉近彼此的距离。

QQ音乐

播放页顶部设置有三个标签按钮：推荐，歌曲，歌词左右滑动进行切换；界面中设有评论的按钮；支持长按选择歌词分享。

 

分享方式：歌词海报，歌词视频。

 

特色：a.可以发弹幕打榜；b.界面中设有查看本歌曲相关MV或视频入口。

 

酷狗音乐

左右滑动切换歌曲、竖屏MV、相关推荐；点击屏幕查看歌词，评论有设置按钮；向上滑动界面进入相似歌曲推荐；支持长按选择歌词分享。

 

分享方式：制作歌词海报、歌词视频、音乐影集，竖屏MV。

 

特色：竖屏MV，即为个人发布的视频，向上滑动进行视频切换操作类似抖音短视频，竖屏MV也可以分享。 

 

酷我音乐

点击屏幕查看歌词；评论有设置按钮；左滑退出播放页，右滑进入该歌手的热门音乐推荐；支持长按选择歌词分享。

 

分享方式：音乐片段（可以添加图片或视频）、歌词海报、动态分享。

 

特色：动态分享时可选择的背景动态模板种类丰富，有古风、动效、风景、色彩等多种动态插画美图，大部分只有会员才可以使用。

咪咕音乐

左右滑动可切换播放页、相似歌曲推荐、评论；点击播放页查看歌词；支持长按选择歌词分享。

 

分享方式：分享方式单一，目前只支持歌词海报分享，不能分享动态视频。

 

特色：界面统一使用白色底，查看单词时背景也是白色，比起前面的几款软件咪咕播放页面显得格外干净但也略显单调。

 

 

三、听书类播放页 

3.1、听书类设计组件

看到这里你会不会觉得音乐类与听书类播放界面中的组件很相似，这里对两类组件做了比较，左右两侧分别为不同icon，中间是相同的部分，控制播放进度的滑杆控件是相同的：

3.2、听书类案例分析：

 

同为听书播放页，即便是同样的功能展示的方式也是有所不同，在这里列举了6款听书软件，以详情及评论的入口进行举例说明。

 

 

喜马拉雅

喜马拉雅的播放页给人的第一感觉就是内容丰富，功能比较多，音频详情和评论通过tab标签进行任意切换，而且页面底部又提供了评论输入框及查看评论的按钮。

  

懒人听书

懒人听书与其它几款软件相比，播放页仅一屏展示，不能向下滑动，评论和详情也没有直接展示功能入口，评论需要左右滑动页面翻页查看或发表，而详情需要点击界面中右上角的“更多”按钮，再单击书籍详情进行查看。

企鹅 FM

企鹅FM的播放页也是一屏展示，评论入口展示在第一屏的封面右下角。向上滑动界面可以翻页进入专辑详情介绍页，在介绍的下方也可查看全部评论，且发表评论按钮在右侧悬浮展示。

氧气听书

氧气听书播放、音频详情与评论在同一页面呈线性展示，向上滑动页面可以看到详情介绍、目录然后就是评论，但如果想发表评论还需点击“查看更多”进行。

 

  

蜻蜓 FM

蜻蜓FM查看评论及发表评论本界面均有入口，但是查看详情较之其他几款软件显得有点隐蔽，它需要点击专题头像才能进行查看。

十点读书

较之前面的五款软件十点读书播放界面最为清爽，采用卡片形式，卡片上滑即可查看本音频详情且有文字提示，评论按钮较为突出且始终固定在底部。

 

小结 

好了，对于音乐类及听书类的播放页细节设计总结到这里也就结束了，看似相同的界面原来存在这么多不同的小细节，正所谓在共同的基础上所表现出的“不同”往往才是价值所在。