如何设计一个方便又实用的图书详情页？

对于阅读类的小程序来说，图书详情页是用户使用最多的页面，应该如何设计，才能让用户觉得好用、方便，从而保证留存呢？本文将聊聊图书详情页设计的这点儿事儿。

一、图书详情页的定义和作用

产品背景：有别于市面上的电子英语绘本跟读式阅读，该小程序鼓励亲子共读英文纸质绘本，为家长和孩子提供了亲子共读课程及方法。解决对于英文绘本家长不会读、孩子很排斥的问题，从而达到阅读启蒙和英语启蒙的目的。

图书详情页是该小程序的核心功能：该页面中针对一本英语绘本，展示了家长和孩子需要学习和了解的内容，通过页面中学习路径的一步步引导，完成从输入到输出的过程。

该页面结构是否清晰合理、使用是否简单方便、场景是否覆盖较全，直接影响该页面的留存，从而影响小程序的留存。

下面我来讲讲我的设计思路。

二、图书详情页设计速思路

我将从阅读场景闭环过程来整理思考图书详情页的设计思路。

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部分，一步步引导孩子接受并精读英文绘本。

1. 读前——在翻看绘本前，孩子通过听“双语精讲”这种有母语环境又有故事情节的音频，激发兴趣。
2. 读中——阅读过程中，听“高效磨耳”音频，虽然是纯英语境，但增加了环境音，让孩子沉浸式的磨耳朵，培养语感。
3. 读后——通过阅读绘本增长知识面是阅读后为孩子们埋下的彩蛋，听“知识拓展”音频获得百科知识，让孩子对世界产生映射链接；“学表达”视频中的美音外教教孩子纯正发音，为朗读输出做好准备。

上述的每个学习内容都有3个信息展示，让用户清晰了解每个模块的功能和作用：

1. 资源类型：包括音频、视频，由于本产品倡导亲子共读，阅读纸质图书，少看电子屏，多进行语言输入，所以音频类型内容个数大大多于视频类型内容个数；
2. 资源名称：让用户明确该模块的主要内容；
3. 动作指示：包括听一听、磨一磨、学一学，等，引导用户点击学习模块，并做出对应动作。

小结：在读中场景下，需要将内容按学习对象和阅读路径组合，让用户清晰了解每个阅读步骤，引导其一步步精读绘本，并完成阅读闭环。

3. 输出

“输出”是完成学习闭环的最后一步，这里的输出包括2部分UGC内容：孩子朗读输出和家长手记输出。

如何让用户更加主动的去输出呢？

在孩子的朗读输出模块“TA们都在开口”中，展示了朗读人的个数，以及所有人的朗读作品。

当朗读人数多时，激发起“凑热闹”的心理，也想让自己的孩子试试；当朗读人数少时，也能激发起“尝鲜者”的好奇心。

每个朗读作品模块只展示了用户头像、昵称以及孩子当时朗读时的年龄，并没有显示作品的评星，避免了家长和孩子怕读不好星级低并被展示出来，而拒绝朗读的心理。

家长也可以了解同龄孩子在输出方面的情况，从而大概了解孩子在同龄人中的水平，产生对比心理，刺激开口频次。

家长的输出则是阅读后记录的阅读过程和心得，是家长对亲子共读过程中的反思与总结。

将关联了这本书的手记展示在图书详情页中，目的是让共同读这本书的家庭有归属感，减少孤独感。

在浏览的过程中，可以“窥探”其他家庭读这本书的心得，可以从中“偷师”，互相学习。

对于没读过这本书的家庭，进到这本书的详情页的时候感到很热闹，有种：“这本书这么多人读，可能是个经典的书”，“我也得了解下想‘凑热闹’，也来带孩子读读这本书”的想法。

而且在阅读完之后，也会“效仿”其他用户，记录下阅读手记；由此形成“看别人手记自己带孩子阅读记录自己的阅读感悟”的良性循环。

且家长输出的越多，证明小程序为其提供的内容可以满足其亲子共读需要，用户对小程序产生的信任度和忠诚度也就越高；且越来越多的手记篇数累计，家长会愈加依赖在小程序中记录，从而保证黏性。

小结：在读后场景下，将孩子朗读作品与家长的阅读手记展示出来，可以形成输出的良性循环。

综上所述：

• 需要为家长提供丰富的图书相关信息，解决其选书的问题；
• 为家长提供与孩子互动的内容和技巧，解决不知道如何进行亲子共读和阅读低效的问题；
• 按阅读路径规整组合孩子的学习内容，解决对英语绘本阅读的排斥和阅读效果差的问题；
• 孩子朗读输出和家长手记输出，让阅读效果“看得见”，营造良好的阅读分为，形成良性输出循环。

三、总结

通过阅读路径场景以及用户手中有无图书的现实情况，思考图书详情页设计，让每个用户一进入图书详情页就能清楚她现在正处于整个阅读路径中的哪一步，并且可以直接开始某个环节的阅读。

因此整个页面要结构化且清晰，让用户简单自然的形成使用习惯。

图书详情页中的学习内容不变，重新经过了上述整理后，退出率下降2.14%，次均停留时长增加2分45秒。