播放頁設(shè)計(jì)在設(shè)計(jì)網(wǎng)站上一搜一大堆。而且從留聲機(jī)開始，經(jīng)歷了錄音帶、CD、MP3到現(xiàn)在的手機(jī)，已經(jīng)經(jīng)歷了無數(shù)次迭代，已經(jīng)有了非常深入人心。但如果給知識(shí)音頻產(chǎn)品設(shè)計(jì)播放頁呢？（以下截圖截自各平臺(tái)APP，僅做研究使用）
從2016至2018，除了現(xiàn)象級(jí)的“百萬答題”外，很多知識(shí)付費(fèi)產(chǎn)品接近定型階段。像泛娛樂音頻平臺(tái)喜馬拉雅；有騰訊嫡傳的企鵝fm；有從《羅輯思維》轉(zhuǎn)型做大選題的“得到”；有仿聊天室類的知乎Live；有強(qiáng)勢刷圈的新世相，以及競品樊登讀書會(huì)、好好學(xué)習(xí)等等。
首先千萬別小看播放頁，人家可是你花了19，99，199之后數(shù)個(gè)月甚至一年你拿到付費(fèi)內(nèi)容的地方，也就是內(nèi)容產(chǎn)品的窗口。而播放頁體驗(yàn)好壞好用與否將直接決定用戶會(huì)不會(huì)點(diǎn)下退款按鈕。在研究產(chǎn)品的這幾天，真覺得知識(shí)焦慮：有趣知識(shí)那么多，我怎么就聽不完呢……先放下知識(shí)，看看這些APP是怎樣做播放頁的。
首先播放頁要有品質(zhì)感
基本的播放頁，即只是集成基本功能，如產(chǎn)品圖、播放時(shí)長及基本的控制按鈕。而像“得到”，“好好學(xué)習(xí)”等知識(shí)平臺(tái)主要就是這種形態(tài)。下面通過“得到”來描述這種形態(tài)。
“得到”采用界面外懸浮條+播放控制。下圖為觸發(fā)“得到”音頻播放的方式：主頁點(diǎn)擊、已購課程詳情點(diǎn)擊、嵌入圖文音頻點(diǎn)擊。
懸浮條：
“得到”采用的是播放懸浮條，吸底顯示，并且在交互中處于界面層最高級(jí)別。除了播放頁外，所有頁面都會(huì)顯示，甚至是用戶充值、設(shè)置頁等信息密度大、容易誤操作的頁面。
顯示：當(dāng)APP內(nèi)觸發(fā)音頻播放時(shí)，淡入顯示，不跳轉(zhuǎn)播放控制頁，不會(huì)打斷當(dāng)前頁面的瀏覽。“得到”從內(nèi)容上看，除了音頻形式，圖文內(nèi)容、運(yùn)營活動(dòng)占比也占較大部分，部分音頻帶有附屬文本，通常有圖片、圖表等信息，有時(shí)候?qū)φ崭綄賰?nèi)容聽音頻，會(huì)更好理解音頻內(nèi)容。
隱藏：而當(dāng)處于暫停時(shí)可以左側(cè)按鈕關(guān)閉，當(dāng)播放停止（無播放內(nèi)容）時(shí)則直接淡出消失。當(dāng)用戶有播放歷史時(shí)，可以通過懸浮條快速斷點(diǎn)播放。
防遮擋內(nèi)容：因?yàn)閼腋l處于最高層級(jí)，在瀏覽圖文時(shí)候會(huì)影響閱讀體驗(yàn)，所以加入了滑動(dòng)隱藏/顯示機(jī)制：無論懸浮條處于何種狀態(tài)，屏幕上劃操作即淡出隱藏，當(dāng)有大幅度下滑操作則會(huì)顯現(xiàn)。
播放頁
點(diǎn)擊左邊區(qū)域即可進(jìn)入播放頁。播放頁面的箭頭指示與播放懸浮條呼應(yīng)，預(yù)示著這一整也是可以拖拽收到底欄的，基本符合用戶的心理預(yù)期。引導(dǎo)用戶去收回播放界面。畢竟與其停留在播放頁，收起播放頁才能瀏覽更多內(nèi)容，帶來pv和轉(zhuǎn)化率。
總體說播放頁沒有過多交互，基本滿足操作，而底部按鈕基本滿足用戶需求。并且從視覺層面上，質(zhì)感很好，有足夠的辨識(shí)度。而深一層想：“得到”較多付費(fèi)用戶，如果在播放頁引入廣告會(huì)大幅影響聲譽(yù)。另外，“得到”有自己的訂閱用戶社交系統(tǒng)，不需要在音頻下方再加入評(píng)論區(qū)功能。
而“好好讀書”要比“得到”更加純粹。首先“好好學(xué)習(xí)”較“得到”更加顯得年輕和簡介，最直接的體現(xiàn)就是APP的UI留白很多，并且時(shí)刻點(diǎn)綴著耀眼的主題色——黃色，還有UI元素多以純黑色為點(diǎn)綴。播放頁連圖文跳轉(zhuǎn)都沒有加入進(jìn)來，需要在詳情頁而懸浮條與播放頁的切換也有幾分蘋果“Apple Music”APP的意味。
而在關(guān)閉懸浮條的操作中，也采用了類似蘋果自帶的“刪除”操作，蘋果風(fēng)十足。但在底部懸浮條上使用較容易誤操作成點(diǎn)擊，而且有很大概率操作失敗，不知道是不是有意為之。更希望改進(jìn)成向下滑動(dòng)消失并停止播放。
播放頁還要考慮下用戶激勵(lì)？
除了基本的，有質(zhì)感外，還需要考慮產(chǎn)品的調(diào)性，而“新世相讀書會(huì)”在這部分就很懂得玩花樣，很符合他們的調(diào)性?！靶率老唷痹谕饨缍急灰暈槟軌蛲媾诵匀觞c(diǎn)進(jìn)行營銷的平臺(tái)。“新世相”每每刷屏的“逃離北上廣”、“丟書大作戰(zhàn)”事件仍歷歷在目。其APP與“得到”操作邏輯基本類似，也是采用高層級(jí)顯示的“懸浮條+播放頁”。但最出奇的是，他們?cè)诓淮蟮膽腋√?，增加了用戶激?lì)機(jī)制！
“新世相”激勵(lì)機(jī)制如下用戶通過收聽音頻的時(shí)長收獲金幣，金幣在每天的24點(diǎn)自動(dòng)兌換成現(xiàn)金放到賬戶，用戶可以再去消費(fèi)其他書籍音頻，也可以體現(xiàn)。
首先這個(gè)懸浮條是沒辦法在播放內(nèi)容時(shí)隱藏，畢竟看著進(jìn)度條慢慢地往一個(gè)一個(gè)的金幣獎(jiǎng)勵(lì)前進(jìn)。知識(shí)就是收益，把學(xué)習(xí)知識(shí)真的收益具象成了金幣時(shí)刻放在用戶的眼前，那種激勵(lì)感強(qiáng)而有力。而且當(dāng)用戶看著還有幾分鐘到下一個(gè)獎(jiǎng)勵(lì)，又可以誘導(dǎo)用戶毫不猶豫戴上耳機(jī)。
“新世相”暫未提供隨音頻的圖文，所以沒有圖文入口，并且在多輪營銷中“新世相”的活躍用戶群體在微信上，在屢屢刷屏的引流中，APP僅作為微信封殺的情況下為用戶提供服務(wù)的B方案，暫待進(jìn)一步迭代。
播放頁還能為公司賺錢？
除了上述產(chǎn)品形式不多，用戶集中明確的平臺(tái)，還有另外一類內(nèi)容眾多，類型龐雜的泛用型音頻平臺(tái)，如喜馬拉雅。喜馬拉雅有從有聲小說、娛樂Podcast、電臺(tái)、付費(fèi)精品、名校公開課等產(chǎn)品，甚至還有自己的直播業(yè)務(wù)。內(nèi)容量大的很難做強(qiáng)區(qū)分，對(duì)于已進(jìn)駐的內(nèi)容而言，動(dòng)一發(fā)而動(dòng)全身。另外像喜馬拉雅，荔枝等平臺(tái)作為大音頻平臺(tái)，維護(hù)費(fèi)用這是高的嚇人，所以在這類平臺(tái)基本不會(huì)放過任何盈利點(diǎn)，包括播放頁！
那么喜馬拉雅的播放頁，怎么給平臺(tái)賺錢？首先見識(shí)一下喜馬拉雅的廣告。喜馬拉雅的廣告樣式如下：
- 音頻貼頭、貼尾廣告，時(shí)長5s左右，去不掉。
- 專輯圖廣告，有專輯圖底部的泡泡條廣告。
- 一些大金主投的，如表情包掉落廣告。
-
自家喜馬拉雅智能設(shè)備，如小雅AI音箱等等。
喜馬拉雅播放頁
喜馬拉雅在非播放頁的是吸底固定播放，只顯示專輯圖，播放狀態(tài)下專輯圖會(huì)旋轉(zhuǎn)，可能稱為預(yù)覽窗更加合適。播放狀態(tài)下可以點(diǎn)進(jìn)播放頁，暫停狀態(tài)下點(diǎn)擊會(huì)播放同時(shí)進(jìn)入播放頁，這個(gè)兩部并做一步很符合人的操作思路。
而較前面產(chǎn)品不同，喜馬拉雅將非常多功能集成在播放頁，除了廣告，還有評(píng)論區(qū)，以及給主播打賞功能也集成在下方。而從喜馬拉雅節(jié)目中可知，右下角“我喜歡的”按鈕是否點(diǎn)亮也作為主播收入的績效考核之一。所以喜馬拉雅基本把播放頁可能有的功能都探索出來了。
從上看來，在國內(nèi)，連最普通的播放頁都緊密的聯(lián)系著自家戰(zhàn)略定位。如“得到”、“好好學(xué)習(xí)”等等平臺(tái)有明確的用戶群體，則需要強(qiáng)調(diào)自己的品質(zhì)感和塑造強(qiáng)烈的品牌感。而像“新世相”類，有自己明確的訴求，例如用戶激勵(lì)，用戶粘性等等。還有喜馬拉雅等等，播放頁甚至成為主播與聽眾的交流、互動(dòng)，甚至是節(jié)目取材地。所以即使是做個(gè)播放頁，也要從品牌、業(yè)務(wù)、需求多方面考慮，才能取得平臺(tái)、用戶、市場的平衡。
