已經(jīng)使用了近兩年的荔枝FM，身為一個(gè)產(chǎn)品經(jīng)理，一直對(duì)荔枝FM的使用邏輯和交互體驗(yàn)感到費(fèi)解，所以今天就小試牛刀！

先看下現(xiàn)在荔枝FM主體框架：

荔枝FM基礎(chǔ)框架分析

在使用的時(shí)候，會(huì)發(fā)現(xiàn)，整體框架并不是按照用戶的使用邏輯去設(shè)計(jì)的，而是根據(jù)形態(tài)學(xué)上的邏輯來(lái)設(shè)計(jì)的，所以會(huì)存在很多讓用戶覺(jué)得不舒服的地方，但殊途同歸，我們歸納后大致分為以下三條路線

• 邏輯線路1：用戶進(jìn)入應(yīng)用，瀏覽/搜索想要的電臺(tái)——找到不錯(cuò)的電臺(tái)——看到電臺(tái)的節(jié)目列表——聽(tīng)故事
• 邏輯線路2：用戶當(dāng)前在這個(gè)電臺(tái)——去社區(qū)參加討論——了解更多的電臺(tái)資料——投稿/分享
• 邏輯線路3：自己創(chuàng)建一個(gè)電臺(tái)——錄音/剪輯——發(fā)布給大家

第一節(jié)：主頁(yè)交互設(shè)計(jì)優(yōu)化

設(shè)計(jì)概念：簡(jiǎn)潔、少即是多

梳理主頁(yè)邏輯：主頁(yè)分為【搜索】【分類Tab】【首頁(yè)按鈕】【播放快捷按鈕】【推薦電臺(tái)】【底部導(dǎo)航】

分析界面重點(diǎn)：作為平臺(tái)方，能夠盡可能的展現(xiàn)更多的電臺(tái)內(nèi)容是沒(méi)錯(cuò)的，于是就有了現(xiàn)在這一版本的界面，但作為用戶，用戶主要可以分為【被動(dòng)接受者】【主動(dòng)索取者】

• 【被動(dòng)接受者】：你給我什么內(nèi)容就是什么內(nèi)容，這個(gè)內(nèi)容不好我就換，好聽(tīng)我就聽(tīng)會(huì)
• 【主動(dòng)索取者】：我想要某些電臺(tái)，我自己知道其名字和分類，你能讓我快速找到就好

于是有了右邊的界面設(shè)計(jì)

設(shè)計(jì)功能點(diǎn)：【頂部標(biāo)簽】、【搜索】【推薦電臺(tái)】【底部播放菜單欄】

功能點(diǎn)介紹：

【頂部標(biāo)簽】：雖然越來(lái)越多的操作菜單因?yàn)榇笃帘灰频浇缑娴撞浚@里的設(shè)計(jì)理由為

• 對(duì)C端的用戶來(lái)說(shuō)，錄制按鈕不會(huì)經(jīng)常點(diǎn)，也不會(huì)去點(diǎn)
• 播客們不管你按鈕在哪，都是一樣，不會(huì)說(shuō)你在上面就感覺(jué)很不舒服，即使不舒服也一樣去點(diǎn)

采用犧牲播客們的體驗(yàn)原因是：如果聽(tīng)客們，覺(jué)得應(yīng)用不舒服，你的流量如何提升

【搜索】：搜索去到另外一個(gè)界面，配合分類引導(dǎo)進(jìn)行更多展示，設(shè)計(jì)理由

• 主頁(yè)承載太多信息，需要進(jìn)行信息區(qū)分
• 對(duì)于主動(dòng)索取信息的用戶，可以直接來(lái)搜索，即精準(zhǔn)搜索
• 對(duì)于被動(dòng)獲取的用戶來(lái)說(shuō)，他們想要的不是有一大波的數(shù)據(jù)來(lái)給我挑，而是你能引導(dǎo)我，快速找到我想找到的，少即是多，因此給了相關(guān)分類列表

【推薦電臺(tái)列表】：少即是多的原理，目前主頁(yè)選擇性太多，可以自由選擇，但就像聽(tīng)音樂(lè)一樣，用戶進(jìn)入App的出發(fā)點(diǎn)是能夠找到一個(gè)電臺(tái)，打發(fā)點(diǎn)時(shí)間，結(jié)果你還給我這么多的選擇，界面信息量又要處理，這是一種很糟糕的體驗(yàn)。設(shè)計(jì)理由：

• 少即是多：根據(jù)小編或者用戶點(diǎn)播不錯(cuò)的電臺(tái)放出來(lái)，保證用戶能夠快速隨性的獲取到自己想要的東西
• 采用手勢(shì)操作：上下滑動(dòng)進(jìn)行電臺(tái)切換，點(diǎn)擊即切換電臺(tái)播放，模擬真實(shí)的電臺(tái)習(xí)慣

【底部播放菜單欄】：常用操作，對(duì)于一個(gè)有聽(tīng)廣播習(xí)慣的人來(lái)說(shuō)，我會(huì)經(jīng)常固定的聽(tīng)我喜歡的電臺(tái)，而不是經(jīng)常去換。設(shè)計(jì)理由：

• 保留用戶習(xí)慣的電臺(tái)，是從用戶的出發(fā)點(diǎn)
• 簡(jiǎn)介+播放按鈕+播放列表：能夠知道我經(jīng)常播放的這個(gè)電臺(tái)的基本信息，足矣！

第二節(jié)：電臺(tái)詳情

設(shè)計(jì)概念：以核心帶動(dòng)相關(guān)設(shè)計(jì)

電臺(tái)詳情的框架思維導(dǎo)圖如下

功能點(diǎn)分區(qū)：

• 原版面對(duì)電臺(tái)的功能有：【分享】【訂閱】【勾搭主播】【投稿】
• 原版面對(duì)節(jié)目的功能有：【分享】【播放】【點(diǎn)贊】【緩存】【信息】【更多操作】
• 原版面其他功能：操作，快捷播放入口

版本存在問(wèn)題有：

• 功能點(diǎn)區(qū)分不夠明顯
• 功能點(diǎn)的重點(diǎn)不明確
• 各種操作混亂雜糅

因此有了右邊的界面

分析用戶：電臺(tái)詳情頁(yè)面由三部分組成【電臺(tái)簡(jiǎn)介】【電臺(tái)中間操作區(qū)】【節(jié)目列表】，從用戶的角度出發(fā)分析，我進(jìn)入一個(gè)電臺(tái)，有已知和未知的區(qū)別

• 【已知】：聽(tīng)電臺(tái)就好，如果更感興趣，歡迎參與和本電臺(tái)的其他相關(guān)功能，社區(qū)、投稿、訂閱
• 【未知】：了解電臺(tái)詳情，了解電臺(tái)文化

1. 播放區(qū)域：播放音樂(lè)相同的體驗(yàn)，希望能把播客當(dāng)成音樂(lè)來(lái)聽(tīng)，至于快進(jìn)15s和往后退15秒的概念其實(shí)已經(jīng)可以不用再出現(xiàn)了，對(duì)于定時(shí)播放的概念，可以在設(shè)置中統(tǒng)一實(shí)現(xiàn)
2. 播客簡(jiǎn)介：一個(gè)播主，最想要的是別人了解他，聽(tīng)他的節(jié)目，分享他的節(jié)目，因此播客的介紹有必要進(jìn)行提升，甚至可以增加更多新鮮功能
3. 操作區(qū)：對(duì)于節(jié)目的操作和對(duì)本播客的操作，對(duì)節(jié)目的操作有緩存和贊，對(duì)播客的操作有投稿、社區(qū)、列表，進(jìn)一步的將用戶和播客的交互提煉了！
4. 關(guān)于分享：在原版中的分享有分享節(jié)目和分享播客的區(qū)別，但是從行為學(xué)的角度來(lái)說(shuō)，當(dāng)你分享了一個(gè)節(jié)目，自然會(huì)帶上這個(gè)播客，既然有重復(fù)，何必要多加一個(gè)功能呢？

關(guān)于交互：

業(yè)內(nèi)很多人一直在追求交互設(shè)計(jì)，交互設(shè)計(jì)的概念也被大家炒得很玄乎，也相繼不少大廠出了很多書(shū)，例如：《身邊的設(shè)計(jì)》、《破繭成蝶》、《設(shè)計(jì)之下》這類耳熟能詳?shù)臅?shū)，確實(shí)這些也絕對(duì)是高品質(zhì)的讀物

對(duì)荔枝FM個(gè)人總結(jié)交互設(shè)計(jì)大概分為

1. 框架
2. 基礎(chǔ)交互

框架

框架層主要是幾個(gè)主要界面的界定【查看電臺(tái)】【錄制節(jié)目】【播放詳情】【搜索】【設(shè)置】這5個(gè)界面

這五個(gè)界面相當(dāng)于一級(jí)導(dǎo)航，無(wú)論是聽(tīng)客還是播客在這五個(gè)界面就已經(jīng)完全可以完成他想做的事情

• 查看電臺(tái)作為電臺(tái)陳列的入口，提供優(yōu)質(zhì)電臺(tái)的推薦和展示的功能，配合搜索功能將整個(gè)平臺(tái)的電臺(tái)節(jié)目進(jìn)行展示，既保證了電臺(tái)播客只要做得好，就能有機(jī)會(huì)展示，也保證了聽(tīng)客在這里能夠聽(tīng)到好的內(nèi)容。
• 錄制節(jié)目是直接給播客們的入口，快速到達(dá)指定位置作業(yè)，完成錄制并發(fā)布，一氣呵成
• 播放詳情結(jié)合電臺(tái)詳情，深挖人和電臺(tái)的關(guān)系，綜合社區(qū)、投稿以及欄目的介紹，讓人和電臺(tái)更專一
• 設(shè)置綜合了用戶的雙重身份，既可以是一個(gè)聽(tīng)眾，又可以是一個(gè)播客

以上五點(diǎn)確定了交互框架，接下來(lái)就是確定基礎(chǔ)交互

基礎(chǔ)交互

基礎(chǔ)交互層主要是界面的操作交互，對(duì)于首頁(yè)查看電臺(tái)來(lái)說(shuō)，摒棄一貫的陳列式顯示，改成滑動(dòng)操作，在交互上增加了刺激，上下滑動(dòng)切換電臺(tái)是對(duì)古老的收音機(jī)進(jìn)行模擬；采用底部播放快捷入口，點(diǎn)擊進(jìn)入播放詳情，類似豆瓣FM的體驗(yàn)；搜索則將搜索和推薦結(jié)合做到基礎(chǔ)的引導(dǎo)；社區(qū)則采用開(kāi)放式的交流，采用微信式的交互體驗(yàn)，保證用戶在使用習(xí)慣上的統(tǒng)一

相關(guān)頁(yè)面設(shè)計(jì)

總結(jié)：做了這么久的產(chǎn)品經(jīng)理，關(guān)于交互其實(shí)想說(shuō)一句：適合自己項(xiàng)目的交互是最好的交互。

之前帶過(guò)新人，也合作過(guò)一些同事，往往會(huì)遇到，看這個(gè)產(chǎn)品就是這樣的，看他們就是這樣做，看XXX設(shè)計(jì)原則就是這樣說(shuō)的，對(duì)于一個(gè)合格的產(chǎn)品經(jīng)理，希望大家真的把交互做到產(chǎn)品里面，而不是把概念做到產(chǎn)品里面

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