一、思考

我们先来看看这样一个问题，当你在某宝上买衣服的时候，什么会提示你下单呢？

进入商品详情页面后，模特的穿衣效果如何？销售价格？用户评价？买家秀？正品保证？航运保险？等等……它是什么样的信息，是什么让你觉得促使你下订单？

不仅对于电商平台，对于在线教育平台来说，详情页也是提升转化率非常重要的一个层面。

那么，如何通过设计帮助用户做出购买决策，提高产品的转化率呢？带着这样的疑惑，我们先来看看现在很火的在线教育的详情页是怎么设计的。

二、详情页展示

今天我们将体验这三款：属于K12的作业帮APP和高途课堂APP，属于成人职业教育的教师考试APP，以及三款在线教育产品。

从点击进入APP，用户会通过一层或多层交互进入产品详情页面。通常高途课堂心理咨询师证书，用户会对产品有潜在的或明确的诉求：比如产品能提供什么，是否可靠，是否合适。我。

那么让我们来看看这三个应用程序是如何设计的：

这张截图是iPhone 7的体验环境。

我们先来看第一个屏幕，也就是用户进入详情页后看到的第一个屏幕。

可以发现三个app的设计框架在详情第一屏的上半部分基本一致：最上面是课程展示图，中间是课程名称和价格，然后是优惠服务.

优惠服务之后，模块信息各有侧重。

让我们来看看。

1. 顶级课程展示

这是用户在进入页面时看到的第一个信息。

Homework Help的课程图是动物ip的六年级课程介绍。卡通动物和鲜艳的色彩让画面更加亲切，这也符合Homework Help的定位：中小学全学科在线辅导在线课程。指导和陪伴是给人一种友好感觉的词。

高土课堂定位：名师出高徒，网课选择高土。名师是他们的主要卖点。他们用微纹理的背景来对比高大挺拔的西装革履的高中老师；整体画面干净干练，清晰的教师形象给人一种专业严谨的感觉。

作为职业教育平台上的辅考老师，在选课图时使用短视频来展示信息。因为拿教材的用户大多是成年女性，在考虑到亲和力的同时，视频可以让用户停留的时间比图片长。

2. 课程介绍、价格、服务

我们将一起讨论课程介绍、价格和服务。

这三个应用程序几乎相似，包括：课程名称、开始时间、价格、折扣和服务模块。但在价格和服务模块中，一起参加教师考试与其他两个形成鲜明对比。

价格模块：

一起考的老师提示购买次数。257人的购买量有心理引导，相当于告诉用户：有多少人在你之前做出了购买决定。这不仅适用于人群中的从众效应心理，也是增加信任感的好方法。

在如何显示价格方面，测试老师共同设计了这个：将原价497元划掉，用大红字体突出显示467元的折扣价，并加上“优惠价”的小标签再次强调课程折扣，双重提醒，强化促销氛围。同时在价格下方加上开始时间，时间节点通常给人一种恐慌感，促使用户做出决定。

另外高途课堂心理咨询师证书，在本模块的设计中，根据课程的性质，增加了全课程与协议课程的切换按钮。这对有类似需求的用户非常友好。无需返回上一页进行相关搜索。通过当前页面的按钮开关可以对两个课程进行比较。

相对来说，作业和高途课堂的价格模块设计比较简单，只显示原价，这可能与两者的用户群体以及课程本身的定价策略有关。

作业帮和高途课堂的用户虽然都是学生，但真正做出购买决定的是家长，家长愿意为孩子寻找更好的教育资源。在一定程度上，价格的高低以及是否打折会给人们带来物美价廉的感觉。

当然，三者的具体定价金额会与课程本身的定位、课程实际提供的服务、课程的预期销售人群等密切相关，但这并不影响我们对设计方法的思考的价格。

整体来说，老师一起考的价格模块是结合更多的人性规律设计的。通过小设计，增加用户信任度，营造时间紧迫感和氛围，营造买买买的促销购物环境；心理感受的重复也会加强人们的情绪记忆，从而影响用户行为。

优惠服务：

对于优惠的服务模块高途课堂心理咨询师证书，作业帮助和高图课堂展示更直接。

优惠：“买一个长期班，你就得到一个高级班”，你做什么，你就可以得到你想要的。

服务：“直播教学、课堂回放、课堂测试、纸质教材”四字短句，简洁明了，结构优美，服务丰富。如果用户想了解更多，点击右箭头，会有详细的解释。

测试老师在这里提供的是赠品信息。为了突出这个项目，它会将赠品副本标记为红色并添加红色边框。礼物不同于服务，礼物应该大于服务；因为从文字理解上来说，礼物是除了产品之外的礼物；点击右箭头，会出现6份礼物内容的简要说明。

整体来看，作业帮和高途课堂的优惠服务介绍简洁中肯，而一起考试的老师更注重兴趣的交流。

3. 信息模块

在实际的页面浏览过程中，大部分用户会继续往下滑看后面更重要的课程信息，也就是信息模块的内容。

从这里开始，三个APP在模块展示上各有侧重。

老师：

作业帮和高途课堂是青少年的学习平台。青少年具有易于表现的情感特征。无论是因为主要卖点是明星老师，还是年轻人对老师的好恶感更强，功课帮和高途课堂都是。将教师模块放在最前面。

在这里，作业帮助还增加了一个DIY功能：选老师和选时间的服务。用户可以根据自己的喜好和方便程度选择课程。当然，这个功能也会给平台增加一些复杂度：内部教师资源调度和课程时间调度。

相比之下，在模块设计上弱化了师资的师资展示；也就是说，它想突出“课程详情”的详细效果图，因为用户的使用习惯更倾向于将页面滑动到继续查看“课程安排”、“教师”和“课程评价”下的信息” 需要点击查看，更适合对此类信息有明确诉求的用户。

课程评价：

另外对于课程评估，模块设计有什么技巧吗？我们先来看看高土课堂的评测模块的设计。

高途课堂在评价模块中有这些设计：课程总分5.0分，课程评价数815，4星或5星评价，优质用户评论。

无论是总评分，丰富的课程评论数量，还是精选真人学员的全程优质评论，这种热闹的氛围影响着用户浏览：大家都在用好，购买这门课程是明智的选择。

用户和课程之间也需要信任。

相对来说，Homework Help的评价模块设计比较简单，遵循syllabus模块，几乎在第二屏的末尾；唯一显示的用户评论，需要点击查看完整信息，这一步比较麻烦。

一起考试的老师的评价模块被削弱了。浏览时需要点击课程评价按钮进入评价页面；这里的课程评价按时间顺序浏览，不筛选个别优质评论；因为有超过 4,000 条评论。，整体来说信息量很大，看评论还需要时间。

用户容易受他人影响，参考他人意见；在他们做出购买决定之前，他们会希望获得更多信息，例如从用户评论中寻找课程是否可靠的线索。评估模块就是这样一个指南。影响。

详细效果图：

过了好久，最后一个模块是详情页的落地效果图。课程真正的卖点集中在这个渲染图上；这里我们不具体分析详情页的文案技巧，也不讨论内容是否抓住了用户的痛点、痒点、刷新点，我们这里主要看页面的布局结构。

测试的老师们一起非常重视详情页的展示，详情页的效果图已经在这个页面的首屏展开。

高土课堂做了足够的准备，老师介绍、测评模块，然后是课程详情和效果图展示。

作业帮助的进度会慢一些，详细的效果图几乎会在第三屏启动。前面还有老师介绍、教学大纲和评价模块。有很多文字信息。教学大纲和评估模块虽然有折叠功能，但似乎也分散了用户的注意力。

毕竟在线教育产品——详情页设计你了解多少，第一眼的视觉体验是最直观的。

详情页的整体视觉定位是否专业、友好、优质？这些视觉体验会让用户对相应课程的质量有一个印象。

如果详情页效果图各模块层次分明，重点突出，图文相配，也能为用户的阅读体验加分。

4. 底部按钮

立即购买：

与常规的“立即购买”不同，高途课堂和作业帮助设计了“添加选课列表”和“立即注册”按钮；点击“Sign Up Now”实际上是跳转到购买页面，但是弱化了购买的措辞。意识。

但根据学生可能拥有多门课程的培训需求，“加入选课清单”打造了学生可以打包购物的场景。但这也带来了：用户将课程添加到选课列表后，会出现退出页面的情况。

当前页面的购买意愿似乎更强了。它只有一个“立即购买”按钮。基于之前所有模块的设计，希望能帮助用户在当下直接做出购买决策。

客服咨询：

作业帮助和高途课堂的咨询按钮可以直接跳转到客服沟通页面，开始机器人对话，然后根据需求转为人工服务。

一起考师范的咨询步骤比较繁琐，需要加入社交群，进入群咨询。但好处是用户可以快速进入学习氛围共同的群组，平台也可以留住课程的初始用户。

三、终于

今天我们讨论了三个详细页面框架。每个平台对详情页的模块设计都有自己的侧重点。事实上，即使是同一个APP，针对不同类型的课程，详情页的模块设计框架也不是固定的。

比如高途课堂，有些课程页面没有评测模块，但是我们今天讨论的详情页面中有一些；比如有些课程的价格模块设计就比较简单，而我们今天讨论的价格模块则蕴含着很多。使用用户心理。

比如有些APP提供个别课程的试听功能，但在我们今天讨论的三门课程中都没有提到。比如在一些APP中点击咨询按钮后，根据课程的性质，可能会跳转到社交群，或者跳转到客服咨询平台等。

为什么布局模块或功能设计会有所不同？提高详情页转化率的最佳方法究竟是什么？我们需要一个合理假设、在线验证和数据收集的过程。

但不管设计方案是什么：帮助用户做决策，提高用户在当前页面的转化率，是详情页的总体设计目标。

对于视觉设计师来说，将效果图带回用户的使用站点，并询问他们设计的目的是什么，可能有助于他们更好地理解详情页。

在收集在线教育APP详情页的过程中，我也看到了很多优秀的产品，比如有道精品课、考总、元复道等APP的详情页设计。由于篇幅有限，这次就不过多讨论了。.

本文由@阿年原创发表于人人都是产品经理，未经允许禁止转载

题图来自Unsplash，基于CC0协议

奖励作者，鼓励TA抓紧创作！

欣赏