在线教育类制品——详情页设计知多少-外链论坛

ikkhksvu 发表于 2024-8-12 00:28:32

在线教育类制品——详情页设计知多少

导语：用户会在哪个页面停留的更久？在订单成交前，用户看到的最后一个页面一般是什么？针对视觉设计师来讲这个答案并不陌生：详情页。平时设计师们设计的详情页都是静态的，今天咱们就来聊一聊在线教育行业的详情页界面设计，让详情页动起来。<img src="https://p3-sign.toutiaoimg.com/pgc-image/SQUYClNBqVHmNz~noop.image?_iz=58558&from=article.pc_detail&lk3s=953192f4&x-expires=1723644002&x-signature=%2B8esRXTcGgqHnTZk66e9xA1ruMc%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>
今天咱们要体验的是这三家：属于K12的作业帮APP、高途课堂APP，属于成人职业教育的一块考教师APP，三款在线教育制品。
从点击进入APP起始，用户会经过一层或多层交互进入到商品详情页，一般状况下，用户对这个商品会有潜在或知道诉求：诸如这个商品能够供给什么、靠不可靠、是不是合适自己呢。
那咱们就来瞧瞧这三款APP是怎样设计的：<img src="https://p3-sign.toutiaoimg.com/pgc-image/ST1eo0y53OzIZT~noop.image?_iz=58558&from=article.pc_detail&lk3s=953192f4&x-expires=1723644002&x-signature=hic2qkWAm7WSIgfRvo0oH7pBzSI%3D" style="width: 50%; margin-bottom: 20px;">
本篇截图为iPhone7的体验环境。
咱们先来看第1屏，亦便是用户进入详情页后的第1眼见到的画面。<img src="https://p6-sign.toutiaoimg.com/pgc-image/ST1eo2M13iFKa~noop.image?_iz=58558&from=article.pc_detail&lk3s=953192f4&x-expires=1723644002&x-signature=R%2B5%2F1qCZULsXJQxTKqOREyPvrrk%3D" style="width: 50%; margin-bottom: 20px;">
能够发掘，在详情首屏上半部分三家APP的设计框架基本一致：顶部为课程展示图，中部为课程名叫作及价格，之后是优惠服务。
从优惠服务后，模块信息起始各有侧重。
咱们依次来看。
<h2 style="color: black; text-align: left; margin-bottom: 10px;">1. 顶部课程展示图</h2><img src="https://p3-sign.toutiaoimg.com/pgc-image/ST1eo335RoYNmz~noop.image?_iz=58558&from=article.pc_detail&lk3s=953192f4&x-expires=1723644002&x-signature=2XLnOTQr83q4Xbg98WmWVjURPhs%3D" style="width: 50%; margin-bottom: 20px;">
这是用户进入页面第1眼看到的信息。
作业帮的课程图是带有动物ip的六年级课程介绍，卡通动物与明亮的配色使得画面亲和力变强，这亦符合作业帮的定位：中小学生全学科在线辅导网课。辅导、陪同，都是给人友好感受的词语。
而高途课堂定位：名师出高徒，网课选高途。名师是她们的主打卖点，用微质感的背景来烘托西装挺拔的高中教师；整体画面干净干练，明朗的老师形象给人专业、严谨的感觉。
做为职业教育平台的一块考教师，在课程图的选取上运用了短视频的方式来展示信息。因考教资的用户多为成年女性，在兼顾亲和力的同期，视频相比照片能够让用户停留更长期。
<h2 style="color: black; text-align: left; margin-bottom: 10px;">2. 课程介绍、价格、服务</h2>
课程介绍、价格、服务咱们一块说。
三款APP几乎类似，包含有：课程名、开课时间、价格、优惠、服务模块。但在价格和服务模块，一块考教师与另一两者形成为了对比。<img src="https://p3-sign.toutiaoimg.com/pgc-image/ST1eo3m1BgIAiV~noop.image?_iz=58558&from=article.pc_detail&lk3s=953192f4&x-expires=1723644002&x-signature=bBEkOSUJy14dHFO3bBu2eOEjM%2B0%3D" style="width: 50%; margin-bottom: 20px;">
价格模块：<img src="https://p3-sign.toutiaoimg.com/pgc-image/ST1eowd5MMRuKG~noop.image?_iz=58558&from=article.pc_detail&lk3s=953192f4&x-expires=1723644002&x-signature=AsTU00b7WHXfOX0RAM%2BCa2Q4sos%3D" style="width: 50%; margin-bottom: 20px;">
一块考教师提示了购买人数。257人次的购买量带有心理上的引导，相当于告诉用户：在你之前已然有多少人做出了购买决策。这既应用了人群里的从众效应心理，又是增多信任感的一个好方式。
在怎样展示价格上，一块考教师是这般设计的：划掉原始价格497元，用放大加红的字体明显折扣价格467元，并增多了“优惠价”的小标签再次强调课程的优惠，双重提醒加强促销氛围。同期，价格下方增多了开课时间，时间节点一般会给人一种慌张感，催促用户必须做决策了。
另一，在这个模块的设计中，按照课程性质，增多了切换全程班和协议班课程的按钮，这个对有类似需求的用户非常友好，无需再返回上一级页面再进行关联搜索，经过当前页面的按钮切换就可进行两类课程的对比。<img src="https://p3-sign.toutiaoimg.com/pgc-image/ST1eox7HeyJjel~noop.image?_iz=58558&from=article.pc_detail&lk3s=953192f4&x-expires=1723644002&x-signature=ey8HjvRZiQENEWJw19bKBQHJGGY%3D" style="width: 50%; margin-bottom: 20px;">
相对而言，作业帮和高途课堂在价格模块的设计上比较简洁，仅展示了原始价格，这可能和两者的用户群体及课程本身的定价策略相关。
虽然作业帮和高途课堂面向的用户是学生，但真正作出购买决策的是家长们，家长们愿意给孩儿找寻更好的教育资源。必定程度上，价格高低、是不是折扣会给人带来质量优或良的感受。
当然，三者的详细定价金额会和课程本身的定位、课程实质供给的服务、课程预期的售卖人群密切关联，但这个亦不影响咱们就价格的设计方式进行思考。
整体来讲，一块考教师的价格模块结合了更加多人性规律来设计。经过小设计增多用户的信任感，制造一种时间氛围上的紧迫感，并营造买买买的促销购物环境；心理感受上的重复亦会加强人的心情记忆，这些都会影响用户行径。
优惠服务：<img src="https://p3-sign.toutiaoimg.com/pgc-image/ST1eoxd5t6wTHx~noop.image?_iz=58558&from=article.pc_detail&lk3s=953192f4&x-expires=1723644002&x-signature=zpvykoyiyOih6RcxM0rTrDVoPv4%3D" style="width: 50%; margin-bottom: 20px;">
针对优惠服务模块，作业帮和高途课堂的展示更为直接。
优惠：“购买长时间班，即得精品课”，做什么动作，你就能够得到什么。
服务：“直播授课·课堂回放·随堂测试·纸质教材”四字短句，简单明白、结构美观、服务丰富。倘若用户想深入认识，点击右箭头，会有仔细的解释说明。
一块考教师在这儿供给的是赠品信息，为了明显这一项，它将赠品文案颜色标红并增多一个红色边框。赠品区别于服务，赠品应该大于服务；由于在词语理解上，赠品是制品之外额外赠送的礼物；点击右箭头，对6个赠品的内容，会有简单说明。
整体来看，作业帮和高途课堂的优惠服务介绍简明扼要，而一块考教师更注重利益点的传达。
<h2 style="color: black; text-align: left; margin-bottom: 10px;">3. 信息模块</h2>
在实质页面浏览过程中，大部分用户会继续往下滑动，来观看后面更重要的课程信息，亦便是信息模块内容。
从这儿起始，三家APP针对模块展示就各有侧重。作业帮：选取老师和时间、课程大纲、学员评估、课程详情。高途课堂：授课老师、课程评估、课程详情、课程大纲。一块考教师：课程详情、课程表、授课教师、课程评估。<img src="https://p3-sign.toutiaoimg.com/pgc-image/ST1eoyk8yl51jy~noop.image?_iz=58558&from=article.pc_detail&lk3s=953192f4&x-expires=1723644002&x-signature=YgZJ5J64FtDcXHm%2F4L2fwRecemY%3D" style="width: 50%; margin-bottom: 20px;">
授课老师：
作业帮和高途课堂是面向青少年的学习平台，青少年有容易外显的心情特点；无论是由于主打卖点是明星老师们，还是青少年更易产生对老师的好恶心情，作业帮和高途课堂都将老师模块放在了最前面。
在这儿，作业帮还增多了一个DIY功能：选取老师和时间的服务。用户能够按照自己的偏好和便利度自动选取课程，当然，这个功能相应地亦会给平台：对内的老师资源排期和课程时间排期，增多必定的繁杂度。
对比来看，一起考教师针对授课老师的展示，在模块设计上进行了弱化；或说，它更想明显的是“课程详情”的详情效果图，由于用户的运用习惯更倾向于滑动页面向下继续查看信息，必须点击才可查看的“课程表”“授课教师”“课程评估”，更适用于对此信息有知道诉求的用户。
课程评估：
同为课程评估，模块设计上是不是有有些讨巧的地区？咱们先来看高途课堂针对评估模块的设计。<img src="https://p3-sign.toutiaoimg.com/pgc-image/ST1ep0A9jWry1e~noop.image?_iz=58558&from=article.pc_detail&lk3s=953192f4&x-expires=1723644002&x-signature=Q9rsHlH8dO0Nqqk9jwLV5RZGw68%3D" style="width: 50%; margin-bottom: 20px;">
高途课堂在评估模块有这些设计：课程总评分5.0分、课程评估数815条、4颗星或5颗星评估，优秀用户评论。
不管是总评分、还是丰富的课程评估数量、以及被选中的真实感学员的完整优秀评论，这个热闹的氛围都在影响浏览中的用户：大众用的都好，购买此课程是个明智的选取。
用户与课程之间，亦是必须信任感的。
相对而言，作业帮的评估模块设计比较简约，并且还跟在课程大纲模块之后，几乎是在第二屏的最后；独一展示出来的一位用户评论，还必须点击才可查看完整信息，这个过程相对繁琐。
而一块考教师的评估模块就被弱化了，浏览时必须点击课程评估按钮，才会进入评估页面；这儿的课程评估是按时间次序进行浏览，无筛选个别优秀评论；由于评论信息有4000多条，整体来讲信息量较多，翻看评论会花费时间。
用户都容易被他人影响、容易参考他人观点；她们在作出购买决策之前，会期盼获取更加多信息，例如从用户评论中寻找这门课程是不是可靠的蛛丝马迹，评估模块正是起到这般的引导功效。
详情效果图：<img src="https://p3-sign.toutiaoimg.com/pgc-image/ST1epXEIJpf4iz~noop.image?_iz=58558&from=article.pc_detail&lk3s=953192f4&x-expires=1723644002&x-signature=bOSUqdxsRNqjI8CI2t6UvJFVYc4%3D" style="width: 50%; margin-bottom: 20px;">
千呼万唤始出来，最后一个模块是详情页落地效果图。真正的课程卖点，都集中在这张效果图里；在这儿咱们不详细分析详情页的文案的撰写技巧，亦不去讨论内容是不是了抓住用户的痛点、痒点、爽点，咱们在这儿重点还是看页面的布局结构。
一块考教师非常注重详情页的展示，在进入这个页面第1屏就已然将详情页效果图推出。
高途课堂则做好了足够的铺垫，例如老师介绍、评估模块，再来展示课程详情效果图。
作业帮的进度会慢有些，几乎第三屏才起始推出详情效果图，前面还有老师介绍、课程大纲和评估模块，文字信息量较多，虽然课程大纲和评估模块都有折叠功能，但似乎亦会分散用户的重视力。
毕竟视觉的第1眼感受是最直观的。
详情页的整体视觉定位是专业、友好、品质？这些视觉感受都会给用户带来对应课程的品质印象。
倘若详情页效果图的各模块层级明晰、重点明显、图文匹配，亦能在用户的阅读体验上加分。
<h2 style="color: black; text-align: left; margin-bottom: 10px;">4. 驻底按钮</h2><img src="https://p3-sign.toutiaoimg.com/pgc-image/ST1epYJEMNS3kx~noop.image?_iz=58558&from=article.pc_detail&lk3s=953192f4&x-expires=1723644002&x-signature=416q2keZNvCoVSsUIkUZYFO8UpE%3D" style="width: 50%; margin-bottom: 20px;">
立即购买：
与常规的“立即购买”区别，高途课堂和作业帮设计了“加入选课单”和“立即报名”按钮；点击“立即报名”其实亦是转到购买页面，只是在措词上弱化了购买的认识。
但基于学生可能有多门课程的培训需求，“加入选课单”营造了一个能够打包购物的场景。但这亦会带来：用户当下将课程加入选课单后，会有退出页面的状况出现。
一块考教师在当前页的购买意愿似乎更强，它仅有一个“立即购买”的按钮，基于前面的所有模块的设计方式，它更期盼帮忙用户在当下直接做出购买决策。
客服咨询：
作业帮和高途课堂的咨询按钮能够直接转到客服沟通页面，先进行设备人对话，可按照需求转人工服务。
一块考教师的咨询过程相对繁琐，必须添加至社交群后，进群咨询。然则带来的好处是：用户能够快速进入到一个有一起学习氛围的群体中，平台亦能留下课程的初始用户。
<h1 style="color: black; text-align: left; margin-bottom: 10px;">3、最后</h1>
今天咱们探讨了三份详情页面框架，各平台针对详情页的模块设计各有侧重；其实，即便是同款APP，针对区别类型的课程，详情页面的模块设计框架亦不是固定不变的。
例如高途课堂，部分课程页面无评估模块，但咱们今天探讨的详情页面里是有的；例如一块考教师，部分课程的价格模块设计亦比较简约，而咱们今天探讨的价格模块是暗含了非常多用户心理的运用。
例如部分APP对个别课程有供给试听功能，但今天咱们探讨的这三份课程里并无提及。例如部分APP点击咨询按钮后，按照课程性质，可能会转到社交群，亦可能转到客服咨询平台等等。
为何布局模块或功能设计会不同样？到底什么是加强详情页面转化率的最佳方法呢？咱们必须一个恰当假设、上线验证、数据收集的过程。
但不管是怎么样的设计方法：帮忙用户做出决策，来加强用户在当前页面的转化率，是详情页面的常规设计目的。
针对视觉设计师而言，把效果图带回到用户的运用现场，追问自己设计的目的到底是什么，或许能帮忙自己更好地理解详情页。
在收集在线教育APP详情页面的过程中，我亦看到非常多优秀的制品，例如有道精品课、考虫、猿辅导等APP的详情页面设计，因篇幅有限，这次就不做太多探讨。
本文由 @阿念原创发布于人人都是制品经理，未经许可，禁止转载
题图来自 Unsplash，基于 CC0 协议

听听海 发表于 2024-8-24 23:48:53

真情实感，其含义为认真了、走心了的意思，是如今的饭圈常用语。

页: [1]

外链论坛's Archiver

在线教育类制品——详情页设计知多少