鸿蒙实战：字体令牌系统——AppFonts 与排版规范

鸿蒙实战字体令牌系统——AppFonts 与排版规范前言必读图鸿蒙实战字体令牌系统——AppFonts 与排版规范第 68 篇 运行效果截图HarmonyOS NEXT一致的排版系统是设计质量的标志。鸿蒙应用开发中字号fp、圆角radius、间距padding、阴影shadow这四个维度如果有各自独立的散落定义页面之间会出现肉眼可见的不协调。本文将详细讲解本项目的四维一体的排版令牌系统。图AppFonts 四维令牌体系——字号/圆角/间距/阴影的统一管理结构AppFonts 排版系统字号 size圆角 radius间距 spacingAppShadow 阴影系统阴影层级xs: 10fpsm: 12fpmd: 14fplg: 16fpxl: 20fpxxl: 28fpsm: 8vpmd: 12vplg: 20vpfull: 999vpxs: 4vpsm: 8vpmd: 16vplg: 24vp一、四维令牌全景本项目的排版系统由四个令牌类组成定义在同一个文件中// 文件common/theme/AppFonts.ets//// 维度 类名 管理内容// ─────────────────────────────────────// 字体 AppFonts 字号阶梯 字重 字体族// 圆角 AppRadius 6 级圆角系统// 间距 AppSpacing 7 级间距系统// 阴影 AppShadow 7 级阴影系统二、AppFonts字号阶梯2.1 完整定义exportclassAppFonts{// 字体族staticreadonlySANS:stringHarmonyOS Sans SC, HarmonyOS SansstaticreadonlySERIF:stringHarmonyOS Sans SC, Source Han Serif CN// 字号阶梯fp · 跟随系统字号缩放staticreadonlyDISPLAY:number32// 大标题staticreadonlyTITLE_L:number28// HarmonyOS 大标题栏staticreadonlyTITLE:number22// 页面标题staticreadonlySUBTITLE:number18// 子标题staticreadonlyBODY_L:number16// 正文大staticreadonlyBODY:number14// 正文staticreadonlyCAPTION:number12// 辅助文staticreadonlyTINY:number10// 标签// 字重staticreadonlyW_REGULAR:FontWeightFontWeight.RegularstaticreadonlyW_MEDIUM:FontWeightFontWeight.MediumstaticreadonlyW_BOLD:FontWeightFontWeight.Bold}2.2 字号阶梯对照32 fp ─ DISPLAY 首页品牌名「鹿鹿·笔迹心理」 28 fp ─ TITLE_L HarmonyOS 大标题栏标题 22 fp ─ TITLE 页面标题「笔迹分析报告」 18 fp ─ SUBTITLE 卡片子标题、雷达图数字 16 fp ─ BODY_L 段落正文分享文案 14 fp ─ BODY 常规正文 12 fp ─ CAPTION 辅助说明、标签、时间戳 10 fp ─ TINY 元数据标签、版权信息2.3 字体族策略// 无衬线体正文/按钮staticreadonlySANS:stringHarmonyOS Sans SC, HarmonyOS Sans// 1. 优先 HarmonyOS Sans SC中文字体// 2. 降级 HarmonyOS Sans英文字体// 衬线体品牌/标题/引用staticreadonlySERIF:stringHarmonyOS Sans SC, Source Han Serif CN// 1. 优先 HarmonyOS Sans SCHarmonyOS 系统字体// 2. 降级 Source Han Serif CN思源宋体选择思源宋体作为降级字体而非默认的衬线体是因为本项目的定位是「手写 治愈风」思源宋体的笔触比标准衬线体更具温度感。三、AppRadius圆角系统3.1 完整定义exportclassAppRadius{staticreadonlyXS:number6// 最小圆角staticreadonlyS:number10// 小卡片/头像staticreadonlyM:number14// 按钮/普通卡片staticreadonlyL:number20// 大卡片/容器staticreadonlyXL:number24// 特圆卡片staticreadonlyROUND:number999// 胶囊按钮完全圆角}3.2 圆角应用场景ROUND → [ 分享 ] 胶囊按钮 border-radius: 999px XL → ┌──────────────┐ 特圆卡片TapSharePage 分享卡片 │ │ L → ┌──────────┐ 大容器卡片标签式 AI 摘要框 │ │ M → [ 拍照 ] 默认按钮 常规按钮 S → (头像) 小卡片 小卡片/标签 XS → ┌──────────┐ 最小圆角强调框 │ │3.3 圆角设计原则递增阶梯6 → 10 → 14 → 20 → 24 → 999 XS S M L XL ROUND 原则每次增加约 40-60%肉眼可分辨。 确保相邻层级差异 ≥ 4px避免视觉模糊。四、AppSpacing间距系统4.1 完整定义exportclassAppSpacing{staticreadonlyXXS:number4// 极紧凑图标与文字的间隙staticreadonlyXS:number8// 紧凑标题与副标题的间距staticreadonlyS:number12// 稍紧凑标签之间的间距staticreadonlyM:number16// 常规卡片内 paddingstaticreadonlyL:number20// 稍宽松页面左右边距staticreadonlyXL:number28// 宽松模块间距staticreadonlyXXL:number36// 极宽松大模块间距}4.2 7 级间距使用规范距离 层级 使用位置 示例 ──────────────────────────────────────────────── 4px XXS 文字与图标间隙 title subtitle 8px XS 标题与副标题 HmTitleBar top/bottom 12px S 标签/按钮间距 情绪标签 gap 16px M 卡片内边距 padding: 16px 20px L 页面左右边距 padding(left/right: 20) 28px XL 大模块间距 首页欢迎区与 Hero 的 gap 36px XXL 最大间距 页面底部留白4.3 调用示例// 页面左右边距统一 20pxColumn().padding({left:AppSpacing.L,right:AppSpacing.L})// 标题与副标题间距 8pxText(标题).fontSize(AppFonts.TITLE)Text(副标题).margin({top:AppSpacing.XXS})// 情绪标签间距 12pxFlex({wrap:FlexWrap.Wrap,justifyContent:FlexAlign.Center}){ForEach(this.tags,(tag:string){Text(tag).margin({right:AppSpacing.S,bottom:AppSpacing.S})})}// 模块间距 28pxScroll(){Column({space:AppSpacing.XL}){WelcomeSection()HeroSection()RecentReports()InspireSection()}}五、跨页面排版一致性5.1 全应用统一 padding所有页面的左右边距都使用AppSpacing.L 20这是 HarmonyOS Design 推荐的页面标准边距safe area margin。// MetaServiceCard.etsColumn().padding({left:AppSpacing.L,right:AppSpacing.L})// CapturePage.etsColumn().padding({left:AppSpacing.L,right:AppSpacing.L})// ReportDetailPage.etsColumn().padding({left:AppSpacing.L,right:AppSpacing.L})5.2 卡片统一背景色// 所有卡片背景统一为 CARD #FFFCF7Column().backgroundColor(AppColors.CARD).borderRadius(AppRadius.XL)// 特圆// 或.borderRadius(AppRadius.L)// 大圆角5.3 排版一致性对比❌ 无令牌系统时 Page A: padding 16, fontSize 16, borderRadius 12 Page B: padding 24, fontSize 15, borderRadius 10 → 肉眼可见的不一致 ✅ 有令牌系统时 Page A: padding AppSpacing.L, fontSize AppFonts.BODY, borderRadius AppRadius.M Page B: padding AppSpacing.L, fontSize AppFonts.BODY, borderRadius AppRadius.M → 完美一致六、与 HarmonyOS Design 的一致性HarmonyOS 规范本项目令牌值大标题字号AppFonts.TITLE_L28fp正文字号AppFonts.BODY14fp辅助文字AppFonts.CAPTION12fp页面边距AppSpacing.L20px安全区横向AppSpacing.L20px标题字重AppFonts.W_MEDIUMMedium正文字重AppFonts.W_REGULARRegular七、工程管理规格表令牌类管理数量文件行数AppFonts10字号 8 字重 324 行AppRadius67 行AppSpacing78 行AppShadow730 行全部四个类加起来不到 80 行代码却管理了整个应用的所有排版变量。调用频次// 项目中部分引用统计基于 Grep 估算AppFonts.BODY→35次引用 最高频 AppSpacing.L→20次引用 二级高频 AppRadius.XL→12次引用 AppShadow.CARD→8次引用扩展建议// 如果需要支持动态字号系统字体缩放// 当前 fp 会跟随系统设置自动缩放无需额外代码// 如果需要支持多语言如英文版// 英文环境下建议替换字体族为staticreadonlySANS_EN:stringSF Pro Text, Helvetica Neue八、注意事项与常见问题8.1 开发注意事项在正式开发前建议按以下步骤完成环境准备与前置检查版本确认检查 DevEco Studio 与 SDK 版本确保满足目标 API Level 要求权限声明在module.json5的requestPermissions字段中提前声明所有需要的系统权限设备能力检查调用前验证设备是否支持目标能力相机、NFC、传感器等异步封装所有耗时操作数据库、文件 I/O、网络请求统一使用async/await处理资源释放在组件aboutToDisappear()生命周期钩子中及时释放系统资源防止内存泄漏8.2 常见错误与解决方案常见问题快速排查表问题类型排查方向参考方法应用崩溃查看 hilog 错误日志hilog.error(TAG, ..., e.message)状态丢失检查 AppStorage 键名拼写统一使用常量管理键名动画不流畅避免在 animateTo 回调中执行 I/O动画与数据操作分离总结✅四维令牌系统AppFonts / AppRadius / AppSpacing / AppShadow 统一管理✅8 级字号阶梯从 10fp 到 32fp覆盖全场景✅6 级圆角系统XS → ROUND 递增体系✅7 级间距系统4px → 36px 覆盖所有间距需求✅字体族策略HarmonyOS Sans SC 优先 思源宋体降级✅跨页面一致性所有页面统一 padding / borderRadius / fontSize✅HarmonyOS Design 兼容大标题 28fp、边距 20px 等符合规范下一篇将讲解线性渐变与梯度色彩应用看 HomePage 的 Hero CTA 渐变和情绪渐变条的实现。 收藏提示排版令牌是设计系统的骨架项目初期就建立它能避免 80% 的排版不一致问题。如果这篇文章对你有帮助欢迎点赞、收藏⭐、关注你的支持是我持续创作的动力相关资源字体资源管理Typography 排版规范设计令牌系统第67篇 颜色体系第69篇 渐变色彩第70篇 阴影系统第99篇 设计模式回顾自定义字体加载七、排版令牌应用进阶7.1 响应式字号策略鸿蒙支持通过fp单位自动适配用户的系统字号偏好设置令牌中所有字号均已使用fp// ✅ 使用 fp响应系统字号偏好Text(标题).fontSize(AppFonts.sizeXl)// 20fp// ❌ 使用 vp不响应系统字号偏好Text(标题).fontSize(20)// 20vp固定不变7.2 间距令牌的网格系统间距令牌基于4dp 网格所有值均为 4 的倍数令牌值用途场景spacingXs4vp图标与文字内间距spacingSm8vp组件内部间距spacingMd16vp卡片内边距spacingLg24vp页面边距spacingXl32vp页面区块间距7.3 圆角令牌与品牌感知圆角大小影响品牌形象直角0vp专业、严肃、科技感小圆角8vp友好、现代、克制大圆角20vp温暖、活泼、治愈感全圆999vp按钮/标签的「药丸」形态本项目采用中等偏大的圆角契合「米色治愈风」的品牌定位。7.4 令牌命名的一致性约定四维令牌的命名遵循统一前缀规则便于 IDE 自动补全维度前缀示例字号sizesizeXs / sizeSm / sizeMd / sizeLg / sizeXl圆角radiusradiusSm / radiusMd / radiusLg / radiusFull间距spacingspacingXs / spacingSm / spacingMd / spacingLg行高lineHeightlineHeightSm / lineHeightMd / lineHeightLg输入AppFonts.后 IDE 会列出所有令牌极大提高开发效率。7.5 令牌系统的扩展路径随着项目规模增大四维令牌可进一步扩展字重令牌fontWeightLight / fontWeightRegular / fontWeightMedium / fontWeightBold字族令牌fontFamilyDefault / fontFamilyMono支持自定义字体包动态缩放比基于屏幕密度density自动计算最终渲染尺寸如果这篇文章对你有帮助欢迎点赞、收藏⭐、关注你的支持是我持续创作的动力