2.3 ArkUI App设计规范 原创 精华

发布于 2022-5-5 21:27
浏览
3收藏

本节内容不仅适用于鸿蒙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 为障碍人群而设计的要求。

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

2.3 ArkUI App设计规范-开源基础软件社区

雪域灰

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

2.3 ArkUI App设计规范-开源基础软件社区

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

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

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

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

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

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

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

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

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

tv:代表该颜色适用于智慧屏;

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

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

系统色

2.3 ArkUI App设计规范-开源基础软件社区

控件色

2.3 ArkUI App设计规范-开源基础软件社区

文本/图标色

2.3 ArkUI App设计规范-开源基础软件社区

多彩色板

2.3 ArkUI App设计规范-开源基础软件社区

2.3 ArkUI App设计规范-开源基础软件社区

2.3 ArkUI App设计规范-开源基础软件社区

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

©著作权归作者所有,如需转载,请注明出处,否则将追究法律责任
4
收藏 3
回复
举报
回复
添加资源
添加资源将有机会获得更多曝光,你也可以直接关联已上传资源 去关联
    相关推荐