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

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

荔枝FM基礎框架分析

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

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

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

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

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

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

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

於是有了右邊的界面設計

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

功能點介紹:

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

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

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

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

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

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

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

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

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

第二節:電台詳情

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

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

功能點分區:

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

版本存在問題有:

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

因此有了右邊的界面

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

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

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

關於交互:

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

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

  1. 框架
  2. 基礎交互

框架

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

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

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

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

基礎交互

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

相關頁面設計

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

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

 

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