HarmonyOS 设计规范并非简单的视觉参数堆砌，而是一套以“包容性、连续性、层级感”为核心的系统化语言。本文在官方资料基础上，结合各模块之间的关联，对规范进行逐层解读，帮助设计师与开发者不仅“知道参数”，更理解“为何如此设计”以及“如何正确落地”。

一、色彩：用层级构建有序的视觉体验

1.1 色彩设计背后的理念

HarmonyOS NEXT 的色彩系统体验目标是为所有人群而设计，体现包容性设计思想。这意味着色彩不能只考虑默认视觉偏好，还要兼顾不同用户群体在深色模式、弱光环境、不同屏幕素质下的感知差异。

系统色调继承了“鸿蒙宇宙”世界观中回归本源的主旨思想。宇宙蓝与雪域灰构成系统色彩基础：

• 宇宙蓝：深邃广阔，为系统带来纯净与宁静，是品牌高亮色的默认来源。
• 雪域灰：并非纯黑或纯白，而是带淡蓝色相的灰，用于卡片背景，烘托界面纯净感。这种“非绝对黑白”的处理能降低高对比带来的视觉疲劳，同时让深色模式更自然。

品牌色则承担另一重任务：让用户时刻感知当前应用进程。一个舒适且特征鲜明的品牌色方案，能帮助用户在系统与多应用之间快速建立认知锚点。

1.2 色彩分层：为什么需要“每一个颜色都有自己的 ID”

色彩分层的核心是构建不同使用场景下的对比关系。官方提出三个关键原则，值得逐条解读：

1. 映射正确的色彩关系
   系统组件默认已经映射好一套分层参数，开发者如果只是使用默认组件，无需关心底层。但一旦自定义组件规格，就必须重新梳理背景、文本、图标与容器之间的映射。这提醒我们：自定义不是简单替换颜色值，而是重建一套完整的对比关系。

2. 保障色彩的可阅读性
   系统默认颜色保障最小 3:1 对比度，这是无障碍阅读的基础门槛。深色模式下映射关系会变化，但变化“在情理之中”——因为深色背景需要重新调整前景对比度，而不是简单反转。

3. 最小化色彩管理
   基于常规色四件套即可搭建系统整体色彩风格，避免过度设计。这对中小型应用尤其重要：优先复用系统 Token，而非自造大量颜色，可显著降低维护成本。

1.3 Token 参数：三层结构的调用逻辑

Token 分为三个层级，自上而下为：控件私有参数、通用语义参数、通用基础参数。

• 基础 Token：如 primary、on_primary、brand、container、background，通过透明度计算延伸出多个对比度色彩。基础色可被直接引用，也可被重新定义成语义 Token。
• 语义 Token：名称固定场景，不可随意更改。分为文本、图标、组件、交互事件四类，每个都引用基础 Token。
• 控件 Token：唯一且不可复用，仅用于控件内部元素。

理解这三层关系，就能明白为什么官方不推荐随意更改 Token 名称：语义 Token 名称是使用场景的契约，改了名称就破坏了引用链。而控件 Token 是组件私有的，不能跨组件复用。

核心基础色解读：

• Primary：最上层文本和图标的填充色，低对比度版本可用于二、三级文本。它解决的是“同一色相如何表达不同层级”。
• onPrimary：专用于强调色或图片之上，不能在常规界面背景上使用。这是典型的“反色”逻辑，避免在普通背景上误用白色文字导致不可读。
• Brand：系统主题色和高亮色。改动它会影响所有引用 brand 的组件，所以品牌色定制必须谨慎，避免破坏默认组件的可读性。
• Container：组件容器背景色，如按钮、搜索框。它和 Primary 在默认色彩中使用同级配色，但可以通过调整明暗对比来丰富界面。

1.4 透明度映射与主题定制

基础 Token 通过透明度系数映射出 12 个色彩参数。设计师只需指定基础色的原色参数，系统通过叠加不同透明度实现整体映射。这种设计大幅简化了多层级色彩的维护：只需要一个源色，即可生成完整对比度阶梯。

开发者可以把主题色指定为其他颜色，但基础色彩数量不变。修改映射关系可能影响控件默认引用 Token 链路，需要同步考虑控件的默认参数引用逻辑。这意味着换肤功能不是简单改一个色值，而是要考虑整条 Token 链路的适配。

1.5 文本色与图标色：四个层级与反色场景

文本和图标根据信息优先级分为四个基础层级：

• font_primary / icon_primary：一级，最高对比度，用于核心内容。
• font_secondary / icon_secondary：二级，辅助说明。
• font_tertiary / icon_tertiary：三级，弱化信息。
• font_fourth / icon_fourth：四级，最弱，通常用于占位或极弱提示。

反色场景使用 font_on_* 和 icon_on_*，无论深浅色模式都用高亮度色彩，用于高亮容器或图片之上。高亮文本和图标默认引用 Brand，因此品牌色变化会同步影响这些高亮元素，这体现了系统级的联动一致性。

1.6 组件容器色与交互事件色

组件容器色分为容器类和展示类：

• 容器类：跟随深浅模式变化，如列表背景、弹窗背景、半模态背景。
• 展示类：使用品牌色或低透明度背景，如按钮背景、搜索框背景、索引条选中色。

交互事件色覆盖悬浮、按压、获焦、禁用、选中、激活六种状态。这些状态色的统一，是构建可预测交互反馈的基础。开发者自定义组件时，应尽量复用这些交互 Token，而不是另造一套状态色，以免用户在不同应用中感到困惑。

1.7 界面背景色：分层处理避免色彩融合

界面背景色用于窗口分层，尤其在多屏和悬浮窗场景。不同窗口层级使用不同灰阶，避免相同背景在不同层级下融合。浅色模式下通用白色背景与雪域灰对应的深色模式都是黑色，从 gray_02 灰阶开始，深浅色都对应显示层级逐级提高或降低对比度。

界面背景色不可使用透明度颜色，这一点非常重要。透明背景在单窗口可能没问题，但在多窗口叠加时会导致下层层级穿透，破坏空间感。若需作为其他组件背景，应依照灰阶对比度逐级选择。

1.8 系统基础与语义 Token 全量表

以下表格为 ARGB 格式，前两位为透明度参数。Alpha 值从 ff（完全不透明）到 00（完全透明），中间值如 e5、99、66、33 表示不同透明度。理解这一点，就能快速推算 Token 的层级关系。

Token	场景类别	Light	Dark
brand	品牌色	#ff0a59f7	#ff317af7
warning	一级警示色	#ffe84026	#ffd94838
alert	二级警示色	#ffed6f21	#ffdb6b42
confirm	确认色	#ff64bb5c	#ff5ba854
font_primary	一级文本	#e5000000	#e5ffffff
font_secondary	二级文本	#99000000	#99ffffff
font_tertiary	三级文本	#66000000	#66ffffff
font_fourth	四级文本	#33000000	#33ffffff
font_emphasize	高亮文本	#ff0a59f7	#ff317af7
font_on_primary	一级文本反色	#ffffffff	#ffffffff
font_on_secondary	二级文本反色	#99ffffff	#99ffffff
font_on_tertiary	三级文本反色	#66ffffff	#66ffffff
font_on_fourth	四级文本反色	#33ffffff	#33ffffff
icon_primary	一级图标	#e5000000	#e5ffffff
icon_secondary	二级图标	#99000000	#99ffffff
icon_tertiary	三级图标	#66000000	#66ffffff
icon_fourth	四级图标	#33000000	#33ffffff
icon_emphasize	高亮图标	#ff0a59f7	#ff317af7
icon_sub_emphasize	高亮辅助图标	#660a59f7	#66317af7
icon_on_primary	一级图标反色	#ffffffff	#ffffffff
icon_on_secondary	二级图标反色	#99ffffff	#99ffffff
icon_on_tertiary	三级图标反色	#66ffffff	#66ffffff
icon_on_fourth	四级图标反色	#33ffffff	#33ffffff
background_primary	一级背景（实色/不透明色）	#ffffffff	#ffe5e5e5
background_secondary	二级背景（实色/不透明色）	#fff1f3f5	#ff191a1c
background_tertiary	三级背景（实色/不透明色）	#ffe5e5ea	#ff202224
background_fourth	四级背景（实色/不透明色）	#ffd1d1d6	#ff2e3033
background_emphasize	高亮背景（实色/不透明色）	#ff0a59f7	#ff317af7
comp_foreground_primary	前背景	#ff000000	#ffe5e5e5
comp_background_primary	白色背景	#ffffffff	#ff202224
comp_background_primary_contrary	常亮背景	#ffffffff	#ffe5e5e5
comp_background_gray	灰色背景	#fff1f3f5	#ffe5e5ea
comp_background_secondary	二级背景	#19000000	#19ffffff
comp_background_tertiary	三级背景	#0c000000	#0cffffff
comp_background_emphasize	高亮背景	#ff0a59f7	#ff317af7
comp_background_neutral	黑色中性高亮背景	#ff000000	#ffffffff
comp_emphasize_secondary	20%高亮背景	#330a59f7	#33317af7
comp_emphasize_tertiary	10%高亮背景	#190a59f7	#19317af7
comp_divider	分割线颜色	#33000000	#33ffffff
comp_common_contrary	通用反色	#ffffffff	#ff000000
comp_background_focus	获焦态背景色	#fff1f3f5	#ff000000
comp_focused_primary	获焦态一级反色	#e5000000	#e5ffffff
comp_focused_secondary	获焦态二级反色	#99000000	#99ffffff
comp_focused_tertiary	获焦态三级反色	#66000000	#66ffffff
interactive_hover	通用悬停交互式颜色	#0c000000	#0cffffff
interactive_pressed	通用按压交互式颜色	#19000000	#19ffffff
interactive_focus	通用获焦交互式颜色	#ff0a59f7	#ff317af7
interactive_active	通用激活交互式颜色	#ff0a59f7	#ff317af7
interactive_select	通用选择交互式颜色	#330A59F7	#33317AF7
interactive_click	通用点击交互式颜色	#19000000	#19ffffff

1.9 智能穿戴 Token 全量表

穿戴设备屏幕小、使用环境复杂，因此部分 Token 数值与手机端不同，例如深色模式下一级文本改为完全不透明的白色，以增强小屏可读性。设计穿戴应用时应优先参考此表，而非直接沿用手机端参数。

Token	场景类别	Light	Dark
brand	品牌色	#ff0a59f7	#ff1f71ff
warning	一级警示色	#ffe84026	#ffe84026
alert	二级警示色	#ffed6f21	#ffed6f21
confirm	确认色	#ff64bb5c	#ff64bb5c
font_primary	一级文本	#E5000000	#ffffffff
font_secondary	二级文本	#99000000	#A9ffffff
font_tertiary	三级文本	#66000000	#66ffffff
font_fourth	四级文本	#33000000	#33ffffff
font_emphasize	高亮文本	#ff0a59f7	#ff5ea1ff
font_on_primary	一级文本反色	#ffffffff	#ffffffff
font_on_secondary	二级文本反色	#99ffffff	#A9ffffff
font_on_tertiary	三级文本反色	#66ffffff	#66ffffff
font_on_fourth	四级文本反色	#33ffffff	#33ffffff
icon_primary	一级图标	#e5000000	#ffffffff
icon_secondary	二级图标	#a9000000	#a9ffffff
icon_tertiary	三级图标	#66000000	#66ffffff
icon_fourth	四级图标	#33000000	#33ffffff
icon_emphasize	高亮图标	#ff0a59f7	#ff5ea1ff
icon_sub_emphasize	高亮辅助图标	#660a597f	#665ea1ff
icon_on_primary	一级图标反色	#ffffffff	#ffffffff
icon_on_secondary	二级图标反色	#a9ffffff	#a9ffffff
icon_on_tertiary	三级图标反色	#66ffffff	#66ffffff
icon_on_fourth	四级图标反色	#33ffffff	#33ffffff
background_emphasize	高亮背景（实色/不透明色）	#ff0a59f7	#ff1f71ff
comp_background_emphasize	高亮背景	#ff0a59f7	#ff1f71ff
comp_emphasize_secondary	20%高亮背景	#330a59f7	#331f71ff
comp_emphasize_tertiary	10%高亮背景	#190a59f7	#191f71ff
comp_divider	分割线颜色	#33000000	#33ffffff

二、鸿蒙黑体：屏显理性与人文笔意的平衡

2.1 无衬线字体的屏显优势

HarmonyOS Sans 作为系统默认字体，没有额外装饰笔画，结构简洁清晰，能够在 UI 界面上提供更好的屏幕显示效果和更高阅读效率。无衬线字体在小字号下不易糊笔，也适合多端一致体验。

2.2 字体风格：不只追求“清晰”

鸿蒙黑体的设计目标是在现代屏显与自然书写感之间寻找平衡。它通过均匀稳定的笔画提升屏幕阅读清晰度，同时在曲线、转折与字形结构中保留圆润自然的笔意。这种“理性秩序 + 人文气质”的取向，使系统界面不冰冷，又能满足长时间阅读的舒适度。

2.3 中文与拉丁设计要点

中文设计风格：

• 均匀稳定的笔画适配屏幕，保留自然优美的线条曲率。
• 优化复杂字形的笔画避让，减少局部灰度堆积。
• 简化斜笔与横竖笔画交接处的小开口，减少细碎视觉干扰。
• 去除部分笔画出头，简化端部结构，让轮廓更利落。

这些处理对提升中文小字号清晰度非常重要。中文笔画密度高，局部堆积容易在屏幕上形成黑块，优化避让能显著改善阅读体验。

拉丁设计风格：

• 增大字母开口，提升相近字形辨识度。
• 更几何化的结构与更开放的字母开口，提升英文清晰度和秩序感。
• 平衡字母宽度，使中英文宫格视觉比例统一。
• 斜体延续手写笔势中的圆润曲线，呈现自然流动感。

2.4 字重与可变字体

系统字体提供 Thin、UltraLight、Light、Regular、Medium、SemiBold、Bold、Heavy、Black 九种字重。Condensed 窄体适配空间受限版面，Italic 斜体为英文内容提供自然强调。

可变字体能力让字重可在连续轴上灵活调节，适配不同字号、界面层级和显示环境。这意味着开发者不需要为每个字重引入独立字体文件，大幅减少包体，同时保证视觉连续。

2.5 字体特性 Tag

系统字体支持丰富的排版特性，设置对应 Tag 即可开启。例如：

• 上标数字 sups、下标数字 subs、科学下标数字 sinf
• 分子 numr、分母 dnom
• 等宽数字 tnum、变宽数字 pnum
• 大写变换字符 case、分数 frac、序列数字 ordn
• 连字 liga、全宽字符 fwid、变宽字符 hwid、竖排字符 vert

这些特性特别适合金融、科学计算、多语言混排等场景。合理使用可避免手动调整字符位置带来的兼容问题。

三、应用图标：小尺寸下的品牌叙事

3.1 核心原则：简洁、达意、质感

应用图标设计的核心是简洁、高效和品牌识别度。三项原则需要并重：

• 简洁优雅：元素精简，线条优雅，传递设计美学。
• 极速达意：图形准确传达功能、服务和品牌，具备易读性和识别性。
• 细腻质感：以光影塑造体积感与层次感，创造炫彩透光的细腻质感。

图标在桌面上通常只有几十像素，过于复杂的细节会丢失，因此简洁和达意优先。质感则通过光影和渐变实现，而非堆叠细节。

3.2 图形网格与安全区

图形元素应保持主要内容居中，避免在系统调整圆角或应用遮罩时被截断。网格主要作为体量参考，部分图标可根据图形体量感突破网格界限。这里需要理解：网格不是硬性裁剪框，而是视觉体量的参考线，允许突破但必须保持整体平衡。

3.3 色彩规则：光源与渐变

光源保持至上而下，颜色上浅下深。渐变色应保持在合理范围内，不应出现对比强烈的颜色渐变。系统提供 9 种推荐色彩方向，可根据应用定位选择。

渐变方向必须统一，不宜使用斜向渐变或上深下浅。渐变两端色值差异不宜过大。这些规则的目的在于保证系统视觉一致性和质感自然。斜向渐变可能破坏图标间的秩序感，过大色差则显得廉价。

3.4 多设备适配：同一品牌的不同表达

• 手机、折叠屏、平板：捕捉应用最核心的品牌故事，使用简洁视觉语言，避免复杂图层堆叠。建议巧用应用主题色，提炼高辨识度前景图像。
• 电脑：图标作为扁平设计在更真实物理环境中的投射，结合动效和空间感。鼠标滑入 dock 栏时生成动态阴影，突出多层空间体验。
• 智慧屏：强调细腻材质、柔和光影和鲜亮色彩，适配深色沉浸场景。分层图标在 launcher 上适配动效，光标移动伴随光学协奏。

这说明同一图标资源需要针对不同终端语境做适配，而不是简单缩放。手机强调辨识度，电脑强调空间动效，智慧屏强调沉浸光影。

3.5 资源规范：分层与透明像素

应用图标必须满足：

• 分层资源，分为前景和背景两层
• 尺寸 1024*1024px
• 正方形，无需圆角，系统自动生成遮罩裁切
• PNG 格式
• 背景图不允许含有透明像素

常见错误是背景含透明像素（包括圆角裁切或透明内边距）。系统会自动裁切圆角，如果背景本身透明，会导致图标在系统遮罩下出现异常白边或黑边。上传前应检查图标压缩方式、前景元素与四角距离，并在上架前测试。

3.6 多平台规格

平台	资源分层	资源形状	资源尺寸	资源格式	典型使用场景
手机、折叠屏、平板	双层	正方形	1024*1024px	PNG	桌面，启动页等
电脑	双层	正方形	1024*1024px	PNG	桌面，启动页，应用中心等
智慧屏	双层	正方形	1024*1024px	PNG	Launcher，应用中心等

智能穿戴图标规格参考智能穿戴设计指南。Hap 包中未正确预置图标资源将无法通过上架检查，这是硬性要求。

四、HarmonyOS Symbol：具备字体属性的智能图标

4.1 为什么 Symbol 是重要演进

HarmonyOS Symbol 具备字体属性，能与系统字体无缝对接，确保文本与图标排版一致。它还能根据文本粗细智能适配，在不同字重下保持视觉连贯。这种设计解决了传统图标与文本混排时基线不对齐、粗细不匹配的长期痛点。

4.2 字体属性与粗细无极变化

与文本混排时，Symbol 可以与字体基线对齐，支持粗细无极变化。开发者可根据设计需求选择合适图标粗细，确保不同场景下风格一致。这一特性让图标成为“可排版的图形”，极大提升了灵活性。

4.3 颜色渲染策略

Symbol 采用分层结构，每个图层可独立设置颜色和不透明度。三种渲染策略：

• 单色 (SINGLE)：只生效第一种颜色。
• 分层 (MULTIPLE_OPACITY)：默认黑色，可设置一个颜色；第一层 100%、第二层 50% 不透明度。
• 多色 (MULTIPLE_COLOR)：可生效两种颜色，颜色顺序与分层顺序匹配，多余颜色不生效。

理解这些策略有助于在底部页签等场景中实现丰富的视觉效果，而不必为每种状态切图。

4.4 动效策略

Symbol 支持 9 种动效：出现、消失、弹跳、缩放、替换、快速替换、脉冲、可变颜色、禁用，默认为无动效。这些动效可与点击、长按、输入、数据传输等操作结合，提供直观反馈。例如底部页签切换使用弹跳效果，增强操作愉悦感。

4.5 如何使用 Symbol

开发者通过图标资源名称索引图标。例如“加号”图标的 Symbol name ID 为 plus。图标命名依据形状描述，可查阅 HarmonyOS Symbol 图标库。

4.6 SymbolGlyph 与 SymbolSpan

• SymbolGlyph：适用于独立图标展示。可设置字号、字重、颜色渲染策略和动效。默认图标尺寸与字号一致，如 24vp 字号对应 24*24vp。
• SymbolSpan：专为图标与文本混排设计，共享基线对齐、字号、字重。当图标粗细设为 fp 时，自动与系统字体大小同步。

4.7 图标设计规范

基础原则

精致简约、独特考究，主要运用几何型塑造图形，精简线条结构，精准把握比例。避免尖锐直角，传递亲近友好体验。

尺寸与网格

标准图标 2424vp，主题物应保留在 2222vp 蓝色区间内。网格用于体量参考，部分图标可根据体量感突破。

细节参数

• 描边粗细：1.5vp
• 终点样式：圆头
• 断口宽度：1.3vp
• 外圆角：3vp；内圆角：1.5vp
• 复杂形状描边粗细：1.3vp

视觉校正必须使用所有其他图标所基于的几何形状，不歪曲或扭曲。导出时必须包含外框线条，作为字库化大小标准，并以 SVG 格式导出。

角标规则

• 表示物体状态（加、减、乘、除、对号等）通过圆形背板表达。角标是面性图形时无需添加背板，但绘制标准遵循 8vp 大小。
• 语意组合的两个图标无需背板。若角标图形使用线性且去掉背板后单薄，需根据实际情况增加背板。

切断规则

• 切断效果：两边留白
• 端口宽度：1.3vp
• 切断面保持平直
• 斜线从左上至右下，角度 45 度
• 根据视觉效果等量切段

这些规则确保图标在字库化之后仍保持统一、清晰，避免不同图标在切断处产生视觉差异。

五、沉浸光感：从视觉层到感知层的体验跃迁

5.1 光设计语言的本质

沉浸光感不是简单光影特效，而是消除界面与内容之间的视觉割裂。界面元素具备光学扩散与动态透光特性，光线在介质表面折射与漫反射，使背板如薄雾般悬浮于内容之上。前景与背景信息自然交融，同时保障信息清晰可读，释放屏幕空间，提升屏占比与沉浸感。

5.2 三档强度：尊重用户偏好

系统提供强档、均衡档（默认）、弱档三档调节，本质是对透明度、反色率、折射强度与环境交互程度的精细调控。

• 强档：强化光影交织与折射层次，叠加粒子流转与空间光效，营造深邃沉浸氛围。
• 均衡档：通透感与对比度平衡，环境光沿边缘柔和流转，兼顾清晰度与精致度。
• 弱档：轻盈克制，高对比度，核心信息清晰锐利。

三档让不同偏好的用户都能获得舒适体验，体现了包容性设计。

5.3 开发调用：一次定义，自动适配

沉浸光感提供从 Ultra_Thin 到 Ultra_Thick 共 5 个层级枚举值。开发时无需针对三档强度分别适配，系统底层自动完成参数映射与动态渲染。这简化了开发，同时保证用户设置即时生效。

5.4 场景规范

推荐在界面操作元素与内容区可能重叠时使用沉浸光感，强化 Z 轴空间感，分离内容与交互组件。

• 顶部悬浮：推荐 ULTRA_THIN，结合渐变模糊效果延展顶部空间。
• 底部悬浮：推荐 THIN，结合渐变颜色蒙层延展底部空间。
• 非常驻任意位置弹出：建议 THICK，确保复杂场景可读性。
• 半模态、弹出框：推荐 ULTRA_THICK，面积大、内容丰富，需要最高层级可读性保障。

六、圆角参数：层级与亲和力的精确控制

6.1 圆角的作用

圆角能软化界面锐利感、降低视觉压迫感，明确控件层级与边界，优化触控区域识别性，传递友好、专业、现代的品牌调性。

6.2 使用原则

• 同层统一：同一功能层级、同一类型控件或容器，必须采用一致圆角半径，避免视觉混乱。
• 层级正相关：圆角半径与视觉/功能层级正相关。层级越高，圆角越大，如半模态、弹出框圆角大于图片、标签、角标。

这两个原则共同构建了有序的圆角体系：同级统一确保一致性，跨级差异确保层级可辨识。

6.3 通用圆角尺寸

数值	场景
4vp	系统通用超小圆角，适用于标签和角标等
8vp	系统通用小圆角，适用于各类图片和图标等
16vp	系统通用圆角，适用于通知卡片和内容容器等
20vp	系统通用大圆角，适用于按钮和菜单等
32vp	系统通用超大圆角，适用于半模态和弹出框等

6.4 场景示例解读

• 4vp 超小圆角：弱化边缘锐利感，保持精致紧凑。用于标签、角标、迷你图标背景。
• 8vp 小圆角：系统基础圆角，使用频率最高。用于图片、图标、小尺寸容器、列表内模块。
• 16vp 圆角：突出信息、具备独立性的中层级容器。用于通知卡片、普通卡片、内容容器。
• 20vp 大圆角：高频交互元素，提升操作辨识度。用于按钮、菜单、选项卡、功能入口。
• 32vp 超大圆角：高层级、强聚焦组件。用于半模态弹窗、大型弹出框、顶层浮层。

6.5 系统圆角 Token 全量表

Token	数值
corner_radius_none	0
corner_radius_level1	2
corner_radius_level2	4
corner_radius_level3	6
corner_radius_level4	8
corner_radius_level5	10
corner_radius_level6	12
corner_radius_level7	14
corner_radius_level8	16
corner_radius_level9	18
corner_radius_level10	20
corner_radius_level11	22
corner_radius_level12	24
corner_radius_level13	26
corner_radius_level16	32
corner_radius_level18	36

七、间隔参数：用空白构建秩序

7.1 间隔的核心价值

间隔控制界面元素之间、元素与容器之间的空白距离，定义疏密关系、呼吸空间与视觉层次。合理间隔能梳理模块边界、引导视觉流、明确阅读优先级、提升可读性与舒适度。

7.2 使用规则解读

1. 遵循统一栅格体系：优先使用 4vp、8vp 等固定基数倍数，避免随意数值。这是保证全平台视觉统一的基础。
2. 按层级区分间距：信息层级越高、独立性越强，间距越大；同级一致，上下级逐级区分。
3. 同类元素间距一致：相同类型组件、相同场景间距保持统一，减少认知负担。
4. 屏幕边缘间距固定：规范安全边距，避免内容贴边，提升握持与阅读舒适度，适配不同设备尺寸。

7.3 常用间隔类型

• 屏幕边缘间隔：外边距 margin，统一调整界面留白尺度。
• 元素间间隔：控件、组件、卡片等之间的留白，是平衡布局层级、区分功能模块的核心。
• 文本间间隔：多行文字、标题与正文等之间的留白，提升阅读舒适度与页面整洁度。

7.4 多设备屏幕边缘间隔尺寸

间隔类型	手机	折叠屏	平板	智慧屏	穿戴	PC	智能座舱
屏幕边缘间隔/margin（左右）	16vp	24vp	32vp	48vp	26vp	40vp	48vp
屏幕顶部边距	36vp	36vp	36vp	27vp	20vp	/	/
屏幕底部边距	28vp	28vp	28vp	27vp	20vp	/	/

不同设备的边缘间隔不同，这是基于屏幕尺寸、观看距离和交互方式综合考量的结果。例如智慧屏观看距离远，需要更大留白；穿戴屏幕小，边缘留白也相应减小。

7.5 多设备间隔使用场景示例

泛手机

元素间间隔：

• 卡片之间：12vp
• 控件间上下方向较大间隔（有明显边界）：16vp
• 控件间上下方向普通间隔（无明显边界）：8vp
• 控件间左右方向较大间隔（有明显边界）：16vp
• 控件间左右方向普通间隔（无明显边界）：8vp

文本间间隔：

• 主次文本上下间隔：2vp
• 主次文本左右间隔：8vp

智慧屏

元素间间隔：

• 上下方向较大间隔（有明显边界）：24vp
• 上下方向普通间隔（无明显边界）：12vp
• 上下方向较小间隔（无明显边界）：8vp
• 左右方向较大间隔（有明显边界）：24vp
• 左右方向普通间隔（无明显边界）：12vp

文本间间隔：

• 第一层级：32vp
• 第二层级：24vp
• 第三层级：16vp
• 第四层级：8vp
• 第五层级：4vp

穿戴

元素间间隔：

• 间距 9：12vp
• 间距 10：6vp
• 间距 11：8vp
• 间距 12：26vp

文本间间隔：

• 间距 13：16vp，间距 15：6vp
• 间距 14：12vp
• 间距 16：2vp
• 间距 17：2vp

7.6 系统间隔 Token 全量表

Token	数值
Padding_level0	0
Padding_level1	2
Padding_level2	4
Padding_level3	6
Padding_level4	8
Padding_level5	10
Padding_level6	12
Padding_level7	14
Padding_level8	16
Padding_level9	18
Padding_level10	20
Padding_level11	22
Padding_level12	24
Padding_level13	26
Padding_level16	32
Padding_level17	34
Padding_level18	36
Padding_level19	38
Padding_level20	40
Padding_level21	42
Padding_level22	44
Padding_level23	46
Padding_level25	50
Padding_level26	52
Padding_level27	54
Padding_level28	56
Padding_level29	58
Padding_level30	60
Padding_level32	64
Padding_level33	66
Padding_level34	68
Padding_level35	70
Padding_level36	72

八、文本排版：从字号比例到标点禁则

8.1 字体排印的作用

字体排印定义文字的布局和呈现方式，包括字号、样式、行间距等，直接影响可读性和美观性。合适的字体排印能阐明信息层级结构、传达重要内容并宣传品牌。

8.2 排版体验要求解读

• 最小可读字号：所有设备上提供清晰可读文本。
• 色彩和对比度：文本在各种背景下清晰可辨。
• 一致的字体风格：字重和风格保持协调，增强品牌一致性。
• 简洁的样式表达信息：避免过度使用字号、粗细、颜色，层级清晰，避免复杂。
• 支持系统大字体：适应无障碍大字体模式，照顾视觉障碍用户。

8.3 文本应用五大类

文字比例系统确保 UI 中一致视觉层次。五类文本为：展示、标题、副标题、正文、说明。

场景类别	层级 Token	字重 Weight	尺寸 Size (phone)	尺寸 Size (PC)	尺寸 Size (watch)
展示性文本 Display	Display_L	Light	56 vp	54 vp	56 vp
展示性文本 Display	Display_M	Light	48 vp	46 vp	48 vp
展示性文本 Display	Display_S	Light	38 vp	36 vp	38 vp
标题文本 Title	Title_L	Bold	30 vp	28 vp	30 vp
标题文本 Title	Title_M	Bold	24 vp	22 vp	24 vp
标题文本 Title	Title_S	Bold	20 vp	18 vp	20 vp
副标题文本 Subtitle	Subtitle_L	Medium	18 vp	16 vp	18 vp
副标题文本 Subtitle	Subtitle_M	Medium	16 vp	14 vp	16 vp
副标题文本 Subtitle	Subtitle_S	Medium	14 vp	12 vp	14 vp
正文文本 Body	Body_L	Medium	16 vp	14 vp	16 vp
正文文本 Body	Body_M	Regular	14 vp	14 vp	14 vp
正文文本 Body	Body_S	Regular	12 vp	14 vp	12 vp
说明文本 Caption	Caption_L	Medium	12 vp	12 vp	12 vp
说明文本 Caption	Caption_M	Medium	10 vp	9 vp	10 vp
说明文本 Caption	Caption_S	Medium	-	-	8 vp

解读：展示性文本使用 Light 字重，字号最大，用于吸引注意力；标题使用 Bold，副标题和正文使用 Medium/Regular，说明文本最小。这种层级设置确保重要内容突出，同时保证长文阅读的舒适度。PC 端部分字号略小于手机端，是为了适应桌面视距和窗口密度。

8.4 标点及符号排版规则

排版引擎明确每种字符在特定场景下的宽度、间距。关键规则包括：

• 行首标点缩进/禁则：行首不允许出现标点，必须调整。
• 行尾标点悬挂：标点应悬挂在行尾，避免标点独占一行开头。
• 标点符号连用：避免连续使用多个标点。
• 混合排版间空格：中西文混排时需正确添加空格。

这些规则直接影响中文排版品质，开发者应依赖系统排版引擎，避免自行处理导致禁则失效。

8.5 段落排版规则

• 行尾孤字成行：避免单字独占一行。
• 行长缩进：正确设置段落缩进。
• 中文两端对齐：中文段落应两端对齐，避免右侧参差。
• 英文平衡排版：避免词间距不均匀。
• 英文按音节破发换行：根据场景选择是否采用音节换行。
• 小语种行高变化：正确处理不同语种行高差异。

8.6 英文换行的两种场景

场景一：快速扫读的碎片化场景（禁止音节换行）
适用于手机弹窗、标语、指示等。要求严格保持单词完整性，采用左对齐布局，通过自然词间距控制行尾断点，不得拆分单词。设计时需精细调整字距、行长或重写文本来补偿版面不均匀，保留专有名词固有连字符但禁止新增断点。

场景二：精细排版的密集文本（采用音节换行）
适用于文本内页、长文本窄栏。严格按语言学音节边界插入连字符，行末/行首各不少于 3/2 字符，控制连续换行次数，连字符视觉比重与正文协调。该规范平衡两端对齐文本词间距，适合学术著作、多栏报纸等长文本。

8.7 使用自定义字体

如果系统默认字体无法满足品牌宣传或沉浸式游戏体验需求，可使用自定义字体，但必须确保用户在不同视距和条件下都能轻松阅读。这意味着自定义字体仍需满足最小可读字号、对比度和无障碍大字体适配等要求。

结语

鸿蒙官方设计规范是一套高度系统化的设计语言：色彩通过 Token 分层构建对比关系，字体通过鸿蒙黑体平衡理性与人文，图标通过分层资源和网格保证一致性，Symbol 让图标具备字体属性，沉浸光感提升感知体验，圆角与间隔参数建立层级秩序，文本排版确保多语言可读性。理解这些规范背后的设计逻辑，远比记住参数更重要。设计师与开发者应在实际项目中灵活运用，既保持与系统一致，又能展现品牌个性。