給知識音頻產品設計播放頁有多難？

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

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

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

首先播放頁要有品質感

基本的播放頁，即只是集成基本功能，如產品圖、播放時長及基本的控制按鈕。而像「得到」，「好好學習」等知識平台主要就是這種形態。下面通過「得到」來描述這種形態。

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

懸浮條：

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

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

播放頁

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

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

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

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

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

除了基本的，有質感外，還需要考慮產品的調性，而「新世相讀書會」在這部分就很懂得玩花樣，很符合他們的調性。「新世相」在外界都被視為能夠玩弄人性弱點進行營銷的平台。「新世相」每每刷屏的「逃離北上廣」、「丟書大作戰」事件仍歷歷在目。其APP與「得到」操作邏輯基本類似，也是採用高層級顯示的「懸浮條+播放頁」。但最出奇的是，他們在不大的懸浮跳上，增加了用戶激勵機制！

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

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

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

播放頁還能為公司賺錢？

除了上述產品形式不多，用戶集中明確的平台，還有另外一類內容眾多，類型龐雜的泛用型音頻平台，如喜馬拉雅。喜馬拉雅有從有聲小說、娛樂Podcast、電台、付費精品、名校公開課等產品，甚至還有自己的直播業務。內容量大的很難做強區分，對於已進駐的內容而言，動一發而動全身。另外像喜馬拉雅，荔枝等平台作為大音頻平台，維護費用這是高的嚇人，所以在這類平台基本不會放過任何盈利點，包括播放頁！

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

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

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

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

從上看來，在國內，連最普通的播放頁都緊密的聯繫著自家戰略定位。如「得到」、「好好學習」等等平台有明確的用戶群體，則需要強調自己的品質感和塑造強烈的品牌感。而像「新世相」類，有自己明確的訴求，例如用戶激勵，用戶粘性等等。還有喜馬拉雅等等，播放頁甚至成為主播與聽眾的交流、互動，甚至是節目取材地。所以即使是做個播放頁，也要從品牌、業務、需求多方面考慮，才能取得平台、用戶、市場的平衡。而設計最終還是為了解決問題而存在。