UI设计规范-集合（HarmonyOS）

目录

UI设计规范概述

设计目标

交互设计原则

视觉设计原则

色彩与风格规范

色彩设计理念与基础色调

色彩分层构建

Token 参数运作机制

Token 参数在不同元素中的应用

视觉规范

控件规范

控件形态

控件形态与元素组成

文本与字号

文本规范

文本对齐

文本间距

段落间隔

字号使用规则

图标与热区

控件尺寸

热区尺寸

控件热区组合

热区间隔

拉伸

缩放

隐藏

均分

占比

---

UI设计规范概述

设计目标

1.⼀致性的交互定义，遵循统⼀的交互逻辑，提⾼产品的易学易⽤性

2.标准化设计，⼀次开发满⾜所有⻋机屏幕适配，简单⾼效

交互设计原则

​

视觉设计原则

1. 内容易读性：图⽂信息清晰易读，字号、⾊彩⽅案标准，并满⾜夜间/暗光/炫光场景下的显示效果，保证⽩天和夜间的阅读效率； 控制任务内容的信息量，包含图⽚⼤⼩、图标数量和⽂本⻓度，使⽤户能在2秒内完成阅读，获取主要内容； 关键信息呈现在⽤户核⼼视域或重要视域靠近⽤户的⼀侧，并避免⽅向盘遮挡
2. 控件易⽤性：合适的控件位置布局，避免控件距离太远⽤户难以触及和可能导致的驾驶分⼼。控件满⾜最⼩尺⼨要求以确保可操作性。针对⻋辆可能的上下颠簸场景，控件可以宽度略微调整但必须满⾜最⼩⾼度要求。控件热区之间保持⼀定的距离，避免重叠或间距过⼩引起误触。
3.  界⾯⼀致性：统⼀的图标、语⾔和交互形式，减少驾驶员所需要的学习成本，功能的可⽤状态与不可⽤状态进⾏明确区分，并清晰的呈现给⽤户

色彩与风格规范

色彩设计理念与基础色调

     HarmonyOS NEXT 色彩设计注重品牌色展示与系统色彩对比，以实现视觉连续和界面关联，面向所有人群，秉持包容理念。其系统色调受 “鸿蒙宇宙” 世界观启发，宇宙蓝和雪域灰构成基础，宇宙蓝带来纯净宁静，雪域灰用于卡片背景烘托纯净感。

色彩分层构建

1. 构建对比关系：色彩分层的核心是构建不同使用场景下的对比关系，每个颜色都有专属 ID。这有助于处理不同层级间的对比差异，并保证同层级色彩一致。系统组件虽有默认分层参数，但应用自定义组件规格时，需重新梳理背景、文本等色彩的正确映射关系，以确保色彩在不同组件和层级中的协调性与合理性。
2. 保障可阅读性：色彩搭配必须满足常规阅读对比度，系统默认颜色保障最小 3:1 对比度。在深色模式下，色彩的映射关系会部分改变，这是为了适应不同的视觉环境，确保用户在各种模式下都能清晰识别界面上的信息，避免因色彩对比度不足而导致的阅读困难或视觉疲劳。
3. 最小集的色彩管理：在 HarmonyOS 的色彩体系中，可以最小级的管理系统色彩数量。基于常规色四件套，即通过合理运用有限的基础色彩，便可搭建系统整体的色彩风格。这种管理方式既能保证色彩的多样性和丰富性，又能避免色彩过多导致的混乱和不协调，提高了色彩管理的效率和效果。

Token 参数运作机制

1. 什么是token: 具有用于固定场景的 Token 名称，分为文本类、图标类、组件类和交互事件类等，定义了系统中大部分的使用场景。每个语义 Token 参数都与基础 Token 具备一定的引用关系，应用自定义的参数也可基于使用场景自定义引用链路，确保色彩在不同场景下的准确应用，提升界面的语义表达和视觉引导性。
2. 参数分类与层级：分为控件私有、通用语义、通用基础三个层级。基础 Token 如 primary 等经计算生成对比度色彩用于界面元素，可直接引用或重定义语义；语义 Token 对应固定场景且与基础 Token 关联，应用可自定义引用链路；控件 Token 针对控件内元素，具唯一性。
3. 参数使用规则：在浅色和深色模式下，部分 Token 名称相同但数值有别。如 brand 等基础 Token 可单独定义色彩，其原色指定后通过 Alpha 值实现映射，不同透明度对应特定 Token name，修改映射关系需考虑控件默认引用逻辑。

Token 参数在不同元素中的应用

1. 文本色与图标色：基于 Primary、onPrimary 和 Brand 确定色彩来源，分五个层级展示，依透明度区分核心与辅助内容，反色场景用特定 Token name，高亮色引用 Brand 且随其变化。
2. 组件容器色：源自 Brand 和 Container，区分背景层级。控件容器色分多种类型，容器类随深浅模式变，展示类用品牌色或低透明度色，还有交互事件色对应不同操作状态。
3. 界面背景色：用于窗口分层，多屏和悬浮窗场景动态替换灰阶层级。浅色通用白色和深色黑色为基础色，从 gray_02 起依灰阶对比度调整层级，不可用透明色，特殊情况可作组件背景。

视觉规范

控件规范

控件形态

•  控件提供三种⾄少形态：初始、⾼亮、置灰，来表现控件的操作状态：默认、选中、不可⽤等。 
• 对于交互操作及时性反馈的需求状，还应提供点击态。
• 控件尽可能使⽤点击按钮，避免或少⽤滑动控件。   ​

控件形态与元素组成

• 控件必须保持整体形式的统⼀，控件结构必须遵循⼀致性的布局结构。
• 控件内的元素类型以及数⽬不做限制，可根据需求对图⽚、图标、⽂字等各类元素进⾏组合，但必须满⾜相应的尺⼨⼤⼩规范；同时控制内容信 息量，2秒内可完成阅读

文本与字号

文本规范

• 任务交互中需要⽤户阅读和处理的⽂字信息，⽂本⻓度最多不超过20字（600字/分钟，确保2秒内阅读完成）。
•  重要的⽂本内容，可以通过增加字重的⽅式进⾏焦点突出。

文本对齐

• 单行文本可选择居中/左对齐
• 多行文本建议左对齐

文本间距

• 多行文本中主次文本上下间隔2px，左右间隔8px。

段落间隔

• 文本段落间隔可选择4px、8px、16px，24px，48px，依照层数目往上递增

字号使用规则

• 字体的大小，层级，对比度等都是影响视觉可读性和阅读效率的重要因素，为保障文本的易读性，界面文字需满足以下要求：
• 最小可识别文字尺寸：5.4mm。
• 字体层级：区分文本主副层级，字号差距需保持4-6sp。
• 需要用户阅读和处理的重要段落文字不超过20个字（700字/分钟，2秒内读完）
• 对于需要用户关注的文本信息可通过增加字重的方式突出内容。
• 
• ⽂本呈现必须满⾜最⼩字号24sp，以确保内容的可读性
• ⽂本中的字号使⽤需要体现层级区分，上下层级内容之间的字号差距保持4-6sp

字号	建议应用场景
60px	特殊强调信息文字
44px	强调信息文字
36px	主要标题
32px	主要内容文字
28px	次要标题/次要内容文字
24px	状态栏信息/非关键性信息/辅助信息文字

图标与热区

1. 控件交互⾏为中最常⽤到的点击/滑动等，交互对象包含icon、图⽚、⽂字按钮等元素，为确保⽤户的可读性和操作的易⽤性，图标按钮及热区需 满⾜规范要求。
2. 点击是交互行为中最为常用的动作，为确保用户点击操作的易用性和成功率，操作按钮及热区需满足以下规则：
3. 图标：最小的图标尺寸为6.9mm，推荐图标大小为9.2mm。
4. 热区：最小10.7mm，推荐热区15.3mm以上，热区间隔3mm以上。

控件尺寸

• 最⼩图标尺⼨ 24px；
• 推荐主图标尺⼨ 48px，次级图标尺⼨32px
• 图标尺⼨允许宽度上略微收缩，但必须满⾜最⼩24px的⾼度要求

热区尺寸

• 最⼩热区尺⼨72px
• 热区尺⼨允许宽度上略微收缩，但必须满⾜最⼩72px的⾼度要求

控件热区组合

• 控件与热区居中对⻬布局（⽔平居中且垂直居中）
• 热区整体尺⼨必须⼤于或等于控件
• 控件的任何元素部分均不能超出热区范围

热区间隔

• 热区之间的间隔距离⾄少16px

拉伸

• 组件内元素随组件可以往四个方向拉伸。
• 元素通过定义在组件内的四个边距，当控件发生宽度/高度变化时，保证边距固定的• • 前提下对内容进行拉伸。
• 允许定义组件拉伸的水平方向和垂直方向的最大值和最小值。

缩放

• 组件内元素随组件等比缩放。
• 组件本身只能等比放大。
• 组件内元素根据当前和组件的横竖比例关系，当组件缩放时一起缩放。
• 允许定义组件缩放的最大值和最小值。

隐藏

• 当组件内元素横向布局，元素间的距离是固定时，布局可显示元素的数量随着显示宽度的改变而发生改变

均分

• 组件内元素根据个数均分空间。
• 组件内元素根据当前个数和组件的宽度，均分各个元素之间的间距。
• 允许定义组件最左端和最右端是否一起均分/指定固定值。
• 限制均分的结果，间距必须大于等于0，开发者可以定义更大值。

占比

• 组件内元素始终占据一定比例在组件中布局。
• 允许定义元素在组件中占据的具体比例值。