设计概览 · WordWise 重设计

为 K12 学生
重新设计的
智能词汇课。

把 WordWise 从一套"看中文打英文"的练习工具，升级成一款由 AI 引擎驱动、有家长视角、有数据反馈的完整学习产品。下面是 7 个屏幕，点击任一进入。

7 个屏幕 响应式 high-fidelity human-approachable
主色 · oklch(58% 0.13 178) 奖励 · 暖琥珀 AI · 靛紫
01 · LANDING

营销首页

Hero 看中文敲英文，AI 智能编排说明，词书概览，记忆曲线数据可视化，家长视角的 KPI 仪表盘预览，证言，CTA。

landing.html 打开
02 · LEARN

学习练习主界面

三栏布局：连击徽章、单词卡(实时键盘输入 + 字母级正误反馈)、AI 记忆锚点。打开后可直接键盘试敲 undertake。

learn.html · ⌨ 支持键盘输入 打开
03 · DASHBOARD

学习数据中心

KPI 卡、年度热力图、记忆保持曲线、易错词清单、24×7 最佳学习时段、徽章、AI 周报。

dashboard.html 打开
04 · LIBRARY

词书库

核心词书(小学/初中/高中/剑桥)+ 8 个专项(动词三态/反义词对/介词图解/易混淆词…)。"继续学习"卡 + 全库搜索。

library.html 打开
05 · PRICING

定价

三个方案(Free / Pro / Family),月年付切换,完整功能对比表,家长真实关心的 6 个 FAQ。

pricing.html 打开
06 · AUTH

登录 / 注册

左侧表单(支持 登录↔注册 切换 · 学生/家长身份切换 · 微信/Google), 右侧产品海报 + 老师证言。

auth.html 打开
色彩系统

克制的三主色 + 中性底

主色用清新的薄荷青(数字/学习心流), 暖琥珀色仅用在打卡/徽章这种"赢的瞬间", 靛紫专属 AI 提示, 不互相抢戏。

accent
deep
honey
ai
success
ink

全部用 oklch() 定义, 跨色板线性过渡, 不会出现传统 HSL 的"灰带"问题。

排版系统

三个字体栈

显示字体用系统级 Söhne/SF Pro Display,正文用 SF Pro Text,数字 + 单词 + 键盘提示统一用 JetBrains Mono,让学习过程像 IDE 一样"工具感"十足。

Display 看见中文，敲出英文。
Body 每个孩子的忘记曲线都不一样。
Mono undertake /ˌʌn.dəˈteɪk/