你知道怎么實(shí)踐那些UI設(shè)計(jì)趨勢(shì)嗎

企鵝FM的內(nèi)容型產(chǎn)品趨勢(shì)

多年沒(méi)有大動(dòng)作的App Store進(jìn)行了改版，推出了“Today”作為home page，里面是App和游戲的深度采訪專(zhuān)欄（iOS 11預(yù)計(jì)秋季上線）【1】；音樂(lè)App們已經(jīng)徹底改變了只能是“BGM”的宿命，改頭換面讓喜歡音樂(lè)的人還能分享見(jiàn)解、閱讀雜志、建立歌單。

這個(gè)時(shí)代，一個(gè)簡(jiǎn)單的工具或是一個(gè)走量的平臺(tái)已經(jīng)過(guò)時(shí)了，人們需要的是“深度”，產(chǎn)品紛紛向所謂的“內(nèi)容型產(chǎn)品”轉(zhuǎn)型。抱著辯證的觀點(diǎn)看當(dāng)然不是所有產(chǎn)品都需要這樣做，但我們今天要講的音頻產(chǎn)品，偏偏它的基因注定了它會(huì)成長(zhǎng)為這樣一個(gè)“內(nèi)容型”的音頻產(chǎn)品。

 

互聯(lián)網(wǎng)音頻產(chǎn)品的成長(zhǎng)之路

追溯當(dāng)年“播客”橫空出世，傳統(tǒng)廣播在互聯(lián)網(wǎng)中終于有了替代品。相對(duì)于傳統(tǒng)廣播，“播客”的RSS標(biāo)準(zhǔn)格式增加了許多附屬的文字信息。當(dāng)播客進(jìn)入中國(guó)，誕生了許多像企鵝FM這種集音頻托管、泛用型客戶端于一身的音頻平臺(tái)，這些“電臺(tái)App”在信息展示的基礎(chǔ)上有了更多用戶可參與的內(nèi)容——評(píng)論、社群、主播······除豐富的內(nèi)容和天然的訂閱機(jī)制，音頻本身就是大眾傳媒的基本內(nèi)容載體之一，以上是我說(shuō)音頻產(chǎn)品有“內(nèi)容型基因”的緣由。

說(shuō)回企鵝FM，我們這個(gè)產(chǎn)品經(jīng)歷了兩年內(nèi)容累積的“野蠻生長(zhǎng)“，雖然不能和業(yè)內(nèi)深耕十幾年的產(chǎn)品相比，但也早已經(jīng)過(guò)了一窮二白的階段。企鵝FM不僅在不斷地豐富內(nèi)容（專(zhuān)輯、節(jié)目圖文介紹，節(jié)目標(biāo)簽，專(zhuān)題、專(zhuān)欄等不同的深度內(nèi)容），更強(qiáng)調(diào)用戶的參與（評(píng)論、UGC原創(chuàng)錄音）。

而這些內(nèi)容卻沒(méi)有完整有效的展示給用戶，沒(méi)有充分調(diào)動(dòng)用戶積極性參與進(jìn)來(lái)。在收聽(tīng)這些少則5分鐘、多則一小時(shí)的節(jié)目時(shí)，用戶只能退出干別的事從而中斷了體驗(yàn)。

怎樣將我們積攢了兩年的內(nèi)容通過(guò)設(shè)計(jì)重新包裝，引導(dǎo)用戶從單純收聽(tīng)到深入體驗(yàn)內(nèi)容呢？

 

播放頁(yè)的“決定樹(shù)”

我們決定從產(chǎn)品的頭部頁(yè)面“播放頁(yè)”開(kāi)始這種試水這種變革，播放頁(yè)其實(shí)一直在不斷優(yōu)化，但是功能結(jié)構(gòu)的本質(zhì)其實(shí)沒(méi)有變過(guò)——一直是寬而淺的決定樹(shù)。

什么是“決定樹(shù)”？

交互設(shè)計(jì)師在設(shè)計(jì)時(shí)往往會(huì)先搭建一個(gè)信息架構(gòu)或者流程圖，這些結(jié)構(gòu)的每個(gè)步驟都是一個(gè)“決定”，這些由“決定”組合的事物結(jié)構(gòu)在設(shè)計(jì)心理學(xué)中叫做“決定樹(shù)”。

結(jié)構(gòu)樹(shù)有兩個(gè)衡量的尺度：“面”的寬窄與“層”的深淺。也就是寬面/窄面、深層/淺層。

用身邊的事物舉例：一道菜的菜譜是深而窄的決定樹(shù)，因?yàn)樽霾诉^(guò)程中要完成的任務(wù)很多，但是每一步都很明確，沒(méi)有什么選擇的余地，這決定了菜譜的深（任務(wù)多）與窄（線性流程）。國(guó)際象棋是寬而深的決定樹(shù)，寬面（每一步棋都有很多走法），深層（對(duì)弈雙方需要走出很多步棋才能決出勝負(fù)）。

原本的播放頁(yè)的決定樹(shù)是寬面（許多任務(wù)可以執(zhí)行）而淺層（每個(gè)任務(wù)都是一次性的）。比如所有的操作（暫停、快進(jìn)、音效···）都是一次性的決定，或者是內(nèi)容入口（專(zhuān)輯、主播）點(diǎn)擊后就跳轉(zhuǎn)離開(kāi)，和播放頁(yè)再也無(wú)關(guān)。

寬而淺的決定樹(shù)優(yōu)點(diǎn)就是很容易操作，每一個(gè)決定都展示給你選擇，這個(gè)很符合播放器的工具屬性。而擺在我們面前的問(wèn)題是——怎樣加入豐富的內(nèi)容又不破壞這種操作的易用性？

我們對(duì)這顆決定樹(shù)的改變是：在現(xiàn)有的播放頁(yè)結(jié)構(gòu)里增加一個(gè)窄面結(jié)構(gòu)，讓用戶的某一個(gè)決定（操作）可以關(guān)聯(lián)出一系列的操作和豐富內(nèi)容。

設(shè)計(jì)軟著陸

在這個(gè)“寬而淺”的支線決定樹(shù)的指導(dǎo)下，有很多的的設(shè)計(jì)組合——

這里關(guān)注兩個(gè)重點(diǎn)——用戶的決定和決定引發(fā)的內(nèi)容。用戶的這個(gè)決定可以是某個(gè)入口也可以是某種操作，延展出來(lái)的窄面結(jié)構(gòu)也給了設(shè)計(jì)較大的自由度做加法（我們內(nèi)部稱(chēng)這個(gè)窄面結(jié)構(gòu)為“拓展”）。

△  用戶可以在播放頁(yè)作出的“決定”。

△  “拓展”中可以使用的內(nèi)容（金色為原播放頁(yè)缺失內(nèi)容）。

△  針對(duì)“拓展”的功能屬性，我們提出了更加細(xì)化的設(shè)計(jì)目標(biāo)去比對(duì)我們組合過(guò)的demo設(shè)計(jì)方案。

 

交互設(shè)計(jì)著陸

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

視覺(jué)設(shè)計(jì)著陸

同期我們對(duì)視覺(jué)也進(jìn)行了改良，目標(biāo)同樣是讓用戶更好地沉浸體驗(yàn)內(nèi)容。這些嘗試包括節(jié)目標(biāo)題放大至左上角讓重點(diǎn)信息更明顯、去掉系統(tǒng)自帶navigation bar讓體驗(yàn)更沉浸、微立體的icon更具電臺(tái)氛圍、寬進(jìn)度條用戶更好操作······小小的播放頁(yè)凝結(jié)了設(shè)計(jì)師們?cè)S多的思考和心血，趕快下載新版企鵝FM體驗(yàn)一下吧！

新版本面性圖標(biāo)：

反思：設(shè)計(jì)與產(chǎn)品的一致性

作為設(shè)計(jì)師，我們往往關(guān)注的是設(shè)計(jì)本身的一致性，而常常忽略與產(chǎn)品本身發(fā)展趨勢(shì)的一致性。

我們的產(chǎn)品和行業(yè)是時(shí)常在發(fā)展中的——有時(shí)候因?yàn)橥獠凯h(huán)境迫使產(chǎn)品轉(zhuǎn)型，比如“閱后即焚”這個(gè)概念受到青少年追捧時(shí)，各大社交平臺(tái)自然不能坐以待斃；有時(shí)候因?yàn)榱孔円l(fā)了質(zhì)變，比如新版App Store，當(dāng)新游戲的數(shù)量已經(jīng)在新應(yīng)用總量中占比逼近50%的時(shí)候，蘋(píng)果將其從“App”中剝離出來(lái)成立獨(dú)立門(mén)類(lèi)，在iOS11中與App平行層級(jí)；有的是因?yàn)楫a(chǎn)品調(diào)整了戰(zhàn)略方向，比如SNS社交媒體化、電商內(nèi)容化·····

以上林林總總的產(chǎn)品趨勢(shì)，有的出于自覺(jué)，有的是被迫變革。企鵝FM的變革，其中既有本身的產(chǎn)品屬性與內(nèi)容量變質(zhì)變的內(nèi)因，又有行業(yè)趨勢(shì)與用戶取向的外因。設(shè)計(jì)師是否能在拿到產(chǎn)品需求時(shí)了解這些趨勢(shì)甚至主動(dòng)地洞察，是設(shè)計(jì)是否能與產(chǎn)品趨勢(shì)一致的前提。

解鈴還需系鈴人，設(shè)計(jì)師們擅長(zhǎng)優(yōu)雅地解決問(wèn)題，更要學(xué)會(huì)靈敏地發(fā)現(xiàn)問(wèn)題。