鸿蒙实战设计令牌系统——AppColors 颜色体系前言必读图鸿蒙实战设计令牌系统——AppColors 颜色体系第 67 篇 运行效果截图HarmonyOS NEXT颜色是应用的视觉灵魂。面对一个数十页面、上百组件的鸿蒙项目如果没有统一颜色管理就会出现「差不多的灰用了三个不同的色值」的混乱局面。本文详细讲解本项目的颜色设计令牌系统——基于「米色 莫兰迪低饱和色板」的 AppColors 颜色体系。图AppColors 颜色设计令牌体系——米色底色 莫兰迪低饱和色板的分层管理AppColors 颜色体系背景色系文字色系强调色系状态色系primary: #FAF8F4 米色card: #FFFFFF 纯白secondary: #F5F2EC 浅米primary: #2C2C2C 深灰secondary: #8A8580 中灰hint: #B5B0A8 浅灰main: #C4956A 莫兰迪棕light: #D4AB84 浅棕success: #7BAE7F 绿warning: #E8C068 黄error: #D17B7B 红一、什么是设计令牌Design Tokens设计令牌是设计系统中最小的不可分割的视觉原子——颜色、字号、间距、阴影等。统一管理方式❌ 混乱方式每个页面写自己的色值 .backgroundColor(#E9E2D4) .fontColor(#8A745F) ... // 换主题时无处不改 ✅ 令牌方式所有页面引用 AppColors 常量 .backgroundColor(AppColors.BG_DEEP) .fontColor(AppColors.PRIMARY_DEEP) ... // 换主题时只改 AppColors.ets二、AppColors 完整源码// 文件common/theme/AppColors.ets/** * 鹿鹿·笔迹心理分析 — 设计令牌颜色 * 米色 莫兰迪低饱和色板 · 治愈温柔风 */exportclassAppColors{// 基础底色 staticreadonlyBG:string#F1ECE2;// 主背景 · 米色staticreadonlyBG_DEEP:string#E9E2D4;// 深米色 · 列表分隔背景staticreadonlyPAPER:string#F7F3EC;// 纸感卡片背景staticreadonlyCARD:string#FFFCF7;// 浮起卡片白staticreadonlyLINE:string#EAE3D7;// 描边色// 主品牌色 · 莫兰迪驼 staticreadonlyPRIMARY:string#A8907A;staticreadonlyPRIMARY_DEEP:string#8A745F;staticreadonlyPRIMARY_LIGHT:string#C9B89A;// 情绪辅助色 · 五情绪 staticreadonlyWARM:string#D9A689;// 雾橘 · 热情/活力staticreadonlyQUIET:string#9BAEA8;// 雾松 · 平静/治愈staticreadonlyDEEP:string#8A93A6;// 雾蓝 · 深沉/思考staticreadonlyROSE:string#C9A0A0;// 雾玫 · 温柔/柔软staticreadonlySUN:string#E8C880;// 雾黄 · 喜悦// HarmonyOS 蓝调辅助 staticreadonlyHM_BLUE:string#5B7FB6;staticreadonlyHM_BLUE_SOFT:string#DDE5F0;// 文字色阶 staticreadonlyTEXT:string#3D352E;staticreadonlyTEXT_2:string#8C8278;staticreadonlyTEXT_3:string#B8AFA3;// 状态色 staticreadonlySUCCESS:string#9BAEA8;staticreadonlyWARNING:string#D9A689;staticreadonlyERROR:string#C9A0A0;}只有 40 行——管理了全应用 20 颜色0 行硬编码色值。三、色板结构剖析3.1 五层颜色系统层级 1基础底色5 色 → 页面/卡片/描边背景 层级 2主品牌色3 色 → 核心 CP/CTA 按钮 层级 3情绪辅助色5 色 → 笔迹分析结果展示 层级 4文字色阶3 色 → 主/次/辅 文字 层级 5状态色3 色 → 成功/警告/错误3.2 配色哲学米色 莫兰迪「鹿鹿」app 的定位是治愈、温柔、手写风因此色板选择了低饱和度的米色系 莫兰迪色系颜色来源特征代表色应用米色系暖白、自然#F1ECE2BG /#FFFCF7CARD页面背景、卡片莫兰迪驼低饱和棕#A8907APRIMARY品牌色、按钮莫兰迪雾灰调 彩色#D9A689/#9BAEA8情绪标签莫兰迪色的核心秘方是每个颜色都带一定比例的灰色。例如WARM虽然是橘色系#D9但加入了A6的灰色分量看起来柔和不刺眼。3.3 色值分析传统高饱和暖橘 #FF6B35 (RGB: 255, 107, 53) 莫兰迪雾橘 WARM: #D9A689 (RGB: 217, 166, 137) ↓ 降低饱和度增加 G/B 通道 ↓ 整体亮度拉低 传统大红 #E74C3C (RGB: 231, 76, 60) 莫兰迪雾玫 ROSE: #C9A0A0 (RGB: 201, 160, 160) ↓ 从红到粉棕 ↓ 饱和度从 80% → 25%四、颜色系统的设计原则原则 1语义命名// ❌ 不要按位置命名staticreadonlyBG_TOP:string#F1ECE2staticreadonlyBG_BOTTOM:string#E9E2D4// ✅ 要按语义命名staticreadonlyBG:string#F1ECE2// 主背景staticreadonlyBG_DEEP:string#E9E2D4// 更深层次背景原则 2色阶命名深浅扩展主品牌色具备 3 级色阶staticreadonlyPRIMARY_LIGHT:string#C9B89A// 浅hover/disabledstaticreadonlyPRIMARY:string#A8907A// 中常规staticreadonlyPRIMARY_DEEP:string#8A745F// 深按下/强调原则 3单一数据源所有颜色定义集中在这一个文件。其他组件的使用示例// HomePage.etsColumn().backgroundColor(AppColors.BG)// 页面背景.fontColor(AppColors.TEXT)// 主文字// CapturePage.etsButton().backgroundColor(AppColors.PRIMARY)// 拍照按钮.fontColor(Color.White)// ReportDetailPage.etsText().fontColor(AppColors.WARM)// 情绪标签色// MetaServiceCard.etsColumn().backgroundColor(AppColors.CARD)// 卡片背景五、与 HarmonyOS Design 的关系HarmonyOS Design 推荐 大胆柔和Bold Soft—— 大胆的颜色搭配柔和的过渡 本项目的适配策略 ✅ 大胆品牌色 A8907A 作为 CTA 按钮主色 ✅ 柔和所有颜色饱和度 ≤ 40% ✅ HarmonyOS 蓝调辅助HM_BLUE / HM_BLUE_SOFT ✅ 符合 Design 的色阶系统light / regular / deepHarmonyOS Design 颜色令牌规范对比HarmonyOS 规范色阶本项目实现PrimaryDarkPRIMARY_DEEP #8A745FPrimaryPRIMARY #A8907APrimaryLightPRIMARY_LIGHT #C9B89ABackgroundBG #F1ECE2SurfaceBgCARD #FFFCF7TextPrimaryTEXT #3D352ETextSecondaryTEXT_2 #8C8278TextTertiaryTEXT_3 #B8AFA3六、扩展如何快速建立自己的色板6.1 四步法Step 1定基色 → 选择 1 个品牌色作为起点 #A8907A莫兰迪驼 Step 2建色阶 → 品牌色派生 3 级 light brand 白色混合 deep brand 黑色混合 Step 3配辅助 → 5 种情绪各配 1 色 暖/冷/深沉/温柔/喜悦 Step 4定灰度 → 文字 3 阶 背景 4 阶 文字黑→灰→浅灰 背景米白→米→深米→描边6.2 常用配色工具工具用途链接Material Design Color Tool色阶生成material.io/design/colorCoolors色板搭配coolors.coColormindAI 色板生成colormind.io七、颜色系统的工程管理规格表属性值颜色总数20色阶层级3light / regular / deep文件大小40 行引用方式AppColors.XXX静态常量主题切换未来可扩展为State theme: ThemeColors未来扩展方向// 暗黑模式支持classAppColors{staticreadonlyMODE:light|darklightstaticgetBG():string{returnthis.MODEdark?#2D2A26:#F1ECE2}}但本项目的定位是「治愈手写风」后续无暗黑模式计划。总结✅设计令牌概念颜色作为最小视觉原子统一管理✅AppColors 完整源码40 行管理 20 颜色✅米色 莫兰迪色板低饱和、治愈、温柔的配色哲学✅五层颜色系统底色 / 品牌 / 情绪 / 文字 / 状态✅语义命名原则按功能命名而非按位置命名✅单一数据源所有组件引用 AppColors无硬编码✅HarmonyOS Design 适配色阶映射到规范标准下一篇将讲解AppFonts 字体令牌与排版规范。 收藏提示建立颜色设计令牌是工程化的重要一步值得在项目初期就规范化。如果这篇文章对你有帮助欢迎点赞、收藏⭐、关注你的支持是我持续创作的动力相关资源设计令牌 Design Tokens颜色资源管理主题定制指南第68篇 字体令牌第69篇 渐变色彩第63篇 动画常量第99篇 设计模式回顾ArkUI 样式规范七、颜色体系扩展实践7.1 深色模式适配在 AppColors 基础上新增深色模式令牌无需修改业务代码// 深色模式颜色扩展classAppColorsDark{// 背景色系深色staticreadonlybgPrimary:string#1A1815;// 深棕黑staticreadonlybgCard:string#242018;// 深棕staticreadonlybgSecondary:string#2A2520;// 暗米色// 文字色系深色模式下反转staticreadonlytextPrimary:string#E8E3DC;// 浅米白staticreadonlytextSecondary:string#A89E94;// 中灰}7.2 颜色语义化命名原则颜色令牌命名应遵循用途而非外观反例不推荐正例推荐理由beigebgPrimary可独立调色不受名字约束dark_graytextSecondary换主题时无需修改用途理解orangeaccentMain强调色换色不影响语义light_beigebgSecondary层级关系清晰7.3 颜色令牌在组件中的应用// ✅ 正确使用语义化令牌Text(标题).fontColor(AppColors.textPrimary)Column().backgroundColor(AppColors.bgCard)// ❌ 错误硬编码颜色值Text(标题).fontColor(#2C2C2C)Column().backgroundColor(#FFFFFF)7.4 与设计工具的同步Figma 中的颜色变量Variables可以与 ArkTS 令牌保持一一对应Figma Variables →bg/primary对应AppColors.bgPrimary设计师修改 Figma 变量值 → 工程师同步修改对应令牌值保证设计稿与实现代码的颜色系统同步一致7.5 颜色对比度与可访问性设计令牌还需满足WCAG 2.1 AA对比度标准最低 4.5:1组合颜色对比度是否合规主文字 / 主背景#2C2C2C/#FAF8F413.2:1✅ AAA次要文字 / 主背景#8A8580/#FAF8F44.6:1✅ AA强调色 / 主背景#C4956A/#FAF8F43.8:1⚠️ AA Large白文字 / 强调色#FFFFFF/#C4956A2.9:1❌ 需调整实践建议在强调色按钮上使用深色文字textPrimary而非白色以满足对比度要求。7.6 颜色令牌的版本管理在项目迭代中颜色可能调整建议在代码注释中记录颜色的变更历史classAppColors{// v1.0: #C4956A原始莫兰迪棕// v1.2: #C89B72微调亮度提升识别度// v2.0: #BF8E63降低饱和度配合深色模式staticreadonlyaccentMain:string#BF8E63;}7.7 总结颜色令牌的三大价值一致性全应用颜色来自同一个常量源不会出现「差不多的颜色用了三个值」可维护性改颜色只需改一个地方自动影响所有引用该令牌的组件可读性AppColors.accentMain比#C4956A更能传达设计意图颜色令牌与字体令牌、间距令牌共同构成了本项目的完整设计系统基础设施是工程化 UI 开发的基石。7.8 互动练习思考题如果设计师要求将应用主色调从「米色系」改为「蓝灰系」你需要修改多少个文件用了设计令牌和没用各有什么差异在现有 AppColors 中添加一组「渐变色令牌」gradientStart / gradientEnd应该放在哪个分类下命名遵循什么规则参考答案有令牌只需改 1 个文件AppColors.ets无令牌需改数十个散落的样式。渐变色属于「强调色系」扩展命名建议gradientWarm/gradientCool按用途命名。如果这篇文章对你有帮助欢迎点赞、收藏⭐、关注你的支持是我持续创作的动力