导语：用户会在哪个页面停留更久？在订单关闭前，用户通常看到的最后一页是什么？这个答案对于视觉设计师来说并不陌生：详情页。通常设计师设计的细节页面都是静态的。今天就来说说在线教育行业的详情页界面设计，让详情页可以动起来。
#一、思考
我们先来看这样一个问题。当你在某宝买衣服时，什么会促使你下单？
进入产品详情页后，模特的穿衣效果如何？促销价格？用户评价？买家秀？正品保证？运费保险？等等……是什么信息，让你有什么感受，促使你下单？
不仅对于电商平台，对于在线教育平台，详情页也是提高转化率非常重要的一个层面。
那么，如何通过设计的手段帮助用户做出购买决策，提高商品的转化率呢？带着这样的疑惑，我们先来看看在线教育的详情页是如何设计的。
#二。详细信息页面显示
今天我们就来体验这三款：属于K12的作业帮APP、高图课堂APP、属于成人职业教育的一考老师APP、三款在线教育产品。
从点击进入APP开始，用户将通过一层或多层交互进入产品详情页面。通常情况下，用户会对这个产品有潜在的或明确的需求，比如这个产品能提供什么，是否不可靠，是否适合自己。
让我们来看看这三个应用是如何设计的：
这张截图展示了iPhone7的体验环境。
我们先来看看上面的文件夹，也就是用户进入详情页后看到的第一张图片。
可以发现，细节屏前半部分三款app的设计框架基本一致：顶部是课程展示图，中间是课程名称和价格，然后是优惠服务。
自从优惠服务后，模块信息有了自己的侧重点。
我们依次来看。
## 1\.顶级课程演示图
这是用户进入页面时看到的第一个信息。
家庭作业帮助的课程地图是一个介绍六年级课程的动物ip。卡通动物和鲜艳的配色让画面亲和力更强，这也符合作业帮的定位：中小学生在线辅导网络课程。咨询和陪伴是给人友好感觉的词。
高途课堂的定位：名师是高途学生，网课选择高途课程。名师是他们的主要卖点，用微质感背景衬托出挺拔西装的高中老师；整体画面干净干练，清晰的教师形象给人专业严谨的感觉。
作为职业教育平台的考试老师，在课程地图的选择中，短视频被用来展示信息。收取考试费的用户大部分是成年女性。在考虑亲和力的同时，视频可以让用户比图片停留的时间更长。
## 2\.课程介绍、价格和服务
先说说课程介绍，价格和服务。
三款应用几乎相似，包括课程名称、开始时间、价格、折扣和服务模块。但是在价格和服务模块，一起考试的老师和另外两个形成对比。
价格模块：
考试的老师一起指出了购买者的数量。27人的购买量有心理指导，相当于告诉用户在你之前有多少人做过购买决定。这不仅适用于人群的从众心理，也是增加信任的好方法。
关于如何显示价格，一起考试的老师设计了这样的方式：划掉原价497元，用放大的红色字体突出467元的优惠价格，加上“特价”的小标签再次强调课程的优惠，双重提醒强化促销氛围。同时起始时间增加到价格以下，时间节点通常会给人一种恐慌感，促使用户做出决策。
此外，在本模块的设计中，根据课程的性质，增加了一个在整个课程和协议课程之间切换的按钮，对于有类似需求的用户来说非常友好，无需回到上一页进行相关搜索，两个课程的对比可以b
相对来说，作业帮和高图课堂的价格模块设计比较简单，只展示原价，可能与两者的用户群体和课程本身的定价策略有关。
尽管
作业帮和高途课堂面向的用户是学生，但真正作出购买决策的是家长们，家长们愿意给孩子找寻更好的教育资源。一定程度上，价格高低、是否折扣会给人带来质量优或良的感受。当然，三者的具体定价金额会和课程本身的定位、课程实际提供的服务、课程预期的售卖人群密切相关，但这个也不影响我们就价格的设计方式进行思考。
整体来说，一起考教师的价格模块结合了更多人性规律来设计。通过小设计增加用户的信任感，制造一种时间氛围上的紧迫感，并营造买买买的促销购物环境；心理感受上的重复也会加强人的情绪记忆，这些都会影响用户行为。
优惠服务：
对于优惠服务模块，作业帮和高途课堂的展示更为直接。
优惠：“购买长期班，即得精品课”，做什么动作，你就可以得到什么。
服务：“直播授课课堂回放随堂测试纸质教材”四字短句，简单明白、结构美观、服务丰富。如果用户想深入了解，点击右箭头，会有详细的解释说明。
一起考教师在这儿提供的是赠品信息，为了突出这一项，它将赠品文案颜色标红并增加一个红色边框。赠品不同于服务，赠品应该大于服务；因为在词语理解上，赠品是产品之外额外赠送的礼物；点击右箭头，对6个赠品的内容，会有简单说明。
整体来看，作业帮和高途课堂的优惠服务介绍简明扼要，而一起考教师更注重利益点的传达。
## 3\. 信息模块
在实际页面浏览过程中，大部分用户会继续往下滑动，来观看后面更重要的课程信息，也就是信息模块内容。
从这里开始，三家APP对于模块展示就各有侧重。
* 作业帮：选择老师和时间、课程大纲、学员评价、课程详情。
* 高途课堂：授课老师、课程评价、课程详情、课程大纲。
* 一起考教师：课程详情、课程表、授课教师、课程评价。
授课老师：
作业帮和高途课堂是面向青少年的学习平台，青少年有容易外显的情绪特点；无论是因为主打卖点是明星老师们，还是青少年更容易产生对老师的好恶情绪，作业帮和高途课堂都将老师模块放在了最前面。
在这里，作业帮还增加了一个DIY功能：选择老师和时间的服务。用户可以根据自己的偏好和便利度自行选择课程，当然，这个功能相应地也会给平台：对内的老师资源排期和课程时间排期，增加一定的复杂度。
对比来看，一起考教师对于授课老师的展示，在模块设计上进行了弱化；或者说，它更想突出的是“课程详情”的详情效果图，因为用户的使用习惯更倾向于滑动页面向下继续查看信息，需要点击才能查看的“课程表”“授课教师”“课程评价”，更适用于对此信息有明确诉求的用户。
课程评价：
同为课程评价，模块设计上是否有一些讨巧的地方？我们先来看高途课堂对于评价模块的设计。
高途课堂在评价模块有这些设计：课程总评分5.0分、课程评价数815条、4颗星或5颗星评价，优质用户评论。
不管是总评分、还是丰富的课程评价数量、以及被选中的真实感学员的完整优质评论，这个热闹的氛围都在影响浏览中的用户：大家用的都好，购买此课程是个明智的选择。
用户与课程之间，也是需要信任感的。
相对而言，作业帮的评价模块设计比较简约，并且还跟在课程大纲模块之后，几乎是在第二屏的最后；唯一展示出来的一位用户评论，还需要点击才能查看完整信息，这个步骤相对繁琐。
而一起考教师的评价模块就被弱化了，浏览时需要点击课程评价按钮，才会进入评价页面；这里的课程评价是按时间顺序进行浏览，没有筛选个别优质评论；因为评论信息有4000多条，整体来说信息量较多，翻看评论会花费时间。
用户都容易被他人影响、容易参考他人观点；他们在作出购买决策之前，会希望获取更多信息，比如从用户评论中寻找这门课程是否靠谱的蛛丝马迹，评价模块正是起到这样的引导作用。
详情效果图：
千呼万唤始出来，最后一个模块是详情页落地效果图。真正的课程卖点，都集中在这张效果图里；在这里我们不具体分析详情页的文案的撰写技巧，也不去讨论内容是否了抓住用户的痛点、痒点、爽点，我们在这里主要还是看页面的布局结构。
一起考教师非常重视详情页的展示，在进入这个页面第一屏就已经将详情页效果图推出。
高途课堂则做好了足够的铺垫，比如老师介绍、评价模块，再来展示课程详情效果图。
作业帮的进度会慢一些，几乎第三屏才开始推出详情效果图，前面还有老师介绍、课程大纲和评价模块，文字信息量较多，虽然课程大纲和评价模块都有折叠功能，但似乎也会分散用户的注意力。
毕竟视觉的第一眼感受是最直观的。
详情页的整体视觉定位是专业、友好、品质？这些视觉感受都会给用户带来对应课程的品质印象。
如果详情页效果图的各模块层级明晰、重点突出、图文匹配，也能在用户的阅读体验上加分。
## 4\. 驻底按钮
立即购买：
与常规的“立即购买”不同，高途课堂和作业帮设计了“加入选课单”和“立即报名”按钮；点击“立即报名”其实也是跳转到购买页面，只是在措词上弱化了购买的意识。
但基于学生可能有多门课程的培训需求，“加入选课单”营造了一个可以打包购物的场景。但这也会带来：用户当下将课程加入选课单后，会有退出页面的情况发生。
一起考教师在当前页的购买意愿似乎更强，它只有一个“立即购买”的按钮，基于前面的所有模块的设计方式，它更希望帮助用户在当下直接做出购买决策。
客服咨询：
作业帮和高途课堂的咨询按钮能够直接跳转到客服沟通页面，先进行机器人对话，可根据需求转人工服务。
一起考教师的咨询步骤相对繁琐，需要添加至社交群后，进群咨询。但是带来的好处是：用户能够快速进入到一个有共同学习氛围的群体中，平台也能留下课程的初始用户。
# 三、最后
今天我们探讨了三份详情页面框架，各平台对于详情页的模块设计各有侧重；其实，即便是同款APP，对于不同类型的课程，详情页面的模块设计框架也不是固定不变的。
比如高途课堂，部分课程页面没有评价模块，但我们今天探讨的详情页面里是有的；比如一起考教师，部分课程的价格模块设计也比较简约，而我们今天探讨的价格模块是暗含了很多用户心理的运用。
比如部分APP对个别课程有提供试听功能，但今天我们探讨的这三份课程里并没有提及。比如部分APP点击咨询按钮后，根据课程性质，可能会跳转到社交群，也可能跳转到客服咨询平台等等。
为什么布局模块或功能设计会不一样？究竟什么是提高详情页面转化率的最佳方案呢？我们需要一个合理假设、上线验证、数据收集的过程。
但不管是怎样的设计方案：帮助用户做出决策，来提高用户在当前页面的转化率，是详情页面的常规设计目标。
对于视觉设计师而言，把效果图带回到用户的使用现场，追问自己设计的目的究竟是什么，或许能帮助自己更好地理解详情页。
在收集在线教育APP详情页面的过程中，我也看到很多优秀的产品，比如有道精品课、考虫、猿辅导等APP的详情页面设计，因篇幅有限，本次就不做过多探讨。
本文由 @阿念 原创发布于人人都是产品经理，未经许可，禁止转载
题图来自 Unsplash，基于 CC0 协议
