HarmonyOS设计：设备详解

手机/折叠屏/平板设计

设计原则

概述

HarmonyOS 手机/折叠屏/平板设计指南用于指导系统/应用设计，确保给用户提供清晰一致、简单易用的使用体验，对齐设计语言，拉通体验设计的方向，帮助设计师统一设计品质。

设计原则

系统架构

系统架构是系统运行的基础框架，由 AOD（Always on Display）、锁屏、负一屏、HarmonyOS 桌面、通知中心、控制中心、任务中心和应用程序组成，他们共同维持着整个用户使用手机的体验。应用可以直接使用系统架构来体现自己的服务或功能。

AOD

AOD 可以在待机的情况下，显示用户最为关注的信息，例如时间、日期、重要通知的提醒。

锁屏

用户可以通过设置锁屏密码保护隐私。锁屏后，用户可以在锁屏界面查看时间、日期及通知信息。

在待机状态，用户按电源键或双击屏幕进入锁屏界面，通过手势或密码解锁。

HarmonyOS 桌面

HarmonyOS 桌面是用户访问应用的入口，所有的应用都会在 HarmonyOS 桌面上显示，用户可以通过移动位置、加入文件夹、建立快捷方式等对应用进行管理。HarmonyOS 桌面包含应用的入口、文件夹、快捷方式和万能卡片。万能卡片是 HarmonyOS 服务的一种表现形式，用户可以在 HarmonyOS 桌面上放置万能卡片达到快速访问应用信息的目的。

负一屏

负一屏将用户最关心的内容直接呈上，一步直达。包括快递、打车信息、资讯等。用户也可以订阅自己喜欢的服务号，方便快捷的访问相关服务。

控制中心

通过控制中心可以对 1+8+N 的设备进行快捷管理。控件中心由音频播控中心、快捷开关面板、超级终端面板、智能设备面板组成。

• 通过音频播控中心可以将当前正在播放的音频切换到其他设备上播放。

• 通过快捷开关面板可以快速的开启或关闭蓝牙、WLAN 等系统功能。

• 通过超级终端面板可以快速建立跟其他设备的协同，例如在手机上点击超级终端面板中的平板，可以快速开启多屏协同。

• 通过智能设备面板控制家庭中每一个智能设备。例如在回家的时候，提前打开家里的空调。

通知中心

通知中心用来展示应用的通知，以及正在进行的任务。用户可以通过通知中心及时了解应用的最新信息。用户可以关掉应用的通知，因此应用应该谨慎选择发送给用户的通知。

任务中心

最近打开的应用都会在任务中心中呈现。用户可以通过任务中心来打开最近访问过的应用。

系统导航

用户通过系统导航浏览界面。HarmonyOS 中常用的系统导航有以下几种：

• 虚拟三键导航

• 手势导航

手势导航

利用界面内手势进行导航。

应用架构

应用架构是一个应用对外呈现的基础结构，是系统风格的体现形式之一，除了特殊设计诉求，通常情况下，应用需要使用通用的应用架构来保持系统的一致性和用户操作的易用性。

常用应用框架

常用应用框架有：

• 一级界面通用框架

• 非一级界面通用框架

• 子页签

• 编辑界面

• 上下结构-上方为图片

• 上下结构-上方为文字

• 侧边栏导航

一级界面通用框架

常见结构有：

• 标题栏 + 内容区 + 工具栏

• 标题栏 + 内容区 + 页签

标题栏 + 内容区 + 工具栏

• 标题栏：显示应用标题和次要操作。
• 内容区：显示界面内容。
• 工具栏：底部提供当前界面的操作时，使用工具栏。 放置用户的主要操作。（可选）

标题栏 + 内容区 + 页签

• 标题栏：显示应用标题和次要操作。

• 内容区：显示界面内容。

• 底部页签：通过底部页签，用户可以快捷地访问应用的不同模块。工具栏和底部页签不能同时出现。

非一级界面通用框架

带返回键的标题栏 + 内容区 + 工具栏

带返回键的标题栏：用户点击返回键，界面跳转到上一层级页面。标题栏显示应用标题和次要操作。

内容区：显示界面内容。

工具栏：底部提供当前界面的操作时，使用工具栏。 放置用户的主要操作。（可选）

子页签

用于单个页面不同部分的内容切换。

返回键：用户点击返回键，界面跳转到上一层级页面。

标题栏：显示应用标题和次要操作。

内容区：显示界面内容。

工具栏：底部提供当前界面的操作时，使用工具栏。 放置用户的主要操作。（可选）

应用中的导航结构

导航的原则详见“通用设计基础”>“应用架构”>“应用中的导航结构”。

常用的应用导航：

• 底部页签

• 侧边栏导航

• 返回键

视觉风格

色彩

HarmonyOS 在色彩体系中，根据对色彩的解读、元素的使用场景来定义系统色板以及多彩色板。保证色彩在使用场景和寓意的一致性，有利于用户在不同界面中都能准确地作出判断和选择。

针对手机的视觉风格，设计了不同的主题样式以供应用选择。

应用内，每个主题都根据具体场景定义了不同的色彩参数，便于功能区分及色彩资源管理。

多彩色板

基于系统中应用的使用场景，我们定义了浅色主题、深色主题和半透明主题的三套关键色。

系统场景色使用规范

为统一系统颜色使用规范性，以及系统级换肤的一致性，系统控件按照颜色使用场景定义了一整套颜色接口。每个场景色都有对应不同主题的颜色资源（浅色主题、深色主题、半透明主题），应用使用不同的主题时，会动态引用到场景对应该主题下的具体颜色资源。

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

• 控件色/图标：系统提供的图标专用场景色。

• 控件色/文本：系统提供的文本专用场景色。

• 系统蒙黑：用于辅助区分层次，弹出类场景的下层蒙黑。

• 系统不透明度：配合系统色或控件色使用的不透明度，不同状态对应不同的不透明度。

• 系统多彩色板：用于功能性分类提示作用，例如设置界面图标背板、存储数据分类等。

注：“反色”场景适用于非纯色背景上的白色文本和图标场景，例如 banner 上的文字和图标，换肤不包含“反色”的场景。

系统色

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

图标公共颜色

系统提供的图标专用场景色

文本公共颜色

系统提供的文本专用场景色

系统蒙黑

用于辅助区分层次，弹出类场景的下层蒙黑

系统不透明度

配合系统色或控件色使用的不透明度，不同状态对应不同的不透明度

多彩色板

用于功能性分类提示作用，例如设置界面图标背板、存储数据分类等。

1. 高饱和色板

建议用于小面积、高提示性内容。

2. 低饱和色板

建议用于小面积、低提示性内容。

3. 莫兰迪色板

建议用于大面积背景色块。

间隔参数

针对通用性的元素间隔进行了分类。这些公共的间隔接口后续会根据产品或新视觉风格进行统一定义。因此在设计中，针对公共的间隔，设计师需要进行特殊标注以区别普通应用自定义的间隔。

间隔类型

• 屏幕边缘间隔

• 文本间间隔

• 元素间间隔

屏幕边缘间隔

屏幕边缘指界面元素距离屏幕左右上下的边距。可根据产品特性由软件进行系统级调整界面边距。

屏幕边缘间隔类型

系统定义 4 种通用窗口间隔类型。

1. 屏幕左侧边距

• defaultPaddingStart=12vp 用于旁边元素带热区的场景

• maxPaddingStart=24vp 用于旁边元素不带热区的场景

2. 屏幕右侧边距

• defaultPaddingEnd=12vp 用于旁边元素带热区的场景

• maxPaddingEnd=24vp 用于旁边元素不带热区的场景

3. 屏幕顶部边距

• defaultPaddingTop=24vp

4. 屏幕底部固定边距

• defaultPaddingBottomFixed=24vp 元素距离屏幕底部边距

文本间间隔定义

文本间间隔指界面文本之间的间隔。

普通双行及以上文本中，主次文本间隔

• textMarginVertical=2vp 主次文本上下间隔

• textMarginHorizontal=8vp 主次文本左右间隔

段落间间隔

文本段落间每段文本的间隔定义

• textParagraphMarginXL=48vp 第一层级文本段落间隔

• textParagrapMarginhL=24vp 第二层级文本段落间隔

• textParagraphMarginM=16vp 第三层级文本段落间隔

• textParagraphMarginS=8vp 第四层级文本段落间隔

• textParagraphMarginXS=4vp 第五层级文本段落间隔

元素间间隔定义

界面元素之间的间隔。这里抽取了系统中常用的几个间隔进行了定义。

卡片间间隔

• space_elements_card=12vp 卡片之间的间隔

一般控件间间隔

• elementsMarginVerticalL=16vp 一般控件间上下方向较大间隔，一般用于有明显边界元素间间隔

• elementsMarginVerticalM=8vp 一般控件间上下方向普通间隔，一般用于无明显边界元素间间隔

• elementsMarginHorizontalL=16vp 一般控件间左右方向较大间隔，一般用于有明显边界元素间间隔

• elementsMarginHorizontalM=8vp 一般控件间左右方向普通间隔，一般用于无明显边界元素间间隔

圆角参数

通用圆角场景

从系统层面建立参数化圆角，目前支持 5 种通用圆角大小。

控件圆角场景

控件圆角场景

不同控件会有不同的圆角大小，因此单独定义了圆角场景

控件	圆角大小
进度条	2vp
子页签	4vp
点击效果	8vp
单选框	4vp
网格	12vp
菜单	20vp
横幅	12vp
图标	8vp
开关	10vp
操作块	14vp
新事件标记	14vp
状态按钮	14vp
卡片	16vp
弹出框	16vp
分享	16vp
打开方式	16vp
文本框	20vp
搜索框	18vp
提醒	18vp
即时反馈	18vp
按钮	20vp / 14vp
可滑动面板	32vp

字体

字号规范

字号大小和粗细决定了信息的层级和主次关系。在设备上我们使用以下字号的合集为不同的控件及排版场景创造了清晰易读、层次分明的阅读体验。

HarmonyOS 采用HarmonyOS Sans作为系统默认字体，HarmonyOS Sans通过多种特征设计带来了更好的阅读体验，具体特性详见“通用设计基础”>“视觉风格”>“字体”。

Catergory	Font size	Font weight	Scenario
Headline1	96	Light	展示类数据文本
Headline2	72	Light	展示类数据文本
Headline3	60	Light	展示类数据文本
Headline4	48	Regular	展示类数据文本
Headline5	38	Regular	展示类数据文本
Headline6	30	Medium	大标题/强调型文本
Headline7	24	Medium	二级标题/强调型文本
Headline8	20	Medium	页签标题
Subtitle1	18	Medium	分组大标题
Subtitle2	16	Medium	分组标题
Subtitle3	14	Medium	分组小标题
Body1	16	Regular	列表正文文本/段落文本
Body2	14	Regular	列表辅助文本/段落文本
Body3	12	Regular	列表辅助文本/图文说明
Buttom1	16	Medium	大按钮文本
Buttom2	14	Medium	小按钮文本
Caption	10	Regular	隐私说明文本
Overline	14	Regular	大标题辅助说明文本

字号使用实例

1. 显示效果
2. 字号层级
3. 实际字号大小

插画

比起文字，插画可以用来表达更丰富的信息，通过视觉图像满足用户情感诉求的同时，更起到增强视觉冲击力和趣味性的作用。

HarmonyOS 插画是友好的、令人愉悦的，容易被理解的。包含场景型和功能型两种类型。主要使用在以下场景：帮助引导页、启动页和欢迎页。

插画的使用规则，详见“通用设计基础”>“视觉风格”>“插画”。

布局规则

插画资源大小计算

将屏幕一分为二后获取到较短的一边为短边；

插画资源大小用 短边x0.8 来计算适配。 （1:1 和 3:2 均适用）

插画内容大小建议用 短边x0.7左右 来计算。（允许出血，允许根据插画画面效果自定义）

插画资源显示位置

无论是否有标题栏，资源从标题栏下方开始布局。

标题距离插画资源 24vp，正文距离标题 8vp。

弹出框中的插画

1:1 资源 和 3:2 资源

多设备布局适配

手机竖屏

手机横屏

平板横屏

平板竖屏

系统图标

系统图标主要用于功能性引导、系统导航、栏目聚合以及状态指示。

图标样式

在手机设备中，系统图标根据不同场景使用描边图形与填充图形两种样式，两种样式使用同一结构图形，使他们具有一致性的视觉体验。

图形大小布局

在界面中，图标根据不同的场景会用不同的大小呈现。

阴影特性

通过不同的阴影效果，呈现信息层级的视觉空间关系。

信息层级规则

我们将信息层级分为了应用内层级和应用间层级。

• 应用内层级为单个应用内所呈现的信息内容，例如应用内的卡片、即时反馈、气泡提示等。

• 应用间层级表示跨应用的信息之间产生层叠，例如悬浮窗口、悬浮球、横幅通知等。

如下图所示，不同的信息之间是有显示优先级层级的，不同层级的信息空间高度不同，所以阴影也不一样。

系统通用阴影接口

布局

栅格系统

HarmonyOS 针对设备设计效果的需要，定义了2种类型的栅格系统的规格。

更多布局信息详见“通用设计基础”>“视觉风格”>“布局”。

基础栅格

常规的应用都可以使用基础栅格为你的内容进行大小和位置的布局。

基础栅格参数：margin=24vp，gutter=24vp

基础栅格布局实例

使用重复布局时，内容对齐栅格。8 个 columns 时列表内容重复 1 次，12 栅格时列表内容重复 2 次。

卡片栅格

应用内使用卡片化设计（例如通知卡片、卡片信息流等）时需要使用卡片栅格进行布局。

基础栅格参数：margin=12vp，gutter=12vp

卡片栅格布局实例

使用卡片栅格进行缩进布局时，4 个 columns 时卡片占 4 个 columns，8 个 columns 时卡片占 6 个 columns，12 个 columns 时卡片占 8 个 columns。

挖孔屏布局

由于不同设备下挖孔的大小和位置不同，界面布局需要规避内容被挖孔遮挡。

挖孔屏通用布局

挖孔屏横屏的通用布局，控件需要预留空间背景允许延伸至挖孔区域，保证视觉上的屏占比最大。

挖孔屏横屏延伸布局

如果应用在横屏界面可以内容左右滑动，需要允许内容在滚动或者 270 度横屏时延伸到挖孔区域。

触觉

简介

触觉是感知物理世界的自然的交互方式之一。触觉体验设计（Haptic Experience Design, HaXD）是指将交互技术与一种或多种感知的触觉联系在一起的用户体验的设计。

触觉体验可以增强用户与屏幕界面交互的体验。例如在选择器中滚动的精准交互振动。

类别

触觉振动目前分为三类：交互类、通知类、沉浸类。

类别	振动意义	典型场景
交互类	增强时间空间感知，进行操作完成确认，提高交互效率，尤其是精准交互操作	长按反馈、字母索引、音量调节边界、刷脸录入
通知类	吸引用户注意力，增强提示性	来电、闹钟、消息通知
沉浸类	多感官协同、提高沉浸体验	仿真机械键盘、时钟滑动选择器，三方游戏场景

多感官设计

针对三类触觉体验场景，进行差异化多感官协同设计。

• 交互类：侧重触觉振动与视觉动效的匹配协同。

• 通知类：侧重触觉振动与声音的匹配协同。

• 沉浸类：通过视听触三感协同，模拟真实交互，侧重三维沉浸体验。

交互类

交互类触觉反馈，是为了增强时间空间感知，提高交互效率。

交互类场景规则

通用限制规则：

第一原则：不要过度使用振动反馈。

第二原则：振动反馈都能被用户理解。

当振动反馈同时具有以上两种类别属性时，按系统事件反馈。（因为可以提供更多的信息量）。

类别	反馈信息	示例
系统事件反馈	设备状态反馈系统错误反馈跨设备连接用户信息录入	例如开关机、充电、低电量例如密码错误、指纹、面容解锁失败例如扫一扫、碰一碰例如指纹录入、银行卡录入
用户操作反馈	长按操作阀值提醒滑动切换提醒滑动悬停操作精准操作	例如长按图标、长按消息例如下拉刷新、音量最大最小值例如模式切换、滑动选择器例如上滑出任务中心、侧滑分屏例如A-Z字母点击

舒适触觉设计

基于用户不同操作（点击、滑动、滑动悬停、长按），分别定义舒适触感，进行差异化设计。

协同反馈设计

输入法点击场景下，为保证用户操作的高效和感知同步性，反馈时延需满足以下标准：

• 及时性（用户对触感容忍性低于音效）按压时间→触觉反馈时间：<47ms

按压时间→音效反馈时间：<123ms

• 同步性

触觉反馈时间→音效反馈时间：<89ms

通知类

增强来电等通知场景的提示性，吸引用户注意。同时提升舒适性，保证用户的愉悦体验。

典型场景包括来电、通知消息、闹钟等。

随铃声振动

在来电场景中，结合铃声的节奏旋律，对振动持续时间和强度做匹配设计，铃声响起的同时会充分融合振动；在闹铃的设计中，结合舒适化的旋律进行相对舒缓的振动节奏匹配，在匹配了整体的旋律节奏的同时，尽量简化密集性的打扰。

随铃声振动，为保证同步性，振动与铃声的节拍时间应满足同步性标准：以铃声节拍为 0 点，振动起点的时间范围为-46~23ms。

固定节奏振动

考虑到不同的反馈需求，我们设计了 8 种固定的振动节奏型来满足你的不同场景的需求。

8种固定节奏振动在设计时，除了字面上的拟物化表达以外，它还包含了不同的节奏紧要的考虑，同时还保留了用户已有的使用习惯。 例如经典的“标准”类型是大家熟知的，“闪烁”的单次振动，在模拟了闪动的同时，加上一定的时间间隔，紧要程度相对较缓，而“滴答”、“舞步”、“敲门”、“啄木鸟”会逐渐上升紧要的程度，可供大家对不同的通知情况进行定制。

沉浸类

通过将触觉与音效、视觉动画效果协同关联，在特定场景下，增强视听触一体化的沉浸体验。

典型场景包括仿真机械键盘、Soundji 表情包等。

仿真机械键盘

对于X轴马达产品，通过触觉反馈模仿机械键盘的键程感。

在机械键盘中，我们结合不同的真实键盘的反馈效果进行了大量的调试，营造真实的触感反馈。通过界面视觉、触觉反馈与仿真音效的结合，增强用户使用机械键盘的真实感。用户还可以进行个性化振感强度和音效强度设置。

真实机械键盘通过运动过程中的卡扣阻拦滑杆运动，形成阻尼，让用户按压键盘时有清晰的力反馈。

因此，通过触觉波形设计，加上视觉效果、音效，模拟机械键盘的真实感。

Soundji

在畅连表情中，通过触觉增强表情包的情感以及语义信息。

我们通过结合拟物化的视觉动效以及拟物化声音的设计，分析不同声音节奏与强度，视觉的变化节点；设计不同的振动序列时长以及节奏甚至是强度变化

控件

概览

标题栏

标题栏放在界面顶部，用于呈现界面名称和操作入口。在大部分情况下，标题栏左侧显示一个文本标题，以帮助用户理解当前看的是什么界面。在二级界面，文本标题左侧还需要提供一个返回按钮，用于指示当前界面的层级，用户点击返回按钮，可以返回到上一个层级界面。标题栏右侧还可以放置常用操作的图标，用户点击执行对应的操作。所有常规设计界面都需要提供标题栏。在沉浸式界面，可以考虑不显示标题栏。

类型

• 一级界面标题栏

• 非一级界面标题栏

• 编辑／选择界面标题栏

如何使用

一级界面标题栏

分为普通标题栏和强调型标题栏。

• 普通标题栏用于不需要突出标题的场景，一般用于工具界面或内容型界面，例如闹钟、音乐等。这类应用，更加突出功能或内容的显示，因此不需要突出标题。

• 强调型标题栏用于需要突出标题的场景，一般用于效率型应用界面的一级界面。例如联系人、设置等。这类应用，需要体现操作效率，因此默认会让整个页面下沉，方便用户单手操作。

普通标题栏

支持单行标题、子页签型标题两种样式。

子页签型标题用于切换页面的内容，只支持在一级界面中使用。

强调型标题栏

支持显示单行标题、双行标题以及下拉菜单型标题样式。

双行标题的第二行标题用于显示一些辅助信息。

下拉菜单型标题，用来切换页面内容的展示。

非一级界面标题栏

• 非一级界面的标题是界面的名称。非一级界面标题的左侧需要显示“返回”图标，用于指示用户可以回到上一个视图或层级。

• 双行标题中的第二行标题，用于对第一行标题进行辅助说明。

• 【不推荐】当需要有多个视图可以切换，但除默认视图外其他视图极少使用时，可以使用下拉菜单型标题。这种做法会导致下拉菜单型标题里面的内容被隐藏，降低用户的使用，因此不推荐使用。

通用元素构成

标题栏一般由左侧图标、标题、右侧功能图标组成。标题栏的元素构成分为左右两部分。

类型	左侧图标	标题	右侧功能图标
一级界面	没有图标	可换一行	最多放三个
非一级界面	只能放返回图标	可换一行	最多放三个
编辑界面	返回或打叉	可换一行	只能放勾
选择界面	打叉	可换一行	只能放勾

交互规则

滚动操作

在内容区滚动时，顶部标题栏可固定在界面顶部，或变化标题栏（隐藏/缩小）。提供隐藏标题栏可以带来沉浸式体验。

标题栏固定在顶部

内容区往上或往下滚动时，顶部标题栏不隐藏。

标题栏上滑缩小

内容区域滚动时，强调型标题栏可缩小成普通型标题栏

单行标题：一级界面，内容区向上滚动时，标题随着内容向上滚动，标题字体缩小。向下滚动恢复至原大小。

双行标题：在顶部标题栏缩小高度情况下，标题随着内容向上滚动而缩小（子标题的大小不变、淡出）。向下滚动内容到顶时则恢复原样。

滑动操作

带有子页签的标题栏支持通过滑动切换页签；

获焦放大的页签位置，需要判断最后一个页签是否在一屏的界面内显示完整来确定位置；

视觉规则

主题样式

浅色主题

深色主题

半透明度主题

布局样式

横屏

• 标题栏布局与竖屏一致，右侧图标为竖屏下工具栏+标题栏上所有功能图标的集合。

• 手机端除Launcher应用，状态栏默认不显示，标题栏紧贴屏幕开始显示，高度为 56vp。

平板

• 支持普通标题栏。

• 支持强调型标题栏。

• 规则与手机一致。

平板效果

界面写作规则

• 标题简洁明了。

• 标题和进入该页面的上一级界面的功能选项名称保持一致。

• 无标点，以名词短语为主

步骤导航器

完成一个任务需要多个步骤时，使用步骤导航器线型展示当前进展。通过使用步骤导航器，可以将复杂的任务分解成多个合理的步骤，每个步骤都会聚焦一个特定的小任务，小任务都会有一个清晰的名称，通过页面标题来呈现。完成这个小任务后，就跳转到下一个步骤，直到任务结束。设计步骤导航器的时候，要确保每个小任务都清晰易懂，保持界面布局一致性，从而提高用户的完成率。

如何使用

• 操作按钮为了不遮挡内容固定在底部显示。

• 显示输入键盘时，步骤导航按钮固定在输入键盘上方显示。

• 底部操作区采用“文本按钮 + 箭头”形式。

  • 针对左侧文本：点击文本按钮，如果无法返回到上一界面，那么该文本按钮左侧不加箭头。

• 针对右侧文本：点击文本按钮出现的界面，如果无法返回到上一界面，那么该文本按钮右侧不加箭头。例如“跳过”，“开始”。

• 在步骤导航流程中，如果某个操作耗时，请在操作的地方进行等待反馈，例如使用等待按钮，尽量不要弹出一个等待弹出框。

交互规则

点击

点击“上一步”，返回到上一个界面。点击“下一步”，前进到下一个界面。点击其他按钮，执行对应的操作。如果按钮灰显，点击无响应。

视觉规则

主题样式

浅色主题

深色主题

半透明主题

分屏

同竖屏规则。

开发指南，详见 stepper (JS)

按钮

按钮是一种点击可触发对应操作的控件，在系统中的使用场景较多，常见的有：弹出框、窗口、卡片等。

它的状态必须清晰，让用户能明确知道是可被点击的。

类型

• 强调按钮

• 普通按钮

• 文本按钮

如何使用

视按钮重要程度来选择按钮类型。按钮重要程度从高到低依次为： 强调按钮>普通按钮>文本按钮。

强调按钮用来显示重要的操作，普通按钮用来显示一般重要的操作，文本按钮用来显示常规的操作。

强调按钮

在界面上很突出，用于强调当前的重要操作。

典型使用场景：支付、订阅、安装等。

普通按钮

在界面中，用于显示一般重要的操作。

典型使用场景：应用下载、系统更新等。

文本按钮

纯文本的形式，可最大限度减少按钮对内容的干扰。

典型使用场景：弹窗信息、步骤导航器等页面一般信息的确认。

按钮的等待状态

等待状态用于表达正在执行或加载的过程，操作执行完成或加载完成，则进入下一界面。

强调按钮、普通按钮和文本按钮都可以使用等待状态。

等待状态有两种：

1.带文字的等待按钮，适用于长按钮

2.不带文字的等待按钮，适用于短按钮、步骤导航器

以下场景可用等待状态按钮替换正在加载的弹出框

• 在加载极快的情况下，出现的闪现情况。

• 多个连续跳转的情况下，用加载按钮减少复杂度。

禁止双加载场景（即按钮处于加载态的同时再出现加载弹出框）

加载动效的持续时间：

为了确保人眼能够看到，加载动效的持续时间至少为 250ms。实际加载时间少于此时间的，按 250ms 显示。实际加载时间长于此时间的，按实际时间显示。

视觉规则

主题样式

浅色主题

深色主题

半透明主题

布局样式

使用基础栅格，详见 栅格系统

单个按钮规则:

4 个 columns 时，单个按钮默认长度使用 2 columns+2gutters，最⼤可占用 4 个 columns。

8 个 columns 时，单个按钮默认长度使用 3 个 columns，最⼤可占用 6 个 columns 。

12 个 columns 时，单个按钮默认长度使用 4 个 columns，最⼤可占用 8 个 columns。

双按钮规则：

4 个 columns 时，两个按钮默认长度使用 4 个 columns。

8 个 columns 时，两个按钮默认长度使⽤ 6 个 columns。

12 个 columns 时，两个按钮默认长度使⽤ 8 个 columns。

手机竖屏

单个按钮、双按钮、按钮最大宽度	3个以上按钮，自下而上依次排列

手机横屏

单个按钮，占用 3 个 columns，字符串超长往两边延伸至最大宽度 6 个 columns。

双按钮，左右布局，两者间距 12vp。

3 个以上按钮，自下而上依次排列。

平板竖屏

单个按钮，占用 3 个 columns，字符串超长往两边延伸至最大宽度 6 个 columns。

双按钮，左右布局，两者间距 12vp。

3 个以上按钮，自下而上依次排列。

平板横屏

单个按钮，占用 4 个 columns，字符串超长往两边延伸至最大宽度 8 个 columns。

双按钮，左右布局，两者间距 12vp。

3 个以上按钮，自下而上依次排列。

界面写作规则

• 文本按钮：以词汇或短语表达，采用“动词”或“动词+名词”结构。句末无标点。能清晰判断操作对象的时候，只需保留动词，例如“删除、“新建”、“备份”。

• 确认操作的文字，建议使用真实的具体的操作内容，不建议使用抽象的“确认”、“是”或“否”。

• 询问内容，不建议使用“取消XX？”、“是否XX？”等问句。

• 按钮长度：中文 2-4 个字，单行显示。

• 进度按钮：用百分进度表示。

• 当操作本身就是“取消”或“停止”等跟“取消”意思相近的操作时，需采用“是”和“否”。例如询问是否取消下载，使用“是”表示取消下载，“否”表示不取消下载。

• 按钮处于等待状态时，字符串使用“正在XXX…”表达。

开发指南，详见 button, input (type=button) (JS) 和 button (Java)

菜单

一种临时性弹出窗口，用于展示用户可执行的操作。当用户点击一个按钮或做某个操作的时候出现。菜单里显示的操作应该符合当时的语境，且易于阅读。菜单在用户不需要使用的时候可以隐藏。设计菜单时，请将相关的操作放在一起，方便用户查找。例如在文本选择菜单中，将剪切、复制、全选放在一起，他们是对文字的基本操作，而翻译、分享等操作放在一块，他们是对文字的扩展操作。

类型

• 普通菜单

• 长按菜单

• 下拉按钮菜单

• 文本选择菜单

如何使用

• 菜单项中提供最常使用的操作。常用的操作在不同的场景下，命名和顺序要保持一致，例如删除、分享等。

• 菜单项中不显示与当前内容无关的项。

• 菜单项的数量以 3-5 项为宜。菜单项数量过多的话，用户不能一眼看尽。

• 不建议在手机上使用二级菜单。二级菜单增加了手指操作的复杂度。

• 如果对于某个对象需要频繁操作，请考虑将操作直接放在界面上，而不要放在菜单中。

• 菜单顺序：最常用菜单项放在菜单顶部依次排列。

交互规则

点击

• 点击具体的菜单项执行对应的操作。

• 点击菜单之外的区域，菜单消失。

滑动

若菜单内容无法全部显示，可用滚动条，此时可上下滑动菜单项。

视觉规则

主题样式

浅色主题

深色主题

半透明主题

布局样式

使用基础栅格，具体规则：

4 个 columns 时，默认宽度使用 2 个 columns，最大可占用 4 个 columns。

8 个 columns时，默认宽度使用 2 个 columns，最大可占用 6 个 columns。

12 个 columns时，默认宽度使用 2 个 columns，最大可占用 8 个 columns。

手机竖屏

默认宽度：2 个 columns	最大宽度：4 个 columns

手机横屏

8 个 columns

默认宽度：2 个 columns

最大宽度：6 个 columns

平板竖屏

8 个 columns

默认宽度：2 个 columns

最大宽度：6 个 columns

平板横屏

12 个 columns

默认宽度：2 个 columns

最大宽度：8 个 columns

开发指南，详见 menu (JS)

单选框

用于从多个选项中选择一项，且仅该选中项生效，常用于单选列表。单选框所在的选项不会单独使用，而是需要和其他单选项成组使用。默认情况下，单选列表中有一项会被选中，作为默认值，用户无法清除默认值。在某些情况下，单选列表中没有任何项被选中，例如在一个流程中，应用询问你选择哪个项。但一旦选中单选列表中的一项，用户就无法清除该选择回到初始状态。

如何使用

• 用于展示所有可选项。所有可选项处于平等的位置。

• 用于从列表中选择一个项目。

• 如有可能，请将默认选择项作为最佳选择项推荐给用户，且需确保选中项默认被用户看到。

• 对于开关形式的选择，例如开，关。请考虑使用开关控件而不是单选列表。

交互规则

点击：选中该单选项，其他单选项会被取消选中状态。

视觉规则

主题样式

浅色主题

深色主题

半透明主题

开发指南，详见 input (type=radio) (JS) 和 radiobutton (Java)

弹出框

弹出框是一种模态窗口，在弹出框消失之前，用户无法操作其他界面内容，干扰性比较强。通常用来展示用户当前需要的或用户必须关注的信息或操作，其他情况不建议使用弹出框，可考虑通知等其他非模态窗口。

弹出框的内容通常是不同控件进行组合布局。例如文本（可带格式，如缩进、链接、粗体等）、列表、输入框、网格、图标或图片。常用于选择或确认信息。

类型

• 选择类

• 确认类

选择类

弹出框	使用场景/举例	标题	内容文本	操作按钮（推荐）	消失方式
单选网格	打开方式	有，居左	/	取消	点击返回键选择一个网格项
单选列表框	字体大小设置	有，居左	可选，内容左对齐	取消	点击返回键或取消按钮选择一个列表项
带预览的单选列表框	铃声设置	有，居左	可选，内容左对齐	取消、确定	点击返回键或取消按钮点击确定按钮
多选列表框	闹钟重复设置自定义	有，居左	/	取消、确定	点击返回键或取消按钮点击确定按钮
选择器	设置闹钟时间	有，居左	可选，内容左对齐	取消、确定	点击返回键或取消按钮点击确定按钮

确认类

弹出框	使用场景/举例	标题	内容文本	操作按钮（推荐）	消失方式
带图形确认框	扫描二维码，指纹支付，人脸识别等	无	正文（普通）：一行或多行文本均居中对齐；正文（带序号）：文本居左对齐。	取消，操作	点击返回键或取消按钮点击操作按钮
弹出输入框	新建群组、重命名等	有，居左	/	取消、确定	点击两次返回键或取消按钮（第一次返回键收起输入键盘）点击确定按钮
信息确认／权限类确认	需要用户注意的重要信息，例如电池电量低、查看详情	内容为一句时无标题。内容多于一句时有标题。有标题时，标题居左。	有标题时：内容居左对齐。无标题时：内容文本只有一行时，居中对齐。超过一行时左对齐。	知道了	点击“知道了”
操作确认	删除、重置确认等	内容为一句时无标题。内容多于一句时有标题。有标题时，标题居左。	有标题时：内容居左对齐。无标题时：内容文本只有一行时，居中对齐。超过一行时左对齐。	取消，操作	点击返回键或取消按钮点击操作按钮

如何使用

选择类

• 弹框中以列表或网格的形式提供可选择的内容。可选一项或多项。

• 单选列表不超过一屏使用弹框。

• 数据类的，超过一屏可以使用全屏显示的方式替代弹出框。例如城市列表、铃声列表等。

确认类

带图形确认框

必要时可通过图形化方式展现确认框，以便用户更好理解或认同确认内容。

弹出输入框

需要用户输入内容时使用。

无输入内容时，确认按钮置灰。

信息确认框

• 操作未正确执行（例如网络错误、电池电量过低），或未正确操作时（例如指纹录入），反馈的错误或提示信息。尽量在弹框中给出解决问题的选项、入口或帮助链接。

• 选择查看内容详情时。例如查看文件详情。

• 需要在继续操作前了解的信息。例如权限提示框。

操作确认

• 触发一个将产生严重后果的不可逆操作时。例如删除、重置、取消编辑、停止等。

• 触发的操作包含一些需用户知道的影响，或关联设置项状态会产生变化时。例如允许开发设置、设置无密码锁屏会关闭指纹校验等。

• 触发的操作需满足某些前提条件时，显示解决前提条件的推荐确认框。例如开启应用锁才能关联指纹、先安装某应用才能进行操作等。

确认类操作按钮区

• 每个弹框都应该有一个操作目标。

• 确认类弹框目标直接相关操作放到操作按钮区。例如取消、确定、删除等执行操作按钮。

• 非直接相关操作放到弹框内容区。例如忘记密码、新建等。

弹出框连续操作

• 一个任务分两步完成时，为减少弹框过多给用户带来的困扰，可在一个弹框显示两次操作的内容。场景：领取礼包 （选择区服–选择角色），区服与角色选择，两个操作可在一个弹框内显示。

• 弹框的高度根据内容的高度动态调整。

• 此操作适用于干扰较小的选择操作，例如操作步骤超过两步建议使用全页面操作。

交互规则

点击

• 点击按钮执行对应的操作。如果按钮灰显，点击无响应。

• 点击弹出框之外的区域，弹出框不消失。

滚动

• 弹出框中的内容应避免滚动。当内容超出显示范围后，内容可以滚动。标题和操作按钮不会随着内容进行滚动。

视觉规则

弹出框构成

弹出框由三部分区域构成：

• 标题区

• 内容区

• 操作按钮区

组合样式

支持以下组合：

• 纯内容

• 内容+操作按钮

• 标题+内容

• 标题+内容+操作按钮

标题区

支持以下组合：

• 纯标题（单/双行标题）

• 标题+操作图标

操作按钮区

• 默认按钮宽度不超过弹框宽度，按钮左右布局。

• 按钮组合宽度超过弹框宽度，按钮改为上下布局。

• 按钮左右布局改为上下布局：三个按钮为例左中右三个按钮对应下中上三个按钮。

• 在需要强调的场景下，按钮可使用带蓝色背景填充的效果。

• 强调按钮支持应用自定义。

• 普通按钮和强调按钮之间无分割线区隔。

内容区

内容区的组成比较灵活，可能由如下元素组合构成（需严格按照由上到下的顺序组合）：

• 图/左图右文

• 输入框/列表/网格/滑动条/进度条/其他（指纹识别）

• 辅助文本

• 其他操作

• 勾选框

主题样式

系统弹出框支持浅色主题、深色主题、半透明主题

浅色主题

深色主题

半透明主题

高度规则与位置

竖屏

弹出框最大高度= 0.8x（屏幕高度-状态栏-导航栏）

位置

始终保持在导航栏上方（含导航栏隐藏场景）。

横屏

弹出框最大高度= 0.9x（屏幕高度-状态栏）

位置

在减去状态栏的区域居中显示。

点击效果

整体的操作交互反馈与按钮保持一致。

界面写作规则

操作确认

标题

• 句子短，无断句，且为陈述句时，不加句号。

• 感叹句、问句，需加对应标点（感叹号、问号）。

• 标题简明扼要，清晰描述要进行的操作。可为短语（动词+名词）。

内容文本

• 描述需用户确认的内容（确认后产生的影响、效果、影响范围等），可为疑问句或陈述句。尽量不用辅助说明，若仍需要，避免与标题重复。

按钮

• 按钮让用户选择是否进行下一步动作。操作按钮应使用真实的操作内容。

• 通常与标题栏中的动词一致。不要使用“是”或“否”。

信息确认

内容文本

• 以陈述语气描述需告知用户的具体事项。例如目前没有可用的更新。

按钮

• 只有一个，例如“知道了”。避免使用“确认”、“好”。

界面用语超长处理

弹出框标题

• 先逐级缩小字号到 15fp。

• 继续超长，换行处理，支持换一行。

• 最后，“…“截断。

弹出框按钮

• 按钮不支持换行

• 字符串超长，先在均分区域自适应显示

• 继续超长，先考虑改变布局，左右变上下（若是上下布局，则不考虑此方式）。

• 其次缩小文字。按钮文本同时逐级缩小，最小字号为 9fp。

• 最后，“…“截断处理。

开发指南，详见 dialog (JS)

导航点

导航点用来告诉用户当前内容的数量，且指示当前内容所处位置，位于内容下方。导航点导航的内容都是处于同等重要的位置。导航点的形式取决于内容的数量。当页面数量较少时，可以使用圆点导航点。当页面数量较多时，可以使用数字导航点。用户通过在内容区左右滑动切换内容，内容切换的同时，导航点的位置或数值发生变化。

类型

• 圆点导航点

• 数字导航点

如何使用

• 按顺序浏览多个页面或内容时，使用导航点。

• 自动轮播内容时，使用导航点指示轮播内容的数量和当前内容的位置。例如广告轮播图。

圆点导航点

• 用一系列小圆点表示，圆点个数代表界面数量。

数字导航点

【推荐】用于数量较多页面的展示，让用户清晰的知道目前所看内容的位置。

交互规则

滑动

• 支持在内容区左右滑动以切换内容。仅广告轮播图提供自动循环滑动，自动滑动间隔为 5s。

• 支持在导航点上滑动切换内容。左滑或右滑按顺序切换页面。

点击

• 点击导航点左侧或右侧切换到上一页或下一页。

长按

• 支持长按左右滑动。

视觉规则

主题样式

圆点导航点

浅色主题

深色主题

半透明主题

数字导航点

浅色主题

深色主题

半透明主题

可滑动面板

用在手机上，它是一种轻量的内容展示的窗口，通常位于界面的底部，方便用户单手操作。在折叠屏展开的情况下以及平板的情况下，由于设备不适合单手操作，可滑动面板的位置和显示形式会根据场景进行调整。例如分享界面会居中显示在屏幕中间。

可滑动面板展示的内容跟当前场景相关。可以用来持续展示需要显示的内容，例如在智慧识屏界面，可滑动面板用来展示识屏的结果。也可以用来展示临时需要显示的内容，例如查单词的时候，可滑动面板用来临时显示单词的解释。

类型

• Minibar 类

• 内容持续展示类

• 内容临时展示类

如何使用

Minibar

• Minibar 提供一个小的界面展示当前的进展或状态。

• Minibar 可以在 Mini 状态和类全屏状态进行切换，初始状态为 Mini 状态，可切换为类全屏面板。例如天际通、音乐。

内容持续展示类

• 用于展示关键内容或任务，可以在不同大小尺寸间切换，以方便用户浏览内容。

• 背景为可交互区域（可选），例如 AR 识物中，用户可以自定义选取背景需识别区域。

• 内容展示类可放置关闭按钮（可选），位置为面板标题右侧。

内容临时展示类

• 用于展示详情或设置，用户用完即走的场景。

• 背景为不可交互区域，例如碰一碰出现的设备控制界面。

• 内容展示类可放置关闭按钮（可选），位置为面板标题右侧。

交互规则

Mini bar类

滑动

• 在 Mini 状态，上滑切换为类全屏面板。

• 在类全屏面板上，下滑切换为 Mini 状态。下滑过程中，箭头有微动效体现变化过程。

点击

• 点击 Mini bar，切换为类全屏面板。

• 点击类全屏面板的箭头区域或点击系统返回按钮，切换为 Mini 状态。

内容持续展示类

内容展示类有小、中（类半屏）、大（类全屏）三种尺寸状态，初始状态通常为中尺寸状态。

滑动

• 小尺寸状态向上滑切换为类半屏状态，继续上滑切换为类全屏状态。

• 类全屏状态向下滑切换为类半屏状态，继续向下滑切换为小尺寸状态。面板顶部短横杠随着状态的变化而变化。

点击

• 点击小尺寸面板的箭头所在区域（向上箭头），切换为半屏面板。

• 点击类全屏面板向下箭头所在区域（向下箭头），切换为半屏面板。

• 点击半屏面板横条所在区域，无响应。

内容临时展示类

内容展示类有中（类半屏）、大（类全屏）两态，初始状态通常为中尺寸状态。

滑动

• 类半屏状态上滑切换为类全屏状态。

• 类全屏状态向下滑关闭面板。

点击

• 点击半屏面板横条所在区域，无响应。

• 点击类全屏面板向下箭头所在区域（向下箭头），关闭面板。

视觉规则

主题样式

可滑动面板支持浅色主题、深色主题、半透明主题。

浅色主题

深色主题

半透明主题

布局样式

竖屏布局

• 操作条：面板最小高度 48vp，顶部显示图标为向上箭头。

• 半屏：面板高度为全屏高度的1/2，顶部显示图标为横条。

• 全屏：面板的最大高度=屏幕高度-状态栏-8vp padding，顶部显示图标为向下箭头。

• 高度应用可自定义，最小高度不能小于规范定义高度，最大高度不能大于规范定义高度。

横屏布局

• 横屏时，无半屏模式，半屏直接以全屏显示。

• 操作条与全屏面板规则与竖屏一致。

底部页签

底部页签是一种常见的界面导航结构。通过底部页签，用户可以快捷地访问应用的不同模块。使用底部页签也方便用户单手操作。底部页签上的每一个页签，都是图标+文本的形式，用户单击页签时，该页签会被激活，视觉上会高亮显示。

在平板上，底部页签通常会转化为侧边页签，方便用户双手握持操作。

如何使用

• 仅用于一级界面。

• 页签上允许有新事件标记，用于通知用户该页签下有新的内容或消息，详见“控件”>“新事件标记”。

• 页签上的文本要精练，不要使用太长的字符串。

交互规则

• 点击可切换页签。若点击当前页签，界面会回滚至页面顶部，适合长页面快速回到页面顶部。

• 不可通过滑动来切换底部页签，以免手势冲突。

• 在消息列表界面，双击底部页签，会从当前位置跳转到下一个未读消息。下一个未读消息的位置是显示在列表的第一行。

视觉规则

竖屏

最多允许放 5 个。

横屏

区分手机横屏与平板横屏效果。

手机横屏情况下，图片与文字采用左右布局形式。

平板横屏情况下，底部页签变成侧边导航，侧边导航固定在页面左侧。

分栏/分屏

分栏/分屏情况下，工具栏在其可用区域内，按照竖屏规则布局。

主题样式

只支持浅色、深色主题

浅色主题

深色主题

栅格布局

• 页签有自动折行的效果。

• 定义icon( 32vp )和文字( 72vp )的判断参考值。

• 当单个item的容器宽度小于/等于 32vp + 72vp =104vp 时，icon 和文字就变为上下布局。

缩进规则

使⽤基础栅格。

4 个 columns 时，4 items 和 5 items 内容占比适应全屏，2 items 和 3 items 内容占比适应 4 个 columns。

8 个 columns 时，4 items 和 5 items 内容占比适应 8 个 columns，2 items 和 3 items 内容占比适应 6 个 columns。

界面写作规则

页签中的文本采用短语形式（名词或名词词组），简明清晰描述页面内容，不带标点。

开发指南，详见 tab-bar (JS)

多选

用于内容项的选择，一般用于多选界面。用户可以通过点击选择某项、多项或所有项。点击某个项的时候，可以选中或取消选中该项。也可以通过手指在界面上滑动快速选择多个项。

有多种方式进入多选界面：

• 长按列表项或网格项进入多选界面。

• 选择添加联系人或文件的时候进入多选界面。

• 在长按菜单中选择“多选”操作进入多选界面。

• 在标题栏或工具栏中选择“多选”操作进入多选界面。

注：“多选”操作，有时候用具体的操作表示，例如仅有一个删除操作时，使用“批量删除”。

如何使用

• 多选可以从列表中选中一项或多项。

• 图标多选框放左上角，图片多选框放在右下角。

• 页面无选择项时，标题显示“未选择”；有选择项时，标题显示“已选择”+数量标签+“项”，数量标签前后要留半角空格。

• 可以用多选设置多项，而不是用开关控件

交互规则

点击

选中或取消选中。

滑动多选

在列表项多选框上可通过上下滑动选中或取消选中。

通常情况下，列表项多选框热区分为两种：

1. 列表项可以进入下一级，多选框热区是自身。
2. 列表项没有下一级，多选框热区是整个列表项。

• 网格项支持滑动快捷多选（网格界面任意滑动选择/取消，以滑动时手指起始项状态的反向状态来设置手指滑动经过项的状态）。

• 网格项多选热区是整个图片（包含勾选框）。

Grid 多选热区（特殊）热区固定 32x32vp ，与图片右下角紧贴

• 从上往下滑动多选到页面底部，页面可自动向上滚动，继续往下多选；或者从下往上滑动多选到页面顶部，页面可自动向下滚动，继续往上多选

视觉规则

同“控件”>“勾选”。

开发指南，详见 input (type=checkbox) (JS) 和 checkbox (Java)

分隔器

可用于列表或界面布局。使用分隔器包含两种类型：分隔条和分隔线。

分隔条用来将界面进行分组。分隔条可以和子标题一起使用，通过子标题告诉用户分组的内容是什么，子标题位于分隔条下方。

分隔线用来将界面元素隔开，使单个元素更加容易识别。

类型

• 分隔条

• 分隔线

如何使用

分隔条

• 分隔页面中不同类型的内容。

• 仅用于效率型界面。

• 分隔条不能放在界面内容最上方。

分隔线

分隔一组列表项。

列表上方第一行和最后一行下方不加分隔线。

起始位置

列表左边有图标元素时，分隔线从图标元素之后开始，例如小图标、头像等。因为图标元素本身就能很好的区隔，无需重复。

视觉规则

主题样式

工具栏

工具栏放在界面底部，界面内容之上，用于展示针对当前界面的操作选项。通常情况下，当界面滚动时，要保持工具栏的可见性，且工具栏不会随界面滚动。在沉浸式界面，往上滚动界面，工具栏可以处于临时消失状态，让用户看到更多的内容，往下滚动界面，工具栏恢复显示。

工具栏上的操作，都是图标+文本的形式，用户单击某个操作时，会直接触发该操作。

如何使用

• 最多显示 5 项操作选项（含“更多”菜单，在最右边显示）。

• 操作选项的排序规则为：“添加”、“分享”、“收藏”、其他操作（下载、编辑、移动等）“删除”、“全选”、“更多”。

• 工具栏上应该只显示常用操作，当常用操作过多时，显示不下的常用操作、非常用操作以及难用图形表示的功能，放入“更多”菜单。但不允许出现工具栏只有“更多”的情况。

• 底部页签和工具栏不能同时使用。

• 功能图标优先放在工具栏上，如果界面没有工具栏，才考虑放在标题栏上。

• 仅有一个“设置”或“更多”操作时，需将操作放在标题栏右侧。

视觉规则

正常状态

不可点击状态

激活状态

主题样式

浅色主题

深色主题

半透明主题

栅格布局

使⽤基础栅格。

4 个 columns 时，4 items 和 5 items 内容占比适应全屏，2 items 和 3 items 内容占比适应 4 个 columns；

8 个 columns 时，4 items 和 5 items 内容占比适应 8 个 columns，2 items 和 3 items 内容占比适应 6 个 columns。

平板竖屏

内容占比适应 6 个 columns

内容占比适应 8 个 columns

开发指南，详见 toolbar (JS)

勾选

• 勾选用于表示用户同意该项的描述。常见的场景例例如USB连接界面的“不再提示”。

• 勾选在一些临时状态的场景下，也用于表示用户同意开启或关闭业务功能或设置。常见的场景例如权限界面的“禁止后不再询问”。

• 勾选放在描述语句或设置的前面，且跟字符串挨在一起，操作时整体响应，以方便用户查看和操作。

如何使用

• 勾选项是否默认开启，需考虑勾选项对用户所带来的影响，默认状态不应该对用户带来负面影响。

• 勾选项是界面中主要内容或操作的一个附加选项。

• 不要通过默认勾选这种方式，诱导用户或趁用户不注意开启或关闭某个功能。

交互规则

点击

选中或取消选中。

视觉规则

勾选框组合，热区区域包含说明文字

文本左对齐

文本与勾选图标上下居中对齐

主题样式

浅色主题

深色主题

半透明主题

滚动条

在页面滚动时，显示滚动条。滚动条所处的位置，表示当前看到的内容处于整个界面内容的位置。滚动条支持拖拽，在页面很长的情况下，可以通过拖拽滚动条的方式来快速浏览内容。在视觉上，滚动条在拖拽的情况下会变粗。

如何使用

• 当页面内容超出内容显示区域长度时，初次进入页面或滚动内容时，会显示竖向的滚动条。

• 在页面内容很多的情况下，若用户需快速定位，可拖拽滚动条。

交互规则

• 拖拽：当滚动条出现的时候，可上下拖拽滚动条快速浏览内容。

• 初次进入界面，若界面内容超出显示区域，显示竖向滚动条，无任何操作，2 秒后消失。

• 滚动条高度为动态高度：滚动条高度反映当前可视内容占整个内容的高度比例，高度是动态变化的，内容高度越高，滚动条高度越小。

动效规则

• 滚动条跟随列表下拉、触顶时、列表有回弹效果，滚动条自身有高度上的回弹效果。

• 滚动条触摸时有宽度上的变化。

• 滚动条跟随列表触底时，列表有回弹效果，滚动条自身有宽度上的变化，同时有高度上的回弹效果。

滑动条

滑动条分为两种样式，分别应用于不同场景，具体如下：

进度滑动条

类型

• 连续滑动条

• 间续滑动条

如何使用

• 手动调节进度时使用，例如视频和音频播放。

• 值的范围：左边－最小值，右边－最大值。

连续滑块

• 不求精准，以主观感觉为主的设置，使用连续滑动条。

• 部分场景缓冲进度，例如在线音乐播放界面。

• 带气泡的滑动条：通过气泡指示当前选择的值，在需要给用户展示当前选择值的时候使用。

间续滑动

• 在固定值中选择时，使用间续滑动。

• 【推荐】滑动条两边的预览文字／图标，可点击调整设置值。

交互规则

点击

• 点击连续滑动条，滑块会移动到点击位置。

• 点击间续滑动条，滑块会吸附到最近的刻度节点上。

滑动

• 手指按住滑块，向左或向右滑动，按住滑块之后，手指可挪到滑动条以外区域向左或向右滑动。

• 某些特殊情况，可以在滑动条外直接通过滑动手势进行调节。例如视频播放过程中在视频显示区域内左右滑动调节播放进度。

视觉规则

连续滑动条

气泡滑动条

间续滑动条

设置滑动条

类型

• 连续滑动条

• 间续滑动条

如何使用

• 调节具体的参数值使用，例如亮度或字号大小。

• 值的范围：左边－最小值，右边－最大值。

连续滑动条

• 不求精准，以主观感觉为主的设置，使用连续滑动条。

• 部分场景缓冲进度，例如在线音乐播放界面。

• 带气泡的滑动条：通过气泡指示当前选择的值，在需要给用户展示当前选择值的时候使用。

间续滑动条

• 在固定值中选择时，使用间续滑动。

• 【推荐】滑动条两边的预览文字／图标，可点击调整设置值。

交互规则

点击

• 点击连续滑动条，滑块会移动到点击位置。

• 点击间续滑动条，滑块会吸附到最近的刻度节点上。

滑动

• 手指按住滑块，向左或向右滑动，按住滑块之后，手指可挪到滑动条以外区域向左或向右滑动。

• 某些特殊情况，可以在滑动条外直接通过滑动手势进行调节。例如视频播放过程中在视频显示区域内左右滑动调节播放进度。

视觉规则

连续滑动条

间续滑动条

滑动选择器

当需要从单个维度或多个维度单选进行组合做选择时使用。常用的滑动选择器是时间选择器，用来选择年、月、日、星期、小时、分的一项或几项的组合。滑动选择器的每个维度的值是可以预测的，例如按时间大小排序。对于值无法预测的情况，不能使用滑动选择器。滑动选择器在选择值的时候，默认伴随振动，以提升选择体验。

类型

• 时间选择器

• 其他选择器

如何使用

时间选择器

• 用来选择某个具体时间。一般用来选择年、月、日或者小时、分或者其他时间组合方式，例如月、日、星期、小时、分。

• 时间选择器使用弹出框或者内嵌的方式，在移动设备上选择单个时间（小时:分钟 的格式）。其格式可根据用户的时间设置自动调整。例如 12 小时或 24 小时格式。

其他选择器

• 当需要从很多的单选项中做选择或有多个维度单选进行组合时，使用其他选择器。

时间选择器

类型

• 月 日 星期 小时 分

• 小时 分

• 年 月 日

月 日 星期 小时 分

构成

• 标题：显示“XXXX年XX月XX日星期X”。

• 内容区：显示月日小时分选择器和农历开关。当天显示为“今天”，可以设置今天之前的日期是否显示（场景：备忘录）。可跟随系统设置切换 12/24 小时显示小时分。可根据使用场景，自定义是否有农历开关。当界面上显示农历开关时，农历开关打开的时候，显示农历日期。农历开关关闭的时候，显示公历日期。当界面上没有显示农历开关时，可定义界面是显示公历还是农历。

• 操作区：操作为“取消”、“确定”。

小时 分

类别

• 弹出框

• 内嵌

弹出框

• 内容区：显示小时分。可跟随系统设置切换 12/24 小时显示小时分。

• 操作区：操作为“取消”、“确定”。

内嵌

• 标题：没有标题。

• 内容区：显示小时分。可跟随系统设置切换 12/24 小时显示小时分。

• 操作区：没有操作区。

年 月 日

构成

• 标题：显示年月日星期。可由应用根据实际场景来定义。

• 内容区：根据业务场景显示所有年份 还是 不显示今年以后的年份(最多显示到今年，及带一个–，表示不选择年）。例如生日场景，年份可以不选。开发可自定义是否有农历开关。当界面上显示农历开关时，农历开关打开的时候，显示农历日期。农历开关关闭的时候，显示公历日期。当界面上没有显示农历开关时，可定义界面是显示公历还是农历。

• 操作区：操作为“取消”、“确定”。

其他选择器

• 通常有两种：数字选择器、文本选择器。

• 数字选择器默认按从小到大排序。

• 根据选择项的属性选择合适的默认选项，以减少大多数用户的操作。

交互规则

滑动

• 上下滑动来切换选择值。

• 选择器滚动时，默认振动并伴有音效。

点击

在当前选择项之外的区域点击，所在选择项递增或递减，点击上方，选择值向下移动一格，点击下方，选择值向上方移动一格。

视觉规则

• 滑动选择为单独一个控件，样式如下。

• 滑动选择器支持多个组合，也支持显示纯文本的形式。

主题样式

浅色主题

深色主题

半透明主题

布局样式

• 多个滑动选择器可组合使用，界面用语不超长时，选择器的宽度平均分。

• 某滑动器内容较长时，设计师需按内容设计滑动选择器的宽度。当内容超过设计宽度，截断。

页面内使用

保持左右间隔：24vp

弹出框内使用

按照弹出框的规则，距离弹出框左右两边 24vp 间隔

选择器距离上下 8vp

横屏规则

横屏情况下，选择器仅显示 3 行，其他规则同竖屏一致。

开发指南，详见 picker (JS) 和 picker，datepicker，timepicker (Java)

即时反馈

用于在屏幕底部或中部显示一个操作的轻量级反馈。即时反馈是一个临时的反馈，出现几秒后就会主动消失。反馈与当前操作或环境相关的提示，不支持用户与其交互。对于操作结果很明显的场景，不建议使用即时反馈，例如删除一个联系人，用户能够注意到该联系人会从界面中消失，无需用即时反馈提醒用户删除成功。

类型

• 底部提示

• 指示位置提示

如何使用

• 希望确保用户可看到某些信息时，使用此类提示信息。

• 若无必要，不要对所有操作给出即时反馈。

• 不阻碍用户在界面上的其他操作。

• 超过规定时间自动消失。不能通过点击，手指在屏幕上滑动的方式使之消失。

• 界面上不能同时出现多个即时反馈。若一个即时反馈消失前，另一个即时反馈被触发，则第一个即时反馈应在第二个即时反馈出现前消失。

• 显示时长：默认显示 2秒。在文本较长的情况下，可以显示 3.5秒以便用户看完所有的文本

栅格布局

使⽤基础栅格。

4 个 columns 时默认长度使⽤ 2 个 columns，最大可占用 4 个 columns。

8 个 columns 时默认长度使用 2 个 columns，最大可占用 6 个 columns。

12个 columns 时默认长度使用 2 个 columns，最⼤可占用 6 个 columns。

8 个 columns

默认宽度：2 个 columns

最大宽度：6 个 columns

平板竖屏

8 个 columns

默认宽度：2 个 columns

最大宽度：6 个 columns

平板横屏

12 个 columns

默认宽度：2 个 columns

最大宽度：6 个 columns

界面写作规则

• 以陈述语气告知用户操作结果。用句子或短语，句末不加标点（英文句末加标点）。

• 言简意赅，避免使用大段文字。

• 文本可多行显示。

进度条

用于显示内容加载或操作处理进度。用户通过进度条能看到当前任务的一个状态。例如加载内容时的等待状态；蓝牙传输文件的时候，显示当前正在传输的进度。

在使用进度条的时候，应当结合当前的场景进行设计，尽量将进度融合在界面内容中或操作的元素上，尽可能减少使用进度条弹出框，以免给用户带来复杂感。例如点击一个“安装”按钮后，在“安装”按钮上体现安装过程，而不是使用新的页面或弹出框来显示安装进度。在同一任务中，应避免连续使用进度条弹出框，应考虑整合这些进度条状态成一个状态。

类型

• 明确进度条

• 无明确进度条

如何使用

明确进度条

• 线性显示当前操作进展。

• 在弹出框中，线性进度采用“上方文本+下方线形进度指示”形式。文本为当前操作任务说明，进度“XX%”在右侧。

• 在弹出框中，若操作等待时间过长，需提供转后台操作按钮“隐藏”。隐藏后要在通知栏体现。

无明确进度条

无明确进度条（圆形）：显示当前操作正在进行。

交互规则

点击

• 有明确进度：可终止正在进行的任务。进度条右侧显示“×”按钮。

• 无明确进度：点击返回键可直接终止当前操作。

视觉规则

布局样式

有明确进度条组合样式（线性）：

图标+进度条

图标+标题+进度条

图标+标题+副文本+进度条

文本+进度条+关闭

有明确进度条组合样式（圆形）：

界面写作规则

• 有明确进度：可看清任务对象和进度的，建议不用文字。若要使用，文本为：操作说明+进度“XX%”。

• 无明确进度：文本为“正在xx…”，不用“xx中…”。

界面用语超长处理

• 右侧文本最小宽度 1/3。

• 超长左右文本均可换一行。

• 依然超长，采用截断＋“…”方式。

卡片

卡片目的是处理信息集合，提升阅读效率。卡片作为一个容器，可将内容按逻辑进行分组，帮助用户快速获取信息和进行操作。

类型

• 单体卡片

• 组合卡片

• 可滑动面板卡片

如何使用

视觉规则

主题样式

浅色主题

深色主题

半透明主题

栅格布局

卡片栅格使用：

系统卡片都需要使用卡片栅格

卡片栅格定义：

margin=12vp，gutter=12vp，columns=4

margin=12vp，gutter=12vp，columns=8

margin=12vp，gutter=12vp，columns=12

栅格运用实例

缩进效果：

为了保证舒适的阅读性，建议利用栅格控制卡片的缩进效果。

规则：

4 个 columns 时使用 4 个 columns

8 个 columns 时使用 6 个 columns

12 个 columns 时使用 8 个 columns

动效规则

卡片主要的动效特征：

1. 共享容器，会产生自身形状的变化，随着容器形状的变化，会从一种信息状态（缩略信息）变化到另一种信息状态（详情界面）。
2. 物理弹性，用户在点击、按压卡片时会产生物理弹性。
3. 实体层级，卡片会产生Z轴向的变化，以表明所处的层级。

开关

开关的位置位于所要设置项的后面，通过开关，可以开启或关闭某个功能。开关操作会使设置的状态发生变化，因此在有些场景下，从开到关或关到开，会有个状态的延迟显示。例如开启“蓝牙”功能，蓝牙从关闭到开启需要一定的时间，用户会看到一个短暂的变化过程。

如何使用

• 开关用于设置项的开或关。

交互规则

• 点击或者滑动开关：开启或关闭功能项。

• 点击列表其他区域：不响应开关操作。

视觉规则

列表

列表包含一系列相同宽度的列表项。适合连续、多行呈现同类数据，例如图片和文本。列表按一定的规律排序，例如按时间排序，按字母排序等。列表项可以包含文本、图片以及操作，每一项中的元素布局都应该保持一致。

类型

• 通用列表

• 多选列表

• 可展开列表

• 可横滑列表

如何使用

通用列表

构成

列表的布局元素分左中右三部分。左侧为图标，中间为文本，右侧为值、状态或者操作。

左侧元素为表意图标，支持多个尺寸。图标与屏幕保持24vp边距，图标与中间列表内容保持16vp 间隔

中间元素为列表文本，支持单行、双行、三行和多行文本。多语言下文本支持无限换行

右侧元素分为非操作的辅助文本和可操作的按钮。右侧元素与中间列表内容保持16vp 间隔

规格

当列表为单行文本，且没有左侧元素时，列表高度默认为 48vp

当列表为单行文本，左侧有元素且小于 40vp 时，列表高度默认为 56vp

当列表为单行文本，左侧有元素且左侧元素为 40vp 时，列表高度默认为 72vp

当列表为双行文本，且没有左侧元素时，列表高度默认为 64vp

当列表为双行文本，左侧有元素时，列表高度默认为 72vp

当列表为三行文本，列表默认高度为 96vp

左侧元素组合：图标/头像/预览图

• 图标可跟列表居中对齐或顶端对齐。

• 左侧图标支持小圆点（小圆点应用可指定颜色）。

• 一般情况下，每个元素之间保持 16vp 间隔。

出现新消息提示的情况下，新消息元素左右两边使用12vp 间隔。

右侧元素

右侧元素组合：图标/文字/功能。

右侧支持功能图标或文本或图标+文本的组合。常见样式如下。

中间元素

图标/Label+中间文本

带进度条列表

进度条居中显示。上方左侧为标题，右侧为值。

点击效果

列表点击整行响应。

点击效果列表叠加 10% 不透明，#000000

悬停效果

列表鼠标悬浮整行响应。

悬浮效果列表叠加 5% 不透明，#000000

激活效果

列表激活整行响应。

点击效果列表叠加 10% 不透明，#0A59F7

走焦效果

列表光标走焦整行响应。

走焦效果列表叠加 2vp 粗细的描边

下拉或上拉效果

当整个界面充满列表时，在列表下拉到顶后继续下拉松手会有回弹效果或列表上拉到底后继续上拉松手有回弹效果。

列表排序

• 列表在拖动编辑顺序的状态下，左侧出现拖动按钮，拖动按钮热区 48x48vp。

• 被拖动选项添加投影效果，悬浮于其他选项之上。

• 带阴影效果。

可展开列表

• 有总分关系的列表可提供展开和收拢箭头。

• 折叠子项要往里缩进 24vp，只允许一级缩进。

视觉规则

主题样式

列表支持浅色主题、深色主题和半透明主题

浅色主题

深色主题

半透明主题

界面写作规则

通用规则

• 尽量用一级文本（主文本），不用二级文本。一次把话说清楚。

二级文本写作规则

• 二级文本以短语或句子形式呈现。通常是对一级文本的补充说明，句末不加标点。

• 不与一级文本完全重复或部分重复。

• 不提及用户。

界面用语超长处理

• 功能说明型：文本支持无限换行，保持文本上下最小 8vp 间隔。

• 内容预览型：文本不支持换行。

• 左右组合文本界面用语：优先保证左侧文本的完整度，右侧文本最小保持 1/3 的屏幕宽度。

• 超长支持无限换行。

开发指南，详见 list (JS) 和 listcontainer (Java)

评分条

评分条用于用户对内容、商品或物体的主观评价，分 1－5 颗星，1 星最差，5 星最好。评分条支持点击评分，也支持左右滑动评分。常见场景有应用市场、论坛等。

类型

• 可操作评分条

• 不可操作评分条

如何使用

在评分条下方，显示每个星级对应的评价，根据打分动态变化。

交互规则

可操作评分条

点击

点击星形图标对内容进行评分。

不可操作评分条

用于展示当前内容已有的评分结果，不能直接对其进行评分操作。

视觉规则

主题样式

浅色主题、深色主题、半透明主题

布局样式

气泡提示

用气泡指示当前功能如何操作。当用户初次进入界面时，使用气泡提示来告知用户某个功能如何去使用，气泡指向与提示强相关的元素或区域上。气泡提示是一种轻量的提示，一般不阻碍用户的操作。在气泡提示出现的时候，用户可以点击界面上的其他区域进行操作或滚动页面或点击页面空白区域，在操作的同时，气泡提示会消失。对于带操作的气泡提示，需要用户点击操作后才能消失。

如何使用

• 气泡提示只有向上或向下指示箭头。

• 提示简洁明了，避免设计复杂。

• 刚进入某界面时给出提示。

交互规则

点击

不带操作的气泡提示：点击屏幕任何区域或导航键或界面上的操作，气泡消失。

带操作的气泡提示：必须点击气泡中的操作后，才能消失。

视觉规则

主题样式

布局样式

栅格布局

使⽤基础栅格。

4个 columns 时，最大可占用 4 个 columns。

8 个 columns 时，最大可占用6 个 columns。

12 个 columns时，最⼤可占用 6 个 columns。

手机竖屏

最大宽度： 4 个 columns

平板竖屏

最大宽度： 6 个 columns

平板横屏

最大宽度： 6 个 columns

开发指南，详见 popup (JS)

搜索框

提供用户搜索内容的输入区域。通过搜索，可以快速的找到并定位到想要的内容。搜索框还可以结合搜索历史记录，输入自动补全，语音输入等功能，方便用户快速输入查询。搜索框可以和业务功能放在一起使用，例如扫一扫。在搜索框有输入内容的时候，可以点击搜索框内的清除按钮，一键清除输入。

如何使用

用户需要通过搜索功能来找到想要的内容，且该页面需要突出搜索功能时，使用搜索框（该页面不需要突出搜索功能时，使用搜索图标）。

搜索框构成

搜索框由左、中、右三部分组合构成。

左：返回箭头（可选）；筛选功能（可选）。

中：输入框，含放大镜图标（默认为放大镜，可根据场景自定义其他图标）+水印文字+语音图标（可选）。

右：功能图标（可选）。

使用放大镜图标的搜索框

使用自定义图标的搜索框

水印文字

显示水印文字，帮助用户了解可搜索什么内容。

无运营需求的应用：水印文字采用动宾结构，中文为“搜索XXX、XXX、XXX…”或“搜索XXX”。

有运营需求的应用：水印文字直接显示运营文案，常见于应用市场、视频、阅读等内容类应用。直接将水印文字作为搜索关键词进行搜索。

交互规则

点击

点击搜索框：输入法没有显示时，点击搜索框，显示输入法。

组合样式

支持以下组合：

组合方式：中

搜索图标＋水印。

视觉规则

主题样式

浅色主题

深色主题

半透明主题

开发指南，详见 search (JS)

索引条

对按字母顺序排序的列表可快速定位的操作条。用于快速精确定位，例如联系人列表查找联系人、天气（添加城市）、世界时钟（添加城市）。在联系人列表界面，索引条还提供二级索引来加速定位，例如在中文环境下，先通过主索引定位出以该字母开头的联系人，再将联系人的第一个汉字进行二级索引，用户通过二级索引快速定位到对应的联系人。

如何使用

• 界面内容按字母顺序排列时，需使用索引条。界面内容不超过一屏时，索引条不显示。

• 当使用索引条时，横竖屏均需要显示字母索引。如果字母索引显示不下，则使用缩略的方式显示。

交互规则

点击

点击字母索引条上字母，内容跳至所点击字母区域。

滑动

在索引条上上下滑动时，界面显示内容需同步滚动，以匹配手指在索引条上的字母位置。

视觉规则

主题样式

浅色主题、深色主题、半透明主题

布局样式

索引条的位置需要在界面中保持一致。通常情况下，默认索引的位置是界面总高度去除顶部状态栏+底部工具栏/底部页签，然后居中展示。

开发指南，详见 list的indexer属性 (JS)

文本框

文本框允许用户输入文本、选择文本。支持输入文本、数字或者混合格式的数据。

类型

• 单行文本框

• 多行文本框

• 全宽文本框

带图标的文本框

按钮对输入文本起作用：按钮显示在文本框右侧，按钮用于直接作用于文本框内的文字，最多放置1个图标。

后面带单位的文本框

单位嵌套在文本框内，点击单位可切换单位。

带*号标记必填项

多个输入框，有必填项与非必填项时，用*号标记必填项。

在输入框有小标题的情况下，*放在输入框小标题的前面。

在输入框没有小标题的情况下，*放在输入框的前面。

带自动推荐功能的输入框

输入过程中，向下展开列表进行相关输入推荐，例如注册时输入邮箱地址，展示邮箱后缀推荐。

标题

标题位置

• 文本框标题在输入框上方，显示输入框需输入的内容。只有当下拉按钮作为标题时，可以放在输入框左侧。

标题的使用

• 在保证用户可理解的前提下，优先考虑使用水印文本指出输入框的输入内容类型。当水印已经完整诠释了文本框的输入内容时，无需标题。

• 若查看的内容同时也可以编辑，可以添加标题。当用户编辑后再次进入该页面查看时，无标题将无法清晰了解各内容的属性。

• 若水印内容是标题内容的详细补充，可以添加标题。

水印

• 水印文本显示在输入框内，对用户要输入的内容进行提示，以帮助用户理解输入目的。例如文本框里的邮件、密码提示文字。

• 获取焦点后，水印文字不消失，输入字符才消失。

水印字符串

• 一般情况下，输入框包含了“输入”的意思，直接使用名词作为水印文本，例如“姓名”、“邮箱”，不需使用“输入XX”的描述格式，以确保小语种界面用语不超长。

• 如有标题，水印文本不要与标题重复，一般是标题内容的详细补充。

水印的使用

• 当页面标题或弹框标题已作为输入框的标题时，若水印文本和标题表达的意思不重复，可以添加水印；如果重复，不要加水印。

• 若是新建内容输入，输入框内提供默认命名（例如“歌单 1”、“歌单 2”）并高亮，删除后，无水印显示。

• 当有一组输入框都使用水印时，需认真审视用户的可理解性，如果不好理解，就需选择使用标题来表达。

水印文本和标题表达的意思不重复，可以添加水印	水印文本和标题表达的意思重复，不添加水印

光标

指示用户当前输入的位置，并显示键盘。键盘收起时，光标消失。

帮助文本

在输入框下方，对输入操作进行说明。

错误信息

用户输入错误时，系统给出实时提示，帮助用户修正错误。

错误类型

• 格式不对，例如邮件格式。

• 超出输入长度。

• 字符不合法，例如用户名中不允许使用某些字符。

• 跟已有项重复，例如已有文件名。

规则

错误出现后，禁止提交输入的内容。若系统无法实时给出提示，则在内容提交后给出。输入存在错误时，可在输入框下方显示错误信息，说明如何修复。

字符计数器

• 若文本框有最大字符长度的限制时，可以使用字符计数器。字符计数器放置在框体内（密码输入不使用字符计数器）。

• 右对齐，显示已输入的字符和字符限制之间的比例（格式为：已输入字符 / 字符限制）。

• 默认不显示字符计数器，当输入字符数接近规定字符（剩下最大字符长度的 10%）时，显示字符计数器。

• 若用户输入刚好达到最大字符长度，字符计数器和框体不变红；若用户继续超长输入计数器和框体抖动变红。

超长状态与输入错误样式一致

密码输入

• 不限定位数的密码输入，默认是先显示字符再转变为掩码，用“······ ”来显示密码的字符。可见性图标显示在输入框内，用来指示当前的密码是否可见。

• 不限定位数的密码的长度由用户自定义。

• 限定位数的密码输入，不会显示输入字符。

密码的显示与隐藏

• 隐藏密码：与帐号相关或具有很强的私密性要求的情况下，需要默认使用掩码来显示密码。

• 明示密码：需要对外提供公共服务时（共享WLAN热点供他人使用）或使用公共服务时（例如咖啡店提供的WLAN热点密码）用到的密码，用户需要直观的查看密码，并在设备上进行输入密码。此时密码使用明文。

格式化输入

输入的文本可以按照不同方式分组显示。例如电话号码，采用分段显示；银行卡号，采用4位分组隔开方式显示。

如何使用

单行文本框

• 当文本输入光标到达输入区域最右边，框中内容会自动向左推挤。

• 文本输入框中有默认推荐文本的操作时（例如新建文件夹、重命名等），初始状态文本全选，方便删除。若直接保存导致名称重复，使用错误提示的定义。

单行输入框

多行文本框

文本可多行形式显示。

框体高度分为固定和可扩展两种：

1. 框体高度可扩展。例如短信输入框，高度随输入的文字扩展。
2. 框体高度固定。默认初始时以多行文本框的样式显示，高度固定。文本高度超过框体高度时，继续输入文字，新输入的文字换行形成新的一行，文本可垂直滚动，滚动时显示滚动条。

全宽文本框

• 适合多行的输入。

• 文本可以显示多行，不以框体或线性形式呈现。

• 文本可有多种样式：不同字体、大小、颜色、粗体、斜体、加下划线等。

交互规则

初始状态

• 默认获取焦点：当进入当前界面需要马上输入时，输入框默认获取焦点弹起输入键盘。

• 默认没有获取焦点：当进入当前界面时可能先做其他操作时，输入框默认没有焦点（有光标闪烁或文本被选中）。

点击

文本框可用时，点击获取焦点并显示光标。

视觉规则

跟随列表形式使用线性样式，其他场景使用框体样式。

主题样式

浅色主题

深色主题

半透明主题

开发指南，详见 textarea (JS) 和 textfield (Java)

文本选择

选中的文本以高亮的文字块呈现，通过手柄来调整文本的选择范围。操作菜单置于文本之上。

如何使用

• 文本编辑界面，例如信息、邮件、备忘录等编辑界面中。

• 文本选择菜单支持插件。例如安装了翻译软件，菜单会支持翻译功能；安装了搜索软件，菜单会支持搜索功能。

文本选择菜单

• 菜单的主要功能：剪切、复制、粘贴和更多。选择“更多”时，出现二级菜单，显示更多操作。

• 菜单中的功能操作，顺序依次为：剪切、复制、粘贴、全选、翻译、分享、搜索和其他操作。文本选择的强相关功能（“剪切”、“复制”、“粘贴”、“全选”）不建议放入“更多”中。

• 三方应用提供的操作，全部放到“更多”中。

交互规则

双击或长按输入框

有文本时：双击或长按输入框，选中当前位置的单词并显示两个手柄。拖拽手柄可扩大或缩小范围。

没有文本时：双击只有光标。长按输入框出现手柄。

点击输入框

输入框有文本时：当文本框没有焦点时，点击获取焦点，显示光标。当有焦点时，光标移动到点击的位置，并显示手柄。

输入框无文本时：点击获取焦点，获取光标。

点击手柄

出现菜单。

拖拽手柄

• 手柄需要跟手。光标定位在距离手柄左侧距离最近的文字后面。

• 在不能落光标的地方松手，显示手柄归位效果。

• 光标滑动到内容区顶部和底部上时，页面要自动滚屏。

• 支持反向拖拽。

其他

• 滑动浏览时停止滚动屏幕，不出现文本选择菜单。

视觉规则

主题样式

浅色主题

深色主题

半透明主题

下拉按钮

下拉按钮可让用户在多个选项之间选择。

如何使用

• 需过滤当前界面内容、快速切换类型（例如存储位置）或选项内容（例如设置密保问题）时，使用下拉按钮。

交互规则

点击

点击后显示一个选项菜单，当前的选项需用颜色标示，箭头方向向下不变。点击其中一个选项后，菜单会关闭，并在按钮上显示新的选项值。

组合样式

下拉按钮和输入框

下拉按钮和搜索框

单位切换

箭头位置

跟随字符串

下拉按钮单独使用的时候，此时右侧箭头一般跟随字符串。

用于过滤当前界面的内容或切换类型（例如存储位置）或切换选项的内容（例如设置密保问题）。

跟其他控件结合使用

用于指示当前输入的类型或范围。

此时为达到界面的美观，右侧箭头一般会指定位置。如果切换选项以后，字符串长度超出指定的位置，右侧箭头需跟随字符串显示。

视觉规则

浅色主题

深色主题

半透明主题

界面写作规则

• 下拉按钮文本以短语形式呈现，建议使用名词或名词词组。文字间无空格。不可使用多个词组。不带句末标点。

• 句式统一。

开发指南，详见 select (JS)

新事件标记

应用中可能有需用户关注的新事件提醒，需要采用新事件标记来标识。有多种类型新事件时，最重要（或用户最关注）的事件为主要事件，其他为次要事件。若无重要（或用户关注）事件，应用中所有事件均为次要事件。应避免对新事件标记的滥用。用户打开被标记项时，如果看到的内容跟预期不符，就会失去对新事件标记的兴趣，反而降低点击率。

类型

• 数字标记

• 圆点标记

如何使用

数字标记

• 桌面图标数字标记只显示应用中的主要事件。例如应用市场中有应用更新、活动推广等多种类型的事件，其中应用更新为主要事件，因此在桌面图标上显示应用更新的数字提示。

• 设置里的“系统更新”用数字，与桌面设置图标的数字标记相对应。

圆点标记

• 圆点标记适用于标识应用中的次要事件，通常出现在底部页签、列表项、工具栏图标、内容区的分类图标、头像上。点击后，圆点标记消失。

• 运营活动失效时，对应的圆点标记需主动消失。

• 纯文字时，新事件红点统一放在文字右侧。

• 图标＋文字时，新事件红点放在图标右上角。

视觉规则

主题样式

界面写作规则

数字标记显示 1-99 之间的数字，超过 99 用 99+ 表示。状态栏上通知消息数量超过 9 条，用 9+ 表示。

开发指南，详见 badge (JS)

状态按钮

状态按钮用于从一组选项中进行单项或多项选择，将选择项作为筛选条件，在界面上实时显示筛选出来的结果。或将选择项作为选择结果提交。

如何使用

• 状态按钮有已选择和未选择两种状态。

• 状态按钮不单独使用，通常由多个状态按钮组成一组选择项。

• 用于单项选择。多个状态按钮作为单选选择时，只能有一个状态按钮处于选择状态，并作为当前的选择。即选择一个后，另一个状态按钮就自动设置为未选择状态。

• 用于多项选择。多个状态按钮也可以组成多选选项，每个状态按钮都可以被选择。

交互规则

点击

点击改变当前的选择状态。

视觉规则

主题样式

浅色主题

深色主题

半透明主题

布局样式

界面写作规则

每个状态按钮使用名词词组，不加标点。

开发指南，详见 toggle (JS)

子标题

用来组织界面内容，根据层级将其划成区块，并概括该区块内容。

类型

• 列表子标题

• 内容子标题

如何使用

列表子标题

子标题右侧1个操作功能时，使用文本按钮。2 个功能时，使用图标，建议最多支持三个图标。

内容子标题

• 子标题代表一个版块的开始。子标题名称用于表示一组版块（非列表）的内容。

• 子标题右侧 1 个操作功能时，使用文本按钮。2 个功能时，使用图标。

• 需要跳转新页面查看更多内容时，使用“更多+右箭头”的形式。例如播放列表场景。

• 子标题左侧可以加下拉按钮。

交互规则

列表子标题

• 子标题位置可固定：界面滚动时，子标题固定在屏幕顶部，直到被下一个子标题推离屏幕。用于设置列表或子标题涵盖内容很多的场景。

• 子标题位置跟随内容滚动：界面滚动时，子标题跟随内容滚动。用于子标题涵盖内容少的场景。

内容子标题

• 右侧“更多”+右箭头：点击进入更多详情界面。

• 左侧下拉按钮：点击可以筛选当前子标题下的内容。

视觉规则

界面写作规则

• 子标题中的文本采用短语的形式呈现（名词或名词性词组），简明概括区域中列表项的内容。不带句末标点。例如无线和网络、隐私和安全、应用。

• 不使用“其他”等毫无意义的子标题，这种情况不使用子标题。

• 避免列表选项和子标题内容重复。

开发指南，详见 text (JS)

子页签

子页签通常放在内容区上方，展示不同的分类。页签名称应简洁明了，清晰描述分类的内容。

类型

• 在屏幕内显示完整的页签

• 超出屏幕的页签

如何使用

• 页面内容有多个同级内容时，可通过子页签对其进行分页展示，以便快速访问。

• 子页签展示数量不宜过多建议 2-5 个，以免界面拥挤。分类过多的可横向滑动查看超出屏幕部分。

• 子页签右侧最多可放置 1 个功能入口。

• 子页签支持可隐藏，向上滑动页面内容时可将子页签隐藏，下滑时显示子页签。

• 子页签可随内容的上下滚动而滚动，滚动到一定位置后固定，只能滚动内容。

• 子页签上允许有新事件标记，用于通知用户该页签下有新的内容或消息，详见“控件”>“新事件标记”。

交互规则

滑动

在与内容区操作手势不冲突的情况下，左右滑动子页签的内容区，可切换子页签，不能循环切换。

对于超出屏幕的页签项，在页签栏上横向滑动查看超出的部分。

点击

点击子页签可切换到对应的页签。

视觉规则

竖屏

横屏

适用于8栅格以上布局

横屏规则与竖屏规则一样，但页签之间的间距为 24vp

主题样式

浅色主题

深色主题

半透明主题

界面写作规则

同“控件”>“底部页签”。

开发指南，详见 tab-bar (JS) 和 tablist (Java)

数据可视化

将传统数据转换成可视化的图形，把隐藏在数据中的信息以更加直观、友好、视觉化的方式直接展现于用户面前，提升用户获取数据信息的效率。

类别

• 进度类

• 占比类

• 趋势类

• 分布类

• 排名类

如何使用

进度类

进度类有两个场景：

• 加载进度类，在数据无明显进度加载时使用，例如获取网络数据时的加载。

• 实时进度类，在数据有明显进度加载时使用，例如安装包的下载。

加载进度类

无明确进度，用于用户操作完成后，提示当前界面还在运行中。目的是减缓用户等待中的焦虑感。

实时进度类

有明确进度，用于用户操作完成后，提示当前界面的实际进展。目的是给予用户进展的预期。

占比类

占比类适合在有多个数据总和时使用，可突出数据总和后各个数据的占比，从而突出表现各自份额。

趋势类

趋势类适合用来显示一段时间内的数据变化，通过曲线的变化体现增长与下降，从而总结趋势走向。

分布类

分布类适合用多个时间段与多个数据类型汇总时，通过直方在横轴、纵轴内的高度变化体现数据在不同区间的分布情况。

排名类

排名类适合用多个数据类型汇总时，通过横线的变化体现相对排名及排名的变化。

视觉规则

侧边导航栏

侧边导航栏仅适用于平板横屏界面，用于对应用进行导航操作。

使用侧边导航栏，切换页签或入口效率更高。

类型

• 侧边页签

• 侧边入口列表

如何使用

侧边页签

通常在一级界面上使用，用于快速切换不同页签的内容。

构成

侧边导航栏 和 内容区

侧边导航栏

使用图标+文本的形式。页签的个数和顺序对应手机底部页签的个数和顺序。

内容区

内容区显示选中的页签对应的内容。

侧边入口列表

通常在一级界面上使用。适用：效率型应用。

• 支持将较深层级的内容作为侧边入口。

• 支持用户自定义侧边入口。

• 支持侧边列表的编辑，例如删除、排序等。

• 支持拖拽内容到侧边导航栏上生成快捷访问的列表项。

侧边导航栏

• 使用列表的形式。列表头部跟手机的导航对应。

• 分为三部分：主导航区、快捷入口区、用户自定义区。

内容区

• 使用列表的形式。列表的内容跟手机的导航对应。

• 内容区可以是分栏结构。

交互规则

侧边页签

• 点击页签：在内容区显示该页签对应的内容。

• 点击系统返回：内容区界面响应返回操作。

• 横屏切换为竖屏：竖屏显示为手机架构。

• 全屏界面切换为分屏、窗口：分屏或窗口下显示为手机架构。

侧边入口列表

侧边导航的显示和隐藏

• 在侧边导航栏隐藏的时候，界面上向右滑动显示侧边栏。

• 点击“隐藏”图标，隐藏侧边栏。点击“显示”图标，显示侧边导航栏。

• 切换为其他显示模式，例如竖屏、分屏、窗口时，侧边导航栏不显示。

内容最大化

• 在侧边导航栏显示的情况下，可以为详情页提供最大化操作按钮。方便用户查看内容。

• 在内容处于最大化的情况下，需要再次点击“缩小”按钮，恢复成侧边导航样式。注：在最大化的情况下，不支持通过向右滑动的方式显示侧边栏。

视觉规则

侧边导航栏

图标+文本组成的侧边页签控件，该控件宽度为 96vp，控件整体在屏幕一半的位置居中显示

侧边入口列表

• 屏幕宽度超过 840vp 的时候使用。

• 在应用切换为窗口、分屏的情况下，不使用侧边导航。

展开态：

第一栏宽度固定 280vp，第二栏和第三栏在剩下的可用区域内分别占比 40% 和 60%。

收起态：

第二栏和第三栏在屏幕可用区域内分别占比 40% 和 60%。

动效规则

侧边入口列表

• 二栏变化到三栏，最左侧导航栏向右运动进场，右侧内容区针对内容大小做适配。

• 三栏变化的二栏，最左侧导航栏向左运动退场，右侧内容区针对内容大小做适配。

控件的走焦

可交互元素

如果构成控件的元素能够接收用户输入而改变界面状态（跳转、移动、切换等），则称其为可交互的，也就是说，这些元素将能够获得焦点。

类型	控件	是否可获焦
导航类	底部页签	是
导航类	子页签	是
导航类	标题栏	是
导航类	导航点	是
导航类	步骤导航器	是
展示类	分隔器	否
展示类	子标题	是
展示类	进度条	是
展示类	新事件标记	否
展示类	即时反馈	否
展示类	气泡提示	是
窗口类	列表	是
容器类	卡片	是
容器类	弹出框	是
容器类	可滑动面板	是
操作类	按钮	是
操作类	单选框	是
操作类	多选	是
操作类	勾选	是
操作类	开关	是
操作类	下拉按钮	是
操作类	状态按钮	是
操作类	滑动选择器	是
操作类	索引条	是
操作类	滚动条	否
操作类	滑动条	是
操作类	评分条	是
操作类	工具栏	是
操作类	菜单	是
操作类	文本框	是
操作类	搜索框	是
操作类	文本选择	是
系统特性	分享	是
系统特性	打开方式	是

焦点的默认位置

焦点的默认位置与界面层级与内容相关，具体规则如下：

1. 层级优先，最顶层的界面优先。
2. 核心操作优先，根据应用提供的服务决定默认焦点位置。
3. 内容优先，遵循从上至下从左至右的方向规则。

跨区域获得焦点提高走焦效率

在由多种控件组成的可划分明显区域的界面中，可设置跨区域走焦以提升效率。

跨区域走焦与普通走焦的异同：跨区域走焦：设置使用Tab键移动焦点时以区域为移动维度，默认情况下，按Tab键使当前区域的首个元素获得焦点。普通走焦：使用Tab键移动焦点时以单个可交互元素为移动维度，按Tab键使当前焦点相邻的最近一个可交互元素获得焦点。备注：需要根据输入设备支持情况决定是否开启按区域走焦，如无Tab键或其等价按键支持，则不能开启区域间快速移动操作，此时，只能在单个焦点间遍历。

焦点的自动获取与作用域

在以下场景中焦点将自动获取：

1. 打开叠加次序更高级的页面时（例如弹出框、气泡提示等）。
2. 跳转到新的页面时。
3. 删除当前焦点处的界面元素时。

备注：应避免刷新界面内容时带来的焦点跳动或丢失的问题。

弹出框自动获得焦点	下拉按钮在当前界面展开更多内容时，焦点不会自动跳转	Tab在屏幕可见范围内切换焦点（不切页）

Tab与光标键的作用域区别：

1. Tab在屏幕可见区域内的焦点间循环移动。
2. 光标键通过切换列表、页面等操作使当前不可见部分变为可见。

获焦与内容切换

1. 涉及页面内容展示时，如果焦点位置 selected 状态与 focused 状态可以分离展示，则需要激活操作（space/Enter）。
2. 涉及文本输入时，为了走焦流畅，将只选中文本框体，不会自动进入输入状态。

备注：规则1可以近似于触摸屏滑动时即切换内容的，切换焦点时也切换内容。

Pattern

概览

帮助引导

当应用中的某些功能或信息不易理解或功能不易发现时，考虑使用帮助引导。

类型

使用优先级如下：

• 嵌入型

• 操作引导型

• 全屏引导型

如何使用

• 设计帮助引导时，优先基于时间、地理位置和用户操作习惯，视具体场景来设计。出现时机应与当前的用户场景相关。

• 根据三种提示类型对用户的干扰程度，设计帮助引导时，优先考虑嵌入式帮助，其次考虑操作引导，最后考虑全屏引导的形式。

• 某些场景下，为用户提供上下文相关的特性介绍，鼓励用户去使用。例如用户看电子书时，提示用户有护眼模式。若在错误时机为用户提供了与上下文无关的特性，就是对用户的打扰。

• 当用户执行某个操作时，应避免打断用户的帮助提示。提示应帮助用户更好完成任务。

• 提示频率不宜过多，一段时间内只能提醒1次。若用户忽略提示，在后续较长时间段内，不要再次提示。若用户接受提示，表明用户希望继续探索，短时间内可再给出类似提示。

嵌入型

5种样式：

嵌入型帮助样式	一个页面出现个数	干扰程度	何时使用
内容区融合式	1 个	最轻	当主内容区无法为用户提供有效内容或功能时，直接在内容区显示帮助信息。
横幅提示	1 个	较轻	通常用于提示用户一些不重要的操作信息或系统状态信息。
帮助链接	多个	轻	用于说明与当前界面相关的扩展信息。
帮助图标 ⓘ	多个	轻	对单个术语的解释或对页面部分内容进行解释。
横幅卡片	1 个	中	用于提示用户当前界面功能或权限的开启操作，希望用户开启某项功能或设置时，使用卡片引导用户进行开启。

操作引导型

操作引导是主动呈现给用户的操作提示信息，主要用于重要功能或亮点功能的提示。

分为 4 类：

操作引导型	一个页面出现个数	出现时机	干扰程度	是否中断用户	是否与内容有直接指向性	推荐使用
气泡提示	1 个	使用一段时间或首次使用	轻	否	针对界面某个功能项直接进行解释说明。	最先推荐使用
横幅通知	1 个	使用中	中	否	用于说明与当前上下文相关的特性，不具有指向性说明。
图文面板	1 个	使用一段时间，发现可能会使用这个功能	中	是	不针对界面具体内容有指向性介绍。
蒙版	不多于两个	首次使用	重	是	不针对界面某个图标直接介绍相关内容。	不推荐使用

全屏引导型

首次打开应用时，向用户介绍新特性。

应用版本升级，再次打开新版本时，向用户介绍新特性。

两种样式：

• 单页面全屏引导。

• 多页面全屏引导：默认有导航点，不超过三页。

编辑模式

编辑操作允许用户对当前内容进行修改。

类型

• 单项编辑，例如编辑闹钟、新建联系人等。

• 多项编辑，例如编辑天气的城市列表、编辑多个订阅频道等。

单项编辑

用于对单项的详情进行编辑。

交互规则

标题栏左边取消（叉）和右边操作（勾）。

	默认显示	点击左上角 “叉”	点击“勾”
新建／编辑（未操作）	左上角叉，右上角勾	不保存并退出编辑界面	不保存并直接退出编辑界面
新建／编辑（已操作）	左上角叉，右上角勾	询问是否保存，用户做好选择后退出编辑界面（如果用户选择“不保存”，即可撤销之前的编辑操作，包括排序、移动、删除）	直接保存并退出编辑界面

点击“叉”弹框询问是否保存，界面用语写作规则：

文本：是否保存当前修改？

按钮：不保存/保存

多项编辑

用于对多项进行编辑，通常是对多项进行删除或排序操作。

交互规则

多项编辑状态下，删除单项时，所选项从界面直接消失，不弹出提示。点击右上角“勾”后，才是真正删除

查看更多

界面空间有限，无法展示完整信息时，可展示主要信息，并提供查看更多入口。

类型

在当前界面内直接展开/收起：

• 直接展开文本

• 直接展开更多相同类型内容

• 直接展开更多其他内容

跳转新界面显示全部内容：

• 内容下方新起一行

• 子标题右侧

在当前界面内直接展开

跳转到新界面显示全部内容

第三方品牌露出

应用中使用了第三方提供的技术或服务，因知识产权或服务提供方要求，在界面中标识第三方品牌。非沉浸式页面按照本文所述进行布局和提示，在页面底部显示相关信息。通常以品牌文字露出或品牌标识露出的方式呈现。沉浸式页面根据实际场景结合内容融合设计，规范不做特殊要求。

类型

• 提供内容类的服务支持

• 提供技术类的服务支持

提供内容类的服务支持

有两类形式：品牌文字露出和品牌标识露出。

品牌文字露出

• 在页面底部以文字形式进行提示。

• 需要时可添加链接，样式不变。

• 格式为：[xxx 服务]由[xxx 公司]提供。[ ]中括号内文字根据实际情况填写，实际不显示中括号。

品牌标识露出

• 当品牌较少时，可以在一行放下，则格式为：左侧文本+右侧标识图标

• 当品牌较多时，一行放不下时，则格式为：上方文本+下方标识图标从左到右依次罗列

• 具体文本根据具体内容来显示，例如数据来源。

提供技术类的服务支持

有两类形式：品牌文字露出 和 品牌标识露出

品牌文字露出

格式为：[ xxx ]提供技术支持

[ ]中括号内文字自定义，实际不显示中括号。

品牌标识露出

当品牌较少时，可以在一行放下，则格式为：左侧文本“技术支持”+右侧标识图标

当品牌较多时，一行放不下时，则格式为：上方文本“技术支持”+下方标识图标从左到右依次罗列

分栏

分栏是一种层级关系的左右分窗口布局，旨在为宽屏幕设备提供较好的显示效果，以及帮助用户更高效地处理任务。

设计原则

• 8 栅格以上的设备可支持分栏。

• 特定类型应用适用于分栏，例如办公类应用、效率型应用、IM 社交类应用(邮件、备忘录、文件管理、设置、短信等)。

• 允许用户在设置中关闭分栏，或在应用内临时从分栏切换到全屏。

• 不支持分栏的应用，在宽屏设备上可通过平行视界解决宽屏显示

基于栅格的分栏布局

8 栅格以上的设备，可分栏；8 栅格以下的设备，不支持分栏。

8 栅格以上设备包括：手机横屏、折叠屏横/竖屏、平板横/竖屏、电脑、电视等。

各设备的栅格规则具体可参考：栅格系统。

分栏位置在当前窗口的 40% 或者 50%（业务根据需要选择），左右 2 个区域窗口内的内容根据窗口宽度重新计算内部的栅格数量进行布局。

有父子结构的应用，例如设置、邮件、短信、联系人、记事本。如果父页面底部有页签，需要保证每个页签都适合分栏，避免同一个应用内部分页签分栏部分页签不分栏的不统一情况。

交互规则

应用内开关：在应用内可点击“全屏/退出全屏”按钮，切换到全屏/分栏展示。开启应用内全屏/分栏后，下一次启动应用，依然记录上次的状态。

通过应用内开关，切换到全屏/分栏后：

\1. 进入/退出编辑，跟随上一次状态的全屏/分栏。

\2. 访问下一层级内容，跟随上一层级的全屏/分栏。

\3. 打开新建功能，无论上一层级页面是全屏还是分栏，均全屏显示新建功能。例如新建邮件、新建备忘录等。

分栏种类

多层级应用的分栏

左侧始终是列表结构的首页，右侧内容可切换。例如折叠屏、平板上设置应用的分栏。

单层级应用的分栏

右侧始终是内容详情，左侧可切换到上一层级菜单。例如折叠屏、平板上邮件应用的分栏。

分享

用户可通过“分享”操作，将内容分享给他人。

类型

• 通过系统控件分享：点击后直接弹出系统分享框进行分享。

• 应用自定义渠道分享：点击后直接弹出应用定制的分享框进行分享。

• 预览后分享：点击后先预览分享效果，例如海报、视频等，再选择分享方式。

通过系统控件分享

• 系统提供分享控件，应用可直接调用系统分享控件进行分享操作。

• 分享控件在屏幕底部显示，使用网格方式陈列各分享渠道。

• 分享控件规范详见“控件”>“分享”。

应用自定义渠道分享

• 系统分享控件的分享渠道无法满足应用需求时，应用自己定义渠道直接分享。

• 先显示业务推荐的分享渠道，最后一个地方显示“更多”，分享渠道以网格形式呈现。点击“更多”显示系统分享控件。

预览后分享

有些场景，用户分享前需对分享内容进行编辑或预览，例如音乐应用，选择部分歌词后分享歌词卡片；阅读应用，分享自己的书摘想法等。这类场景，可提前预览最终分享的内容。

关于

帮助用户了解该应用的更多信息。

空内容界面

应用的整个页面或局部区域无内容。

类型

• 整个页面内容为空

• 页面局部内容为空

整个页面内容为空

• 在空内容的区域显示内容相关图标+文字：“没有XXX”。

• 若需增加额外说明，说明文字在“没有XXX”下方，如果不超过一行，居中显示，如果超过一行，则居左显示。

• 说明文字下方可显示“新建”等推荐用户使用的与当前页面相关的功能，在页面底部使用底部大按钮。

页面局部内容为空

• 在空内容的区域显示内容相关图标+文字：“没有XXX”。

• 若需增加额外说明，说明文字在“没有XXX”下方，如果不超过一行，居中显示，如果超过一行，则居左显示。

• 空内容提示文字下方如需增加操作按钮，使用文本按钮。

快速定位

界面内容较多，且用户有查找需求，需提供快速定位的操作方式。

使用应用有：联系人、信息、邮件、图库、文件管理、云服务等。

类型

• 点击底部页签快速回页面顶部

• 字母索引定位

• 滚动条快速定位

点击底部页签快速回页面顶部

• 在有底部页签的应用，尤其是有较长信息流的情况下，用户浏览很多内容后，可以通过单击当前页面的底部页签快速回到顶部。

• 详见“控件”>“底部页签”。

内容加载

内容加载指获取内容并呈现出来。

类型

• 局部加载

• 上拉加载

• H5 界面加载

局部加载

界面内部分内容需要加载，分区域加载和数值加载 。

• 区域加载：在需要加载区域内加载，不要弹框显示加载。

• 数值加载：数值暂未获取到的，显示“–”，全部数据获取到后，再显示数据。

上拉加载

在内容已刷新的页面，进行上拉加载更多内容的操作。使用应用有邮件、应用市场等。

上拉加载：上拉时，屏幕下端区域显示加载动画（非模态）+ “正在加载…”。加载完成：显示加载出的内容。加载失败后的提示：“加载失败，点击重试”

H5 界面加载

• 调用网页内容的界面使用。

• 在标题栏底部显示加载进度。使用进度条控件。

扫一扫和二维码

扫一扫：通过相机取景来识别相关信息的流程。

二维码：规定一般场景下二维码的大小和布局。

扫一扫

界面元素

一般情况下，扫一扫页面通常有如下几个组成元素：

标题区

\1. 标题栏：右侧最多放 3 个图标，多于 3 个放到更多按钮里面。

说明区

\2. 引导文案（必要组成元素）

• 标题：扫描二维码、扫描银行卡。

• 辅助说明：不做限制，应用可自己根据需要进行描述，例如提示用户扫描的目的、扫描时的一些注意事项等。

扫描区

\3. 扫描框（必要组成元素）

• 用于引导用户将扫描对象置于目标区域中。

• 框内有自上而下的扫描动画。

其他功能区

\4. 开启手电筒功能：不常驻，传感器感光弱时自动出现。

\5. 按钮区（可选）：提供除了扫码之外的功能，例如手动输入。

\6. 底部页签（可选）：可切换来执行不同的扫描任务，例如购物、翻译等

扫描框

常见 2 种样式：

• 无边框：扫描对象为二维码

• 有边框：扫描对象为银行卡、条形码；边框高度可自定义调整

说明区

默认模版：顶部、扫描区、底部比例为 2:3:2。

自定义模版：顶部、扫描区、底部比例可根据内容调整为 2:3:3。

二维码

定义 2 种尺寸。

大尺寸：通用类。例如全屏、弹出框等。

小尺寸：特殊布局使用。例如银行卡二维码、乘车二维码等。

可配置头像。

删除

用户主动将不需要的内容项从系统删除的操作。删除成功不显示即时反馈提示。

类型

• 列表横向滑动删除，例如邮件、信息。

• 删除单个对象，例如联系人详情。

• 删除多个对象，例如闹钟、天气、图库。

• 删除单个图片，例如信息中编辑信息的时候删除图片。

列表横向滑动删除

• 效率优先，推荐删除后直接消失，无需弹框二次确认。在应用发生误删除情况时，如果删除后数据丢失且不可找回，给用户造成数据损失，则需要弹框二次确认。

• 在横向滑动菜单出现的时候，对屏幕其他区域的操作将收起横向滑动菜单。例如对列表进行滚动，对另外的项进行横向滑动，点击屏幕上的其他操作项等。

• 在横向滑动菜单出现的时候，点击跳转到其他页面，不收起横向滑动菜单，跳转到其他页面后，横向菜单回收。从其他页面切换回来的时候，横向滑动菜单已是收回状态。例如底部页签切换。

删除单个对象

• 详情界面，针对整个界面的删除操作，需有提示框进行确认（邮件应用详情界面删除默认不提示，在邮件设置中可以打开提示 ）。

• 查看详情界面，有删除功能，例如邮件详情界面。

• 无查看详情界面时，删除放在编辑界面，例如编辑闹钟界面。

删除多个对象

多选删除操作，需有二次确认框。

删除单个图片

在图片的右上角提供删除功能。点击后，直接删除，无需确认。

动效规则

单个删除

在列表项被删除时，会将临近的列表项填补进来，此过程中要体现补位动效。

在列表内容未超出一屏时：

• 删除项中的任何一项或多项（不包含最后一项），该项下面的未删除项将往上补位。

• 当删除项含最后一项时，最后一项直接消失。

在列表内容超出一屏时：

• 默认向上补位，如果下面的项本身就处于屏幕底部，无法向上补位时，就使用向下补位。

批量删除

批量连续删除：被删除项大于等于 2 项，且位置相邻，删除后补位项向上补位。无法向上补位时，就使用向下补位。

批量间隔删除：被删除项大于等于 2 项，位置有间隔，删除后补位项向上补位。无法向上补位时，就使用向下补位。

列表横向滑动删除动效

在列表项被删除时，会将临近的列表项填补进来，此过程中要体现补位动效。

在列表内容未超出一屏时：

• 删除项中的任何一项或多项（不包含最后一项），该项下面的未删除项将往上补位。

• 当删除项含最后一项时，最后一项直接消失。

在列表内容超出一屏时：

• 默认向上补位，如果下面的项本身就处于屏幕底部，无法向上补位时，就使用向下补位

横滑删除动效设计描述：

1. 向上补位：被删除项向上位移一个项的高度，同时淡出，向上补位的项向上移动，补充空白的位置。
2. 向下补位：被删除项向上位移一个项的高度，同时淡出，向下补位的项向下移动，补充空白的位置。

界面写作规则

删除确认弹框的界面用语写作规则：

• 选择单项时 : 是否+（动作）+ 此 +（数据项）？

• 选择多项时 : 是否+（动作）+（空格）（数量）（空格）+（单位）+（数据项）？

• 选择全部时 : 是否+（动作）+ 全部 +（数据项）？

例如是否删除此联系人？／是否删除 8 个联系人？/是否删除全部联系人？

若页面仅一项内容，多选中选择该项，删除确认弹框使用单项删除的提示语。

上下结构布局

上下结构布局介绍了常用的页面布局样式。

类型

• 上下文本

• 上图下文

上下文本

交互规则

滑动：下文向上滚动时，整屏滚动，即上方的文本区域是跟随下方文本一起滚动的。

视觉规则

上面区域仅包含文本，上面区域为 21:9 的比例（不含状态栏）。

上图下文

交互规则

滑动：下文向上滚动时，整屏滚动，即上方的图片区域是跟随文本一起滚动的。

视觉规则

页面区域包含图片区域与文本，比例 3:2 和 1:1 两种。

3:2

上面区域包含图片与文本，比例 3:2（不含状态栏）。详细规则参考“插画”

竖屏

1:1

上面区域包含插画，比例 1:1（不含状态栏）。

竖屏

底部组合样式：

上图下文弹框

界面用语

上图下文如果是介绍新功能，底部按钮字符串“立即XX”，例如立即使用、立即体验等。

文本对齐方式

• 标题：始终居中对齐。

• 正文（普通）：一行或多行均居中对齐。

• 正文（带序号）：居左对齐。

刷新

用户或应用可通过刷新获取最新内容。使用应用：邮件、天气、阅读、文件管理器、视频等。

类型

• 自动刷新

• 下拉刷新

• 点击“刷新”图标或菜单触发

自动刷新

• 默认进入可刷新界面后自动刷新。

• 根据业务特性需要，需要在一定时间间隔后自动触发内容的刷新。

• 用户在当前界面操作时，应用可在后台获取更新信息，并提示用户更新了几条，但界面内容不刷新。

下拉刷新

• 凡需通过互联网获取最新内容，都可采用下拉刷新。

• 下拉过程中显示加载转圈动画。

• 下拉小于规定距离时，松手后页面直接回弹。

• 下拉超过规定距离时并松手，触发刷新动画，仅显示加载转圈动画，不显示文字。

默认仅显示加载转圈动画即可

业务可决定是否显示上次更新时间，字符串格式为：“上次更新时间： XXXX ”，XXXX 按照时间日期显示规范显示。

刷新过程

• 不论通过下拉触发刷新还是点击相关图标或菜单触发，刷新过程中，用户可在内容区域上下滚动浏览内容。

• 此时刷新条区域变窄，悬浮在内容区上层，显示加载动画＋“正在刷新…”字符串。

刷新结果

• 根据业务场景考虑刷新结果的显示。

• 刷新成功，顶部可使用悬浮条提示：“更新了 XX 条XX”，例如“更新了 15 条新闻”。可点击悬浮条快速回到页面顶部。悬浮条显示时长同即时反馈长提示，超过后自动消失。适用场景：新闻资讯类信息流（业务自定义是否使用悬浮条）。

• 刷新成功后，若用户处于浏览内容过程中，则不能中断用户操作，不自动回到页面顶部，不自动刷新页面。

• 刷新失败，顶部悬浮条提示。

• 如果是网络异常造成的刷新失败，按照网络异常提示规范进行提示。

• 如果是其他原因造成刷新失败，直接在顶部悬浮条提示“刷新失败”或具体原因。

开发指南，详见 refresh (JS)。

搜索

通过输入关键词找出与给定关键词相关的内容。

类型

根据搜索反馈方式，分即时搜索和非即时搜索。

• 即时搜索：根据输入的关键词，进行内容的实时过滤。

• 非即时搜索：输入关键词，不立即显示搜索结果，但可显示联想内容和推荐。

即时搜索

搜索入口

• 顶部搜索框入口：当搜索在该页面为常用的行为时使用。

• 标题栏右侧搜索图标入口：当搜索在该页面为不常用的行为时使用。

激活搜索

• 点击搜索入口后，进入搜索页面，弹出输入法键盘，搜索输入框置顶显示，左侧显示返回。输入框内显示焦点。此时按系统返回键，第一次收回键盘，第二次直接退回搜索前的界面。

• 若不需显示搜索历史，在原页面上蒙层，场景：日历、联系人等。点击蒙层或返回按钮，退出搜索状态。

输入搜索关键词

• 应用根据关键词，实时匹配本地内容，过滤出带关键词的内容，以列表形式呈现。

• 搜索框固定在顶端显示，不随搜索结果上下滚动。

• 输入文本后，框内右侧显示清除按钮，可点击清除框内搜索词。

• 显示结果时，关键词要高亮。

• 若需显示结果数量，使用子标题提示：找到+数量+单位+具体内容，例如“找到 5 个联系人”。

• 部分应用在内容区显示与搜索文本相关的搜索选项，包括在网上搜索、与搜索文本相似的关键词等。

非即时搜索

搜索入口，同即时搜索

• 顶部搜索框入口：当搜索在该页面为常用的行为时使用。

• 标题栏右侧搜索图标入口：当搜索在该页面为不常用的行为时使用。

激活搜索

• 点击搜索入口后，进入搜索页面，搜索输入框置顶显示，弹出输入法键盘，左侧显示返回，输入框内显示焦点。此时按系统返回键，第一次收回键盘，第二次直接退回搜索前的界面。

• 内容区向上滑动时，搜索框不隐藏。

• 搜索页面默认显示内容，根据业务需要，显示搜索历史和推荐搜索内容。

输入搜索关键词

• 输入搜索内容，不会自动进行完整搜索，用户需手动点击搜索框右侧放大镜图标进行搜索。

• 实时联想的内容可包含本地内容，直达结果的具体内容，以及相关度大的搜索词。

• 输入的关键词能精确命中具体内容的，可提供搜索结果直达，不同类型搜索结果通过图标进行区分。

搜索有结果

• 搜索结果一般包含：结果反馈、与精确结果相似的结果（例如相关专题）、根据结果进行的其他搜索推荐。

• 对于本地内容，小标题文字格式为“找到+数量+单位+内容”，例如“找到 5 个本地联系人”，搜索结果也可使用子标题按类别显示。

• 对于云服务应用，若搜索结果很多，可通过合理分类，帮助用户更好浏览结果。页面结构：筛选组件和具体的内容呈现。详见“搜索结果筛选”小节。

二级搜索结果页

• 若业务搜索结果的类型较多，会分类显示搜索结果，每个分类仅显示部分结果，可通过“查看更多” 去显示完整结果。

• 点击“查看更多”后显示的结果页，即为“二级搜索结果页”，该页面支持快捷退出搜索状态，回到主页面。

• 在搜索框的右侧显示“退出”按钮，即可直接返回到主页面。

搜索无结果

提供相应建议。按照空内容界面方式显示图标+“没有匹配的结果”。考虑提供其他搜索推荐。搜索推荐视业务需求而定，逻辑同“激活搜索”时的搜索推荐。

下载

系统下载操作使用内联设计，即点击下载后界面不跳转，在下载按钮处直接显示下载进度。

类型

• 文本下载按钮，可显示具体下载进度。

• 图标下载按钮。

优先使用按文本下载钮样式来指示下载进度，结合场景进行选择。

文本下载按钮

• 下载过程中的状态。

• “下载前”界面用语：下载/更新。

• “下载中”界面用语：等待中，或显示进度条（百分比+暂停）；下载中状态，需有取消功能。

• “暂停中”界面用语：继续。

• “下载后”界面用语：打开/安装中。

下载管理

概述

可在后台下载的应用，需有下载管理功能，方便用户查看下载进度，进行删除等管理。通常是下载列表。

如何使用

• 通常以列表形式呈现。

• 标题：业务各异，叫法不同。默认情况下“下载管理”。若有业务强相关的场景，例如视频类，一般为“离线缓存”或“离线下载”。不作强制要求。

• 根据下载任务状态，按“已下载”和“正在下载”两组进行管理。正在下载的内容，位于下载任务列表最上方，下载完成，该组消失。

• 下载任务列表界面，支持对单条任务和批量任务进行删除、暂停、继续下载等操作。

• 下载管理界面长按进入多选界面，可选择多条内容进行删除、暂停、继续等操作。

• 已下载的文件，若需按属性分类显示，可通过子页签进行区分。

新建

用户需要在系统中新增一个内容的操作。

类型

根据场景的不同，“新建/添加”的使用形式不同：

• 界面无内容

• 界面有内容

• 弹框

界面无内容

当界面内容为空时，“新建/添加”采用底部大按钮的形式。

界面有内容

单一内容（例如纯网格/列表等）

• 长期使用后内容不超过一页的：“新建/添加”跟随内容放在最后一项之后。

• 长期使用后内容超过一页的，“新建/添加”优先放在底部工具栏上，其次考虑放在右上角标题栏上。

组合内容（内容有多种形式的网格/列表等）

• 长期使用后内容不超过一页的：“新建/添加”跟随内容放在最后一项之后。

• 长期使用后内容超过一页的，“新建/添加”放在子标题右上角。

弹框

“新建/添加”放在列表弹框的最后一行，弹框显示时，要保证“新建/添加”不被内容遮挡。

异常提示

对系统或应用使用过程中出现的错误或风险进行提示。

类型

• 网络异常提示

• 应用错误/异常/状态风险提示

• 公告消息

网络异常提示

当由于网络异常导致界面内容不能显示或刷新时，需要在界面上给予提示和帮助。同时需要保持对网络内容的侦测，当网络恢复正常时，则及时自动刷新内容。

类型

• 内容区中间位置提示

• 内容区上方插入横幅提示

• 内容区嵌入提示

内容区中间位置提示

适用于无可显示内容的情况。

• 无网络：显示“网络未连接”，底部显示设置网络按钮，点击按钮后跳转到设置网络弹出框。

• 网络差：显示“网络连接不稳定，请点击屏幕重试”，底部显示设置网络按钮，点击按钮后跳转到设置网络弹出框。

• 连不上服务器：显示“无法连接服务器，请点击屏幕重试”。

• 有网但获取不到内容：显示“无法获取XX，请点击屏幕重试”，XX是用户需获取的内容，可为“信息”、“图片”、“资料”等。

上述描述不能涵盖到的情况，应用需给出一般用户能理解的错误提示，指导用户解决问题。

内容区上方插入横幅提示

适用于有离线内容可显示的情况。

• 无网络：显示“网络未连接 设置网络”，点击左侧文本，变为正在连接的状态。点击“设置网络”，跳转到设置网络弹出框。若网络硬件未打开，则不需要连接中的状态。

• 网络差：显示“网络连接不稳定，请点击重试 设置网络” ，点击左侧文本，变为正在连接的状态。点击“设置网络”，跳转到设置网络弹出框。

• 连不上服务器：显示“无法连接服务器，请点击重试”。

• 有网但是获取不到内容：显示“无法获取XX，请点击重试” 。XX是用户需获取的内容，可为“信息”、“图片”、“资料”等。

上述描述不能涵盖到的情况，应用需给出小白用户能够理解的错误提示，指导用户解决问题。

内容区嵌入提示

沉浸式效果的界面，可以使用内容区嵌入提示，需要根据界面内容布局进行设计。适合天气、负一屏等沉浸式效果，不适合用横幅提示的场景。

• 无网络：显示“网络未连接，点击设置网络”，点击跳转到设置网络弹出框。

• 网络差：显示“网络连接不稳定，请点击重试”。

• 连不上服务器：显示“无法连接服务器，请点击重试”。

• 有网但是获取不到内容：显示“无法获取XX，请点击重试” ，XX是用户需获取的内容，可为“信息”，“图片”，“资料”等。

上述描述不能涵盖到的情况，应用需给出小白用户能够理解的错误提示，指导用户解决问题。

设置网络

网络提示提供了“设置网络”的按钮入口，点击该按钮，需调用有设置应用提供的设置网络公共弹框，直接在当前界面开启。

应用错误/异常/状态风险提示

类型

• 前台应用提示

• 后台应用提示

前台应用提示

• 优先：根据具体操作项或内容相结合的方式进行提醒。例如发短信失败。内容区嵌入式风险提示需采用红色文字提醒，不需要用户确认。

• 其次：选用不打断用户当前操作的提示方式，使用横幅通知（针对第三方应用，例如打开支付宝时，提示加入到安全空间）和 即时提示（例如邮件附件太大，点击发送后的提示）。

• 再次：需要用户操作才能继续使用的，使用弹框。

后台操作提示

• 后台进行的任务，若出现错误、异常或风险，使用横幅通知，然后自动消失到通知栏显示。

• 异常情况，需提供解决问题的入口。

• 所有正在进行的过程类操作的信息，放在通知面板上。

公告消息

即时的公告消息，希望用户立即关注。通常是一些极其重要的信息，平时不显示。

如何使用

• 涉及金额变动、服务不可用或有重要通知显示。

• 不自动消失，不可点击。

• 服务恢复可用或宣传窗口期失效，提示才可消失。

系统特性

打开方式

用于选择文件用什么应用打开。默认情况下，常用的文件都有默认的应用可以打开。对无默认打开方式的文件，使用打开方式来打开。

如何使用

对于应用内的文件，如有适合的系统默认应用，直接用系统默认应用打开文件。如果没有合适的系统默认应用，使用打开方式选择可使用的应用去打开。

交互规则

初始排序

• 最前面：系统默认应用。

• 其次：常用打开方式。

• 最后：默认按字母顺序排序，根据使用频率自动调整顺序。

排序规则

系统默认应用排在最前面。其他排序方式根据使用频率自动调整顺序。

打开方式选择

用户选择打开方式后，点击“仅此一次”进行打开，下次再打开该类文件时，还会询问用何种方式打开。若点击“始终”进行打开，系统将始终用此方式打开该类文件

多窗口交互

概述

折叠屏展开态、平板、电脑等大屏幕设备，具有多任务并行和效率型任务处理的先天优势。

系统提供了悬浮窗、分屏、平行视界三种多窗口交互，为用户在大屏幕设备上的多任务并行、便捷的临时任务处理提供更佳的使用体验。

三种类型

多窗口类型	定位	体验价值	适用场景
悬浮窗	临时处理某个任务，或短时间多任务并行使用	减少跳转多应用多任务单应用多任务	通用
分屏	两个应用/任务长时间并行处理	多应用多任务单应用多任务	通用
平行视界	通过多实例，实现应用内双窗口的系统侧解决方案	宽屏适配高效切换单应用多任务	特定类型适用：电商/社交/办公类等

多任务并行

通过多窗口交互可实现多任务并行，包括多应用多任务并行和单应用多任务并行。

多应用多任务：用户在使用电子设备时，经常需要同时使用多个应用。可通过分屏、应用悬浮窗实现多应用并行。

单应用多任务：相对复杂的平台型应用，存在应用内多个相互独立的持续性进程需要同时进行的情况。

按照既有操作，强制中断前一个任务，跳转到第二个任务；或维持在第一个任务中，忽视第二个任务的通知。这两种方式都体验不佳，因此，需要一种应用内多任务并行以及各任务间灵活切换的机制来帮助用户实现单应用多任务。

单应用多任务的交互特点：

1. 页面两侧类似于系统级的跨应用多窗口，两侧内容没有直接关联，用户只是需要两个部分可以同时运行。
2. 在当前页面即可触发单应用多任务，避免必须要退到应用的主界面，才能切换到另一个任务的多步操作，也避免了切换过程中的任务中断。

为了保证单应用多任务给用户带来好的体验，应用需在设计中满足以下基本要求：

1. 应用内多任务必须是基于用户在具体场景下的需要来构建。
2. 需要向用户提供易理解、易操作的形式。
3. 一般由用户来主动触发进入多任务状态，同时用户也应有能力控制主动退出或不进入此状态。仅在用户有明确预期或诉求的情况下可以由应用自动触发进入多任务。

常见的实现单应用多任务的方式：

\1. 悬浮窗

\2. 单应用分屏

\3. 平行视界后台锁定

临时任务处理

通过多窗口交互，可实现便捷的临时任务处理，包括一步窗口&跨窗口拖拽。

三方应用根据业务需求，列举需要调用一步窗口的场景，对系统提出调用一步窗口的请求，系统提供一步窗口的能力。

在特定场景下，点击控件/按钮/链接/附件等，直接打开一个任务悬浮窗，即为一步窗口。

分享

系统级特性，用于分享文本、图片、视频等内容。使用华为分享，可以免流量极速分享到附近设备。

如何使用

• 点击“华为分享”区域显示的头像，可以将内容分享给该头像对应的设备。

• 点击具体分享方式进行分享。

界面构成

1. 分享对象预览区
2. 华为分享
3. 所有分享方式区

动效规则

• 普通分享动效，调起可滑动面板。

• 图库分享动效，图片以共享元素的方式转场。

通知

通知旨在让用户以合适的方式及时获得有用的新消息，帮助用户高效地处理任务。

通知使用原则

• 为用户提供有价值的通知内容信息。

• 不要发送相同内容的通知打扰用户。

• 必要时，为用户提供有效、直观的通知操作按钮。

• 优先采用规范布局，避免自定义复杂的布局，以保证通知体验的一致性。

• 不要将通知作为小工具或广告板使用。

• 不要出于商业目的强制改变通知属性（如采用进行中通知强制置顶显示），避免损害用户使用体验。

通知详情

单条通知

单条通知的基本元素包括标题区、内容区、操作区：

标题区

\1. 通知图标：表示通知的功能与类型，需应用单独提供。

\2. 通知名称：应用名称或功能名称。

\3. 时间：发送通知的时间，系统默认显示。

\4. 展开箭头：点击标题区，展开被折叠的内容和按钮。若无折叠的内容和按钮，不显示此箭头。

内容区

\5. 内容标题：描述简明概要。

\6. 内容详情：描述具体内容或详情。

操作区

\7. 操作按钮：支持功能操作或界面跳转。

交互规则

\1. 支持展开的通知，点击标题区展开，点击内容区跳转至应用详情界面。

\2. 不支持展开的通知，点击整条通知跳转至应用详情界面。

\3. 没有应用界面的通知，点击不跳转。

组合通知

应用如果发送多条通知，需设为一条组合通知。

展开前

\1. 通知图标：最新 1 条通知的图标。

\2. 通知名称：最新 1 条通知的应用名称或特性名称。

\3. 时间：最新 1 条通知的时间。

\4. 展开箭头：点击展开所有通知。

\5. 内容区第一行：第 1 条通知的内容标题和详情。

\6. 内容区第二行：第 2 条通知的内容标题和详情。

\7. 数字：表示未显示通知的数量。

展开后

\8. 子通知标题：若子通知的图标和名称与最新一条通知的一致，子通知标题仅显示时间；若不一致，则子通知标题显示图标+名称+时间。

\9. 子标题展开箭头：同单条通知的展开箭头。

交互规则

\1. 折叠时，点击整条通知展开。

\2. 展开时，点击标题区收起。

\3. 子通知交互规则同单条通知。

通知提示场景

通知会在不同场景以不同形式提示用户。应用发出一条通知时，可配置通知的提示场景。

通知栏

• 通知默认在通知栏显示，应用无需配置。

• 进行中通知显示在通知栏顶部（按时间排序）。

• 通知按时间由上至下排序。最上方显示最新的通知。

• 通知数量超过一屏后，未显示通知的图标将在底部收纳成一排。

• 通知栏默认展开第一条单条通知；其他通知为折叠状态。

交互规则

• 向右滑动通知卡片，删除通知。

• 向左滑动通知卡片，显示设置、删除按钮，再次向左滑动删除通知。

• 点击左滑出来的删除按钮，删除单条通知。

• 点击左滑出来的设置按钮，出现设置项弹框。

• 点击设置项弹框上的“关闭通知” ，屏蔽该应用所有通知。

• 点击设置项弹框上的“设为静默通知” ，将该应用所有通知设为静默，仅在通知栏显示。

• 点击设置项弹框上的“延后提醒” ，设置当前通知延后提醒。

• 点击设置项弹框上的“更多设置” ，进入对应应用的通知设置详情界面。

• 点击通知栏底部的悬浮删除按钮，删除所有通知。

• 点击通知栏右下方的“通知管理” ，进入 “设置”中的“通知”页面。

横幅通知

• 横幅通知为高提示性场景，仅白名单内应用可生效。

• 横幅通知在界面顶部显示 5s 后消失。例外：来电、闹钟横幅通知为长时间停留。

• 同时接收多条横幅通知时，仅显示最新一条通知。

• 非全屏界面显示 3 行通知高度和操作按钮。箭头仅折叠内容详情，超过 1 行将被折叠。

• 全屏界面下，通知显示单行高度。

交互规则

• 在横幅通知上向左或向右滑动删除通知。

• 上滑忽略横幅通知，在通知栏里仍显示。

• 点击通知内容区进入应用详情界面。

锁屏通知

• 锁屏上仅显示本次锁屏期间接收的普通通知，进行中通知可在锁屏上常驻。

• 最多显示3条锁屏通知。

• 锁屏通知分为 primary 与 public 属性，public 属性下，打开“隐藏通知内容”开关，通知内容不会被隐藏。

• 应用可配置通知是否显示在锁屏上。

交互规则

• 双击单条通知内容区，跳转至应用详情界面。

• 有折叠箭头的单条通知，双击标题区，展开被折叠内容与操作按钮。

• 双击组通知，展开被折叠的单条通知。

• 向右滑动删除通知。

• 向左滑动显示设置、删除按钮，再次向左滑动删除通知。

桌面图标角标

• 桌面图标角标分为圆点角标和数字角标两种。

• 圆点角标对应通知，表示该应用有通知，圆点角标的颜色是根据应用图标颜色进行的智能取色，无需应用定义。

• 数字角标是应用新消息的提示，不是完全对应通知的。

• 系统默认显示数字角标。

通知图标

• 通知以图标形式显示在状态栏、熄屏界面，与通知卡片图标为同一资源。

• 通知图标资源需应用单独提供。

通知特殊属性

进行中通知

• 任务进行中的通知，显示在通知栏、锁屏通知顶部。有多条进行中通知时，按时间排序。

• 进行中通知不能被删除，当用户结束此任务后消失。

静默通知

• 静默通知仅在通知栏显示，且无响铃和振动。

• 在通知栏中，静默通知和非静默通知在位置与样式上无区别。

• 系统、应用和用户任意一方可将通知设定为静默通知。

• 静默通知以应用为单位生效。

文本超长显示规则

通知名称

建议完整显示字串。

不支持换行，超过 1 行“…”截断。

通知内容标题

建议完整显示字串。

不支持换行，超过 1 行“…”截断。

通知内容详情

• 折叠状态下，超过 1 行“…”截断 。

• 展开状态下，最多可显示 8 行，仍显示不下“…”截断。

• 最大高度为 295vp。

通知按钮

• 先逐级缩小字号到 15fp。

• 仍然超长，换行处理，支持换一行。

• 最后，“…”截断。

通知栅格布局规则

4 个 columns 时，通知占 4 个 columns

8 个 columns 时，通知占 6 个 columns

12 个 columns 时，通知占 8 个 columns

手机竖屏：通知宽度为 4 个 columns

手机横屏：通知宽度为 6 个 columns

平板竖屏：通知宽度为 6 个 columns

平板横屏：通知宽度与竖屏保持一致

折叠屏横/竖屏：通知宽度为 6 个 columns

选择文件与路径

为给用户提供一致的文件操作体验，避免各应用提供各式各样的文件调用操作界面，降低由此带来的用户学习成本，HarmonyOS 提供了系统级的文件操作解决方案，在不同的使用场景中，用户都能够使用熟悉的界面完成打开、查找、保存文件等任务。如无特殊需求，应用应优先考虑调用系统能力，而不是重新实现相同的功能。

文件选择器

界面效果

应用需在其使用场景中打开/插入一个或多个文件时（例如添加邮件附件、发送文件给联系人），可以调用文件选择器来完成文件选取任务。文件选择器提供以下查找文件的方式：

• 查看并选择最近文件

• 根据类型、位置与来源维度浏览文件

• 在已收藏的列表中选择

• 按条件和关键字搜索文件

工作原理

文件选择器由应用根据场景调起，用户选择所需文件后，操作流程回到调用应用，并返回用户所选择的文件列表。

文件来源

系统文件选择器除可访问当前设备的本地文件外，还可访问以下位置的文件内容：

• 华为云盘

• 其他可信分布式设备

• 通过网络邻居连接的设备

可定制能力

应用在调用文件选择器时可以指定以下参数：

• 指定文件类型默认支持所有类型，如果传递类型参数，则路径下非指定类型文件将不可见。

• 指定文件数量最大个数默认最大个数为 500，如果传递的参数大于 500，则仍保持 500 为最大个数。

路径选择器

界面效果

应用需在其使用场景中保存一个或多个文件时（例如下载文件、上传至云盘），可以调用路径选择器来完成路径选取任务。

工作原理

应用需要保存文件时，调用路径选择器，用户选择保存位置并指定保存文件名称（可选）后，操作流程回到调用应用，并返回保存结果。

保存路径

路径选择器可将文件存入以下位置：

• 当前设备本地路径

• SD卡

• U盘

• 华为云盘

设计自检表

设计自检表详细列举出了在设计和开发过程中应当注意的设计规则，提交审核前请再次检查各项是否符合规则要求，这将帮助应用减少用户舆情且提升用户体验的一致性。

自检表的要求范围分为“必选”与“推荐”两类。必选类一般为已总结出的较优解决方案或效果，表示相关设计需要按照此原则统一执行；推荐类指可能受应用品牌风格或业务特殊性影响，可适量做出修改。

请参考以下表格范围内提出的要求对应用进行检查。

类型	条目	说明	要求
视觉	色彩	建议按照 Harmony OS 的色彩场景分类定义颜色资源。	推荐
字体	需响应系统大字体模式，系统调节字体大小后，界面字体能响应字体大小的变化，并且界面布局没有出现错乱的问题	推荐
布局	使用相对布局，让界面元素的大小、宽度能响应屏幕的宽度自适应变化。	必选
控件	按钮	若用户触发将产生严重后果的不可逆操作，例如“删除”，“重置”，“取消编辑”，“停止”等，使用红色警告色。	推荐
标题栏	所有常规设计界面都应该有标题栏。	推荐
二级界面不使用强调型标题栏。	必选
步骤导航器	上一步、下一步类型的步骤导航按钮放在界面底部用界面内按钮的形式显示。	必选
任何情况下，按钮都需要显示。如果页面中有多个表单内容项需要输入，键盘弹起看不到所有表单内容时，建议刚进入页面时键盘默认为收起状态，以保证用户了解全页内容。	必选
底部操作区采用“文本按钮 + 箭头”形式。针对左侧文本：点击文本按钮，如果无法返回到上一界面，那么该文本按钮左侧不加箭头。针对右侧文本：点击文本按钮出现的界面，如果无法返回到上一界面，那么该文本按钮右侧不加箭头。例如“跳过”，“开始”。	必选
在步骤导航流程中，如果某个操作耗时，请在操作的地方进行等待反馈，例如使用等待按钮，尽量不要弹出一个等待弹出框。	推荐
菜单	菜单项中提供最常使用的操作。常用的操作在不同的场景下，命名和顺序要保持一致，例如删除、分享等。	推荐
菜单项中不显示与当前内容无关的项。	推荐
菜单项的数量以 3-5 项为宜。	推荐
在手机上不使用二级菜单。	必选
侧边页签	通常在平板应用的一级界面上使用，用于快速切换不同页签的内容。	必选
平板上页签的个数和顺序对应手机底部页签的个数和顺序。	必选
单选框	请将合适的选择项作为默认选择项推荐给用户，确保选中项默认被用户看到。	推荐
对于开关形式的选择，例如开，关。请考虑使用开关控件而不是单选列表。	推荐
弹出框	通常用来展示用户当前需要的或用户必选关注的信息或操作，其他情况不建议使用弹出框，可考虑通知等其他非模态窗口。	推荐
通常情况下点击返回键弹出框会消失。	必选
导航点	当页面数量较少时，可以使用圆点导航点。当页面数量较多时，可以使用数字导航点。	推荐
支持在内容区左右滑动以切换内容。	必选
底部页签	仅用于一级界面。	必选
页签数量： 2-5 个。	必选
页签上的文本要精练，不要使用太长的字符串，避免显示不下。	推荐
点击可切换页签。若点击当前页签，界面会回滚至页面顶部，适合长页面快速回到页面顶部。	必选
不可通过滑动来切换底部页签，以免手势冲突。	必选
在消息列表界面，双击底部页签，会从当前位置跳转到下一个未读消息。下一个未读消息的位置是显示在列表的第一行。	推荐
多选	网格项支持滑动快捷多选（网格界面任意滑动选择/取消，以滑动时手指起始项状态的反向状态来设置手指滑动经过项的状态）。	推荐
从上往下滑动多选到页面底部，页面可自动向上滚动，继续往下多选；或者从下往上滑动多选到页面顶部，页面可自动向下滚动，继续往上多选。	推荐
返回	一级界面不能出现左上角返回按钮。	必选
非一级界面（如果不是编辑，多选界面），左上角显示返回按钮。	必选
工具栏	最多显示 5 项操作选项。	必选
操作选项的排序规则为：“添加”、“分享”、“收藏”、其他操作（下载、编辑、移动等）“删除”、“全选”、“更多”。	推荐
不允许出现工具栏只有“更多”或“设置”的情况。仅有一个“更多”或“设置”操作时，需将“更多”或“设置”放在标题栏右侧。	必选
底部页签和工具栏不能同时使用。	必选
勾选	勾选项是否默认开启，需考虑勾选项对用户所带来的影响，避免在用户没有注意到的情况下，开启了某个服务或功能。	推荐
滑动选择器	上下滑动来切换选择值。	必选
选择器滚动时，默认振动并伴有音效。	推荐
即时反馈	对于操作结果很明显的场景，不建议使用即时反馈，例如删除一个联系人，用户能够注意到该联系人会从界面中消失，无需用即时反馈提醒用户删除成功。	推荐
界面上不能同时出现多个即时反馈。一个即时反馈消失前，另一个即时反馈被触发，则第一个即时反馈应在第二个即时反馈出现前消失。	必选
文本选择	文本选择强相关功能“全选”、“复制”、“粘贴”、“剪切”，需要直接呈现给用户，不得放入更多里面。	必选
手柄需要跟手。	必选
光标定位在距离手柄左侧距离最近的文字后面。	必选
光标滑动到内容区顶部和底部上时，页面要自动滚屏。	必选
选择一段文本时，支持手柄的反向拖拽。	必选
新事件标记	运营活动失效时，对应的圆点标记需主动消失。	推荐
纯文字时，新事件红点统一放在文字右侧。	推荐
图标＋文字时，新事件红点放在图标右上角。	推荐
Pattern	分栏	特定类型应用适用于分栏，例如办公类、效率型、IM社交类等。	推荐
支持分栏的应用，某些详情界面，允许用户全屏显示。	推荐
进入或退出编辑，跟随上一层级页面的分栏/全屏状态；访问下一层级内容，跟随上一层级的分栏/全屏状态。打开新建功能，全屏显示。	推荐
系统特性	分享	使用系统的分享能力，不允许修改系统分享方式。	必选
打开方式	使用系统的打开方式，不允许修改系统的打开方式。	必选
文件选择与保存	使用系统提供的文件选择与保存，不允许修改系统的操作方式。	必选
通知	使用系统模板展示通知，不允许自定义样式。	必选
多窗口交互	应用必选支持悬浮窗特性。	必选
应用必选支持系统的分屏特性。	必选
折叠屏设计	折叠态和展开态之间变化	体验要连续，应用在折叠与展开状态切换的过程中保持正常运行。	必选
屏幕变大后，用户体验在某些方面有增值。例如屏幕可显示更多内容，提高显示和操作的效率；提供更沉浸的体验，展示图片、视频、游戏更清晰的细节；提供多任务并行体验，可多窗口同时在屏幕内展示。	推荐
视觉元素（图片、视频等）不要发生变形、裁剪等信息缺失。	必选
字体不应发生明显变化，最大不超过原来的 1.2 倍。	必选
展开态不应出现页面内的内容元素显著减少或图形化元素模糊、分辨率下降、视觉体量减小等损失。	必选
展开态不应出现操作步骤增加，操作更复杂等体验下降的情况。	必选
不破坏应用原有的沉浸式体验，不过度改变用户习惯。	必选
支持展开态横屏显示。	推荐
展开态横竖屏布局一致。	推荐
设备屏幕宽度变化时自适应布局和响应式布局显示。	推荐