美文网首页
喜马拉雅FM交互方式分析(2016.12.30)

喜马拉雅FM交互方式分析(2016.12.30)

作者: Aya小喵 | 来源:发表于2017-07-21 13:38 被阅读0次

    最近在网盘里找到几篇旧文,整个上半年在忙碌的工作和学习中匆匆地过去了,只顾着向前冲,却没有足够的机会反思。

    现在想贴出来一方面可能对工作会有些启发,另一方面是想督促自己在工作之余多去研究不同领域的优秀App,多积累,并记录研究结果——当然,也包括已经研究过的。

    就是这样,所以可能有些图片已经是旧版的了,分析也比较浅显。但是不重要,重要的是对我有什么启发。

    分析对象:喜马拉雅FM

    参考竞品:荔枝FM、蜻蜓FM

    选择理由:平时喜欢在碎片时间听听FM,可以让耳朵不太寂寞,还能涨知识。最早使用的是荔枝FM,因为资源的偏好现在改用喜马拉雅FM了。

    荔枝FM更偏向于原创资源,官网在百度搜索结果上有条slogan是“人人都是播客”,可见其清晰的定位。

    而喜马拉雅FM的资源更广泛、更丰富,甚至还有名人的脱口秀和公开课等收费资源,与荔枝FM在定位上有所不同,但功能相似。

    蜻蜓FM几年前使用过,最早是一款收听世界各地广播的APP,资源上倾向于传统FM。现在明星主播、个人主播的资源也多了起来。页面内的布局和喜马拉雅比较相似,但细节功能却有较大差异。

    使用设备:iPhone7

    一.快捷播放入口

    音频类的APP大都会在首页有一个入口,展示我正在听的内容。只是形式各不相同。请看下图左图是喜马拉雅FM首页的展示方式,圆形的类似光盘封面的图片可以让用户知道当前播放的大致是哪个音频,点击后从底部滑出详情页面并同时继续播放。在用户浏览应用内其他页面时(如:不同的频道页、专辑页、搜索结果页等)也会一直存在(见右图),让用户能随时进入正在播放的这个音频的详情页。用户正在播放时,就不会出现播放或暂停的图标,只有一个圆形图片,这样和呼出详情页的操作避免了冲突,用户不会不小心把音频关闭。

    还有,当第一次进入喜马拉雅时,如果有正在听的音频,界面就会像下图(左图)一样出现一个橙色的提示,让用户清晰的看到。5-6秒后就消失,不再影响用户浏览页面。

    喜马拉雅的橙色续播提示和正在播放的音频入口

    优点:

    (1)首次进入时,方便用户了解离开前听的内容,并选择继续听还是找别的音频;

    (2)浏览页面时,让用户随时可以进入详情页进行相关操作。

    (3)提示清晰明确。

    (4)凸显了它作为核心功能的地位

    缺点:

    在浏览其他页面时对页面内容有遮挡,尤其是达到页面最底下时,不得不在底部留出更多的空白来防止它遮挡页面内容。

    其他应用:

    荔枝FM(左),蜻蜓FM(右)

    荔枝FM(左图)是放置在右下角,没有播放按钮。点击后从底部滑出播放列表,再点击播放按钮开始播放。同样在浏览应用内其他页面时都会存在。

    优点:

    荔枝FM和喜马拉雅的结构不同,所有内容分别收纳在了顶部的4个导航条目里,没有在底栏放置其他入口的需要,所以这种形式一定程度上节省了空间,腾出更多的空间给页面内容。而且放置右边而不是中间,对用户浏览页面的影响更小。

    缺点:

    (1)同喜马拉雅一样,对页面底部(主要是右下角)的内容会有遮挡。并且没有像喜马拉雅一样空出足够的空白来防止遮挡。

    (2)没有提示,在页面图片颜色较复杂时难以清楚的看到。

    (3)点击呼出列表页面后还要再点击一次播放才会开始播放,与喜马拉雅相比用户的操作多了一步。

    蜻蜓FM(右图)是长条形的,类似PC上音乐播放器的迷你模式。把列表、暂定、历史等功能也放在了上面,点击非按钮的地方进入音频播放界面,点击列表则显示该音频所在的专辑列表。同样在浏览应用内大部分页面时也都会存在

    优点:

    (1)不会遮挡到当前浏览的内容

    (2)标题比图片更直观、放置的功能较完善,用户操作起来比较方便。

    缺点:

    视觉上有点朴素,功能较分散,缺乏吸引力,容易被忽视。

    二.搜索

    下图是喜马拉雅FM的搜索流程:点击首页顶部的搜索框进入搜索页面并滑出搜索键盘,然后输入关键词,自动出现搜索结果。前两个是具体的专辑,末尾标有其所在类目。第三行及之后显示的都是关键词。

    点击某个关键词或输入完整关键词并搜索后,进入搜索结果页,搜索结果页由“专辑”、“声音”、“主播”等栏目垂直排布,可以通过搜索框下面的tab或者点击“全部1318张专辑”进入专辑的搜索结果页,其他类目同样的操作方式。在专辑的搜索结果页,还可以按相关度、播放量、最新上传进行排序。

    优点:

    (1)首页的搜索框可以放一些推广文案,对于喜马拉雅这样商业资源较多的网站,这是一种不太会引起用户反感的推广方式。用户进入搜索页面时,搜索框内有灰色的推广文案,例如“乐嘉性格色彩读心术”,用户不输入任何关键词直接点搜索的话,就会以此为关键词进行搜索。

    (2)搜索页面分为“你搜过的”和“大家都在搜”两块模块,“你搜过的”控制在2行,所以即使有键盘滑出的时候,也不会遮挡到“大家都在搜”,让用户时刻可以看到热门的关键词,重点推荐的关键词或活动标签用了喜马拉雅特有的红色标出(如下图的“圣诞大直播”),非常显眼,可以吸引用户点击。

    (3)在用户输入时就即时显示相关关键词,使用户的操作更便捷,因为在移动设备上,打字并不是一件很方便的事。

    (4)输入关键词时会有推荐的专辑并标示了是哪个类目的,比较直观。如果用户的关键词比较精确,就能立即找到目标。(相对荔枝FM只有关键词来说)

    (5)搜索结果页详细标示了“专辑”、“声音”、“主播”等的数量,对于资源量比较大的网站来说,细致的分类和数量的显示能让用户对自己的搜索结果有更了如指掌。可按相关度、播放量、最新上传进行排序,便于用户快速找到自己的目标。

    缺点:

    (1)如优点第一条所说的首页搜索框内的推广文案其实并没有发挥最大的效用。首页的推广文案和搜索页的推广文案有时候会不一致。这就导致了用户如果对首页的文案比较有兴趣时,进入搜索页还得重新输入,而这也并不一定是用户本身最想搜索的内容,所以进入搜索页后很有可能会忘记首页的推广内容,体验上有断层。

    (2)相比蜻蜓FM,多了一步。蜻蜓FM输入的时候就能显示如上图第四步所示的搜索结果页,效率更高。而喜马拉雅FM多了第三步(显示更多关键词)这步,略为多余,尤其是修改关键词的时候,还要再从第三步走到第四步,而蜻蜓FM则即改即搜,非常快速。虽然说关键词一次性能够显示的较多,而搜索结果页去掉被键盘遮挡的部分只能看到3个专辑名而已,但是用户只要向上一划就能看到更多的结果,还是比只是提供更多的、也不一定精准的关键词来得有效。虽然关键词加载比完整结果加载要快速,但是在wifi和4G普及的当今,优势仍然不是很明显。

    其他应用:

    荔枝FM是在主页左上角有一个搜索图标,点击后进入搜索界面并滑出搜索键盘,输入时候出现关键词列表,点击搜索,出现搜索结果,这里只有“播客”和“节目”两个栏目。

    荔枝FM搜索流程

    优点:

    (1)首页的入口不是搜索框而是图标,可以放置在导航的同一行,节省了页面头部的空间,把更多空间留给内容。

    (2)比较简洁,只有播客和节目两类,因此留给用户的选择较少,更清晰明了。“播客”里用标签的形式标示了每个节目的分类,还有认证信息,例如图片上的“V”字圆形图标,就是“荔枝FM出品”,这些信息可以帮助用户做出更贴切心理预期的选择,例如我想听3D环绕的灵异故事,那么图片上的这几类(电音、纯音乐、流行、ACG音乐)都不是我想要的,而“鬼故事”的标签才是我想要的。

    缺点:

    搜索页面的“大家都在搜”(见下面左图)用的是列表的形式,总共显示10条,但大部分会被键盘挡掉,荔枝对“历史搜索记录”也有限制,但是当关键词达到4行时,“大家都在搜”也只能看到Top1、Top2的热门搜索了,有点浪费。

    蜻蜓FM和喜马拉雅相似,省了一步输入显示关键词的步骤。

    蜻蜓FM搜索流程

    优点:

    输入时就可加载出搜索结果,效率非常高。即使变更关键词也会立即刷新搜索结果。

    缺点:

    (1)“最近搜索”的关键词没有限制,至少我输入了大半屏的关键词都还可以继续输入,那么“热门搜索”就会很容易被键盘遮挡,甚至即使收起键盘,也无法在第一屏看到。且热门搜索的关键词之间互相是平行的,没有重点,对用户的推荐作用比较弱。而且与另两个APP相比,没有“换一批”的按钮,给用户提供的选择很少。

    (2)“查看全部5276个专辑”太弱了,而且单独占用一行空间,喜马拉雅是显示在标题的右侧,并用颜色标出数量,显得更精致。

    三.播放

    这是音频类APP最核心的功能,也是最基本的交互方式。包括最基本的播放、暂停、上一个、下一个(之后这四个基础的操作统称播放按钮组)进度调节、播放方式、互动方式等。但是不同APP之间的交互细节各不相同。喜马拉雅FM里,在详情页上部小小的一块区域里已经显示了所有功能:封面图的下部依次是"赞"、"下载"、"评论"、"弹幕"。下面是播放器,播放按钮组最左边是列表,最右边是定时。点击封面或滑动进度条会出现进度调节的按钮,或者向左滑封面会倒退,向右滑封面会快进。点击右上角的三个点会显示更多相关操作。

    喜马拉雅的播放组成

    优点:

    操作集中方便,用用户习惯的手机整合了功能

    缺点:

    (1)当界面上飞满弹幕的时候就很容易误操作,因此用户必须先关闭弹幕再进行操作。

    (2)右上角三个点呼出的更多面板上的功能有些没必要的重复,例如“分享”“下载”在页面中已经有了,没必要在“更多”里再放置,否则会显得比较乱。

    其他应用:

    荔枝FM在详情页点击封面只能操作播放或暂停,点击右下角的快捷播放入口呼出的列表页才可以进行完整的播放操作。这里除播放按钮组以外的操作主要是对进度的调节:倒退15秒、快进15秒、倍速播放,以及左下角是播放方式:单节目播放、正序播放、倒序播放。播放按钮组下面是定时关闭按钮。倍速播放是否实用需要更多的用户调研才能知道,但是2倍速的情况下已经很难听清内容了,恐怕很少会有用户去用。左下角的播放方式倒是非常实用,某个专辑里动戈几十个音频,按照上传时间排序,如果是故事型的专辑,倒序播放就很有必要了。而新闻、散文之类的则需要根据用户自己的喜好决定正序播放还是倒序播放。音乐类的界面则很有可能会要用到单节目播放。

    优点:

    (1)所有与播放有关的操作放在列表页的下面,而其他的互动操作如“赞”、“下载”等都收纳在了右上角的三个点(更多)里面。使用户的操作目标更清晰。

    (2)列表的显示很直观,可随时切换。顺序、倒序、单节目循环的三种播放方式让用户能更自由的选择如何听节目。

    缺点:

    详情页的封面占据了页面很大的空间,然而只有播放、暂停及飞弹幕的作用,关闭弹幕后则更显得浪费。而跟播放有直接关系的操作都放在列表页了。

    荔枝FM的播放组成

    蜻蜓FM在播放一个音频时会先进入列表页,点击底部的快捷播放入口才会进入有着完整播放控制的播放界面。功能非常简单,播放按钮组左侧是列表,右侧是更多,点击更多出现下面右图的浮层,里面是一些互动相关的操作和定时关闭按钮。拖动进度条时会出现和喜马拉雅一样的进度控制按钮。

    优点:

    整个页面非常简洁,无其他信息干扰(不包括广告),部分功能隐藏(进度控制、更多),需要时显示。

    缺点:

    (1)点击音频时不会首先出现这个页面,而是会先出现列表页,必须从页面底部的播放快捷入口进入这里,而那个快捷入口并不是特别明显。

    (2)快进倒退为30s,比起其他app时间较长,用户控制的灵活性较弱。

    蜻蜓FM的播放组成

    四.弹幕

    弹幕是时下非常流行的交互方式,起源于视频网站,但现在越来越多的音频软件也用了弹幕。但顾名思义,音频类的app是是用来听的,而不是看的,那么音频网站里的弹幕效果怎样呢?我比较了一下喜马拉雅FM和bilibili动画里的弹幕:bilibili的弹幕是贯彻视频始终的,随着剧情出现高潮和嘈点,弹幕会变多,弹幕有三种形式,一种是飘移式的(主要分布在屏幕上半部分);一种是在屏幕顶上的;还有一种是在屏幕底下的,类似传统字幕的位置。还可以选择字体大小和颜色等。自己发布的弹幕会在稍后继续播放时用矩形框框出。与评论概念不同,点击弹幕无法点赞或回复。如果想专心看视频,也可以关闭弹幕。

    bilibili的弹幕

    至于音频类的弹幕,其实就是评论,目的是为了加强社交,因为在第一屏是看不到评论的,很难引导用户主动去探讨,有了弹幕就生动多了,当然,用户也可以选择关闭弹幕。

    我观察了一下荔枝FM和喜马拉雅FM的一些不同类型的节目,发现如果是较短的音乐类音频,也会随着音乐的起伏会有弹幕贯彻始终,但是开头时的弹幕会更多一些。至于其他类型的音频,则弹幕比较集中在开头,例如一个46分20秒的段子型音频,大部分的音频都是在前3分半内,之后会越来越少,甚至没有,并没有因内容的起伏而再次出现大量的弹幕。大致如下图:

    视频弹幕和中长音频弹幕的分布

    因此与视频类网站相比,音频类网站用户对弹幕的使用方式有所不同:刚进入音频的时候用户的关注和操作较多,会产生较多的弹幕,被同样关注着屏幕的用户看到,甚至进行互动;而随着关注和操作屏幕的用户少了,弹幕也少了,这个时候大部分用户也已经不再关心屏幕了。弹幕样式只有飘移的一种,荔枝的可以设定弹幕皮肤,而喜马拉雅没有。发弹幕时音频不会暂停,发完后须倒回到输入的时间点才能看到。

    喜马拉雅FM的优点:

    (1)视觉上风格统一、简洁大方。

    (2)开启弹幕后封面图上会出现一个深色的蒙层,保证弹幕的效果足够清晰。

    (3)点赞后有心飘出,对用户的行为做出了急时的反馈。

    缺点:

    (1)播放界面根本不知道如何发弹幕,要点击那个并不太显眼的评论图标去评论页发表评论,才会产生弹幕。用户体验上有断层。

    (2)发布完后因为音频已经往后播放了,所以必须倒回才能看到自己发布的弹幕。

    (3)点击某条弹幕直接点赞了,而用户有时候未必是想点赞,可能是想回复、提问,或者只是误操作。

    (4)整个封面部分都可以飘弹幕,所以偏下方的弹幕会和广告重叠,需要互动操作时就会不方便。

    喜马拉雅的弹幕

    其他应用:

    荔枝FM的弹幕,点击弹幕会弹出弹窗

    荔枝FM

    与喜马拉雅类似,点击弹幕弹出弹窗,可以点赞或回复该字幕。底部有评论输入框,可以即时发布弹幕(评论),点击左下角的红色圆形图标可以选择弹幕皮肤。

    优点:

    (1)点击弹幕时会有弹窗,给用户提供了更全面的互动操作,很方便。

    (2)底下的发布框可以直接发布弹幕(评论)并告知用户这条弹幕出现在在几时几分。

    评论时显示时间截点,还有可以更改更改个性化的弹幕皮肤

    (3)可以选择弹幕皮肤,满足了用户的审美需求和炫耀心理的同时,还能引导用户充值,产生经济收益。

    缺点:

    皮肤个性化以后,对视觉设计的考验较大,如果有很多不同颜色的弹幕出现在本来就有点花哨的封面上,就会显得比较乱。

    五.录制音频

    喜马拉雅FM作为一个音频分享的平台,另一个核心功能——录制,我也体验了一下,感受一下同样支持原创的荔枝FM之间的区别。

    首先在个人主页有两个大大的按钮——“开始录音”和“节目管理”。点击开始录音进入录音界面后,除了深色的音频可视化区域外页面上只有“添加配乐”和录音按钮两块功能区,点击添加配乐并选择配乐后,就到了下图第二个界面这样,右边会出现一个音量的区块,点击或向左滑动“添加配乐”模块会出现配乐音乐调整的控件。

    总共可以添加2个配乐,之后不能删除,但是可以更换音乐或调换顺序。然后开始录制,随着声音大小的变化,圆形录制按钮周围会产生圆形的波纹动画,录制时音频可视化区域下面只显示时间,暂停以后,在时间的两边分别会出现试听和裁剪的按钮。

    点击裁剪可从末尾处往前选择要裁剪的部分,点击确定完成裁剪回到录音界面。保存后页面会自动跳转到“节目管理-我的声音-草稿箱”在这里可以发布或删除录音。发布的时候可同步到其他社交平台。

    优点:

    (1)界面很简洁,表意明确,用户可以专注于自己的目标。充分体现了“需要时显示”的原则,例如没有音乐的时候不需要“裁剪”,所以初始界面上就没有。

    (2)录制按钮在录音时随着音量会有涟漪动画,对用户的录音操作做出了清晰的反馈。暂停时有一个按钮翻转的动画,明显的提示了用户状态的变化。

    (3)录音时自动将背景音乐音量调低,省去了用户主动调节的麻烦

    (4)音量、裁剪等操作留给了用户足够大的屏幕空间。

    缺点:

    草稿箱里的音频无法再编辑,如果意外退出的话,用户的录音就白费了。

    其他应用:

    荔枝FM基本流程和喜马拉雅一样,不同的是:

    1.添加音乐时可以添加粉丝的来稿。

    2.录音时随着录音声音的大小录音按钮动画不同。

    3.可以添加短音效助兴,像卡拉OK一样。

    4.可以添加比喜马拉雅更多的音乐(喜马拉雅只能添加2条)

    5.发布时可以继续录制,也可以投稿给某个电台(FM专辑)

    6.发布时可以添加标签。

    优点:

    (1)情怀。荔枝FM以前是小清新的拟物风格FM,后来随着播放界面重新设计,拟物风格的界面就被收起来了,在播放列表页可以切换回旧版的界面。而在这个录音的界面,它也保留了拟物风格时候的元素,对与长期使用的用户来说是一种情怀。

    (2)可以添加多条音乐,不过这是一个两面性的事。一方面用户可以有更多的选择。另一方面,一旦添加多了管理起来有点麻烦。

    (3)有短音效,这个类似卡拉OK包厢的特效,给用户更有趣的体验。

    (4)和喜马拉雅一样,剪辑时给用户留出了较大的操作空间

    (5)可以投稿给已经订阅的FM。给用户和播客之间的互动提供了便捷。与荔枝FM“人人都是播客”的口号很符合。

    (6)如果用户意外退出,重新进时会有弹出提醒是要“保存录音”还是“继续录制”。对用户已录的内容作了保护。草稿箱的录音也可以编辑。

    缺点:

    (1)功能之间没有区分,五个按钮及音量是用来控制添加的音乐的,而5个按钮以下才是用户录音相关的操作。没有区分容易造成用户的困惑,没有喜马拉雅那么结构清晰。

    (2)点击录音按钮开始录音后,按钮会变成一个浅浅的红色,随着音量变化颜色的深浅会有变化。但是这种方式没有喜马拉雅的涟漪式动效来得直观。首先,失效的按钮有时候也会设计成比正常按钮浅的颜色,所以容易造成误解。其次,颜色深浅的变化视觉上不是特别明显,除非是音量变化很剧烈。对用户的反馈有些弱。

    (3)5个图标没有没有文字来得直观,正在录音频的用户操作界面已是一心两用甚至一心多用,所以更要直观一些。第一和第五个按钮是音量的增减,和中间的音量控件功能重复。而且音量控件在如此主要的位置,也容易造成误解。可以换一个位置或形式。这一点喜马拉雅做得比较好,把它藏起来,需要时点开。但这也未必是最好的方案,这取决于用户在录音时是否需要频繁的操作音量。

    六.播放时的广告

    最后想说一下播放时的广告(特指播放的时候,不包括其他页面的广告)。用户常常都是讨厌广告的,它往往会打断用户的思路甚至操作。但是广告能带来经济利益,所以怎么投放能让用户接受这很重要

    喜马拉雅的广告我看到的有2种:1.播放界面封面图片的左下角有一个像弹幕一样的小气泡(左图),那个就是广告,每个广告样式统一,过一段时间还会抖一下头像。并且在播放这个音频的开始时候会有一段该广告的音频版,大约是十几秒的一小条。2.在音频开头弹出广告图(右图),并播放音频广告,用户可以选择关闭广告,或者等音频播放完毕它会自己消失。

    优点:第一种形式在界面上不会打扰到用户的位置用了较显眼的方式提醒用户。

    缺点:音频版广告还是打扰到了用户。我看了app store近1个月的用户评论,发现用户对广告还是有很多意见,其实用户听音频往往是用一些碎片时间或休闲时间,这个时候用户会对一些内容有些无意识,应该不会因为偶尔有条广告而立即产生负面情绪。但主要问题出在于网络不畅的时候,只能播放广告,不能播放音频,也就是主次颠倒了,这就会引起用户强烈的不满。还有一些广告与音频内容相去甚远,想要清净冥想一下的用户却被一个声音很精神的广告吓了一跳。综合以上的情况,就是对用户的使用场景了解得还不够,推送也没有针对性,本末倒置了。

    喜马拉雅FM的广告

    其他应用:

    蜻蜓FM播放界面的广告主要有如下三种:1.左图是在列表页底部的深色浮层不想看到时候可以关闭。2.中间的广告是播放时弹出的,把一个方形弹窗分成了视频和图片2部分,音频部分点左上角的音量图标可以播放声音。如果用户不操作,等到视频放完会自己消失。3.右图是音频开头出现的,弹出广告的同时播放音频广告。

    蜻蜓FM的广告

    优点:

    (1)前两种广告没有声音,不会对音频播放造成影响。不过,对选完音频就不做任何操作的用户,也不会起到推广作用了。

    (2)关闭按钮在用户比较顺手的位置,用户可以方便的关闭。

    缺点:

    (1)列表页的广告与另两个广告形式相比,对用户的影响最小。但是与喜马拉雅的广告相比,还是会对用户的操作体验造成一些影响。

    (2)中间这种形式的广告左上角的声音播放有点多此一举,用户看到广告就想关掉,怎么会还愿意点开播放声音呢?就算是传统的视屏网站播放的广告,也是默认有声音,用户不想听时再关闭声音的。当然这种播放中弹出的广告如果有声音更容易让用户很反感。

    (3)最右边的广告除了图片还有音频,对用户的打扰较大。和喜马拉雅的第二种广告相比,喜马拉雅的广告只遮住了播放器部分,其他操作仍然可以。广告的长短可能和具体的广告有关,但是这种形式的广告不宜太长,音频的文案很重要,最好让用户在短时记忆里记住商品,还有就是不要把页面全遮起来,用户一旦发现没法做任何操作要么就会关闭广告,要么就是感到不满,起不到推广作用的同时还可能会有负面情绪。

    正如前面所说,用户总是讨厌广告的,最早视频网站播放时出现的广告也令很多人反感,但是为了利益又不得不做,所以就必须在用户体验和商业利益之间找到一个平衡,把用户的反感降到最低的同时,还要提高广告的转化率。目前看来喜马拉雅的方式更温和一些,如果能再对用户使用场景多做研究做到更合理的推广或者采取会员免广告等其他转换利益的方式就更好了。

    相关文章

      网友评论

          本文标题:喜马拉雅FM交互方式分析(2016.12.30)

          本文链接:https://www.haomeiwen.com/subject/hhtekxtx.html