以企鵝FM新版播放頁為例,聊聊產品趨勢的設計軟著陸

1 評論 5682 瀏覽 26 收藏 11 分鐘

產品趨勢會發生變革,有可能是自覺,也有可能被動。無論如何,都需要設計讓趨勢變革軟著陸到用戶的體驗中。 從企鵝FM新版播放頁出發,與你聊聊關于產品趨勢是怎樣通過設計傳導給用戶的設計思考。

企鵝FM的內容型產品趨勢

多年沒有大動作的App Store進行了改版,推出了“Today”作為home page,里面是App和游戲的深度采訪專欄(iOS 11預計秋季上線)【1】;音樂App們已經徹底改變了只能是“BGM”的宿命,改頭換面讓喜歡音樂的人還能分享見解、閱讀雜志、建立歌單······

這個時代,一個簡單的工具或是一個走量的平臺已經過時了,人們需要的是“深度”,產品紛紛向所謂的“內容型產品”轉型。抱著辯證的觀點看當然不是所有產品都需要這樣做,但我們今天要講的音頻產品,偏偏它的基因注定了它會成長為這樣一個“內容型”的音頻產品。

互聯網音頻產品的成長之路

追溯當年“播客”橫空出世,傳統廣播在互聯網中的終于有了替代品。相對于傳統廣播,“播客”的RSS標準格式增加了許多附屬的文字信息。當播客進入中國,誕生了許多像企鵝FM這種集音頻托管、泛用型客戶端于一身的音頻平臺,這些“電臺App”在信息展示的基礎上有了更多用戶可參與的內容——評論、社群、主播······除豐富的內容和天然的訂閱機制,音頻本身就是大眾傳媒的基本內容載體之一,以上是我說音頻產品有“內容型基因”的緣由。

說回企鵝FM,我們這個產品經歷了兩年內容累積的“野蠻生長“,雖然不能和業內深耕十幾年的產品相比,但也早已經過了一窮二白的階段。企鵝FM不僅在不斷地豐富內容(專輯、節目圖文介紹,節目標簽,專題、專欄等不同的深度內容),更強調用戶的參與(評論、UGC原創錄音)。

而這些內容卻沒有完整有效的展示給用戶,沒有充分調動用戶積極性參與進來。在收聽這些少則5分鐘、多則一小時的節目時,用戶只能退出干別的事從而中斷了體驗。

怎樣將我們積攢了兩年的內容通過設計重新包裝,引導用戶從單純收聽到深入體驗內容呢?

播放頁的“決定樹”

我們決定從產品的頭部頁面“播放頁”開始這種試水這種變革,播放頁其實一直在不斷優化,但是功能結構的本質其實沒有變過——一直是寬而淺的決定樹。

什么是“決定樹”?

交互設計師在設計時往往會先搭建一個信息架構或者流程圖,這些結構的每個步驟都是一個“決定”,這些由“決定”組合的事物結構在設計心理學中叫做“決定樹”?!?】

結構樹有兩個衡量的尺度:“面”的寬窄與“層”的深淺。也就是寬面/窄面、深層/淺層。

用身邊的事物舉例:一道菜的菜譜是深而窄的決定樹,因為做菜過程中要完成的任務很多,但是每一步都很明確,沒有什么選擇的余地,這決定了菜譜的深(任務多)與窄(線性流程)。國際象棋是寬而深的決定樹,寬面(每一步棋都有很多走法),深層(對弈雙方需要走出很多步棋才能決出勝負)。

原本的播放頁的決定樹是寬面(許多任務可以執行)而淺層(每個任務都是一次性的)。比如所有的操作(暫停、快進、音效···)都是一次性的決定,或者是內容入口(專輯、主播)點擊后就跳轉離開,和播放頁再也無關。

寬而淺的決定樹優點就是很容易操作,每一個決定都展示給你選擇,這個很符合播放器的工具屬性。而擺在我們面前的問題是——怎樣加入豐富的內容又不破壞這種操作的易用性?

我們對這顆決定樹的改變是:在現有的播放頁結構里增加一個窄面結構,讓用戶的某一個決定(操作)可以關聯出一系列的操作和豐富內容。

設計軟著陸

在這個“寬而淺”的支線決定樹的指導下,有很多的的設計組合——

這里關注兩個重點——用戶的決定和決定引發的內容。用戶的這個決定可以是某個入口也可以是某種操作,延展出來的窄面結構也給了設計較大的自由度做加法(我們內部稱這個窄面結構為“拓展”)。

下圖是用戶可以在播放頁作出的“決定”。

下圖是“拓展”中可以使用的內容(金色為原播放頁缺失內容)。

針對“拓展”的功能屬性,我們提出了更加細化的設計目標去比對我們組合過的demo設計方案。

交互設計著陸

最終的方案我們選擇了“上拉”操作作為“拓展”的觸發決定,而“拓展”中的內容則選擇了(節目介紹+專輯介紹+評論)的組合。這樣的組合保證了用戶如以往使用播放頁的易用便捷,又在用戶在想要更多內容時可以流暢而沉浸地閱讀體驗。

視覺設計著陸

同期我們對視覺也進行了改良,目標同樣是讓用戶更好地沉浸體驗內容。這些嘗試包括節目標題放大至左上角讓重點信息更明顯、去掉系統自帶navigation bar讓體驗更沉浸、微立體的icon更具電臺氛圍、寬進度條用戶更好操作······小小的播放頁凝結了設計師們許多的思考和心血,趕快下載新版企鵝FM體驗一下吧!

新版本面性圖標:

新版本播放頁視頻演示:

反思:設計與產品的一致性

作為設計師,我們往往關注的是設計本身的一致性,而常常忽略與產品本身發展趨勢的一致性。

我們的產品和行業是時常在發展中的——有時候因為外部環境迫使產品轉型,比如“閱后即焚”這個概念受到青少年追捧時,各大社交平臺自然不能坐以待斃;有時候因為量變引發了質變,比如新版App Store,當新游戲的數量已經在新應用總量中占比逼近50%的時候,蘋果將其從“App”中剝離出來成立獨立門類,在iOS11中與App平行層級;有的是因為產品調整了戰略方向,比如SNS社交媒體化、電商內容化·····

以上林林總總的產品趨勢,有的出于自覺,有的是被迫變革。企鵝FM的變革,其中既有本身的產品屬性與內容量變質變的內因,又有行業趨勢與用戶取向的外因。設計師是否能在拿到產品需求時了解這些趨勢甚至主動地洞察,是設計是否能與產品趨勢一致的前提。

解鈴還需系鈴人,設計師們擅長優雅地解決問題,更要學會靈敏地發現問題。

參考備注

【1】www.apple.com/ios/ios-11-preview/

【2】The Design Of Everyday Things?by?Donald A. Norman

 

作者:xuan凱

來源:騰訊ISUX

題圖來自 Pexels,基于 CC0 協議

更多精彩內容,請關注人人都是產品經理微信公眾號或下載App
評論
評論請登錄
  1. 弱弱問下,那個原型圖是用什么軟件做的呀?

    來自上海 回復