```html

教育类网站设计

去年帮一个做 K12 数学思维训练的团队改版官网，他们原来的类网首页打开后要 4.2 秒才能看到第一道例题。用户流失率在 3 秒后就飙到 61%。站设我把首屏的教育计轮播图全砍了，换成一道可以直接拖拽交互的类网几何题，加载时间压到 1.1 秒。站设一周后，教育计注册转化率翻了近一倍。类网教育网站的站设设计，核心不是教育计“好看”，是类网别让用户等，别让用户猜，站设别让用户烦。教育计

加载速度是类网最大的用户体验

很多教育机构喜欢在首页堆高清校园照片、校长寄语视频、站设动态粒子特效。你猜怎么着？三四线城市的用户用着 4G 网络，打开页面看到一片空白，直接关掉。我测过某英语培训机构的落地页，光一个“名师团队”的轮播组件就加载了 2.3MB 的未压缩图片。改起来不复杂：WebP 格式 + 懒加载 + CDN 缓存。但设计阶段就得把“性能预算”写进规范——首屏总资源不超过 500KB，交互响应小于 200ms。做不到？那就砍设计稿，而不是让用户等。

“我们当时觉得动画越炫，家长越觉得我们专业。后来发现家长只关心两件事：试听课怎么约，价格多少。”——一位少儿编程机构的产品负责人原话。

信息架构：别把导航做成迷宫

打开一个教育网站，最烦看到顶部导航栏有七八个一级菜单：“关于我们”、“课程体系”、“师资力量”、“学员风采”、“新闻动态”、“联系我们”、“加入我们”、“APP下载”。用户想找“三年级数学思维课”，得在“课程体系”里点三次才能到。我的做法很简单：把用户最常点的三个动作做成大按钮，固定在顶部或底部。

比如一个留学语培网站，直接放：免费测评、试听课预约、课程价格。其他内容全部收进“更多”折叠菜单。别怕简陋，教育决策是低频高卷入，用户要的是快速判断“这地方能不能解决我的问题”，不是逛商场。

交互细节里的坑

表单设计尤其要命。某在线钢琴陪练平台，注册表单有 11 个必填项，包括“孩子学琴多久”、“每天练琴时间”、“希望达到的水平”。用户填到第 6 项就跑了。后来改成只留手机号 + 验证码，其余信息在首次约课时再逐步收集，完成率从 23% 升到 79%。设计原则：每多一个输入框，转化率掉 7% 左右。这不是我瞎编，是跟几个教育产品经理一起跑 A/B 测试得出的经验值。

还有视频播放器。教育类视频经常需要暂停做笔记、回看某个片段。很多网站用的通用播放器，进度条细得跟头发丝一样，鼠标一抖就拖到别处。自己写个控制条，把进度条加粗到 12px，加一个“回退 5 秒”按钮，用户留存时长能涨 15%。

内容呈现：少用形容词，多给证据

“名师授课”、“提分显著”、“个性化教学”——这些词家长已经免疫了。换成具体数字和可验证的信息：

• “王老师，教龄 8 年，带过 312 个学生，平均提分 23.5 分（附成绩单截图）”
• “每节课后 10 分钟内，你会收到一份孩子课堂表现报告，包含 3 个具体改进点”
• “不满意？第 2 次课后无条件全额退款，已执行 147 次”

设计上，把这些证据做成卡片，用对比色突出数字。别用“匠心”、“赋能”、“闭环”这类词，用户看不懂，也不信。

移动端不是缩小版

很多教育网站 desktop 设计得很精致，一到手机就变成左右滑动的表格、挤成一团的按钮。我习惯先画 375px 宽度的线框图，把核心路径走通，再扩展到桌面。手机端要做的减法：去掉装饰性插图、合并同类按钮、把“立即报名”做成底部悬浮条。手指点击区域至少 44x44 像素，别让用户点个“下一页”都得放大页面。

---

最后说个观察：教育类网站的设计师最好自己去当一次用户。注册个账号，约一节试听课，走完整个流程。你会发现很多在 Figma 里看着舒服的交互，真用起来想砸键盘。设计不是画图，是解决问题。

```