📌 用了规范库的什么
皮肤:lively-young 活泼趣味
整套 App 直接复用了活泼趣味皮肤的令牌(tokens.css 逐字一致),没有自创任何视觉值:
| 令牌 | 取值 |
|---|---|
| 主色 | #FF6B6B 暖珊瑚(非荧光) |
| 辅色 | #4ECDC4 薄荷青 |
| 背景 | #FFF9F5 暖米底 |
| 标题字体 | ZCOOL KuaiLe 圆体 |
| 圆角 | 大圆角 12-28px |
| 点击热区 | 48px(K12 加大) |
架构:三层 CSS + 令牌驱动
和规范库推崇的做法完全一致——换肤只改 tokens.css,base/components 不动:
tokens.css— 令牌层(活泼皮肤)base.css— reset + 基础元素components.css— 按钮/卡片/导航/列表等组件
20 个页面共享同一套 CSS,任何视觉调整只动 tokens 一个文件。案例在此基础上还做了进阶:用 color-mix() 从主色派生次级/暗色模式,杜绝自创 hex。
列表页
时文阅读
阅读文章列表+筛选
详情页
课程详情
主信息+正文+章节+报名操作
详情页
阅读详情
文章正文+生词+练习
个人中心
我的
用户卡+学习数据+功能入口
聚合页
AI 学习
AI 功能聚合入口
工具页
单词背诵
卡片翻转+认识/不认识
工具页
AI 口语陪练
对话式练习界面
工具页
48 音标
音标网格+发音
导航页
全部功能
功能总览
导航页
工具箱
工具聚合
共 20 个页面,以上为主要入口。AI 系列(作文批改/薄弱点诊断/问老师)、教材/词书库等可在 App 内导航到达。
🛡️ K12 家长约束怎么落实
本案例的用户是 K12 小初学生,但付费方是家长。活泼趣味皮肤的受众约束在这个案例里得到了具体体现:
✅ 外层活泼,内核扎实
- 圆体标题 + 暖珊瑚 + 大圆角,对孩子亲和有趣
- 但内容是校内课本同步、音标、单词、阅读——家长认可的"正经知识"
- AI 辅导服务于"学懂课本",不是娱乐化
✅ 文案不低幼、不网络黑话
- 用"每天进步一点点""继续学习"等正常鼓励语
- 没有"宝宝""吃饭饭"等低幼化用语
- 没有 yyds/绝绝子 等网络黑话
- emoji 节制,仅作标题点缀
✅ 无诱导性游戏化
- 有进度条/星星激励,但没有红包、抽盲盒等诱导消费
- 奖励是"学习成就",不是物质刺激
✅ 配色克制不刺眼
- 主色暖珊瑚饱和度适中,非荧光
- 暖米底柔和护眼,适合长时间阅读
- 点击热区加大到 48px,照顾儿童手指控制力
💡 这个案例能学到什么
1. 令牌驱动不是理论,是实战。20 个页面共享一套 tokens.css,改一个变量全站生效。这正是规范库的核心价值——可维护性。
2. color-mix() 派生色。案例用 color-mix(in srgb, 主色 65%, 白) 派生次级色和暗色模式,不手写新 hex。这是令牌驱动的高级用法——更少的基础值,更多的派生。
3. 布局库 + 皮肤 = 完整产品。导航型首页、列表页、详情页、个人中心、工具页——这些布局骨架在 布局指南里都有,案例把它们和活泼皮肤组合,落地成真实产品。
4. K12 约束是可执行的规则。"外层活泼内核扎实""不低幼不黑话""无诱导游戏化""配色克制"——这些不是口号,在 lively-young 皮肤的 audience_note 里就写着,案例证明它能落地。
📱 进入案例 App 体验 →
在手机浏览器打开效果最佳(含底部 Tab 导航)