甄房业务系统 · 色彩体系选型对比
面向「经纪人高频长时使用」的业务平台，从全球主流 SaaS / ERP 设计系统中筛选出综合评分最高的三套，
各自结合已定稿的 LOGO（框内 Forte Z ＋ 甄房墨蓝 #0C2340）开发完整界面色彩方案。
三套方案的界面结构完全相同，只替换色彩令牌 —— 保证对比公平。所有对比度数值由页面运行时真实计算，非人工填写。
一、调研结论数据来源：三家官方设计系统文档
筛选维度与权重：数据密度适配 25% ｜ 长时使用舒适度 20% ｜ 无障碍可推导性 15% ｜ 品牌融合度 15% ｜ 落地迁移成本 15% ｜ 行业验证广度 10%。
注意：「无障碍」一列评的是体系提供了多少可推导的对比度规则，与默认色盘的实际通过率并不同向 —— Carbon 规则最硬，但它把 Yellow 30 定位成警报条底色，被当文字色用就会不达标；AntD 规则最少，默认色盘实测反而是问题最多的。所以下面每一套都给出实测通过率与生产落地必改项。
| 体系 | 定位与代表产品 | 密度25% | 舒适20% | 无障碍15% | 品牌15% | 成本15% | 验证10% | 加权总分 |
|---|
| IBM Carbon Design System | IBM 全线产品 · 数据密集型企业级标杆 |
9.5 | 9.5 | 10.0 | 8.5 | 7.5 | 9.0 |
9.08 |
| SAP Fiori · Morning Horizon | SAP S/4HANA、Ariba 等 ERP 全线 |
9.0 | 8.8 | 9.5 | 8.0 | 7.0 | 9.5 |
8.63 |
| Ant Design 5 | 阿里/蚂蚁中后台生态 · 国内事实标准 |
8.0 | 7.5 | 8.0 | 8.5 | 9.5 | 9.0 |
8.30 |
依据：Carbon 官方明确「Neutral Gray family is dominant」并规定「避免使用中间调」，Blue 60
#0f62fe 为全局 primary action，四套官方主题（White / Gray 10 / Gray 90 / Gray 100）；
Fiori Horizon 提供 S0–S8 表面、T1–T9 文字、边框、语义、强调五组语义令牌，并给出「相隔 4 级 = 3:1、相隔 5 级 = 4.5:1」的可推导对比度规则；
Ant Design 5 以
colorPrimary #1677ff 为种子令牌，色板由算法生成 12 色 × 10 阶，第 6 阶满足 WCAG 4.5:1。
参考：
Carbon Color Tokens ·
SAP Fiori Theming ·
Ant Design 色彩
二、三套方案的完整界面
核心策略：品牌色与交互色分离 —— 三套方案都把甄房墨蓝 #0C2340 固定在品牌/导航区（侧栏、Shell Bar、登录页），
交互色各自沿用体系的官方主色（#0F62FE / #0070F2 / #1677FF）。
这样既保住品牌识别，又拿到该体系已验证的交互反馈与无障碍保障。
方案 A · Carbon 严谨派
IBM Carbon Design System加权 9.08 / 10
以中性灰主导、蓝色只承担「行动色」的经典企业级体系。四套官方主题（White / Gray 10 / Gray 90 / Gray 100）与分层模型，为数据密集型界面而生。
| 房源编码 | 楼盘 / 房号 | 面积 | 售价 | 状态 | 维护人 | 操作 |
| SH-ES-202609-00037 |
滨江壹号 3幢 1802滨江区 · 钱塘江畔 |
128.5 ㎡ | 1,285 万 | 有效 | 张伟 |
查看编辑 |
| SH-ES-202609-00041 |
钱江新城 7幢 2201上城区 · 万象城 |
156.0 ㎡ | 1,860 万 | 待检核 | 李敏 |
查看编辑 |
| SH-ES-202609-00052 |
滨江壹号 5幢 901滨江区 · 钱塘江畔 |
98.2 ㎡ | 920 万 | 独家 | 王强 |
查看编辑 |
| SH-ES-202609-00058 |
绿城桂语 2幢 1503西湖区 · 文三路 |
142.6 ㎡ | 1,420 万 | 维护中 | 张伟 |
查看编辑 |
| SH-ES-202609-00063 |
万科未来 1幢 608余杭区 · 未来科技城 |
89.0 ㎡ | 610 万 | 已下架 | 赵磊 |
查看删除 |
| SH-ES-202609-00071 |
滨江壹号 2幢 1101滨江区 · 钱塘江畔 |
110.4 ㎡ | 1,080 万 | 草稿 | 李敏 |
查看编辑 |
ℹ提示：该房源委托期将于 7 天后到期，请及时续签。
✓成功：房源 SH-ES-202609-00037 已提交检核。
⚠警告：钥匙编号与系统记录不一致，请核对。
✕错误：售价不能低于政府指导价，请修改后重试。
色彩令牌
品牌 / 导航底#0C2340甄房墨蓝（品牌区、侧栏、登录页）
交互主色#0F62FEBlue 60 · 官方 primary action
主色悬停#0043CEBlue 70
主色按下#002D9CBlue 80
主色浅底#EDF5FFBlue 10 · 高亮/选中浅底
页面底色#FFFFFF$background（White 主题）
分层底色#F4F4F4Gray 10 · $layer-01
悬停底色#E8E8E8Gray 10 hover
选中底色#E0E0E0Gray 20 · $layer-selected-01
边框#E0E0E0Gray 20
边框-强#8D8D8DGray 50
一级文字#161616Gray 100
二级文字#525252Gray 70
三级文字#6F6F6FGray 60
成功#198038Green 60
警告#F1C21BYellow 30
错误#DA1E28Red 60
信息#0F62FEBlue 60
品牌金（点缀）#C6A15B仅 logo / 关键数字，占比 ≤5%
对比度实测（WCAG，AA 正文 4.5:1 / AA 大字与图形 3:1）
优点
- 中性灰主导（官方原文 “Neutral Gray family is dominant”），长时间盯表格最不累
- 明确要求「避免使用中间调」，界面层次靠灰阶深浅而非色块，密度最高
- 无障碍是一等公民：官方每个令牌都标注对比度要求（如 $layer-selected-inverse 标 4.5:1 AA）
- 四套官方主题 + 分层模型，深色模式与高对比模式有现成规范
代价与不足
- 圆角基本为 0（2px），偏工程感，国内用户可能觉得「硬」
- 品牌金几乎没有落点，品牌温度靠墨蓝承担
- 与 ElementUI 的默认圆角/间距差异大，改造成本三套中最高
适用场景
- 数据密度极高的作业台（房源批量检核、佣金结算）
- 需要长时间连续录入/核对的岗位
- 对无障碍有硬性要求的场景（政企、大客户交付）
生产落地必改项依据上表实测结果
| 用途 | 原值 | 建议改为 | 理由 |
|---|
| 警告色用法 | #F1C21B 作文字色 | 黄只作底色（#F1C21B 底 + #161616 字） | Yellow 30 在白底上仅 1.68:1；Carbon 官方本就把黄色用于警报条底色而非文字色 |
| 圆角 | 2px | 按国内习惯可放宽到 4px | 不是超标项，属外观取舍；Carbon 的 0–2px 方角在国内后台会显「硬」 |
方案 B · Fiori 商务派
SAP Fiori · Morning Horizon✓ 已定稿加权 8.63 / 10
ERP 领域事实标准。语义令牌分层最完整：表面 S0–S8、文字 T1–T9、边框、语义色、强调色五组，并给出可推导的对比度规则。
| 房源编码 | 楼盘 / 房号 | 面积 | 售价 | 状态 | 维护人 | 操作 |
| SH-ES-202609-00037 |
滨江壹号 3幢 1802滨江区 · 钱塘江畔 |
128.5 ㎡ | 1,285 万 | 有效 | 张伟 |
查看编辑 |
| SH-ES-202609-00041 |
钱江新城 7幢 2201上城区 · 万象城 |
156.0 ㎡ | 1,860 万 | 待检核 | 李敏 |
查看编辑 |
| SH-ES-202609-00052 |
滨江壹号 5幢 901滨江区 · 钱塘江畔 |
98.2 ㎡ | 920 万 | 独家 | 王强 |
查看编辑 |
| SH-ES-202609-00058 |
绿城桂语 2幢 1503西湖区 · 文三路 |
142.6 ㎡ | 1,420 万 | 维护中 | 张伟 |
查看编辑 |
| SH-ES-202609-00063 |
万科未来 1幢 608余杭区 · 未来科技城 |
89.0 ㎡ | 610 万 | 已下架 | 赵磊 |
查看删除 |
| SH-ES-202609-00071 |
滨江壹号 2幢 1101滨江区 · 钱塘江畔 |
110.4 ㎡ | 1,080 万 | 草稿 | 李敏 |
查看编辑 |
ℹ提示：该房源委托期将于 7 天后到期，请及时续签。
✓成功：房源 SH-ES-202609-00037 已提交检核。
⚠警告：钥匙编号与系统记录不一致，请核对。
✕错误：售价不能低于政府指导价，请修改后重试。
色彩令牌
品牌 / Shell Bar#0C2340甄房墨蓝（Shell Bar、应用头）
交互主色#0070F2Blue 7 · S2 Secondary / T4 CTA
主色悬停#0057D2Blue 8 · T7 Selected
主色按下#0040B0同体系推导（Blue 8 再压一档）
主色浅底#EBF4FES5 Selected Surface（官方 rgba(0,112,242,.08) 在白底上的合成值）
页面底色#FFFFFFS0 Base Background
次级底色#F5F6F7S4 Quaternary · Grey 1
边框#D5DADDGrey 3
边框-强#A9B4BEGrey 4
一级文字#223548T1 · Grey 9
二级文字#475E75T2 · Grey 7
三级文字#5B738BT3 · Grey 6
成功#256F3APositive（同体系参考值）
警告#E76500Critical · Mango（同体系参考值）
错误#D20A0ARed 7 · Negative（官方确认）
信息#0070F2Blue 7
品牌金（点缀）#C6A15B仅 logo / 关键数字，占比 ≤5%
对比度实测（WCAG，AA 正文 4.5:1 / AA 大字与图形 3:1）
优点
- 唯一为 ERP 事务场景设计的体系，表格/表单/Shell 的层级划分最成熟
- 「相隔 4 级 = 3:1、相隔 5 级 = 4.5:1」——对比度可推导，选色不用猜
- 选中态用 8% 蓝底（而非实色块），长时间使用不刺眼
- 品牌化路径最清晰：官方 Quick Theming 就是「替换 logo + 主品牌色」
代价与不足
- Shell Bar + 应用头 + 页面头三层结构，垂直空间占用大，密度略低于 Carbon
- 蓝白对比偏冷、现代感一般，年轻经纪人可能觉得「像老系统」
- 部分语义色官方文档未完整公开，落地前需核对准确值
适用场景
- 交易全流程、佣金结算这类强流程、强状态的模块
- 与财务/ERP 打通、需要符合企业级规范的场景
- 多角色、多层级权限的后台（选中态与层级表达最清楚）
生产落地必改项依据上表实测结果
本方案 12 项对比度检查全部达标，无需为无障碍做任何色值改动 —— 三套中唯一「开箱即合规」的方案。
方案 C · AntD 亲和派
Ant Design 5加权 8.30 / 10
国内中后台事实标准。12 色 × 10 阶色板 + 算法生成，可在品牌色基础上自动产出整条色阶；中文文档与团队熟悉度最高。
| 房源编码 | 楼盘 / 房号 | 面积 | 售价 | 状态 | 维护人 | 操作 |
| SH-ES-202609-00037 |
滨江壹号 3幢 1802滨江区 · 钱塘江畔 |
128.5 ㎡ | 1,285 万 | 有效 | 张伟 |
查看编辑 |
| SH-ES-202609-00041 |
钱江新城 7幢 2201上城区 · 万象城 |
156.0 ㎡ | 1,860 万 | 待检核 | 李敏 |
查看编辑 |
| SH-ES-202609-00052 |
滨江壹号 5幢 901滨江区 · 钱塘江畔 |
98.2 ㎡ | 920 万 | 独家 | 王强 |
查看编辑 |
| SH-ES-202609-00058 |
绿城桂语 2幢 1503西湖区 · 文三路 |
142.6 ㎡ | 1,420 万 | 维护中 | 张伟 |
查看编辑 |
| SH-ES-202609-00063 |
万科未来 1幢 608余杭区 · 未来科技城 |
89.0 ㎡ | 610 万 | 已下架 | 赵磊 |
查看删除 |
| SH-ES-202609-00071 |
滨江壹号 2幢 1101滨江区 · 钱塘江畔 |
110.4 ㎡ | 1,080 万 | 草稿 | 李敏 |
查看编辑 |
ℹ提示：该房源委托期将于 7 天后到期，请及时续签。
✓成功：房源 SH-ES-202609-00037 已提交检核。
⚠警告：钥匙编号与系统记录不一致，请核对。
✕错误：售价不能低于政府指导价，请修改后重试。
色彩令牌
品牌 / 侧栏#0C2340甄房墨蓝（侧栏、品牌区）
交互主色#1677FFcolorPrimary · blue-6（官方默认）
主色悬停#4096FFblue-5
主色按下#0958D9blue-7
主色浅底#E6F4FFblue-1 · 选中行浅底
页面底色#FFFFFF官方容器色
次级底色#F5F5F5官方中性灰
边框#D9D9D9官方边框色
一级文字#1F1F1Frgba(0,0,0,.88) 合成值
二级文字#595959rgba(0,0,0,.65) 合成值
三级文字#8C8C8Crgba(0,0,0,.45) 合成值
成功#52C41AcolorSuccess
警告#FAAD14colorWarning
错误#FF4D4FcolorError
信息#1677FFcolorInfo
品牌金（点缀）#C6A15B仅 logo / 关键数字，占比 ≤5%
对比度实测（WCAG，AA 正文 4.5:1 / AA 大字与图形 3:1）
优点
- 团队最熟、中文文档最全，与现有 Vue2 + ElementUI 生态迁移成本最低
- 色板算法可由品牌色直接生成整条色阶（12 阶），扩展与派生最省事
- 色彩语义与国内用户预期一致（成功绿/警告黄/错误红），零学习成本
- 品牌金在三套中最好安排（圆角卡片 + 金色数字自然）
代价与不足
- 默认色饱和偏高：#FF4D4F 错误色、#52C41A 成功色长时间看刺激较强
- 官方定位偏「轻盈」，高数据密度下需要额外收紧间距与层级
- 中性灰层级不如 Carbon/Fiori 严谨，容易出现「灰得不够分明」
适用场景
- 经纪人日常高频作业（房源/客源/跟进），要求上手快、认知零负担
- 迭代节奏快、需要大量复用生态组件的中后台
- 团队以国内前端为主、希望降低长期维护成本的项目
生产落地必改项依据上表实测结果
| 用途 | 原值 | 建议改为 | 理由 |
|---|
| 主色（按钮底 / 链接字） | #1677FF | #0958D9（blue-7） | 官方默认主色在白底上实测仅 4.10:1，差 0.4 未达 AA 4.5:1 —— 「第 6 阶满足 4.5:1」只对部分色相成立；下移一阶到 blue-7 即 6.16:1，肉眼几乎无差别 |
| 成功色 | #52C41A | #389E0D（green-7） | #52C41A 白底仅 2.27:1，连图形类 3:1 都不到；图标与文字改 green-7（3.46:1），浅底仍可保留亮绿 |
| 警告色 | #FAAD14 | 文字与描边改 #AD6800（gold-8） | #FAAD14 白底仅 1.90:1；沿用「亮色只作底、深色作字」的做法，gold-8 为 4.41:1，几乎直接满足正文标准 |
| 错误色（正文） | #FF4D4F | 正文与链接改 #CF1322（red-7） | #FF4D4F 作正文仅 3.27:1；作为图形勉强及格，但表格里的错误提示是正文级文字，改 red-7 后 5.57:1；描边与底色可继续用亮红 |
| 三级文字 | #8C8C8C | #6E6E6E | rgba(0,0,0,.45) 的合成值白底 3.36:1，未达 AA；加深到 #6E6E6E 即 5.10:1 |
| 灰阶层级 | 仅三级文字灰 | 补一级 #BFBFBF 专用于占位符 / 禁用 | AntD 只有三级文字灰，导致占位符被迫复用 #8C8C8C —— 既不够浅（有对比度不达标风险）又会被误读为正文；补一级浅灰后三级文字才能安心加深 |
三、主要界面元素横向对照同一元素 · 三套色彩并排
| 元素 | Carbon 严谨派 | Fiori 商务派 | AntD 亲和派 |
|---|
| 主按钮 | | | |
| 次要按钮 | | | |
| 危险按钮 | | | |
| 状态标签 | 有效 维护中 已下架 待检核 独家 | 有效 维护中 已下架 待检核 独家 | 有效 维护中 已下架 待检核 独家 |
| 表单 | | | |
| 表单错误态 | | | |
| 表头 / 行 | | 房源编码 | 状态 |
|---|
| SH-...037 | 有效 | | SH-...052 | 独家 |
| | 房源编码 | 状态 |
|---|
| SH-...037 | 有效 | | SH-...052 | 独家 |
| | 房源编码 | 状态 |
|---|
| SH-...037 | 有效 | | SH-...052 | 独家 |
|
| 分页 / 页签 | | | |
| 提示条 | | | |
四、高频长时使用的统一优化层三套方案共用
这是针对「经纪人每天连续使用 6-8 小时」这一前提，在三套体系之上叠加的四条约束。三套方案均已落实。
| 优化项 | 做法 | 解决什么 |
|---|
| 深色品牌侧栏 | 侧栏统一用 #0C2340 而非浅灰 | 减少整屏亮度、形成稳定视觉锚点；浅灰侧栏在长时间使用中会与内容区「糊在一起」，找不到导航边界 |
| 斑马纹极低对比 | 条纹底色与白底差值控制在 2–3%（#F4F4F4/#F5F6F7/#F5F5F5） | 帮助横向追行不串行，但不会产生条纹眩光；这是数据表最高频的疲劳源 |
| 语义色降饱和 | 状态标签用「描边＋浅底」而非实心色块，浅底透明度压到 8–12% | 一屏内可能有几十个状态标签，实心高饱和色块是最大的刺眼来源 |
| 金色只做点 | 品牌金 #C6A15B 只用于 logo、关键数字、选中指示条，占比 ≤5% | 保住品牌质感，同时避免金色大面积铺陈显廉价 |
五、选型建议
本次结论：已定稿 方案 B · Fiori 商务派（2026-09-19）。定稿理由：三套中唯一 12/12 对比度开箱合规、语义令牌分层最完整、选中态用 8% 蓝底而非实色块（长时使用最不刺眼），且官方 Quick Theming 就是「替换 logo + 主品牌色」，与已定稿的甄房墨蓝最契合。下表保留完整选型逻辑，供后续复盘与其他产品线参考。
| 如果…… | 建议 | 理由 |
|---|
| 团队人少、迭代快，希望最快落地并降低长期维护成本 | 方案 C · AntD 亲和派 | 迁移成本最低、中文生态最全；代价是要按「生产落地必改项」把 6 处色值各下移一阶（改完视觉几乎无差别，但差别在无障碍上） |
| 需要严谨的层级与无障碍，且能接受工程感外观 | 方案 A · Carbon 严谨派 | 灰阶分层最严谨、对比度有官方硬约束；数据密度最高。仅「黄色被当文字色」与「圆角偏硬」两处需按建议调整 |
| 交易与佣金等强流程模块、或需与财务/ERP 打通 | 方案 B · Fiori 商务派 | 状态与选中态表达最清楚，对比度规则可推导，符合企业级规范；三套中唯一 12/12 开箱合规 |
| 想要「一次到位」但不想赌 | 混合：Carbon 骨架 + AntD 语义色 | 用 Carbon 的灰阶分层与密度打底，语义色采用国内用户熟悉的 AntD 色相并降饱和（沿用 C 的必改项色值）；这是我推荐的落地路径 |