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

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

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

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

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

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

設(shè)計概念：簡潔、少即是多

梳理主頁邏輯：主頁分為【搜索】【分類Tab】【首頁按鈕】【播放快捷按鈕】【推薦電臺】【底部導航】

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

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

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

設(shè)計功能點：【頂部標簽】、【搜索】【推薦電臺】【底部播放菜單欄】

功能點介紹：

【頂部標簽】：雖然越來越多的操作菜單因為大屏被移到界面底部，但這里的設(shè)計理由為

• 對C端的用戶來說，錄制按鈕不會經(jīng)常點，也不會去點
• 播客們不管你按鈕在哪，都是一樣，不會說你在上面就感覺很不舒服，即使不舒服也一樣去點

采用犧牲播客們的體驗原因是：如果聽客們，覺得應用不舒服，你的流量如何提升

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

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

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

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

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

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

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

設(shè)計概念：以核心帶動相關(guān)設(shè)計

電臺詳情的框架思維導圖如下

功能點分區(qū)：

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

版本存在問題有：

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

因此有了右邊的界面

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

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

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

關(guān)于交互：

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

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

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

框架

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

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

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

以上五點確定了交互框架，接下來就是確定基礎(chǔ)交互

基礎(chǔ)交互

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

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

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

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

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