全栈工程师?
嗯.....目前并不是!

內容產品:如何設計清晰友好的首頁(二)

在首頁的Redesign之前,首先要思考號首頁應該承載哪些內容,承擔什麼責任,達到什麼目的。

上一篇文章《內容產品:如何設計清晰友好的首界面(一)》 寫了十點APP首頁存在的幾個問題,總結一下:

  1. 首頁放置了太多 icon ,導致界面凌亂;
  2. 頂部功能區功能過多;
  3. 輪播圖沒有設計規範,與系統狀態欄、頂部功能區“亂作一團”;
  4. 導航不夠清晰,並且沒有涵蓋所有內容類型;
  5. 懸浮按鈕太多且功能重複。

下面開始思考如何 Redesign,在這之前,首先要想一下首頁應該承載哪些內容,承擔什麼責任,達到什麼目的。

以網易雲音樂 v6.0.1 為例,首頁是叫做“發現”的 Tab,我將這個界面分為兩大部分:

  • 第一部分由輪播圖、導航、推薦歌單、新碟/新歌四個版塊組成的,這是核心區域,負責向用戶展示雲音樂最重要、最核心的內容,如歌單和音樂庫;
  • 第二部分是“雲村精選”,用於滿足用戶的“閑逛”需求,與 Tab 名稱“發現”呼應。這裡使用了現在比較容易抓住和留住用戶的視頻信息流,根據用戶行為推薦視頻內容,中間插入直播推薦、歌單推薦、話題推薦、會員專屬內容推薦等,從而達到為其他版塊引流的目的。

得到 v5.7.0 的首頁也叫做“發現”,內容與版塊的安排同樣有規律可循,我也將其分為兩大部分:

第一部分是輪播圖、導航、直播預告/入口、羅輯思維&李翔知識內參組成的核心區域,用戶可以在這裡找到自己想要的以及得到APP中最核心的內容;

第二部分我歸納為由“與導航對應的版塊+話題式內容推薦版塊”組成:

  1. 與導航對應的版塊:得到APP的導航包括聽書、電子書、商城、專題、課程五個部分,“每天聽本書”版塊與導航中“聽書”對應,“最近更新的課程”、“熱門排行榜”與導航中“課程”對應,“電子書獨家特價”與導航中“電子書”對應,“實物商城”與導航中”商城“對應。
  2. 話題式內容推薦版塊:第二部分更加註重向用戶推薦內容,採用了較為靈活的“話題式”推薦方式,即提煉、設置話題,圍繞話題推薦合適的內容,可能推薦一套課程,也可能推薦某套課程中某一節。例如話題”幫你新增四種思維“中推薦了梁寧的產品思維 30 講整套課程,而話題”跟微信學產品迭代的學問“中則推薦了梁寧產品思維30講中的第 16 節課”系統迭代:微信紅包的意外與刻意“。

在上面的兩個例子中,首頁都承擔著以下作用:

  1. 讓用戶第一時間知道這是什麼類型的 APP,可以提供哪些內容,用戶知道去哪裡找自己想要的內容;
  2. 為用戶推薦內容,向重要內容引流。

回過頭來看十點讀書 APP,暫時還沒有看出首頁內容版塊設置的邏輯和規律,但是可以推測出十點APP想通過首頁達到的目的:

  1. 用戶可以通過首頁導航、搜索等找到想要的內容;
  2. 推薦十點號大 V,向十點號自媒體引流;
  3. 展示和推薦重要的課程。

因此我將以上述三點為原則,展開對十點讀書 APP 首頁的 Redesign。

目前十點 APP 呈現出的內容類型和結構如下圖所示:

內容產品如何設計清晰友好的首頁(二)

十點讀書APP現有內容結構

通過上圖我們可以看到,十點 APP 劃分了多個類目,每個類目包含 2-3 個層級,且類目與層級間有重合的部分、關係混亂,例如“成長圖書館”中的“傳記”打開后直接跳轉至“人物故事館”類目。

我仔細看了各個類目中的內容,個人認為可將十點讀書 APP 的內容分成以下幾個大類:

  • 有聲書
  • 精選好課
  • 十點電台
  • 熊爺解憂書庫
  • 十點號自媒體

由於底部 Tab 欄中的“發現”即為十點號內容信息流,因此無需在導航中設置“十點號”,那麼整理后的導航結構如下:

內容產品如何設計清晰友好的首頁(二)

十點讀書 APP 導航結構優化

  • 有聲書 由“成長圖書館”、“人物圖書館”、“精品有聲書”、“有聲書”合併而來,在內部按照文學、傳記、歷史、小說等屬性進行分類;
  • 精選好課 原位於首頁底部的“精選好課”版塊加入頂部宮格導航中,內部按照職場、人文社科等屬性分類;
  • 十點電台 原“治癒電台”只推薦主播的十點號而非直接推薦電台節目,用戶獲取電台內容的路徑較長。新的“十點電台”直接推薦電台節目,並將同為電台類型的“睡前兒童故事”納入其中,內部也會按照電台屬性分類;
  • 熊爺解憂書庫 谷聲熊可以理解為十點讀書自己的 IP 或吉祥物,因為作為單獨的一部分存在,內部按照原有的效率、習慣、理財等進行分類。

導航結構重新優化后也就解決了上面提到三個原則中第一條:用戶可以通過首頁導航、搜索等找到想要的內容。

接下來考慮導航以下部分的版塊布局,結合目前線上十點讀書 APP 的內容布局,可以推測出十點讀書非常重視十點號自媒體內容的展示,向自媒體引流,引導用戶關注大 V,所以後面版塊設置時需要同樣注意向十點號引流。

這裡其實考驗的是內容的運營策劃能力,可以借鑒得到APP的模式,利用話題推薦內容等。

綜上所述,我對十點讀書 APP 首界面的 Redesign 如下圖所示:

內容產品如何設計清晰友好的首頁(二)

十點讀書 APP Redesign 原型圖

  1. “日簽”功能入口轉移至界面左上角;
  2. 將“下載管理”入口從首頁移除,可考慮收納進“已購” Tab;
  3. 將“歷史記錄”入口從首頁移除,原因是播放器本身已經保留了用戶的播放歷史,用戶是否有查閱多條、多天前歷史記錄的需求未可知;
  4. 重新規劃設計宮格導航,避免給用戶過多模糊的選項;
  5. 按照十點讀書本身的內容體系設計了導航以下的內容版塊,以達到向十點自媒體引流、推薦課程的目的。

以上為全部內容,本文僅用於學習,並不針對任何組織和個人。

 

版权声明:本文采用知识共享 署名4.0国际许可协议 [BY-NC-SA] 进行授权
文章名称:《內容產品:如何設計清晰友好的首頁(二)》
文章链接:https://www.pmbear.com/archives/9420
本站资源仅供个人学习交流,请于下载后24小时内删除,不允许用于商业用途,否则法律问题自行承担。

评论 抢沙发

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址

大前端WP主题 更专业 更方便

联系我们联系我们