怎么样设计一个方便又实用的图书详情页？-天涯论坛

j8typz 发表于 2024-8-12 14:07:28

怎么样设计一个方便又实用的图书详情页？

针对阅读类的小程序来讲，图书详情页是用户运用最多的页面，应该怎样设计，才可让用户觉得好用、方便，从而保准留存呢？本文将聊聊图书详情页设计的这点儿事儿。<img src="https://p3-sign.toutiaoimg.com/pgc-image/RyMzE3S8pUUzOW~noop.image?_iz=58558&from=article.pc_detail&lk3s=953192f4&x-expires=1723657244&x-signature=3npOtN70NRPuB6F3%2FaYeA7E6BZA%3D" style="width: 50%; margin-bottom: 20px;">
<h1 style="color: black; text-align: left; margin-bottom: 10px;">1、图书详情页的定义和功效</h1>
制品背景：有别于市面上的电子英语绘本跟读式阅读，该小程序鼓励亲子共读英文纸质绘本，为家长和孩儿供给了亲子共读课程及办法。处理针对英文绘本家长不会读、孩儿很排斥的问题，从而达到阅读启蒙和英语启蒙的目的。
图书详情页是该小程序的核心功能：该页面中针对一本英语绘本，展示了家长和孩儿必须学习和认识的内容，经过页面中学习路径的一步步引导，完成从输入到输出的过程。
该页面结构是不是清晰恰当、运用是不是简单方便、场景是不是覆盖较全，直接影响该页面的留存，从而影响小程序的留存。
下面我来讲讲我的设计思路。
<h1 style="color: black; text-align: left; margin-bottom: 10px;">2、图书详情页设计速思路</h1>
我将从阅读场景闭环过程来整理思考图书详情页的设计思路。
<h2 style="color: black; text-align: left; margin-bottom: 10px;">1. 选书</h2>
每一个家长，包含我自己，当起始为孩儿选一本绘本，尤其是选一本非母语绘本时，是迷茫的。怕下单后孩儿不爱好，浪费银子。
而倘若在购买能提前认识绘本以及孩儿对绘本的爱好程度，那样就更有把握把绘本买回来精读；况且大概率孩儿亦不太会排斥。
孩儿不排斥是阅读好的起始：共读效果好，家长自然对小程序更加信赖，还会经过一样的方式再次进行选书，形成良性循环。
因此呢为家长供给绘本关联介绍包含：图书简介、举荐语、带读视频、以及老师写赏析内容（分别为右图中的“来认识这本书吧”、蜗牛荐语“、“视频预览”、“大咖赏析”），让家长多维方向认识一本书。从认识，到种草，最后做出是不是购买实体书并精读的决策。
1）图书简介——用简洁的描述，讲述了这本书讲了个什么故事的问题，让家长认识故事梗概以及主题立意，能够按照近期孩儿的特点以及爱好，初步判断这本书是不是适合孩儿。
例如，近期孩儿进入了淘气的阶段，当家长看到《No, David!》这本书的图书简介时，就能清晰的认识这本书是一本教孩儿学会守规矩、懂礼貌的绘本，从而会激发家长对这本书的兴趣。<img src="https://p3-sign.toutiaoimg.com/pgc-image/RyMzE43AyNGa45~noop.image?_iz=58558&from=article.pc_detail&lk3s=953192f4&x-expires=1723657244&x-signature=fxhN8XeneUNt0aIP3SYz9NZ0eqs%3D" style="width: 50%; margin-bottom: 20px;">
2）举荐语——让家长清楚阅读理由，处理我为何要买这本书，这本书好在哪里的问题，从而增多购买这本书精读的砝码。
例如：获奖绘本和大师作品都是一本书权威性以及被认可程度高的重要标志，证明这本书更加值得带孩儿精读。<img src="https://p3-sign.toutiaoimg.com/pgc-image/RyMzE4aFrnguyL~noop.image?_iz=58558&from=article.pc_detail&lk3s=953192f4&x-expires=1723657244&x-signature=OajVIxiqxq4CjeNv659IBtCy%2BF0%3D" style="width: 50%; margin-bottom: 20px;">
3）带读视频——用视频的方式，让家长沉浸式的体验阅读这本书的过程，从读者的方向浏览一本书，处理这本书应该怎么读的问题；让家长针对故事情节以及阅读互动办法认识的更加深入，从而达到视觉种草的效果。
例如：《We’re Going on a Bear Hunt》这本书的带读视频，是作者的亲自演绎，把故事扮演的非常精彩，让静态的绘本动了起来，加深这本绘本在家长心中的印象。<img src="https://p3-sign.toutiaoimg.com/pgc-image/RyMzE5Du3Ybj9~noop.image?_iz=58558&from=article.pc_detail&lk3s=953192f4&x-expires=1723657244&x-signature=YxQrAEeM186IjoA6OwgqbBvLQWY%3D" style="width: 50%; margin-bottom: 20px;">
4）老师写的赏析内容——让家长看一看会读的家庭真实的读后感，更有代入感的想象到自己孩儿阅读过程中的反应；以及站在美育的方向对绘本的欣赏与理解是怎么样的，从而对这本书更加有所期待。
例如：《I am a Bunny》这本书老师写的赏析部分，站在了儿童文学和艺术的视角，表达对这本绘本的喜欢与理解，让家长惊呼“哦！还有这一层视角~”。<img src="https://p3-sign.toutiaoimg.com/pgc-image/RyMzE5u67Qtoqh~noop.image?_iz=58558&from=article.pc_detail&lk3s=953192f4&x-expires=1723657244&x-signature=GShPsDhUWKczs7H3f5294qkJ7m8%3D" style="width: 50%; margin-bottom: 20px;">
当决定购买后，家长不必再去商城中搜索商品；而是能够在图书详情页能够直接下单购买，缩短了购买路径，购买更加方便。<img src="https://p26-sign.toutiaoimg.com/pgc-image/RyMzEkc5MUDahR~noop.image?_iz=58558&from=article.pc_detail&lk3s=953192f4&x-expires=1723657244&x-signature=rLswpyrpdNqeZTB%2Fx%2FYhilD0q0k%3D" style="width: 50%; margin-bottom: 20px;">
小结：在读前场景下，必须丰富优秀的信息和资源，为家长供给对绘本的择选及精读理由。<img src="https://p3-sign.toutiaoimg.com/pgc-image/RyMzElR3qLwaPJ~noop.image?_iz=58558&from=article.pc_detail&lk3s=953192f4&x-expires=1723657244&x-signature=9NUiOAnxs3taDqQkR6RBe80X6zM%3D" style="width: 50%; margin-bottom: 20px;">
<h2 style="color: black; text-align: left; margin-bottom: 10px;">2. 读书</h2>
该制品倡导的是亲子共读绘本，即：家长给孩儿将绘本故事，在阅读过程中与孩儿互动，经过反复的亲子阅读互动，达到阅读启蒙、英语启蒙、增进亲子关系的目的。
因此呢在共读环节中无任何人或视频能够替代家长的位置和功效，家长即孩儿的老师。
但经过调研和tel回访发掘：大都数家长拥有不会读、读的浅、英语水平低不晓得怎样起始等问题。
为认识决这些问题，为家长开辟了“家长课堂”模块，在读中与读后环节为家长供给指点性意见。
“家长课堂”分为2块：读中互动办法、读后扩展内容（分别为右图中的：“读中互动”、“读后扩展”）；帮忙家长学会精读绘本的办法，并能在阅读过程中更好引导孩儿，让阅读再也不只是停留在看画和读字上。<img src="https://p3-sign.toutiaoimg.com/pgc-image/RyMzElz3MThGTi~noop.image?_iz=58558&from=article.pc_detail&lk3s=953192f4&x-expires=1723657244&x-signature=hWD2Bge2WyKI4ukG0OlcnMvPlKk%3D" style="width: 50%; margin-bottom: 20px;">
1）读中互动——这个模块只包括“亲子共读锦囊”这一个内容，之因此叫“共读锦囊”，是由于每一个共读办法是简短的、精炼的、可执行的。
将一本书中关键的互动点总结整理出来，既方便家长在读前的几分钟内能够快速浏览完，做到快速预习的效果，又能够在读中黔驴技穷时加速定位与孩儿互动的突破口，解燃眉之急。
例如：《I am a Bunny》这本书，其中的一个共读锦囊（见下图），指点家长在读到某一页时引导孩儿进行自我介绍，互动时的英文怎样表达，并且给出适合互动的年龄范围，手把手教家长其中的技巧和办法。<img src="https://p3-sign.toutiaoimg.com/pgc-image/RyMzEmdBHo8utR~noop.image?_iz=58558&from=article.pc_detail&lk3s=953192f4&x-expires=1723657244&x-signature=w8lLKZ7rfPxJyfC3Clv75y6RqZM%3D" style="width: 50%; margin-bottom: 20px;">
2）读后扩展——包含“知识百科”、“拓展活动”和“场景应用”。在阅读后的时间，能够经过给孩子讲一讲关联的知识，带孩儿做做有趣的手工活动或小实验，以及将书里的段落或场景活学活用地融入生活中，多方面地将这本书中的内容扩展并融会贯通。加深对英语、对知识、对绘本的印象，在多维重复中看到“效果”。
处理了家长的问题，咱们来瞧瞧孩儿的问题：
非常多孩儿会在刚接触英文绘本时比较抵触纯英语内容，为认识决这种抵触心理，一样基于阅读路径，分为读前读中读后这3部分，一步步引导孩儿接受并精读英文绘本。读前——在翻看绘本前，孩儿经过听“双语精讲”这种有母语环境又有故事情节的音频，激发兴趣。读中——阅读过程中，听“有效磨耳”音频，虽然是纯英语境，但增多了环境音，让孩儿沉浸式的磨耳朵，培养语感。读后——经过阅读绘本增长知识面是阅读后为孩儿们埋下的彩蛋，听“知识拓展”音频得到百科知识，让孩儿对世界产生映射链接；“学表达”视频中的美音外教教孩儿纯正发音，为朗读输出做好准备。以上的每一个学习内容都有3个信息展示，让用户清晰认识每一个模块的功能和功效：资源类型：包含音频、视频，因为本制品倡导亲子共读，阅读纸质图书，少看电子屏，多进行语言输入，因此音频类型内容个数大大多于视频类型内容个数；资源名叫作：让用户知道该模块的重点内容；动作指示：包含听一听、磨一磨、学一学，等，引导用户点击学习模块，并做出对应动作。<img src="https://p3-sign.toutiaoimg.com/pgc-image/RyMzEn72Q7YfxF~noop.image?_iz=58558&from=article.pc_detail&lk3s=953192f4&x-expires=1723657244&x-signature=QFHKwaCObenWHnBF9xmpjHk3PIE%3D" style="width: 50%; margin-bottom: 20px;">
小结：在读中场景下，必须将内容按学习对象和阅读路径组合，让用户清晰认识每一个阅读过程，引导其一步步精读绘本，并完成阅读闭环。<img src="https://p3-sign.toutiaoimg.com/pgc-image/RyMzFNWARt2BJ2~noop.image?_iz=58558&from=article.pc_detail&lk3s=953192f4&x-expires=1723657244&x-signature=7kbDqENh5DO0t1%2F1J2vQ8fna0BM%3D" style="width: 50%; margin-bottom: 20px;">
<h2 style="color: black; text-align: left; margin-bottom: 10px;">3. 输出</h2>
“输出”是完成学习闭环的最后一步，这儿的输出包含2部分UGC内容：孩儿朗读输出和家长手记输出。
怎样让用户更加主动的去输出呢？<img src="https://p3-sign.toutiaoimg.com/pgc-image/RyMzFO54H7hUnr~noop.image?_iz=58558&from=article.pc_detail&lk3s=953192f4&x-expires=1723657244&x-signature=XnrvKr8O6TeKj24LlIpvPekXRmY%3D" style="width: 50%; margin-bottom: 20px;">
在孩儿的朗读输出模块“TA们都在开口”中，展示了朗读人的个数，以及所有人的朗读作品。
当朗读人数多时，激发起“凑热闹”的心理，亦想让自己的孩儿试试；当朗读人数少时，亦能激发起“尝鲜者”的好奇心。
每一个朗读作品模块只展示了用户头像、昵叫作以及孩儿当时朗读时的年龄，并无表示作品的评星，避免了家长和孩儿怕读欠好星级低并被展示出来，而拒绝朗读的心理。
家长亦能够认识同龄孩儿在输出方面的状况，从而大概认识孩儿在同龄人中的水平，产生对比心理，刺激开口频次。
家长的输出则是阅读后记录的阅读过程和心得，是家长对亲子共读过程中的反思与总结。
将相关了这本书的手记展示在图书详情页中，目的是让一起读这本书的家庭有归属感，减少孤独感。
在浏览的过程中，能够“窥探”其他家庭读这本书的心得，能够从中“偷师”，互相学习。
针对没读过这本书的家庭，进到这本书的详情页的时候感到很热闹，有种：“这本书这么多人读，可能是个经典的书”，“我亦得认识下想‘凑热闹’，亦来带孩儿读读这本书”的想法。
况且在阅读完之后，亦会“效仿”其他用户，记录下阅读手记；由此形成“看别人手记自己带孩儿阅读记录自己的阅读感悟”的良性循环。
且家长输出的越多，证明小程序为其供给的内容能够满足其亲子共读必须，用户对小程序产生的信任度和忠诚度亦就越高；且越来越多的手记篇数累计，家长会愈加依赖在小程序中记录，从而保准黏性。
小结：在读后场景下，将孩儿朗读作品与家长的阅读手记展示出来，能够形成输出的良性循环。<img src="https://p3-sign.toutiaoimg.com/pgc-image/RyMzFOaEJhiSQy~noop.image?_iz=58558&from=article.pc_detail&lk3s=953192f4&x-expires=1723657244&x-signature=nHkWUioPoExw0ea8zbpQbF9COlU%3D" style="width: 50%; margin-bottom: 20px;">
综上所述：必须为家长供给丰富的图书关联信息，处理其选书的问题；为家长供给与孩儿互动的内容和技巧，处理不晓得怎样进行亲子共读和阅读低效的问题；按阅读路径规整组合孩儿的学习内容，处理对英语绘本阅读的排斥和阅读效果差的问题；孩儿朗读输出和家长手记输出，让阅读效果“看得见”，营造良好的阅读分为，形成良性输出循环。<h1 style="color: black; text-align: left; margin-bottom: 10px;">3、总结</h1>
经过阅读路径场景以及用户手中有没有图书的现实状况，思考图书详情页设计，让每一个用户一进入图书详情页就能清楚她此刻正处在全部阅读路径中的哪一步，并且能够直接起始某个环节的阅读。
因此呢全部页面要结构化且清晰，让用户简单自然的形成运用习惯。
图书详情页中的学习内容不变，重新经过了以上整理后，退出率下降2.14%，次均停留时长增多2分45秒。
本文由 @小七原创发布于人人都是制品经理，未经许可，禁止转载。题图来自 Unsplash，基于CC0协议

情迷布拉格 发表于 2024-9-3 05:10:30

论坛外链网http://www.fok120.com/

4zhvml8 发表于 2024-9-3 16:49:16

你的留言真是温暖如春，让我感受到了无尽的支持与鼓励。

星☆雨 发表于 2024-9-9 01:39:23

你的见解独到，让我受益匪浅，非常感谢。

飘雨的姑娘 发表于 2024-9-9 15:07:55

顶楼主，说得太好了！

b1gc8v 发表于 2024-10-13 03:17:55

交流如星光璀璨，点亮思想夜空。

b1gc8v 发表于 2024-11-13 09:56:35

你的见解真是独到，让我受益良多。

页: [1]

天涯论坛's Archiver

怎么样设计一个方便又实用的图书详情页？