在首頁(yè)的Redesign之前，首先要思考號(hào)首頁(yè)應(yīng)該承載哪些內(nèi)容，承擔(dān)什么責(zé)任，達(dá)到什么目的。

上一篇文章《內(nèi)容產(chǎn)品：如何設(shè)計(jì)清晰友好的首界面（一）》 寫(xiě)了十點(diǎn)APP首頁(yè)存在的幾個(gè)問(wèn)題，總結(jié)一下：

1. 首頁(yè)放置了太多 icon ，導(dǎo)致界面凌亂；
2. 頂部功能區(qū)功能過(guò)多；
3. 輪播圖沒(méi)有設(shè)計(jì)規(guī)范，與系統(tǒng)狀態(tài)欄、頂部功能區(qū)“亂作一團(tuán)”；
4. 導(dǎo)航不夠清晰，并且沒(méi)有涵蓋所有內(nèi)容類(lèi)型；
5. 懸浮按鈕太多且功能重復(fù)。

下面開(kāi)始思考如何 Redesign，在這之前，首先要想一下首頁(yè)應(yīng)該承載哪些內(nèi)容，承擔(dān)什么責(zé)任，達(dá)到什么目的。

以網(wǎng)易云音樂(lè) v6.0.1 為例，首頁(yè)是叫做“發(fā)現(xiàn)”的 Tab，我將這個(gè)界面分為兩大部分：

• 第一部分由輪播圖、導(dǎo)航、推薦歌單、新碟/新歌四個(gè)版塊組成的，這是核心區(qū)域，負(fù)責(zé)向用戶(hù)展示云音樂(lè)最重要、最核心的內(nèi)容，如歌單和音樂(lè)庫(kù)；
• 第二部分是“云村精選”，用于滿(mǎn)足用戶(hù)的“閑逛”需求，與 Tab 名稱(chēng)“發(fā)現(xiàn)”呼應(yīng)。這里使用了現(xiàn)在比較容易抓住和留住用戶(hù)的視頻信息流，根據(jù)用戶(hù)行為推薦視頻內(nèi)容，中間插入直播推薦、歌單推薦、話(huà)題推薦、會(huì)員專(zhuān)屬內(nèi)容推薦等，從而達(dá)到為其他版塊引流的目的。

得到 v5.7.0 的首頁(yè)也叫做“發(fā)現(xiàn)”，內(nèi)容與版塊的安排同樣有規(guī)律可循，我也將其分為兩大部分：

第一部分是輪播圖、導(dǎo)航、直播預(yù)告/入口、羅輯思維&李翔知識(shí)內(nèi)參組成的核心區(qū)域，用戶(hù)可以在這里找到自己想要的以及得到APP中最核心的內(nèi)容；

第二部分我歸納為由“與導(dǎo)航對(duì)應(yīng)的版塊+話(huà)題式內(nèi)容推薦版塊”組成：

1. 與導(dǎo)航對(duì)應(yīng)的版塊：得到APP的導(dǎo)航包括聽(tīng)書(shū)、電子書(shū)、商城、專(zhuān)題、課程五個(gè)部分，“每天聽(tīng)本書(shū)”版塊與導(dǎo)航中“聽(tīng)書(shū)”對(duì)應(yīng)，“最近更新的課程”、“熱門(mén)排行榜”與導(dǎo)航中“課程”對(duì)應(yīng)，“電子書(shū)獨(dú)家特價(jià)”與導(dǎo)航中“電子書(shū)”對(duì)應(yīng)，“實(shí)物商城”與導(dǎo)航中”商城“對(duì)應(yīng)。
2. 話(huà)題式內(nèi)容推薦版塊：第二部分更加注重向用戶(hù)推薦內(nèi)容，采用了較為靈活的“話(huà)題式”推薦方式，即提煉、設(shè)置話(huà)題，圍繞話(huà)題推薦合適的內(nèi)容，可能推薦一套課程，也可能推薦某套課程中某一節(jié)。例如話(huà)題”幫你新增四種思維“中推薦了梁寧的產(chǎn)品思維 30 講整套課程，而話(huà)題”跟微信學(xué)產(chǎn)品迭代的學(xué)問(wèn)“中則推薦了梁寧產(chǎn)品思維30講中的第 16 節(jié)課”系統(tǒng)迭代：微信紅包的意外與刻意“。

在上面的兩個(gè)例子中，首頁(yè)都承擔(dān)著以下作用：

1. 讓用戶(hù)第一時(shí)間知道這是什么類(lèi)型的 APP，可以提供哪些內(nèi)容，用戶(hù)知道去哪里找自己想要的內(nèi)容；
2. 為用戶(hù)推薦內(nèi)容，向重要內(nèi)容引流。

回過(guò)頭來(lái)看十點(diǎn)讀書(shū) APP，暫時(shí)還沒(méi)有看出首頁(yè)內(nèi)容版塊設(shè)置的邏輯和規(guī)律，但是可以推測(cè)出十點(diǎn)APP想通過(guò)首頁(yè)達(dá)到的目的：

1. 用戶(hù)可以通過(guò)首頁(yè)導(dǎo)航、搜索等找到想要的內(nèi)容；
2. 推薦十點(diǎn)號(hào)大 V，向十點(diǎn)號(hào)自媒體引流；
3. 展示和推薦重要的課程。

因此我將以上述三點(diǎn)為原則，展開(kāi)對(duì)十點(diǎn)讀書(shū) APP 首頁(yè)的 Redesign。

目前十點(diǎn) APP 呈現(xiàn)出的內(nèi)容類(lèi)型和結(jié)構(gòu)如下圖所示：

十點(diǎn)讀書(shū)APP現(xiàn)有內(nèi)容結(jié)構(gòu)

通過(guò)上圖我們可以看到，十點(diǎn) APP 劃分了多個(gè)類(lèi)目，每個(gè)類(lèi)目包含 2-3 個(gè)層級(jí)，且類(lèi)目與層級(jí)間有重合的部分、關(guān)系混亂，例如“成長(zhǎng)圖書(shū)館”中的“傳記”打開(kāi)后直接跳轉(zhuǎn)至“人物故事館”類(lèi)目。

我仔細(xì)看了各個(gè)類(lèi)目中的內(nèi)容，個(gè)人認(rèn)為可將十點(diǎn)讀書(shū) APP 的內(nèi)容分成以下幾個(gè)大類(lèi)：

• 有聲書(shū)
• 精選好課
• 十點(diǎn)電臺(tái)
• 熊爺解憂(yōu)書(shū)庫(kù)
• 十點(diǎn)號(hào)自媒體

由于底部 Tab 欄中的“發(fā)現(xiàn)”即為十點(diǎn)號(hào)內(nèi)容信息流，因此無(wú)需在導(dǎo)航中設(shè)置“十點(diǎn)號(hào)”，那么整理后的導(dǎo)航結(jié)構(gòu)如下：

十點(diǎn)讀書(shū) APP 導(dǎo)航結(jié)構(gòu)優(yōu)化

• 有聲書(shū) 由“成長(zhǎng)圖書(shū)館”、“人物圖書(shū)館”、“精品有聲書(shū)”、“有聲書(shū)”合并而來(lái)，在內(nèi)部按照文學(xué)、傳記、歷史、小說(shuō)等屬性進(jìn)行分類(lèi)；
• 精選好課 原位于首頁(yè)底部的“精選好課”版塊加入頂部宮格導(dǎo)航中，內(nèi)部按照職場(chǎng)、人文社科等屬性分類(lèi)；
• 十點(diǎn)電臺(tái) 原“治愈電臺(tái)”只推薦主播的十點(diǎn)號(hào)而非直接推薦電臺(tái)節(jié)目，用戶(hù)獲取電臺(tái)內(nèi)容的路徑較長(zhǎng)。新的“十點(diǎn)電臺(tái)”直接推薦電臺(tái)節(jié)目，并將同為電臺(tái)類(lèi)型的“睡前兒童故事”納入其中，內(nèi)部也會(huì)按照電臺(tái)屬性分類(lèi)；
• 熊爺解憂(yōu)書(shū)庫(kù) 谷聲熊可以理解為十點(diǎn)讀書(shū)自己的 IP 或吉祥物，因?yàn)樽鳛閱为?dú)的一部分存在，內(nèi)部按照原有的效率、習(xí)慣、理財(cái)?shù)冗M(jìn)行分類(lèi)。

導(dǎo)航結(jié)構(gòu)重新優(yōu)化后也就解決了上面提到三個(gè)原則中第一條：用戶(hù)可以通過(guò)首頁(yè)導(dǎo)航、搜索等找到想要的內(nèi)容。

接下來(lái)考慮導(dǎo)航以下部分的版塊布局，結(jié)合目前線(xiàn)上十點(diǎn)讀書(shū) APP 的內(nèi)容布局，可以推測(cè)出十點(diǎn)讀書(shū)非常重視十點(diǎn)號(hào)自媒體內(nèi)容的展示，向自媒體引流，引導(dǎo)用戶(hù)關(guān)注大 V，所以后面版塊設(shè)置時(shí)需要同樣注意向十點(diǎn)號(hào)引流。

這里其實(shí)考驗(yàn)的是內(nèi)容的運(yùn)營(yíng)策劃能力，可以借鑒得到APP的模式，利用話(huà)題推薦內(nèi)容等。

綜上所述，我對(duì)十點(diǎn)讀書(shū) APP 首界面的 Redesign 如下圖所示：

十點(diǎn)讀書(shū) APP Redesign 原型圖

1. “日簽”功能入口轉(zhuǎn)移至界面左上角；
2. 將“下載管理”入口從首頁(yè)移除，可考慮收納進(jìn)“已購(gòu)” Tab；
3. 將“歷史記錄”入口從首頁(yè)移除，原因是播放器本身已經(jīng)保留了用戶(hù)的播放歷史，用戶(hù)是否有查閱多條、多天前歷史記錄的需求未可知；
4. 重新規(guī)劃設(shè)計(jì)宮格導(dǎo)航，避免給用戶(hù)過(guò)多模糊的選項(xiàng)；
5. 按照十點(diǎn)讀書(shū)本身的內(nèi)容體系設(shè)計(jì)了導(dǎo)航以下的內(nèi)容版塊，以達(dá)到向十點(diǎn)自媒體引流、推薦課程的目的。

以上為全部?jī)?nèi)容，本文僅用于學(xué)習(xí)，并不針對(duì)任何組織和個(gè)人。

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

題圖來(lái)自Unspalsh, 基于CC0協(xié)議。