作业小管家 / DESIGN SYSTEM 2.0

杏橙晨光 · 视觉系统

同一套颜色、组件与交互语言,陪伴每一次功能生长。

返回交互原型 ↗

01 / 色彩:温暖有层次,鲜亮有重点

行动橙--primary / #E83E16

晨光杏--sky / #FFDDB0

希望金--gold / #FFD035

休息浅紫--rest / #F0E3FF

暖棕正文--ink / #50241B

暖白画布--canvas / #FFF3E5

橙色只突出主要行动;金黄用于序号与小范围强调;浅紫固定表达休息、暂停。大面积内容保持白色。渐变图片无法提供唯一原始色值,这里为对照源图制定的可复用近似值。

02 / 组件:复用模式,避免另起风格

按钮 / 主行动、次行动、辅助行动

默认48px起,辅助按钮40px起,焦点紫色描边;禁用降低透明度且不可点击。

任务 / 序号、内容、预计时长

01数学口算20道 · 容易10分钟
02应用题4题 · 较难15分钟
休息 5分钟
语文阅读已完成 · 短文阅读15分钟

计时 / 原图椭圆、云朵、金色弧线

本段剩余时间08:32

本段12分钟 · 任务预计10分钟

静态组件样例 · 计时记录不代表持续专注

表单 / 同一暖白表面与边框

错误样例:请填写1—180之间的整数。

可见标签,保留输入,错误就地说明。弹窗使用统一24px圆角与温暖遮罩。

03 / 字体与空间

用途规范使用限制
品牌 / 页面标题21px / 25px,700–850系统中文字体;问候语使用楷体优先
执行标题 / 数字38px / 78px,850数字等宽;窄屏适度缩小
任务 / 正文 / 说明17px / 16px / 12–13px说明不承担关键操作信息
间距4、8、12、16、20、24、32px优先选择既有间距,不按页任意设值
卡片 / 按钮 / 弹窗18px / 999px / 24px列表浅阴影;避免厚边框和多重阴影

04 / 后续功能如何保持统一

05 / 全部功能界面

所有入口可打开体验;账号、AI、短信及管理操作均为模拟。

06 / 空、加载、错误与成功状态

空状态

还没有可比历史记录。

先记录今天,之后再逐步调整。

加载状态 · 静态样例

正在处理,请稍候。实际未知进度不展示百分比。

失败与降级

环境分析暂时不可用

保留已填内容,可以重试或转人工自查。

成功状态

已保存

计划已更新,原有完成记录保留。

权限状态

你没有这个家庭的访问权限。

正式服务不返回他人家庭内容;当前仅界面样例。

离线与恢复

网络暂不可用,当前演示计时继续。

返回后按时间戳恢复。锁屏提醒不作保证。

07 / 管理后台组件模式

管理动作:同源主色,降低装饰密度

桌面侧边导航238px,内容自适应;手机变成可横向滚动的模块导航。

状态:文字和颜色共同表达

正常失败未配置模拟成功 · 未真实发送

表格只在自身容器内滚动。手机号脱敏,密钥仅占位;必要访问弹窗记录事由。

同一套弹窗语言

新功能也使用相同的表面、圆角、间距与主次按钮。