荔枝FM交互飛機稿

11 評論 10265 瀏覽 107 收藏 11 分鐘

已經使用了近兩年的荔枝FM,身為一個產品經理,一直對荔枝FM的使用邏輯和交互體驗感到費解,所以今天就小試牛刀!

先看下現在荔枝FM主體框架:

5DEF.tm

荔枝FM基礎框架分析

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

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

第一節:主頁交互設計優化

設計概念:簡潔、少即是多

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

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

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

于是有了右邊的界面設計

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

功能點介紹:

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

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

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

【搜索】:搜索去到另外一個界面,配合分類引導進行更多展示,設計理由

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

5FB2.tm

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

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

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

  • 保留用戶習慣的電臺,是從用戶的出發點
  • 簡介+播放按鈕+播放列表:能夠知道我經常播放的這個電臺的基本信息,足矣!

第二節:電臺詳情

設計概念:以核心帶動相關設計

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

6007.tm

功能點分區:

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

版本存在問題有:

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

因此有了右邊的界面

分析用戶:電臺詳情頁面由三部分組成【電臺簡介】【電臺中間操作區】【節目列表】,從用戶的角度出發分析,我進入一個電臺,有已知和未知的區別

  • 【已知】:聽電臺就好,如果更感興趣,歡迎參與和本電臺的其他相關功能,社區、投稿、訂閱
  • 【未知】:了解電臺詳情,了解電臺文化

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

關于交互:

業內很多人一直在追求交互設計,交互設計的概念也被大家炒得很玄乎,也相繼不少大廠出了很多書,例如:《身邊的設計》、《破繭成蝶》、《設計之下》這類耳熟能詳的書,確實這些也絕對是高品質的讀物

對荔枝FM個人總結交互設計大概分為

  1. 框架
  2. 基礎交互

框架

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

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

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

以上五點確定了交互框架,接下來就是確定基礎交互

基礎交互

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

相關頁面設計

QQ20150924111655

QQ20150924111706

總結:做了這么久的產品經理,關于交互其實想說一句:適合自己項目的交互是最好的交互。

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

 

本文由 @kyd0311 原創發布于人人都是產品經理?,未經許可,禁止轉載。

更多精彩內容,請關注人人都是產品經理微信公眾號或下載App
評論
評論請登錄
  1. 你是用哪個版本做比較的,我怎么看不到

    來自浙江 回復
  2. 發現頁面的設計并不是很贊同,這樣做的話就僅僅只是個電臺了……各個電臺的曝光率不足,對于目的性不是太強的用戶他們會茫然,想聽最新相聲,不限制具體的節目,可能就無從下手了……個人觀點。

    來自北京 回復
    1. 首先荔枝FM官方給人的定位是一個電臺,然后還是一個集合聽眾和播客的電臺。
      傳統電臺本身的特點是【隨性】【固定】隨便調下臺,好不好聽,好聽多聽會,不好聽換臺。固定是指能夠有自己喜歡的,比如中國之聲,XXX交通電臺。
      在互聯網上行為模擬,隨便找個電臺(當然首頁是一些優質的)調兩下,或者是搜索自己熟悉的電臺,比如花田FM,用戶行為得到模擬,思路也比較清晰

      對于定向以及更多播客的展示,其實我想說,對于聽眾來說,如果要去找,總會進入搜索界面,如果不去找,你展示再多,也不會看你。如果你想找個相聲電臺,搜索,相聲頻道,就可以了。

      來自廣東 回復
  3. 不是說交互嗎?GIF動態圖或flash動態圖都沒有,算哪門子交互?

    來自廣東 回復
    1. 交互,并不一定是非要GIF圖才可以,如果不明白,請移步百度百科,鏈接如下 ??
      http://baike.baidu.com/link?url=9gDeFjS-2vdJcgSFVWkdva6fvUkhfvi8PtXSwm-wZQ9JAvsLJar4UGD8A6xa6UhIrDY9bhGNR89ejEnPzasuaK

      來自廣東 回復
    2. 哈哈哈,不用對這個外行解釋

      來自北京 回復
  4. 好贊??! ? 一直對荔枝的設計有點覺得不好 !樓主威武~

    來自廣東 回復
    1. 其實只是搞不清楚他的發展是走播客平臺還是走工具路線,沒事的時候擼了一份而已! :mrgreen:

      來自廣東 回復
  5. 好贊! ??

    來自廣東 回復