字数
1745 字
阅读时间
8 分钟
下面这套**“低扰动、可关怀、可预警”**色彩系统，专为心理辅导场景而定：让界面像一位安静的同伴——多数时候是温柔的背景，需要强调时再明确表达风险与状态，契合你“行为闭环＋社区守护＋SOS”的产品主线。
1) 设计目标（三条铁律）
- 低唤醒：以柔和、偏冷中性的色相为基底，避免大面积高纯度色块，减少生理唤醒与心理负担。
- 语义清晰：把“建议→任务→提醒→回执→回访”的行为闭环、论坛预警、SOS 紧急流程，用一套稳定的语义色统一表达。
- 可切换场景：支持“晚安模式”“考试周主题皮肤”等场景化主题，颜色在明暗与饱和上可顺滑过渡，不破坏既有语义。
2) 品牌与基础色板（Light / Dark）
建议中性偏冷的品牌基调，配合两枚暖色点缀，用于温度与人情味。
品牌主色 · Calm Blue（安心蓝）
- 50
#EEF5FF｜100#D9E8FF｜200#BFD6FF｜300#9AC0FF｜400#6FA4FF - 500
#3A7BD5（主按钮/选中）｜600#2E6FE6｜700#2558B8｜800#1E4791｜900#16356A
辅助色 · Lavender（雾紫）
- 50
#F4F3FF… 500#8C86FF… 900#3E3B86（用于信息型模块、空状态插画）
强调色 · Mint（薄荷绿）
- 50
#EAFBF5… 500#2AC28D… 900#0F4D39（用于正向反馈、完成回执）
中性色（Ink / 雾灰）
- 0
#F7F9FC（页面底色）｜50#F2F4F8｜100#E9EDF3｜200#D7DEE7｜300#C5CEDA - 400
#9AA6B2｜500#7B8893｜600#5A6672｜700#434E5A｜800#2C3640｜900#1B232B｜950#0F141A
暗色主题（关键对位）
- Page
#0F141A｜Surface#161B22｜Text 主#D1D7E0｜次#9AA6B2 - Primary-500 在暗色中提升到
#6096FF确保对比；Danger-500 调整为#FF6B6B（面积受控）
使用比例：中性 70%｜品牌主色 20%｜强调/辅助 10%。大面积让中性色说话，功能点用色“像加注脚，不要拉横幅”。
3) 语义色（反馈与状态）
| 语义 | 500 主色 | 浅背景（填充/徽章） | 文本/边框 |
|---|---|---|---|
| Info / 提示 | #3A7BD5 | #EEF5FF | #2E6FE6 |
| Success / 完成 | #2AC28D | #EAFBF5 | #1FA476 |
| Warning / 提醒 | #F2B23D | #FFF6E8 | #D9961E |
| Danger / 错误 | #E24C4B | #FFEDEA | #C23C3B |
- 用法：按钮=500；轻提示/徽章=50~100；边框/图标描边=600。
- 原则：不以颜色为唯一信息，同时给出图标/文案。
4) 风险与预警色阶（论坛/SOS 专用）
这部分与“树洞 ingest→风险打分→阈值告警→人工转交”的流程绑定，视觉上要稳但明确。
- R1 观察（蓝灰）：
#3A7BD5/ 背景#EEF5FF - R2 关注（琥珀）：
#F59E0B/ 背景#FFF7E8 - R3 警戒（橘红）：
#F97316/ 背景#FFF1E8 - R4 升级（红）：
#DC2626/ 背景#FFEAEA（面积严格受控，仅用于条幅/弹窗头） - SOS 按压态：按钮底
#DC2626，按下叠加 8% 黑蒙层 + 强震动/动效一帧即可，避免“惊吓式”动画。
5) 情绪与心情随笔色（“心情轮”／标签）
颜色辅助自我觉察，但不“给情绪贴好坏标签”。色相温和、饱和度中低。
- 平静
#5AA6A6｜喜悦#F5A97F｜专注#7C86FF｜悲伤#8BA3C7 - 愤怒
#E57A74｜焦虑#C9A86A｜倦怠#92A1B0 - 可视化图表以淡填充+深描边为主，避免“刺眼的大片色面”。
6) 场景主题（主题皮肤 & 晚安模式）
- 默认·安心：上面基础板。
- 考试周（专注绿调）：把辅助色临时替换为
#5CA58C系列，弱化分心。 - 晚安模式：整体转暗色方案，动画降速、饱和度再-10%，提示色统一降阶一档。
7) 组件映射（落地即用）
- 主按钮：背景 Primary-500 / 悬停 600 / 禁用 200；文字常白。
- 次按钮：描边 Primary-300 / 文本 Primary-600 / 悬停 bg Primary-50。
- 信息卡片：背景 Grey-0 或 50；信息/成功/警告/错误卡片用对应语义浅背景＋500 文本/图标。
- 行动任务卡（社区可领取）：标题用 Ink-800，“去完成”按钮用 Success-500；完成后卡片底色淡绿 50，提供温和成就感。
8) 可访问性与可读性
- 文本对比：正文与背景对比度 ≥ 4.5:1；大字或粗体 ≥ 3:1。
- 交互控件（按钮、开关、列表项）焦点/按下态必须出现非颜色的变化（阴影/边框粗细/下划线）。
- 色盲安全：危险/成功/信息的图标形状各不相同；图表用纹理/点划线辅助区分。
- 大面积背景不使用纯白 #FFFFFF，选
#F7F9FC降对比疲劳。
9) 设计 Token（命名建议）
scss
/* Brand & Neutral */
--color-brand-50:#EEF5FF; --color-brand-500:#3A7BD5; --color-brand-700:#2558B8;
--color-ink-0:#F7F9FC; --color-ink-500:#7B8893; --color-ink-900:#1B232B;
/* Semantic */
--color-info-50:#EEF5FF; --color-info-500:#3A7BD5; --color-info-600:#2E6FE6;
--color-success-50:#EAFBF5; --color-success-500:#2AC28D; --color-success-600:#1FA476;
--color-warning-50:#FFF6E8; --color-warning-500:#F2B23D; --color-warning-600:#D9961E;
--color-danger-50:#FFEDEA; --color-danger-500:#E24C4B; --color-danger-600:#C23C3B;
/* Risk Levels */
--color-risk-r1:#3A7BD5; --color-risk-r2:#F59E0B; --color-risk-r3:#F97316; --color-risk-r4:#DC2626;10) 小程序关键位配置（示例）
json
// app.json 关键色（示意）
{
"window": {
"navigationBarBackgroundColor": "#FFFFFF",
"navigationBarTextStyle": "black",
"backgroundColor": "#F7F9FC",
"backgroundTextStyle": "light"
},
"tabBar": {
"color": "#5A6672",
"selectedColor": "#3A7BD5",
"backgroundColor": "#FFFFFF",
"borderStyle": "black"
}
}应用内的“晚安模式/考试周主题”，通过运行时切换 Token 表实现，无需改写组件逻辑。
11) 使用“红色”的底线
- 红色只用于 R4 升级预警 / SOS、删除等不可逆动作；
- 表单报错、一般失败优先用 Danger-500 的小面积提示，不要通篇大红条，避免二次打击。
12) 验收清单（5 分钟走查）
- [ ] 任意页面主文本与底色对比 ≥4.5:1
- [ ] 按钮/控件有非颜色的状态变化
- [ ] 风险标注只出现在需要的层级与位置
- [ ] 深浅主题切换后语义色不歧义
- [ ] 树洞贴、任务卡、周报三大场景的语义色一致。
一句话收束
这不是“好看的一盘色”，而是会做事的色彩系统：默认安静、状态清晰、风险有度，且能跟随“行为闭环—预警—转介”的产品节奏稳定工作。需要的话，我可以把这套色板导成设计 Token（JSON/WXSS 变量）和 Figma 共享样式，直接进工程与原型。
贡献者
Cai Hongyu