對(duì)于閱讀類的小程序來(lái)說，圖書詳情頁(yè)是用戶使用最多的頁(yè)面，應(yīng)該如何設(shè)計(jì)，才能讓用戶覺得好用、方便，從而保證留存呢？本文將聊聊圖書詳情頁(yè)設(shè)計(jì)的這點(diǎn)兒事兒。

一、圖書詳情頁(yè)的定義和作用

產(chǎn)品背景：有別于市面上的電子英語(yǔ)繪本跟讀式閱讀，該小程序鼓勵(lì)親子共讀英文紙質(zhì)繪本，為家長(zhǎng)和孩子提供了親子共讀課程及方法。解決對(duì)于英文繪本家長(zhǎng)不會(huì)讀、孩子很排斥的問題，從而達(dá)到閱讀啟蒙和英語(yǔ)啟蒙的目的。

圖書詳情頁(yè)是該小程序的核心功能：該頁(yè)面中針對(duì)一本英語(yǔ)繪本，展示了家長(zhǎng)和孩子需要學(xué)習(xí)和了解的內(nèi)容，通過頁(yè)面中學(xué)習(xí)路徑的一步步引導(dǎo)，完成從輸入到輸出的過程。

該頁(yè)面結(jié)構(gòu)是否清晰合理、使用是否簡(jiǎn)單方便、場(chǎng)景是否覆蓋較全，直接影響該頁(yè)面的留存，從而影響小程序的留存。

下面我來(lái)講講我的設(shè)計(jì)思路。

二、圖書詳情頁(yè)設(shè)計(jì)速思路

我將從閱讀場(chǎng)景閉環(huán)過程來(lái)整理思考圖書詳情頁(yè)的設(shè)計(jì)思路。

1. 選書

每一個(gè)家長(zhǎng)，包括我自己，當(dāng)開始為孩子選一本繪本，尤其是選一本非母語(yǔ)繪本時(shí)，是迷茫的。怕下單后孩子不喜歡，浪費(fèi)銀子。

而如果在購(gòu)買能提前了解繪本以及孩子對(duì)繪本的喜歡程度，那么就更有把握把繪本買回來(lái)精讀；而且大概率孩子也不太會(huì)排斥。

孩子不排斥是閱讀好的開始：共讀效果好，家長(zhǎng)自然對(duì)小程序更加信賴，還會(huì)通過同樣的方式再次進(jìn)行選書，形成良性循環(huán)。

因此為家長(zhǎng)提供繪本相關(guān)介紹包括：圖書簡(jiǎn)介、推薦語(yǔ)、帶讀視頻、以及老師寫賞析內(nèi)容（分別為右圖中的“來(lái)認(rèn)識(shí)這本書吧”、蝸牛薦語(yǔ)“、“視頻預(yù)覽”、“大咖賞析”），讓家長(zhǎng)多維角度了解一本書。從了解，到種草，最后做出是否購(gòu)買實(shí)體書并精讀的決策。

1）圖書簡(jiǎn)介——用簡(jiǎn)潔的描述，講述了這本書講了個(gè)什么故事的問題，讓家長(zhǎng)了解故事梗概以及主題立意，可以根據(jù)最近孩子的特點(diǎn)以及喜好，初步判斷這本書是否適合孩子。

例如，最近孩子進(jìn)入了淘氣的階段，當(dāng)家長(zhǎng)看到《No, David!》這本書的圖書簡(jiǎn)介時(shí)，就能清晰的了解這本書是一本教孩子學(xué)會(huì)守規(guī)矩、懂禮貌的繪本，從而會(huì)激發(fā)家長(zhǎng)對(duì)這本書的興趣。

2）推薦語(yǔ)——讓家長(zhǎng)清楚閱讀理由，解決我為什么要買這本書，這本書好在哪里的問題，進(jìn)而增加購(gòu)買這本書精讀的砝碼。

例如：獲獎(jiǎng)繪本和大師作品都是一本書權(quán)威性以及被認(rèn)可程度高的重要標(biāo)志，證明這本書更加值得帶孩子精讀。

3）帶讀視頻——用視頻的方式，讓家長(zhǎng)沉浸式的體驗(yàn)閱讀這本書的過程，從讀者的角度瀏覽一本書，解決這本書應(yīng)該怎么讀的問題；讓家長(zhǎng)對(duì)于故事情節(jié)以及閱讀互動(dòng)方法了解的更加深入，從而達(dá)到視覺種草的效果。

例如：《We’re Going on a Bear Hunt》這本書的帶讀視頻，是作者的親自演繹，把故事表演的非常精彩，讓靜態(tài)的繪本動(dòng)了起來(lái)，加深這本繪本在家長(zhǎng)心中的印象。

4）老師寫的賞析內(nèi)容——讓家長(zhǎng)看一看會(huì)讀的家庭真實(shí)的讀后感，更有代入感的想象到自己孩子閱讀過程中的反應(yīng)；以及站在美育的角度對(duì)繪本的欣賞與理解是怎樣的，進(jìn)而對(duì)這本書更加有所期待。

例如：《I am a Bunny》這本書老師寫的賞析部分，站在了兒童文學(xué)和藝術(shù)的視角，表達(dá)對(duì)這本繪本的喜愛與理解，讓家長(zhǎng)驚呼“哦！還有這一層視角~”。

當(dāng)決定購(gòu)買后，家長(zhǎng)不必再去商城中搜索商品；而是可以在圖書詳情頁(yè)可以直接下單購(gòu)買，縮短了購(gòu)買路徑，購(gòu)買更加方便。

小結(jié)：在讀前場(chǎng)景下，需要豐富優(yōu)質(zhì)的信息和資源，為家長(zhǎng)提供對(duì)繪本的擇選及精讀理由。

2.?讀書

該產(chǎn)品倡導(dǎo)的是親子共讀繪本，即：家長(zhǎng)給孩子將繪本故事，在閱讀過程中與孩子互動(dòng)，通過反復(fù)的親子閱讀互動(dòng)，達(dá)到閱讀啟蒙、英語(yǔ)啟蒙、增進(jìn)親子關(guān)系的目的。

因此在共讀環(huán)節(jié)中沒有任何人或視頻可以替代家長(zhǎng)的位置和作用，家長(zhǎng)即孩子的老師。

但經(jīng)過調(diào)研和電話回訪發(fā)現(xiàn)：大多數(shù)家長(zhǎng)具有不會(huì)讀、讀的淺、英語(yǔ)水平低不知道如何開始等問題。

為了解決這些問題，為家長(zhǎng)開辟了“家長(zhǎng)課堂”模塊，在讀中與讀后環(huán)節(jié)為家長(zhǎng)提供指導(dǎo)性建議。

“家長(zhǎng)課堂”分為2塊：讀中互動(dòng)方法、讀后擴(kuò)展內(nèi)容（分別為右圖中的：“讀中互動(dòng)”、“讀后擴(kuò)展”）；幫助家長(zhǎng)學(xué)會(huì)精讀繪本的方法，并能在閱讀過程中更好引導(dǎo)孩子，讓閱讀不再只是停留在看畫和讀字上。

1）讀中互動(dòng)——這個(gè)模塊只包含“親子共讀錦囊”這一個(gè)內(nèi)容，之所以叫“共讀錦囊”，是因?yàn)槊總€(gè)共讀方法是簡(jiǎn)短的、精煉的、可執(zhí)行的。

將一本書中關(guān)鍵的互動(dòng)點(diǎn)總結(jié)整理出來(lái)，既方便家長(zhǎng)在讀前的幾分鐘內(nèi)可以快速瀏覽完，做到迅速預(yù)習(xí)的效果，又可以在讀中黔驢技窮時(shí)加速定位與孩子互動(dòng)的突破口，解燃眉之急。

例如：《I am a Bunny》這本書，其中的一個(gè)共讀錦囊（見下圖），指導(dǎo)家長(zhǎng)在讀到某一頁(yè)時(shí)引導(dǎo)孩子進(jìn)行自我介紹，互動(dòng)時(shí)的英文如何表達(dá)，并且給出適合互動(dòng)的年齡范圍，手把手教家長(zhǎng)其中的技巧和方法。

2）讀后擴(kuò)展——包括“知識(shí)百科”、“拓展活動(dòng)”和“場(chǎng)景應(yīng)用”。在閱讀后的時(shí)間，可以通過給孩子講一講相關(guān)的知識(shí)，帶孩子做做有趣的手工活動(dòng)或小實(shí)驗(yàn)，以及將書里的段落或場(chǎng)景活學(xué)活用地融入生活中，多方面地將這本書中的內(nèi)容擴(kuò)展并融會(huì)貫通。加深對(duì)英語(yǔ)、對(duì)知識(shí)、對(duì)繪本的印象，在多維重復(fù)中看到“效果”。

解決了家長(zhǎng)的問題，我們來(lái)看看孩子的問題：

很多孩子會(huì)在剛接觸英文繪本時(shí)比較抵觸純英語(yǔ)內(nèi)容，為了解決這種抵觸心理，同樣基于閱讀路徑，分為讀前讀中讀后這3部分，一步步引導(dǎo)孩子接受并精讀英文繪本。

1. 讀前——在翻看繪本前，孩子通過聽“雙語(yǔ)精講”這種有母語(yǔ)環(huán)境又有故事情節(jié)的音頻，激發(fā)興趣。
2. 讀中——閱讀過程中，聽“高效磨耳”音頻，雖然是純英語(yǔ)境，但增加了環(huán)境音，讓孩子沉浸式的磨耳朵，培養(yǎng)語(yǔ)感。
3. 讀后——通過閱讀繪本增長(zhǎng)知識(shí)面是閱讀后為孩子們埋下的彩蛋，聽“知識(shí)拓展”音頻獲得百科知識(shí)，讓孩子對(duì)世界產(chǎn)生映射鏈接；“學(xué)表達(dá)”視頻中的美音外教教孩子純正發(fā)音，為朗讀輸出做好準(zhǔn)備。

上述的每個(gè)學(xué)習(xí)內(nèi)容都有3個(gè)信息展示，讓用戶清晰了解每個(gè)模塊的功能和作用：

1. 資源類型：包括音頻、視頻，由于本產(chǎn)品倡導(dǎo)親子共讀，閱讀紙質(zhì)圖書，少看電子屏，多進(jìn)行語(yǔ)言輸入，所以音頻類型內(nèi)容個(gè)數(shù)大大多于視頻類型內(nèi)容個(gè)數(shù)；
2. 資源名稱：讓用戶明確該模塊的主要內(nèi)容；
3. 動(dòng)作指示：包括聽一聽、磨一磨、學(xué)一學(xué)，等，引導(dǎo)用戶點(diǎn)擊學(xué)習(xí)模塊，并做出對(duì)應(yīng)動(dòng)作。

小結(jié)：在讀中場(chǎng)景下，需要將內(nèi)容按學(xué)習(xí)對(duì)象和閱讀路徑組合，讓用戶清晰了解每個(gè)閱讀步驟，引導(dǎo)其一步步精讀繪本，并完成閱讀閉環(huán)。

3.?輸出

“輸出”是完成學(xué)習(xí)閉環(huán)的最后一步，這里的輸出包括2部分UGC內(nèi)容：孩子朗讀輸出和家長(zhǎng)手記輸出。

如何讓用戶更加主動(dòng)的去輸出呢？

在孩子的朗讀輸出模塊“TA們都在開口”中，展示了朗讀人的個(gè)數(shù)，以及所有人的朗讀作品。

當(dāng)朗讀人數(shù)多時(shí)，激發(fā)起“湊熱鬧”的心理，也想讓自己的孩子試試；當(dāng)朗讀人數(shù)少時(shí)，也能激發(fā)起“嘗鮮者”的好奇心。

每個(gè)朗讀作品模塊只展示了用戶頭像、昵稱以及孩子當(dāng)時(shí)朗讀時(shí)的年齡，并沒有顯示作品的評(píng)星，避免了家長(zhǎng)和孩子怕讀不好星級(jí)低并被展示出來(lái)，而拒絕朗讀的心理。

家長(zhǎng)也可以了解同齡孩子在輸出方面的情況，從而大概了解孩子在同齡人中的水平，產(chǎn)生對(duì)比心理，刺激開口頻次。

家長(zhǎng)的輸出則是閱讀后記錄的閱讀過程和心得，是家長(zhǎng)對(duì)親子共讀過程中的反思與總結(jié)。

將關(guān)聯(lián)了這本書的手記展示在圖書詳情頁(yè)中，目的是讓共同讀這本書的家庭有歸屬感，減少孤獨(dú)感。

在瀏覽的過程中，可以“窺探”其他家庭讀這本書的心得，可以從中“偷師”，互相學(xué)習(xí)。

對(duì)于沒讀過這本書的家庭，進(jìn)到這本書的詳情頁(yè)的時(shí)候感到很熱鬧，有種：“這本書這么多人讀，可能是個(gè)經(jīng)典的書”，“我也得了解下想‘湊熱鬧’，也來(lái)帶孩子讀讀這本書”的想法。

而且在閱讀完之后，也會(huì)“效仿”其他用戶，記錄下閱讀手記；由此形成“看別人手記自己帶孩子閱讀記錄自己的閱讀感悟”的良性循環(huán)。

且家長(zhǎng)輸出的越多，證明小程序?yàn)槠涮峁┑膬?nèi)容可以滿足其親子共讀需要，用戶對(duì)小程序產(chǎn)生的信任度和忠誠(chéng)度也就越高；且越來(lái)越多的手記篇數(shù)累計(jì)，家長(zhǎng)會(huì)愈加依賴在小程序中記錄，從而保證黏性。

小結(jié)：在讀后場(chǎng)景下，將孩子朗讀作品與家長(zhǎng)的閱讀手記展示出來(lái)，可以形成輸出的良性循環(huán)。

綜上所述：

• 需要為家長(zhǎng)提供豐富的圖書相關(guān)信息，解決其選書的問題；
• 為家長(zhǎng)提供與孩子互動(dòng)的內(nèi)容和技巧，解決不知道如何進(jìn)行親子共讀和閱讀低效的問題；
• 按閱讀路徑規(guī)整組合孩子的學(xué)習(xí)內(nèi)容，解決對(duì)英語(yǔ)繪本閱讀的排斥和閱讀效果差的問題；
• 孩子朗讀輸出和家長(zhǎng)手記輸出，讓閱讀效果“看得見”，營(yíng)造良好的閱讀分為，形成良性輸出循環(huán)。

三、總結(jié)

通過閱讀路徑場(chǎng)景以及用戶手中有無(wú)圖書的現(xiàn)實(shí)情況，思考圖書詳情頁(yè)設(shè)計(jì)，讓每個(gè)用戶一進(jìn)入圖書詳情頁(yè)就能清楚她現(xiàn)在正處于整個(gè)閱讀路徑中的哪一步，并且可以直接開始某個(gè)環(huán)節(jié)的閱讀。

因此整個(gè)頁(yè)面要結(jié)構(gòu)化且清晰，讓用戶簡(jiǎn)單自然的形成使用習(xí)慣。

圖書詳情頁(yè)中的學(xué)習(xí)內(nèi)容不變，重新經(jīng)過了上述整理后，退出率下降2.14%，次均停留時(shí)長(zhǎng)增加2分45秒。

本文由 @小七 原創(chuàng)發(fā)布于人人都是產(chǎn)品經(jīng)理，未經(jīng)許可，禁止轉(zhuǎn)載。
題圖來(lái)自 Unsplash，基于CC0協(xié)議