作业小管家 / 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
静态组件样例 · 计时记录不代表持续专注
表单 / 同一暖白表面与边框
错误样例:请填写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,内容自适应;手机变成可横向滚动的模块导航。
状态:文字和颜色共同表达
表格只在自身容器内滚动。手机号脱敏,密钥仅占位;必要访问弹窗记录事由。