鸿蒙实战：设计令牌系统——AppColors 颜色体系-北京尧图网络

鸿蒙实战设计令牌系统——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按用途命名。如果这篇文章对你有帮助欢迎点赞、收藏⭐、关注你的支持是我持续创作的动力

鸿蒙实战：设计令牌系统——AppColors 颜色体系

相关推荐

Claude Tag发布：AI从工具变成同事了，但多数团队还搭不起

我认为的AGI

抖音下载器3分钟上手：从零开始轻松保存无水印视频

更多资讯

开会总是记不全重点？这6款口碑爆棚的录音转文字工具，实测帮你解放双手

零手写测试用例：TestSprite test plan generate如何用AI探索应用并自动生成测试

销售客服 Crew 会话工作流实战指南：基于 xiaobei 自媒体获客智能体的 CustomerDB 驱动销售闭环

RikkaHub 仓库 Claude API 技能集深度解读：Anthropic Managed Agents 的 Tools、MCP 服务器、Vault 凭据与 Skills 全指南

3招搞定上海百度推广官网被黑，图解步骤保平安

如何手机做网站图解步骤

今日更新

如何彻底离线使用 Laya-CoreML：Hugging Face 下载、缓存机制与 local_files_only 详解

基于1Panel 部署MySQL MCP 服务：TaoToken 统一 Key 接入与 config.toml 配置实战

崇州园区营销网站建设避坑指南：5大注意事项保备案安全

本周精选

如何彻底离线使用 Laya-CoreML：Hugging Face 下载、缓存机制与 local_files_only 详解

基于1Panel 部署MySQL MCP 服务：TaoToken 统一 Key 接入与 config.toml 配置实战

崇州园区营销网站建设避坑指南：5大注意事项保备案安全

本月热门

基于YOLO的焊缝缺陷检测：从数据标注到工业部署全流程实践

分布式服务的决策记录

创业产品的首版范围

读完文章，想聊聊您的网站？