在首頁的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. 按照十點讀書本身的內容體系設計了導航以下的內容版塊，以達到向十點自媒體引流、推薦課程的目的。

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

本文由@Jalyn 原創發布于人人都是產品經理，未經允許，禁止轉載。

題圖來自Unspalsh, 基于CC0協議。