起點課堂會員權益
職業體系課特權
線下行業大會特權
個人IP打造特權
30+門專項技能課
1300+專題課程
12場職場軟技能直播
12場求職輔導直播
12場專業技能直播
會員專屬社群
榮耀標識如何設計一個方便又實用的圖書詳情頁？
對于閱讀類的小程序來說，圖書詳情頁是用戶使用最多的頁面，應該如何設計，才能讓用戶覺得好用、方便，從而保證留存呢？本文將聊聊圖書詳情頁設計的這點兒事兒。
一、圖書詳情頁的定義和作用
產品背景：有別于市面上的電子英語繪本跟讀式閱讀，該小程序鼓勵親子共讀英文紙質繪本，為家長和孩子提供了親子共讀課程及方法。解決對于英文繪本家長不會讀、孩子很排斥的問題，從而達到閱讀啟蒙和英語啟蒙的目的。
圖書詳情頁是該小程序的核心功能：該頁面中針對一本英語繪本，展示了家長和孩子需要學習和了解的內容，通過頁面中學習路徑的一步步引導，完成從輸入到輸出的過程。
該頁面結構是否清晰合理、使用是否簡單方便、場景是否覆蓋較全，直接影響該頁面的留存，從而影響小程序的留存。
下面我來講講我的設計思路。
二、圖書詳情頁設計速思路
我將從閱讀場景閉環過程來整理思考圖書詳情頁的設計思路。
1. 選書
每一個家長，包括我自己，當開始為孩子選一本繪本，尤其是選一本非母語繪本時，是迷茫的。怕下單后孩子不喜歡，浪費銀子。
而如果在購買能提前了解繪本以及孩子對繪本的喜歡程度，那么就更有把握把繪本買回來精讀；而且大概率孩子也不太會排斥。
孩子不排斥是閱讀好的開始：共讀效果好，家長自然對小程序更加信賴，還會通過同樣的方式再次進行選書，形成良性循環。
因此為家長提供繪本相關介紹包括：圖書簡介、推薦語、帶讀視頻、以及老師寫賞析內容（分別為右圖中的“來認識這本書吧”、蝸牛薦語“、“視頻預覽”、“大咖賞析”），讓家長多維角度了解一本書。從了解，到種草，最后做出是否購買實體書并精讀的決策。
1）圖書簡介——用簡潔的描述，講述了這本書講了個什么故事的問題，讓家長了解故事梗概以及主題立意，可以根據最近孩子的特點以及喜好，初步判斷這本書是否適合孩子。
例如，最近孩子進入了淘氣的階段，當家長看到《No, David!》這本書的圖書簡介時，就能清晰的了解這本書是一本教孩子學會守規矩、懂禮貌的繪本，從而會激發家長對這本書的興趣。
2）推薦語——讓家長清楚閱讀理由，解決我為什么要買這本書，這本書好在哪里的問題，進而增加購買這本書精讀的砝碼。
例如：獲獎繪本和大師作品都是一本書權威性以及被認可程度高的重要標志，證明這本書更加值得帶孩子精讀。
3）帶讀視頻——用視頻的方式，讓家長沉浸式的體驗閱讀這本書的過程，從讀者的角度瀏覽一本書，解決這本書應該怎么讀的問題；讓家長對于故事情節以及閱讀互動方法了解的更加深入，從而達到視覺種草的效果。
例如：《We’re Going on a Bear Hunt》這本書的帶讀視頻，是作者的親自演繹，把故事表演的非常精彩，讓靜態的繪本動了起來，加深這本繪本在家長心中的印象。
4）老師寫的賞析內容——讓家長看一看會讀的家庭真實的讀后感，更有代入感的想象到自己孩子閱讀過程中的反應；以及站在美育的角度對繪本的欣賞與理解是怎樣的，進而對這本書更加有所期待。
例如：《I am a Bunny》這本書老師寫的賞析部分，站在了兒童文學和藝術的視角，表達對這本繪本的喜愛與理解，讓家長驚呼“哦！還有這一層視角~”。
當決定購買后，家長不必再去商城中搜索商品；而是可以在圖書詳情頁可以直接下單購買，縮短了購買路徑，購買更加方便。
小結：在讀前場景下，需要豐富優質的信息和資源，為家長提供對繪本的擇選及精讀理由。
2.?讀書
該產品倡導的是親子共讀繪本，即：家長給孩子將繪本故事，在閱讀過程中與孩子互動，通過反復的親子閱讀互動，達到閱讀啟蒙、英語啟蒙、增進親子關系的目的。
因此在共讀環節中沒有任何人或視頻可以替代家長的位置和作用，家長即孩子的老師。
但經過調研和電話回訪發現：大多數家長具有不會讀、讀的淺、英語水平低不知道如何開始等問題。
為了解決這些問題，為家長開辟了“家長課堂”模塊，在讀中與讀后環節為家長提供指導性建議。
“家長課堂”分為2塊：讀中互動方法、讀后擴展內容（分別為右圖中的：“讀中互動”、“讀后擴展”）；幫助家長學會精讀繪本的方法，并能在閱讀過程中更好引導孩子，讓閱讀不再只是停留在看畫和讀字上。
1）讀中互動——這個模塊只包含“親子共讀錦囊”這一個內容，之所以叫“共讀錦囊”，是因為每個共讀方法是簡短的、精煉的、可執行的。
將一本書中關鍵的互動點總結整理出來，既方便家長在讀前的幾分鐘內可以快速瀏覽完，做到迅速預習的效果，又可以在讀中黔驢技窮時加速定位與孩子互動的突破口，解燃眉之急。
例如：《I am a Bunny》這本書，其中的一個共讀錦囊（見下圖），指導家長在讀到某一頁時引導孩子進行自我介紹，互動時的英文如何表達，并且給出適合互動的年齡范圍，手把手教家長其中的技巧和方法。
2）讀后擴展——包括“知識百科”、“拓展活動”和“場景應用”。在閱讀后的時間，可以通過給孩子講一講相關的知識，帶孩子做做有趣的手工活動或小實驗，以及將書里的段落或場景活學活用地融入生活中，多方面地將這本書中的內容擴展并融會貫通。加深對英語、對知識、對繪本的印象，在多維重復中看到“效果”。
解決了家長的問題，我們來看看孩子的問題：
很多孩子會在剛接觸英文繪本時比較抵觸純英語內容，為了解決這種抵觸心理，同樣基于閱讀路徑，分為讀前讀中讀后這3部分，一步步引導孩子接受并精讀英文繪本。
- 讀前——在翻看繪本前，孩子通過聽“雙語精講”這種有母語環境又有故事情節的音頻，激發興趣。
- 讀中——閱讀過程中，聽“高效磨耳”音頻，雖然是純英語境，但增加了環境音，讓孩子沉浸式的磨耳朵，培養語感。
- 讀后——通過閱讀繪本增長知識面是閱讀后為孩子們埋下的彩蛋，聽“知識拓展”音頻獲得百科知識，讓孩子對世界產生映射鏈接；“學表達”視頻中的美音外教教孩子純正發音，為朗讀輸出做好準備。
上述的每個學習內容都有3個信息展示，讓用戶清晰了解每個模塊的功能和作用：
- 資源類型：包括音頻、視頻，由于本產品倡導親子共讀，閱讀紙質圖書，少看電子屏，多進行語言輸入，所以音頻類型內容個數大大多于視頻類型內容個數；
- 資源名稱：讓用戶明確該模塊的主要內容；
- 動作指示：包括聽一聽、磨一磨、學一學，等，引導用戶點擊學習模塊，并做出對應動作。
小結：在讀中場景下，需要將內容按學習對象和閱讀路徑組合，讓用戶清晰了解每個閱讀步驟，引導其一步步精讀繪本，并完成閱讀閉環。
3.?輸出
“輸出”是完成學習閉環的最后一步，這里的輸出包括2部分UGC內容：孩子朗讀輸出和家長手記輸出。
如何讓用戶更加主動的去輸出呢？
在孩子的朗讀輸出模塊“TA們都在開口”中，展示了朗讀人的個數，以及所有人的朗讀作品。
當朗讀人數多時，激發起“湊熱鬧”的心理，也想讓自己的孩子試試；當朗讀人數少時，也能激發起“嘗鮮者”的好奇心。
每個朗讀作品模塊只展示了用戶頭像、昵稱以及孩子當時朗讀時的年齡，并沒有顯示作品的評星，避免了家長和孩子怕讀不好星級低并被展示出來，而拒絕朗讀的心理。
家長也可以了解同齡孩子在輸出方面的情況，從而大概了解孩子在同齡人中的水平，產生對比心理，刺激開口頻次。
家長的輸出則是閱讀后記錄的閱讀過程和心得，是家長對親子共讀過程中的反思與總結。
將關聯了這本書的手記展示在圖書詳情頁中，目的是讓共同讀這本書的家庭有歸屬感，減少孤獨感。
在瀏覽的過程中，可以“窺探”其他家庭讀這本書的心得，可以從中“偷師”，互相學習。
對于沒讀過這本書的家庭，進到這本書的詳情頁的時候感到很熱鬧，有種：“這本書這么多人讀，可能是個經典的書”，“我也得了解下想‘湊熱鬧’，也來帶孩子讀讀這本書”的想法。
而且在閱讀完之后，也會“效仿”其他用戶，記錄下閱讀手記；由此形成“看別人手記自己帶孩子閱讀記錄自己的閱讀感悟”的良性循環。
且家長輸出的越多，證明小程序為其提供的內容可以滿足其親子共讀需要，用戶對小程序產生的信任度和忠誠度也就越高；且越來越多的手記篇數累計，家長會愈加依賴在小程序中記錄，從而保證黏性。
小結：在讀后場景下，將孩子朗讀作品與家長的閱讀手記展示出來，可以形成輸出的良性循環。
綜上所述：
- 需要為家長提供豐富的圖書相關信息，解決其選書的問題；
- 為家長提供與孩子互動的內容和技巧，解決不知道如何進行親子共讀和閱讀低效的問題；
- 按閱讀路徑規整組合孩子的學習內容，解決對英語繪本閱讀的排斥和閱讀效果差的問題；
- 孩子朗讀輸出和家長手記輸出，讓閱讀效果“看得見”，營造良好的閱讀分為，形成良性輸出循環。
三、總結
通過閱讀路徑場景以及用戶手中有無圖書的現實情況，思考圖書詳情頁設計，讓每個用戶一進入圖書詳情頁就能清楚她現在正處于整個閱讀路徑中的哪一步，并且可以直接開始某個環節的閱讀。
因此整個頁面要結構化且清晰，讓用戶簡單自然的形成使用習慣。
圖書詳情頁中的學習內容不變，重新經過了上述整理后，退出率下降2.14%，次均停留時長增加2分45秒。
本文由 @小七 原創發布于人人都是產品經理，未經許可，禁止轉載。
題圖來自 Unsplash，基于CC0協議
這個小程序也太贊了吧，請問這個小程序叫什么呀？
謝謝你的喜歡，小程序叫「蝸牛英語Snaily」，來逛逛啊~