音頻產(chǎn)品播放頁面設計，怎么做才更合理？

播放頁設計在設計網(wǎng)站上一搜一大堆。而且從留聲機開始，經(jīng)歷了錄音帶、CD、MP3到現(xiàn)在的手機，已經(jīng)經(jīng)歷了無數(shù)次迭代，已經(jīng)有了非常深入人心。但如果給知識音頻產(chǎn)品設計播放頁呢？（以下截圖截自各平臺APP，僅做研究使用）

從2016至2018，除了現(xiàn)象級的“百萬答題”外，很多知識付費產(chǎn)品接近定型階段。像泛娛樂音頻平臺喜馬拉雅；有騰訊嫡傳的企鵝fm；有從《羅輯思維》轉(zhuǎn)型做大選題的“得到”；有仿聊天室類的知乎Live；有強勢刷圈的新世相，以及競品樊登讀書會、好好學習等等。

首先千萬別小看播放頁，人家可是你花了19，99，199之后數(shù)個月甚至一年你拿到付費內(nèi)容的地方，也就是內(nèi)容產(chǎn)品的窗口。而播放頁體驗好壞好用與否將直接決定用戶會不會點下退款按鈕。在研究產(chǎn)品的這幾天，真覺得知識焦慮：有趣知識那么多，我怎么就聽不完呢……先放下知識，看看這些APP是怎樣做播放頁的。

首先播放頁要有品質(zhì)感

基本的播放頁，即只是集成基本功能，如產(chǎn)品圖、播放時長及基本的控制按鈕。而像“得到”，“好好學習”等知識平臺主要就是這種形態(tài)。下面通過“得到”來描述這種形態(tài)。

“得到”采用界面外懸浮條+播放控制。下圖為觸發(fā)“得到”音頻播放的方式：主頁點擊、已購課程詳情點擊、嵌入圖文音頻點擊。

懸浮條：

“得到”采用的是播放懸浮條，吸底顯示，并且在交互中處于界面層最高級別。除了播放頁外，所有頁面都會顯示，甚至是用戶充值、設置頁等信息密度大、容易誤操作的頁面。

• 顯示：當APP內(nèi)觸發(fā)音頻播放時，淡入顯示，不跳轉(zhuǎn)播放控制頁，不會打斷當前頁面的瀏覽。“得到”從內(nèi)容上看，除了音頻形式，圖文內(nèi)容、運營活動占比也占較大部分，部分音頻帶有附屬文本，通常有圖片、圖表等信息，有時候?qū)φ崭綄賰?nèi)容聽音頻，會更好理解音頻內(nèi)容。
• 隱藏：而當處于暫停時可以左側(cè)按鈕關(guān)閉，當播放停止（無播放內(nèi)容）時則直接淡出消失。當用戶有播放歷史時，可以通過懸浮條快速斷點播放。
• 防遮擋內(nèi)容：因為懸浮條處于最高層級，在瀏覽圖文時候會影響閱讀體驗，所以加入了滑動隱藏/顯示機制：無論懸浮條處于何種狀態(tài)，屏幕上劃操作即淡出隱藏，當有大幅度下滑操作則會顯現(xiàn)。

播放頁

點擊左邊區(qū)域即可進入播放頁。播放頁面的箭頭指示與播放懸浮條呼應，預示著這一整也是可以拖拽收到底欄的，基本符合用戶的心理預期。引導用戶去收回播放界面。畢竟與其停留在播放頁，收起播放頁才能瀏覽更多內(nèi)容，帶來pv和轉(zhuǎn)化率。

總體說播放頁沒有過多交互，基本滿足操作，而底部按鈕基本滿足用戶需求。并且從視覺層面上，質(zhì)感很好，有足夠的辨識度。而深一層想：“得到”較多付費用戶，如果在播放頁引入廣告會大幅影響聲譽。另外，“得到”有自己的訂閱用戶社交系統(tǒng)，不需要在音頻下方再加入評論區(qū)功能。

而“好好讀書”要比“得到”更加純粹。首先“好好學習”較“得到”更加顯得年輕和簡介，最直接的體現(xiàn)就是APP的UI留白很多，并且時刻點綴著耀眼的主題色——黃色，還有UI元素多以純黑色為點綴。播放頁連圖文跳轉(zhuǎn)都沒有加入進來，需要在詳情頁而懸浮條與播放頁的切換也有幾分蘋果“Apple Music”APP的意味。

而在關(guān)閉懸浮條的操作中，也采用了類似蘋果自帶的“刪除”操作，蘋果風十足。但在底部懸浮條上使用較容易誤操作成點擊，而且有很大概率操作失敗，不知道是不是有意為之。更希望改進成向下滑動消失并停止播放。

播放頁還要考慮下用戶激勵？

除了基本的，有質(zhì)感外，還需要考慮產(chǎn)品的調(diào)性，而“新世相讀書會”在這部分就很懂得玩花樣，很符合他們的調(diào)性。“新世相”在外界都被視為能夠玩弄人性弱點進行營銷的平臺。

“新世相”每每刷屏的“逃離北上廣”、“丟書大作戰(zhàn)”事件仍歷歷在目。其APP與“得到”操作邏輯基本類似，也是采用高層級顯示的“懸浮條+播放頁”。但最出奇的是，他們在不大的懸浮跳上，增加了用戶激勵機制！

“新世相”激勵機制如下用戶通過收聽音頻的時長收獲金幣，金幣在每天的24點自動兌換成現(xiàn)金放到賬戶，用戶可以再去消費其他書籍音頻，也可以體現(xiàn)。

首先這個懸浮條是沒辦法在播放內(nèi)容時隱藏，畢竟看著進度條慢慢地往一個一個的金幣獎勵前進。知識就是收益，把學習知識真的收益具象成了金幣時刻放在用戶的眼前，那種激勵感強而有力。而且當用戶看著還有幾分鐘到下一個獎勵，又可以誘導用戶毫不猶豫戴上耳機。

“新世相”暫未提供隨音頻的圖文，所以沒有圖文入口，并且在多輪營銷中“新世相”的活躍用戶群體在微信上，在屢屢刷屏的引流中，APP僅作為微信封殺的情況下為用戶提供服務的B方案，暫待進一步迭代。

播放頁還能為公司賺錢？

除了上述產(chǎn)品形式不多，用戶集中明確的平臺，還有另外一類內(nèi)容眾多，類型龐雜的泛用型音頻平臺，如喜馬拉雅。喜馬拉雅有從有聲小說、娛樂Podcast、電臺、付費精品、名校公開課等產(chǎn)品，甚至還有自己的直播業(yè)務。內(nèi)容量大的很難做強區(qū)分，對于已進駐的內(nèi)容而言，動一發(fā)而動全身。

另外像喜馬拉雅，荔枝等平臺作為大音頻平臺，維護費用這是高的嚇人，所以在這類平臺基本不會放過任何盈利點，包括播放頁！

那么喜馬拉雅的播放頁，怎么給平臺賺錢？首先見識一下喜馬拉雅的廣告。喜馬拉雅的廣告樣式如下：

• 音頻貼頭、貼尾廣告，時長5s左右，去不掉。
• 專輯圖廣告，有專輯圖底部的泡泡條廣告。
• 一些大金主投的，如表情包掉落廣告。
• 自家喜馬拉雅智能設備，如小雅AI音箱等等。

喜馬拉雅在非播放頁的是吸底固定播放，只顯示專輯圖，播放狀態(tài)下專輯圖會旋轉(zhuǎn)，可能稱為預覽窗更加合適。播放狀態(tài)下可以點進播放頁，暫停狀態(tài)下點擊會播放同時進入播放頁，這個兩部并做一步很符合人的操作思路。

而較前面產(chǎn)品不同，喜馬拉雅將非常多功能集成在播放頁，除了廣告，還有評論區(qū)，以及給主播打賞功能也集成在下方。而從喜馬拉雅節(jié)目中可知，右下角“我喜歡的”按鈕是否點亮也作為主播收入的績效考核之一。所以喜馬拉雅基本把播放頁可能有的功能都探索出來了。

從上看來，在國內(nèi)，連最普通的播放頁都緊密的聯(lián)系著自家戰(zhàn)略定位。如“得到”、“好好學習”等等平臺有明確的用戶群體，則需要強調(diào)自己的品質(zhì)感和塑造強烈的品牌感。而像“新世相”類，有自己明確的訴求，例如用戶激勵，用戶粘性等等。

還有喜馬拉雅等等，播放頁甚至成為主播與聽眾的交流、互動，甚至是節(jié)目取材地。所以即使是做個播放頁，也要從品牌、業(yè)務、需求多方面考慮，才能取得平臺、用戶、市場的平衡。

本文由 @歡想楊雨 原創(chuàng)發(fā)布于人人都是產(chǎn)品經(jīng)理。未經(jīng)許可，禁止轉(zhuǎn)載。

題圖來自PEXELS，基于CC0協(xié)議