鸿蒙应用开发实战【03】— ArkUI 设计令牌体系构建颜色/字体/动画前言欢迎加入开源鸿蒙跨平台社区https://openharmonycrossplatform.csdn.net在多人协作的项目中如果每个开发者随意使用颜色字面量#4F7CFF、字号14、动画时长300项目很快就会陷入颜色一致性噩梦。**设计令牌Design Token**就是解决这个问题的最佳实践——把设计决策集中存储为命名常量让整个项目通过名字引用而非直接使用原始值。本篇介绍号码助手项目中的设计令牌体系AppColors、AppFonts、AppAnimations以及 ArkUI 中一个极易踩坑的颜色格式问题。本篇重点#AARRGGBB颜色格式、设计令牌封装规范、颜色语义化命名、ArkUI 字体常量、动画曲线封装。一、为什么需要设计令牌1.1 没有设计令牌时的问题// ❌ 没有设计令牌时颜色散落在各处Text(号码助手).fontColor(#14141E)// 主文字色Text(副标题).fontColor(#14141E80)// 副文字色但哪个是哪个.backgroundColor(#B8FFFFFF)// 卡片背景色什么含义.border({color:#14141E14})// 边框色语义不明维护困难设计稿改了主色调要逐文件搜索替换1.2 使用设计令牌后// ✅ 使用设计令牌后语义清晰Text(号码助手).fontColor(AppColors.TEXT)Text(副标题).fontColor(AppColors.TEXT_2).backgroundColor(AppColors.CARD).border({color:AppColors.LINE})维护简单改一处AppColors.PRIMARY #3A5FD4全项目生效二、AppColors — 颜色设计令牌2.1 完整颜色系统号码助手使用的完整颜色令牌体系如下// AppColors.etsexportclassAppColors{// ── 主色调 ──────────────────────────────────staticreadonlyPRIMARY:string#4F7CFF// 主色蓝紫staticreadonlyPRIMARY_2:string#7C5CFF// 辅色紫staticreadonlyPRIMARY_BG:string#F0F3FF// 主色浅背景// ── 功能色 ──────────────────────────────────staticreadonlyDANGER:string#FF2E4D// 危险/删除staticreadonlyDANGER_BG:string#FFF0F2// 危险背景staticreadonlyWARN:string#FF7A1E// 警告/待换绑staticreadonlyWARN_BG:string#FFF5EE// 警告背景staticreadonlyCYAN:string#20C0CE// 青色/强调// ── 文字色 ──────────────────────────────────staticreadonlyTEXT:string#14141E// 主文字近黑staticreadonlyTEXT_2:string#14141E80// 副文字半透明staticreadonlyTEXT_3:string#14141E4D// 占位文字staticreadonlyMUTED:string#999999// 禁用文字// ── 背景色 ──────────────────────────────────staticreadonlyBG:string#F5F7FF// 页面背景staticreadonlyMUTED_BG:string#F2F2F7// 灰色背景// ── 卡片与边框关键使用 #AARRGGBB 格式──staticreadonlyCARD:string#B8FFFFFF// 毛玻璃卡片72% 透明度白色staticreadonlyCARD_B:string#E6FFFFFF// 浅色卡片90% 透明度白色staticreadonlyLINE:string#14141E14// 分割线/边框8% 透明度黑色}2.2 颜色分类对照表类别令牌名十六进制值用途主色PRIMARY#4F7CFF按钮、强调、主要链接辅色PRIMARY_2#7C5CFF渐变终点、次要强调危险DANGER#FF2E4D删除按钮、错误提示警告WARN#FF7A1E待换绑状态、橙色提示主文字TEXT#14141E标题、正文副文字TEXT_2#14141E80说明文字带 50% 透明度页面背景BG#F5F7FF所有页面的背景色卡片CARD#B8FFFFFF列表卡片毛玻璃效果三、ArkUI 颜色格式深度解析重要踩坑3.1 问题现象号码助手在开发初期所有卡片都显示为淡黄色而设计稿要求是半透明白色。图1左图为颜色格式错误时的黄色卡片右图为修复后的正确半透明白色卡片3.2 根本原因ArkUI 的颜色格式与 CSS/Android 不同平台颜色格式Alpha 位置CSS / Web#RRGGBBAA最后Android XML#AARRGGBB最前ArkUI#AARRGGBB最前以 72% 透明度的白色为例// ❌ 错误写法CSS 格式AA 在最后// #FFFFFF 后面加 B8 表示 72% 不透明度staticreadonlyCARD:string#FFFFFFB8// ArkUI 解析为AA0xFF完全不透明, R0xFF, G0xFF, B0xB8// 结果RGB(255, 255, 184) 淡黄色// ✅ 正确写法ArkUI 格式AA 在最前// B8 在最前面表示 72% 不透明度staticreadonlyCARD:string#B8FFFFFF// ArkUI 解析为AA0xB872% 不透明, R0xFF, G0xFF, B0xFF// 结果带透明度的白色正确3.3 Alpha 值换算表不透明度十六进制 AA 值用途示例100%FF完全不透明90%E6CARD_B 卡片80%CC轻微透明72%B8CARD 毛玻璃卡片50%80TEXT_2 副文字30%4DTEXT_3 占位文字8%14LINE 分割线0%00完全透明3.4 实际修复代码// 修复前错误颜色格式错误导致卡片变黄// static readonly CARD: string #FFFFFFB8 // 错误// static readonly CARD_B: string #FFFFFFE6 // 错误// 修复后正确#AARRGGBB 格式staticreadonlyCARD:string#B8FFFFFF// ✅ 72% 不透明白色staticreadonlyCARD_B:string#E6FFFFFF// ✅ 90% 不透明白色staticreadonlyLINE:string#14141E14// ✅ 8% 不透明深色分割线staticreadonlyTEXT_2:string#14141E80// ✅ 50% 不透明深色副文字记忆口诀ArkUI 颜色格式 A透明度在前RGB 在后。与 CSS 的习惯正好相反四、AppFonts — 字体设计令牌4.1 字体令牌定义// AppFonts.etsexportclassAppFonts{// ── 字号vp 单位──────────────────────────staticreadonlySIZE_DISPLAY:number28// 大标题欢迎语staticreadonlySIZE_TITLE:number20// 页面标题staticreadonlySIZE_SECTION:number16// 分区标题staticreadonlySIZE_BODY:number14// 正文staticreadonlySIZE_META:number11// 元数据/说明文字staticreadonlySIZE_MINI:number10// 极小标签// ── 字重 ──────────────────────────────────staticreadonlyWEIGHT_BOLD:number700// 粗体标题staticreadonlyWEIGHT_SEMIBOLD:number600// 半粗强调staticreadonlyWEIGHT_MEDIUM:number500// 中等副标题staticreadonlyWEIGHT_REGULAR:number400// 常规正文}4.2 字体令牌对照表令牌名字号值字重值典型用途SIZE_DISPLAY28vpBOLD (700)首页欢迎语、数字大标SIZE_TITLE20vpBOLD (700)页面顶部标题SIZE_SECTION16vpSEMIBOLD (600)列表分区标题SIZE_BODY14vpMEDIUM (500)卡片主要文字SIZE_META11vpREGULAR (400)时间戳、卡号掩码SIZE_MINI10vpREGULAR (400)分类标签、徽标文字4.3 在 UI 中使用字体令牌import{AppFonts}from../common/theme/AppFontsimport{AppColors}from../common/theme/AppColors// 卡号管理页 — 卡号数字显示Text(138****8888).fontSize(AppFonts.SIZE_SECTION)// 16vp.fontWeight(AppFonts.WEIGHT_BOLD)// 700.fontColor(AppColors.TEXT)// 应用列表行 — 应用名Text(appName).fontSize(AppFonts.SIZE_BODY)// 14vp.fontWeight(AppFonts.WEIGHT_MEDIUM)// 500.fontColor(AppColors.TEXT)// 说明文字Text(使用该号码注册的应用).fontSize(AppFonts.SIZE_META)// 11vp.fontColor(AppColors.TEXT_2)// 50% 透明度五、AppAnimations — 动画设计令牌5.1 动画令牌定义// AppAnimations.etsimport{curves}fromkit.ArkUIexportclassAppAnimations{// 标准过渡动画按钮点击、状态切换staticreadonlySTANDARDcurves.cubicBezierCurve(0.4,0,0.2,1)// 弹出动画底部弹窗、卡片展开staticreadonlySPRINGcurves.springMotion(0.35,0.75)// 时长毫秒staticreadonlyDURATION_FAST:number150// 快速切换图标/颜色staticreadonlyDURATION_NORMAL:number300// 标准过渡staticreadonlyDURATION_SLOW:number500// 复杂动画}5.2 在组件中使用动画令牌import{AppAnimations}from../common/theme/AppAnimations// 按下效果.onClick((){animateTo({duration:AppAnimations.DURATION_FAST,curve:AppAnimations.STANDARD},(){this.selectedIndexnewIndex})})// 弹出卡片动画例如添加卡号时的预览头像弹出.animation({duration:AppAnimations.DURATION_NORMAL,curve:AppAnimations.SPRING})六、设计令牌最佳实践6.1 命名规范语义化用TEXT_2副文字而不是GRAY_50颜色本身层级清晰主色 → 变体PRIMARY→PRIMARY_2→PRIMARY_BG功能分组文字色、背景色、状态色、边框色分组命名6.2 扩展方法对于颜色枚举到 hex 的映射使用独立方法而不是直接在令牌中硬编码// 在 AddAppPage.ets 中定义 CardColor → hex 的映射方法privatecardColorHex(c:CardColor):string{switch(c){caseblue:returnAppColors.PRIMARY// #4F7CFFcasepurple:returnAppColors.PRIMARY_2// #7C5CFFcasegreen:return#3CC463caseorange:returnAppColors.WARN// #FF7A1Ecasepink:returnAppColors.DANGER// #FF2E4Ddefault:returnAppColors.PRIMARY}}6.3 避免魔法数字// ❌ 魔法数字14 是什么为什么是 14Text(appName).fontSize(14)// ✅ 使用令牌一看就知道这是正文Text(appName).fontSize(AppFonts.SIZE_BODY)七、设计令牌与设计稿的对应关系7.1 设计稿颜色变量映射根据design/index.html设计稿颜色变量与代码令牌的对应关系设计稿变量代码令牌十六进制值--color-primaryAppColors.PRIMARY#4F7CFF--color-textAppColors.TEXT#14141E--color-text-2AppColors.TEXT_2#14141E80--card-bgAppColors.CARD#B8FFFFFF--card-bg-2AppColors.CARD_B#E6FFFFFF--color-lineAppColors.LINE#14141E147.2 字体规格对应设计稿规格代码令牌典型应用.card-num15px BoldSIZE_SECTION WEIGHT_BOLD卡号管理页卡号数字.body14px MediumSIZE_BODY WEIGHT_MEDIUM应用列表 app 名.meta11px RegularSIZE_META WEIGHT_REGULAR运营商、时间戳八、本篇小结通过本篇你掌握了号码助手设计令牌体系的全貌颜色令牌AppColors语义化命名避免魔法颜色值散落全项目ArkUI 颜色格式#AARRGGBBAlpha 在前这是开发者极易踩坑的地方字体令牌AppFonts统一字号和字重保证全应用排版一致性动画令牌AppAnimations封装cubicBezierCurve和springMotion统一动画风格最重要的记忆点ArkUI 颜色是#AARRGGBB不是 CSS 的#RRGGBBAA下一篇将介绍应用配置详解app.json5、module.json5和路由表main_pages.json的每个字段含义。九、参考资料本系列相关文章鸿蒙应用开发实战【02】— ArkTS 语法基础与工程结构解析鸿蒙应用开发实战【14】— 毛玻璃卡片#AARRGGBB 颜色格式深度解析鸿蒙应用开发实战【24】— ArkUI 动画系统详解官方文档ArkUI 颜色参考Text 组件动画概述curves API如果这篇文章对你有帮助欢迎点赞、收藏⭐、关注你的支持是我持续创作的动力相关资源开源鸿蒙跨平台社区https://openharmonycrossplatform.csdn.netHarmonyOS 颜色文档https://developer.huawei.com/consumer/cn/doc/harmonyos-references/ts-appendix-enumscurves 动画曲线https://developer.huawei.com/consumer/cn/doc/harmonyos-references/js-apis-curve