2.3 ArkUI App设计规范 原创 精华

本节内容不仅适用于鸿蒙UI设计师，也是鸿蒙App开发工程师的必修课。掌握了本节阐述的关键设计规范，为开发出标准、优质的鸿蒙App打下必要的理论基础。本节涉及的很多参数，不用记忆，只要理解、留下印象即可。后面会提供封装好的框架环境，直接调用即可。

2.3.1 UX人因研究框架

人因研究通常会从使用者、设备、使用环境三要素对设计问题进行剖析，并开展相应的人因实验，促使设计更新迭代，达到相应的用户体验目标。

使用者：考虑使用者的基本人口统计特征（年龄、职业等），使用不同设备时的姿态与视角，使用设备时对认知资源的占用情况等。

设备：考虑设备尺寸，设备显示能力（分辨率、显示色域等），交互方式（触摸、语音等），交互时长等。

环境：考虑设备所处的物理环境（环境光、环境音、使用距离等），社会环境（私人或公共设备）等。

HarmonyOS UX人因研究

已有研究主要从全场景UX人因和多设备UX人因等领域开展，其中多设备UX人因研究覆盖设备：手机、折叠屏、平板、PC、智慧屏、智能穿戴、耳机、VR&AR等。 通过人因实验，对不同环境光中、不同模式(深色模式/浅色模式/透明模式)、不同尺寸和分辨率设备的页面视觉易读舒适性，对色彩、对比度、字号、间隔等进行建模。

HarmonyOS UX设计三要素

HarmonyOS 是一款面向全场景智慧生活方式的分布式操作系统。 当为多种不同的设备开发应用时，需要从如下三个方面来考虑UX设计：

差异性： 充分了解所要支持的设备，包括屏幕尺寸、交互方式、使用场景、用户人群等，对设备的特性进行针对性的设计。

一致性：除了要考虑每个设备的特性外，还需要考虑不同设备的共性，并使用通用性设计方法提供既符合设备差异性，又具有跨设备一致性的设计，从而减少用户学习的难度，降低应用开发的成本。

协同性： 当考虑多个设备之间的相互协同时，需要了解设备与设备之间多种可能的协同模式，最大程度地展现 HarmonyOS 上独特的多设备无缝流转体验。

2.3.2 颜色

宇宙蓝

HarmonyOS 采用宇宙蓝作为系统的主色调， 为系统带来宇宙初开的纯净与宁静。根据人因研究，对蓝色的接受度无论是在男性还是女性群体中，比例都是最高的。而在世界地域维度，蓝色也是最受欢迎的颜色。更重要的是，对于大多数色觉障碍人士，蓝色依然可以被辨识，这满足了 HarmonyOS 为障碍人群而设计的要求。

在色彩设计上，既保持统一的色彩语言，又根据多端不同的使用场景做了调整，带来定制化用户体验。

雪域灰

自然里面，没有绝对的黑也没有绝对的白，以带有淡蓝色相的雪域灰作为卡片界面的背景颜色来烘托界面的纯净感。 雪域灰可用于卡片界面的底色来衬托卡片层级感，或者可用于深色主题下的前景颜色，使深色场景的前景与背景对比度不会过高，减轻视觉刺激。

根据颜色应用的场景，可以将鸿蒙App开发中用到的颜色分为四类：系统色、控件色、 文本/图标色和多彩色板。

系统色： 为其他非控件场景提供的基础颜色，可配合透明度叠加使用。

控件色：控件背景色、前景色及边框颜色。

文本/图标色：提供文本和图标的颜色层次。

多彩色板： 提供11种高饱和色和11种低饱和色，用于小面积、高提示性内容；提供11种莫兰迪色，用于大面积背景色块内容。另外提供12种智能穿戴设备专用颜色。

以下每组五种颜色，每种颜色上面标记了该颜色适用的场景和色值。其中：

light：代表该颜色适用于“手机/平板/折叠屏”的浅色模式；

dark：代表该颜色适用于“手机/平板/折叠屏”的深色模式；

alpha：代表该颜色适用于“手机/平板/折叠屏”的透明模式；

tv：代表该颜色适用于智慧屏；

wearable：代表该颜色适用于智能穿戴设备。

每组颜色之前，有该颜色的命名和使用场景说明。

系统色

控件色

文本/图标色

多彩色板

2.3.3 字体字号

全新 HarmonyOS 字体

通过研究用户在不同场景下对多终端设备的阅读反馈，综合考量不同设备的尺寸、使用场景等因素，同时也考虑用户使用设备时因视距、视角的差异带来的字体大小和字重的不同诉求， HarmonyOS 设计了全新系统默认的字体——HarmonyOS Sans。

统一多语言字形风格

HarmonyOS重新设计了中文、拉丁文、希利尔文、希腊文、阿拉伯文的字形样式，支持100+语言，让多语言下阅读体验更加一致。

HarmonyOS 字体特性

动态字重粗细调节： HarmonyOS Sans支持可变特性，让用户选择他们喜欢的字体粗细来进行文本的显示。

支持更多字重能力： HarmonyOS Sans增加了Thin、Light、Bold、Black的字重能力，开发者可以选择需要的字重来构建界面的信息层级。

等宽与变宽数字字体： HarmonyOS Sans支持变宽和等宽两种样式。文本混排中使用系统默认的变宽数字，在阅读文本段落中能让阅读体验更加连贯。而等宽时钟数字在需要强调数值以及数据需要经常变化的表格和时钟数字的场景中使用时，可以保持数字字宽的对齐，同时更具图形化的呈现可以在界面中脱颖而出。

支持时钟字体特性： HarmonyOS Sans支持时钟字体特性，冒号格式会根据时间格式自动调整位置。

多设备字号层级

选择合适的字号有助于定义内容的信息层级，以及达到内容的可读性。通过研究全场景设备的显示环境、用户使用时环境的差异，HarmonyOS为不同设备形态定义了一套构建信息层级的字号系统。

在下表中，展示各类设备的字号和字重，如"96fp / 300"，"96fp"代表字号，“300”代表字重(文字的粗细)。智能穿戴中的“70fp / 400(500)”，其中，400代表常规时的字重，500代表展示运动健康数据时的字重。

vp： 虚拟像素(virtual pixel)是一台设备针对应用而言所具有的虚拟尺寸（区别于屏幕硬件本身的像素单位）。它提供了一种灵活的方式来适应不同屏幕密度的显示效果。

fp：中文全称字体像素，英文为Font pixels，字体像素大小默认情况下与vp相同，但如果开发者在设置中修改了字体显示大小，就会在vp的基础上乘以scale系数。

ID	手机/折叠屏/平板/车机	智慧屏	智能穿戴	使用场景
H1	96fp / 300	96fp / 300	70fp / 400(500)	展示类数据文本
H2	72fp / 300	72fp / 300	52fp / 400(500)	展示类数据文本
H3	60fp / 300	60fp / 300	46fp / 400(500)	展示类数据文本
H4	48fp / 400	48fp / 400	36fp / 400(500)	展示类数据文本
H5	38fp / 400	40fp / 400	30fp / 400(500)	展示类数据文本
H6	30fp / 500	36fp / 500	24fp / 500	大标题/强调型文本
H7	24fp / 500	30fp / 500	19fp / 500	二级标题/强调型文本
H8	20fp / 500	24fp / 500	16fp / 500	页签标题
SubTitle1	18fp / 500	20fp / 500	19fp / 500	分组大标题
SubTitle2	16fp / 500	18fp / 500	16fp / 500	分组标题
SubTitle3	14fp / 500	16fp / 500	16fp / 500	分组小标题
Body1	16fp / 400	18fp / 400	18fp / 500	列表正文文本/段落文本
Body2	14fp / 400	16fp / 400	16fp / 400	列表辅助文本/段落文本
Body3	12fp / 400	14fp / 400	14fp / 400	列表辅助文本/图文说明
Button1	16fp / 500	18fp / 500	19fp / 500	大按钮文本
Button2	14fp / 500	14fp / 500	16fp / 500	小按钮文本
Caption1	10fp / 400	12fp / 400	13fp / 400	隐私说明文本
Caption2	10fp / 400	10fp / 400	10fp / 400	最小显示文本
Overline	14fp / 400	16fp / 400	16fp / 400	大标题辅助说明文本
Chart	10fp / 400	10fp / 400	10fp / 400	图表刻度文本

字体规范

中文默认字体为 HarmonyOS Sans，西文默认使用 HarmonyOS Sans Condensed；手表上所有字体优先使用窄体属性（Condensed）。

2.3.4 间隔

屏幕边缘间隔

屏幕边缘类型	手机/折叠屏/平板/车机	智慧屏	智能穿戴
上（spaceTop）	24vp	27vp	6vp
下（spaceBottom）	24vp	27vp	6vp
左（spaceLeft）	24vp	48vp	26vp
右（spaceRight）	24vp	48vp	26vp

注意：如果是手机竖屏观看时，屏幕上边缘间隔为48vp，横屏时屏幕上边缘间隔为24vp。

文本间间隔

间隔方向	手机/折叠屏/平板/车机	智慧屏	智能穿戴
纵向间隔（spaceTextVertical）	2vp	8vp	2vp
横向间隔（spaceTextHorizontal）	8vp	20vp	2vp

段落间间隔

间隔级别	手机/折叠屏/平板/车机	智慧屏	智能穿戴
一级（spaceTextParagraph_XL）	48vp	32vp	16vp
二级（spaceTextParagraph_L）	24vp	24vp	12vp
三级（spaceTextParagraph_M）	16vp	16vp	6vp
四级（spaceTextParagraph_S）	8vp	8vp	4vp
五级（spaceTextParagraph_XS）	4vp	4vp	2vp

元素间间隔

间隔类型	手机/折叠屏/平板/车机	智慧屏	智能穿戴
卡片间隔（spaceCard）	12vp	24vp	26vp
控件间隔-大（space_L）	16vp	24vp	12vp
控件间隔-小（space_S）	8vp	12vp	8vp

2.3.5 圆角

圆角的大小会影响用户的心理感受，越锋利的角度越具有压迫感，圆角的使用能够带来一定的视觉活力。
智慧屏定义了界面内出现的卡片圆角的参数，视觉系统目前支持五种通用圆角大小，应用于进度条、图标、宫格、文本框等场景。

通用圆角

圆角类型	手机/折叠屏/平板/车机/智慧屏/智能穿戴
通用超大圆角（radius_XL）	24vp
通用大圆角（radius_L）	16vp
通用中圆角（radius_M）	12vp
通用小圆角（radius_S）	8vp
通用超小圆角（radius_XS）	4vp

控件圆角

圆角类型	手机/折叠屏/平板/车机/智慧屏/智能穿戴
进度条（radiusProgressBar）	2vp
子页签（radiusSubTab）	4vp
点击效果（radiusClicked）	8vp
单选框（radiusRadio）	4vp
网格（radiusGrid）	12vp
菜单栏（radiusMenuBar）	20vp
菜单面板（radiusMenuPanel）	16vp
横幅（radiusBanner）	12vp
图标（radiusIcon）	8vp
开关（radiusSwitch）	10vp
操作块（radiusChips）	14vp
新事件标记（radiusBadge）	14vp
状态按钮（radiusStatusButton）	14vp
卡片（radiusCard）	16vp
分享（radiusShare）	16vp
打开方式（radiusOpen）	16vp
单行文本框（radiusInput）	20vp
多行文本框（radiusTextArea）	16vp
搜索框（radiusSearchBar）	18vp
提醒（radiusToast）	18vp
即时反馈（radiusDialog）	24vp
大按钮（radiusButton_L）	20vp
小按钮（radiusButton_S）	14vp
可滑动面板（radiusSwipePanel）	32vp