HarmonyOS设计：设计方案

分布式设计

设计原则

设计理念

HarmonyOS 是面向未来全场景智慧生活方式的分布式操作系统。对消费者而言，HarmonyOS 将生活场景中的各类终端进行能力整合，形成“One Super Device”，以实现不同终端设备之间的极速连接、多端协同、资源共享，匹配合适的设备、提供流畅的全场景体验。

分布式设计指南可以帮助应用开发者了解如何充分发挥“One Super Device”的能力，提供独特的跨设备交互体验。

设计原则

要构建优秀的分布式体验，需要遵循如下设计原则：

体验增值

简单叠加更多的设备并不能带来更好的体验，反而可能造成体验下降。要谨慎地设计分布式体验，跨设备交互要能提供明显的体验提升，例如更好的感官体验、更好的交互效率等。

无缝流畅

从一个设备流转到另一个设备的过程是流畅的，设备与设备的协同是无缝的，就像是在使用一个设备一样，例如用户通过智能推荐可以一步把界面内容流转到其他设备。

清晰明确

跨设备交互是新的使用体验，用户可能没有预期，交互的指引要清晰明确，可以帮助用户快速了解和学习跨设备交互的使用，例如提供明确的图标或推荐。

易于理解

跨设备交互应该是易于理解和记忆的，方便用户长期持续地使用，即使用户没有用过某个分布式的功能，在根据操作指引使用之后应该能够很容易地理解操作流程，记住操作步骤。

用户可控

在跨设备交互时，用户要能够随时切换到其他设备或其他可用的跨设备交互模式，例如用户把视频流转到智慧屏设备后，也可以随时切换到其他可用的设备。

沉浸无干扰

更多的设备为沉浸式体验提供了更多可能，考虑根据设备的属性在不同设备上分配信息，最大化提供沉浸无干扰的体验，例如在手机上浏览邮件列表，在智慧屏上查看选中的邮件详情。

分布式体验架构

随着全场景多设备生活方式的不断深入，用户拥有的设备越来越多，每个设备都能在适合的场景下提供良好的体验，例如，手表可以提供及时的信息查看能力，电视可以带来沉浸的观影体验。同时，每个设备也有使用场景的局限，例如在电视上输入文本相对手机来说是非常糟糕的体验。当多个设备通过分布式操作系统能够相互感知、进而整合成一个超级终端时，设备与设备之间就可以取长补短、相互帮助，为用户提供更加自然流畅的分布式体验，在 HarmonyOS 中我们把分布式体验统称为分布式流转。

目前为止，分布式流转包括跨端迁移体验和多端协同体验两种类型。

• 跨端迁移是指当用户在一个设备上发起操作，并切换到另一个设备上继续操作时，用户能够马上在新的设备上继续当前的操作。

• 多端协同是指多个设备上的软件和硬件能力相互协同，作为一个整体为用户提供比单设备更加高效、沉浸的体验。

通过精心开展的跨端迁移和多端协同设计，应用开发者可以打造优秀的分布式流转体验。请阅读相关章节了解对应的体验特点和设计方法

跨端迁移设计

跨端迁移场景

用户使用应用的过程中，当使用情境发生变化时（例如从室内走到户外、从办公室到车上等），之前使用的设备可能已经不适合继续当前的任务，或者周围有更合适的设备，此时，用户会选择使用新的设备来继续当前的任务，这就是跨端迁移。跨端迁移适合文档编辑、视频、游戏等场景。例如，在手机上编辑邮件，回到家里后迁移到平板，在平板上继续编辑邮件。

跨端迁移适合的场景有：

• 在外时手机上编辑邮件，到家后迁移到平板上继续编辑。

• 在外时手机玩游戏，到家后迁移到平板上继续玩。

• 在家里智慧屏上看视频，出门时迁移到手机上继续观看。

• 手机视频通话迁移到智慧屏，更沉浸地视频聊天。

一个好的跨端迁移设计会让整个迁移的操作过程自然流畅，不需要用户做额外的操作。

应用在设计跨端迁移时，必须满足如下体验要求：

• 为用户提供跨端迁移的明显入口或指示。

• 迁移后，迁移设备需同步呈现原设备上任务的状态，避免迁移造成用户的迷失。

• 迁移后的任务要能够满足用户当前的主要任务诉求，用户能够独立进行使用

跨端迁移交互定义

当用户进行的任务跨端迁移到其他设备后，迁移设备上的任务可以独立运行，原设备上的任务关闭。例如，在手机上打开了备忘录，把备忘录迁移到平板后，平板可以独立编辑备忘录，而手机上的备忘录自动关闭。

迁移入口

迁移入口有两种类型，不同迁移入口对应的操作略有差异：

• 智能推荐

• 手动迁移

智能推荐

系统根据用户习惯、场景和可用设备，主动推荐最适合的设备进行迁移。

原则

• 不干扰当前操作。

• 方便操作，提升效率。

• 符合用户场景。

推荐气泡

当检测到用户周围有更合适的可迁移设备时，当前设备上会出现推荐气泡，用户点击推荐气泡可以进行跨端迁移。

例如当用户编写邮件，到家后为了提供更高效的交互体验，系统会推荐用户将邮件迁移到平板上。

手动迁移

提供应用内迁移的入口，用户手动选择合适的设备进行迁移。

原则

• 在不同设备不同场景下有统一的样式。

• 手动迁移按钮触发全量的可用设备列表。

流转图标

跨端迁移使用流转图标作为应用内手动迁移的入口。

我们提供了多种图标颜色以适应不同的界面背景，并提供了在界面中如何放置流转图标的建议，详见服务流转规范。

点击流转图标后，会拉起系统提供的流转面板进行设备的选择。在流转面板中，开发者需要提供图标、名称及标题。

多端协同设计

多端协同模式

不同的设备进行多端协同主要是因为其他设备上有本设备不具备的或比本设备明显更合适的能力，协同后这一项能力得到增强。

常见的协同能力有：

• 显示能力

• 摄像能力

• 音频输入能力

• 音频输出能力

• 交互能力

• 传感器能力

我们针对这些常见协同能力总结了常用的协同模式，应用开发者可以根据应用的特点选择合适的模式进行协同体验的设计，或者创造出更适合应用场景的新的协同模式。其他没有列出的能力也可以参考下面列出的协同模式进行思考和设计。

显示协同

显示协同是多端协同的常见场景。根据应用界面的构成，显示协同有如下两种常用模式：

显示分离模式

显示分离模式是指把一个设备上的一个界面或多个界面中的内容分拆到多个设备上同时显示，达到更有效利用显示空间的作用。分拆的内容显示需要根据显示的设备进行响应式布局。

场景举例：

邮件应用的列表和详情可以分别显示在手机和智慧屏上，在手机上快速地定位要查看的邮件，在智慧屏上更清晰地查看邮件内容。

显示和功能分离模式

显示和功能分离模式是指把一个设备上的一个编辑类界面中显示和功能操作的部分分拆到多个设备上同时显示，这样可以有效利用显示空间，提高交互效率。

场景举例：

文档编辑应用的文档内容和周边工具菜单可以分别显示在智慧屏和手机上，在手机上快速操作编辑菜单，在智慧屏上更清晰地查看编辑的效果。

摄像协同

摄像协同有如下两种常用模式：

优选模式

优选模式是指用另一个设备上的摄像头替代本设备上的摄像头进行摄像。

一般用在如下场景：

• 本设备摄像头的拍摄质量不如另一个可用的设备，通过另一个设备的摄像头来获取质量更好的摄像效果。例如智慧屏调用手机的摄像头获取更加清晰细腻的拍照效果。

• 本设备摄像头的位置和角度不适合当前摄像场景，通过另一个设备的摄像头能够克服这些问题并获得满足质量要求的摄像效果。例如手机调用智慧屏的摄像头完成全家福拍照。

多路摄像模式

多路摄像模式是指一个设备调用另一个设备上的摄像头和本设备上的摄像头组合在一起使用。当需要提供除本设备外更多的摄像取景画面时，通过调用另一个设备的摄像头来获取多路摄像的效果。

常用的多路摄像模式展示形式：

场景举例：

• 拍视频时，同时使用手机摄像头和智慧屏摄像头，提供两个取景界面的视频录制并组合生成一个视频。

• 直播软件在直播卖货时，同时使用手机摄像头和其他设备的摄像头，手机摄像头拍摄主播，其他设备的摄像头拍摄商品，一般只给观众显示拍摄主播的摄像头取景界面，当需要展示商品时切换到拍摄商品的摄像头取景界面。

音频输入协同

音频输入协同有如下两种常用模式：

收音增强模式

收音增强模式是把另一个设备的音频输入能力作为补充，提供更清晰的收音效果。

场景举例：

上课时坐得比较靠后，听不清老师的讲话，可以把另一个具备音频输入能力的设备放在离老师近的地方，通过收音增强模式获得清晰的收听效果。

话筒模式

话筒模式是把另一个设备的音频输入能力作为话筒来使用，当用户需要更好的话筒效果或更多的话筒时使用话筒模式。话筒模式通常需要跟音频输出设备（如音箱）结合使用，把话筒的效果通过音箱播放出来。

场景举例：

• 在比较吵闹的地方，用户把手机作为话筒，将声音通过连接的音箱进行播放，达到类似专业话筒的效果。

• 在K歌的时候，把手机作为话筒接入K歌软件，达到多个人多个话筒合唱K歌的效果。

音频输出协同

音频输出协同有如下两种常用模式：

音视频分离模式

音视频分离模式是指把一个设备上视频播放场景中的音频分拆到其他设备上，可以提升特定场景下的音频使用体验。

场景举例：

当手机视频迁移到智慧屏观看时，为了不吵到其他人，把音频切换到耳机进行播放。

多路音频播放模式

多路音频播放模式是指一个设备上的音频输出和另一个设备上的音频输出同时使用，可以提供立体声或同时在不同设备上播放不同音频等使用体验。

场景举例：

• HarmonyOS 设备连接多个音箱同时播放一首音乐，提供立体声的播放效果。

• 手机一边通过音箱播放音乐，一边通过耳机接听电话。

交互协同

交互协同有如下两种常用模式：

内容输入协同

内容输入协同是指利用另一个设备上便捷的内容输入能力帮助本设备进行内容输入，提升内容输入效率。

场景举例：

• 在智慧屏上进行搜索时，在手机上帮助智慧屏进行文本输入。

• 通过智慧屏上网课时，在手机上帮助智慧屏进行手写答题或绘画。

控制输入协同

控制输入协同是指利用另一个设备的更方便的交互能力帮助本设备进行操作，提升操作效率。

场景举例：

在智慧屏上玩游戏时，利用手机作为游戏遥控器进行游戏操控。

传感器协同

传感器协同有如下两种常用模式：

生理数据检测

生理数据检测是利用其他有生理数据检测能力的设备（如手表）获取生理数据，一般用于运动、健康类应用。

场景举例：

在智慧屏上学习健康类课程时，通过手表获取实时的心率数据，并显示在智慧屏上，帮助用户了解健康状态，给出健康建议。

运动数据检测

运动数据检测是利用其他有运动数据检测能力的设备（如手表）获取运动数据，一般用于运动、健康类应用。

场景举例：

在智慧屏上使用运动类应用时，通过手表获取用户的运动数据，并显示在智慧屏上，帮助用户了解运动状态，给出运动建议。

组合能力协同

在实际设计中，不是所有的协同都是单纯的某一项能力的协同，例如某些场景下可能同时使用智慧屏的显示能力和摄像能力。这种情况下，可以组合这些能力进行协同，提供更加符合场景的协同体验。

应用开发者在设计中，应该针对应用所使用到的每一项能力考虑多设备下的协同模式，并把这些用到的协同模式组合在一起检查整体的使用体验。即使每一项独立的能力是最佳的协同效果，多个能力协同组合在一起后可能也会带来糟糕的体验，需要基于场景和设备的其他属性来考虑如何达到更好的整体协同体验

基于场景和设备属性设计多端协同体验

通过对特定类型的设备进行分析，了解此类设备的优劣势，总结出此类设备在多端协同中可以提供的能力和需要提供帮助的能力，再基于应用的场景把多个设备的这些优劣势进行匹配，可以设计出优秀的多端协同体验。

下面针对典型的 HarmonyOS 设备进行分析。

设备特性分析

智慧屏

特点	优势	劣势	适合协同的场景	与其他设备的关系
家中固定屏幕大遥控器交互公共设备	屏幕大较强的音视频输入输出能力	不能移动交互不方便隐私性不够	视频播放、视频聊材料展示图片查看运动健康家庭拍摄	智慧屏作为主设备，其他设备帮助交互智慧屏作为辅助设备，帮助其他设备显示/播放

手表

特点	优势	劣势	适合协同的场景	与其他设备的关系
随身屏幕小触控生理数据检测私人设备	随时可用及时的消息通知适合简单操控生理数据检测安全认证能力	不适合复杂交互不适合复杂内容	播放控制家居控制运动健康进行中任务状态查看	作为辅助设备，帮助其他设备简单交互

设计举例

场景：用户在家中进行运动课程训练。

通常情况下用户的操作过程如下：

1. 在手机上打开运动健康应用。
2. 选择要进行的运动课程。
3. 把手机放在前方桌子上跟着应用的视频进行训练。

当把多设备考虑进来之后，可以按照如下步骤来考虑多端协同设计：

1. 列出周边可能可用的设备：家中有智慧屏，用户手上带着手表。

2. 列出此场景下应用需要的能力：视频课程播放需要用到设备的显示能力。

3. 列出需要的能力有优势的周边设备：智慧屏的屏幕显示更大。

4. 选择合适的协同模式：适合采用显示协同的“显示和功能分离模式”（视频在智慧屏上播放，手机显示控制界面）

5. 考虑可用设备其他的优势是否可以带来增值体验

   ：

   1. 智慧屏的摄像能力可以帮助拍摄用户运动的状态，方便用户更好的调整运动姿态。
   2. 手表的生理数据检测能力可以帮助检测心率等生理状态，方便应用提供更精准的训练建议。
   3. 手表的随身特性可以让用户更方便的控制训练视频的播放。

6. 整合协同模式，检验整体操作流程。

多端协同交互定义

协同入口

多端协同入口有两种类型，不同入口对应的操作略有差异：

• 智能推荐

• 手动协同

智能推荐

系统根据场景和可用设备，主动推荐最适合的设备进行协同。

原则

• 不干扰当前操作。

• 方便操作，提升效率。

• 符合用户场景。

推荐气泡

当检测到用户周围有更合适的设备时，当前设备上会出现推荐气泡，用户点击推荐气泡可以进行多端协同。

例如当用户使用手机玩游戏时，系统监测到周边有智慧屏，为了提供更沉浸的游戏体验，系统会推荐用户将游戏协同到智慧屏上，而手机则作为遥控器进行游戏操控。

手动协同

提供应用内协同的入口，用户手动选择合适的设备进行协同。

原则

• 符合场景

• 明确表达含义

流转图标

一般情况下，多端协同使用流转图标作为手动发起的入口。

我们提供了多种图标颜色以适应不同的界面背景，并提供了在界面中如何放置流转图标的建议，详见服务流转规范。

点击流转图标后，会拉起系统提供的流转面板进行设备的选择。在流转面板中，开发者需要提供图标、名称及标题。

业务图标

当应用跨设备的场景是应用当前功能的必要特性时采用业务图标入口，点击后显示设备选择列表。例如，K歌应用定义了多个手机作为麦克风唱歌的功能，命名为合唱，点击合唱图标可以进入选择其他手机麦克风的界面，添加其他设备的麦克风后可以为用户提供多手机合唱K歌的体验。

在使用业务图标的场景，点击业务图标后，应用需要显示设备选择列表进行设备的选择。

协同控制

设备切换

多端协同中时，流转图标为点亮状态，再次点击图标，打开设备流转面板，可通过流转面板控制协同到其他设备。

退出协同

在打开流转面板时，也可以通过点击“结束流转”按钮或者再次点击正在流转的设备以结束迁移，把任务拉回到原设备上。

设计自检表

设计自检表详细列举出了在分布式设计和开发过程中应当注意的用户体验要素，提交审核前请再次检查各项是否符合要求，这将帮助应用减少用户舆情且提升用户体验的一致性。

自检表的要求范围分为“必选”与“推荐”两类。必选类一般为已总结出的较优解决方案或效果，表示相关设计需要按照此原则统一执行；推荐类指可能受应用品牌风格或业务特殊性影响，可适量做出修改。

请参考以下表格范围内提出的要求对应用进行检查。

类型	条目	说明	要求
整体体验	体验增值	跨设备交互要能提供明显的体验提升，例如更好的感官体验、更好的交互效率等。	必选
无缝流畅	从一个设备切换到另一个设备的过程是流畅的，设备与设备的协同是无缝的，就像是在使用一个设备一样。	必选
清晰明确	跨设备交互的指引要清晰明确，可以帮助用户快速了解和学习跨设备交互的使用。	必选
易于理解	跨设备交互应该是易于理解和记忆的，方便用户长期持续地使用。	必选
用户可控	在跨设备交互时，用户要能够随时切换到其他设备或其他可用的跨设备交互模式。	必选
沉浸无干扰	考虑根据设备的属性在不同设备上分配信息，最大化提供沉浸无干扰的体验。	推荐
基础要求	字号	跨设备的界面字体大小要符合对应设备设计指南的字体大小要求，保证界面内容的可读性。	必选
颜色	跨设备的色彩定义要符合对应设备设计指南的色彩定义要求，保证用户有效的信息获取。	必选
图标	跨设备的图标要清晰表达功能含义，不产生误解。	必选
图片	跨设备的图片和视频要保证显示的比例和质量，不出现变形、模糊等问题。	必选
布局	跨设备的界面要根据对应设备进行响应式布局，有效利用屏幕空间。	必选
交互	跨设备的交互要符合对应设备的交互定义，保持用户的交互习惯。	必选

原子化服务设计

概述

在万物互联时代，人均持有设备量不断攀升，设备和场景的多样性，使服务开发变得更加复杂、服务入口更加丰富。在此趋势下，应用提供方和用户迫切需要一种新的服务提供方式，使应用开发更简单、服务的获取和使用更便捷。为此，HarmonyOS 提供了基于原子化服务和应用的便捷服务。

原子化服务是 HarmonyOS 提供的一种面向未来的服务提供方式，是有独立入口的（用户可通过点击、碰一碰、扫一扫等方式直接触发）、免安装的（无需显式安装，由系统程序框架后台安装后即可使用）、可为用户提供一个或多个便捷服务的用户程序形态。原子化服务基于 HarmonyOS API 开发，支持运行在 1+8+N 设备上，供用户在合适的场景、合适的设备上便捷使用。

原子化服务具有随处可及、服务免安装直达、分布式流转等特性。日常生活中，用户可以通过扫描 HarmonyOS Connect 标签、“碰一碰”设备来快速启动原子化服务，也可以在设备的服务中心和桌面上轻松找到他。

原子化服务具有如下基本要素，必须设计和开发：

• 基础信息

• 服务卡片

原子化服务支持如下体验特性，可以融入到产品的设计开发中，拓宽分布式能力场景，打造差异化用户体验：

• 多种入口

• 服务流转

• 服务分享

• 设备控制

基本要素

基础信息

每个原子化服务有独立的图标、名称、描述、快照。基础信息将根据场景在服务中心、系统设置等界面展示。

了解服务基础信息详情

服务卡片

为了给用户提供便捷、智能的服务体验，每个原子化服务都需要开发至少一个服务卡片，每个应用可选配置服务卡片。卡片作为服务的轻量承载，需要做到易用可见、智能可选和多端可变。

了解服务卡片详情

体验特性

多种入口

在 HarmonyOS Connect标签的支持下，原子化服务可以通过线上和线下发现。用户也可以在设备的服务中心、桌面等界面发现并管理原子化服务。

了解 HarmonyOS Connect标签详情

服务流转

在 HarmonyOS 中泛指涉及多端的分布式操作。流转能力打破设备界限，多设备联动，使原子化服务可分可合、可流转，实现如邮件跨设备编辑、多设备协同健身、多屏游戏等分布式业务。

了解服务流转详情

服务分享

原子化服务支持通过面对面或网络途径分享给其他用户，如 Huawei Share、畅连分享，结合免安装和流转特性，能让接受分享的用户立即打开并协同使用原子化服务。

了解服务分享详情

设备控制

HarmonyOS 尽力为用户打造简单易用、自然流畅的设备控制功能。用户可通过手机便捷地连接和控制 HarmonyOS 设备，用手机“碰一碰” HarmonyOS 设备的 NFC 标签，识别后手机将运行对应的原子化服务。

了解设备控制详情

基础信息

每个原子化服务有独立的图标、名称、描述、快照。基础信息应能够准确反映服务提供方的特征及服务的核心体验，并与其他关联的应用和服务保持同步最新。

原子化服务信息将展示在服务中心、搜索等界面。

图标

原子化服务图标与应用图标有明显区别，它继承了 HarmonyOS 的设计语言体系，内部圆形表示完整独立，外圈装饰线表示可分可合可流转的特点。

原子化服务图标必须在华为提供的标准图标底板上设计。

1. 图标主体内容可沿用应用图标，或根据服务特征专门设计。
2. 图标主体内容应保持在圆形区域内。
3. 外圈装饰线可根据主体内容或品牌色填充：单色、双色、渐变色。

以下是图标绘制样例

名称

原子化服务名称应精确表示服务内容，不宜过长。名称中应体现品牌或服务提供方以便用户区分，可在名称中的不同位置出现，符合阅读习惯。

如“华为商城购物车”、“最新信息”、“我的畅连联系人”。

描述

原子化服务描述应简要而准确地说明服务的功能，做到用户一眼可知。不允许出现广告运营或为应用引流的暗示信息。

快照

快照为与原子化服务关联的小尺寸服务卡片的截图。截图应为理想的服务状态，让用户一眼可知服务内容。需提供直角图片，由展示快照的应用进行圆角裁切。

1. 快照分辨率必须为 600*600 ，对应小尺寸服务卡片设计
2. 由展示界面适配圆角

服务卡片

关于卡片

服务卡片介绍

将原子化服务/应用的重要信息以卡片的形式展示在桌面，用户可通过快捷手势使用卡片，通过轻量交互行为实现服务直达、减少层级跳转的目的。

服务卡片的核心理念在于提供用户容易使用且一目了然的信息内容，将智慧化能力融入到服务卡片的体验中供用户选择使用，同时满足在不同终端设备上的展示和自适应。

服务卡片的构成

服务卡片的显示主要由内容主体、归属的 App 名称构成，在临时态下会出现Pin钮的操作特征，点击按钮用户可快捷将卡片固定在桌面显示。开发者应该借助卡片内容和卡片名称清晰地向用户传递所要提供的服务信息。

服务卡片在桌面或者服务中心显示的名称为应用名称，不可更改此名称的展示规则。

服务卡片尺寸

服务卡片支持多种卡片尺寸：微、小、中、大。卡片展示的尺寸大小分别对应桌面不同的宫格数量，微卡片对应 12 宫格，小卡片对应 22 宫格，中卡片对应 24 宫格，大卡片对应 44 宫格。

卡片尺寸	对应宫格数
微卡片	1*2 宫格
小卡片	2*2 宫格
中卡片	2*4 宫格
大卡片	4*4 宫格

同一个应用还支持多种不同类型的服务卡片，不同尺寸与类型可以通过卡片管理界面进行切换和选择。

上滑应用图标展示的默认卡片的尺寸由开发者指定。

交互设计

如何使用卡片

服务卡片在桌面上有临时和常驻两种状态。临时态卡片以轻量、便捷的方式向用户展示服务内容，即用即走的操作体验能保证不破坏现有桌面使用习惯，实现服务直达的目的，而常驻态又能满足用户对服务内容的持续关注。

• 临时显示：上滑桌面应用图标快捷展示当前应用的服务卡片，点击卡片以外的区域能收起卡片返回桌面。

• 常驻显示：点击临时态卡片 Pin 的图标可将卡片固定到桌面上常驻显示，用户还可以通过拖动服务卡片到桌面常驻展示。

服务卡片管理

长按卡片后会显示“更多服务卡片”菜单，点击即可进入更多服务卡片界面。用户通过此界面可选择不同尺寸和服务内容的卡片，也可以长按拖动卡片到桌面上。

服务卡片基础交互规则

前后呼应：卡片内支持多热区，跳转到与之对应的内容界面。简单交互：不要在卡片内设计左右、上下滑动的操作。避免冲突：在桌面长按卡片可拖动或管理卡片，因此卡片内不支持长按和拖动操作；由于卡片右上角被 Pin 钮占用，因此请不要再右上角 30*30vp 的区域内放置可操作组件或热区。

服务卡片热区定义

开发者需要保证可操作热区与界面内容的交互逻辑一致，否则可能影响用户对服务卡片可操作内容的判断。

卡片跳转规则

服务卡片点击可进行界面跳转，跳转至对应原子化服务或应用内界面；当用户进入到原子化服务或应用界面时，返回到桌面，再此对卡片进行点击时，仍然会到对应原子化服务或应用界面，而不是上次停留的界面；从服务界面返回到桌面时，服务界面应该先回到当前卡片的位置，而不是应用图标的位置，遵循从哪来到哪去的基本原则；不要在卡片内通过点击或其他操作后出现弹窗、半模态等其他操作界面，卡片是拉起服务的主要入口，避免不一致的交互行为；

内容设计

体验原则

• 突出卡片的服务内容，而非全是跳转入口克制的使用按钮这类操作控件，若一个卡片仅有一组信息内容，则点击卡片进入服务界面即可。使用按钮会给用户一种暗示，并吸引用户去点击。另外，卡片仍然是以展示服务信息为主，过多的使用按钮和操作块会使卡片看起来更像是一个快捷指令面板。

• 明确划分有限的操作空间卡片的使用空间非常有限，请合理的排布文本、图片和按钮之间的关系。用户不会对一张卡片浏览太久，因此展示过于密集的信息可能会影响阅读体验，但可以使用较大尺寸的卡片来展示必要信息。如果在卡片内使用了按钮控件，请考虑用户操作热区以及误操作的可能性。此外，请不要在卡片内使用滑动、拖拽和长按等交互手势，避免与系统交互产生冲突。

• 展示必要的信息和图片在小尺寸的卡片内，展示一到两个信息点即可，即使用户切换到更大尺寸的卡片，也不要提供过于分散的入口操作。所有信息都请务必关联到应用的业务能力，不要提供不相关的运营内容、广告或流量入口。设计一个整洁的卡片界面，不要为了吸引眼球而使用刺眼的颜色。

• 轻量交互原则简化用户可感知的行为，在卡片内请勿定义复杂的交互和使用场景，通过点击直达服务界面即可。切勿在卡片内执行流程型工作，例如通过点击按钮出现二级弹窗后再执行下一步操作，或在卡片内使用长按或多指操作。

卡片选择与编辑

每个应用可以配置多个服务卡片，开发者可根据业务需要来设计不同的卡片。同时，每个卡片也支持多种尺寸选择，可根据展示信息的多少来匹配适合的尺寸，小尺寸卡片为必开发选项。此外服务卡片支持多实例选择，例如：用户手动添加了当地天气的服务卡片，可以通过对单个服务卡片的重复添加来实现多个实例。卡片编辑可以通过配置文件来完成，详情可查看开发指导中对卡片编辑部分的描述。

内容设计

开发者可以定义每一张服务卡片的功能，通常来说，卡片尺寸越小对应展示的功能和信息就越少，所能使用的控件也会受限制。请根据核心诉求进行卡片设计，聚焦在关键信息的展示上。

卡片内容定义

在设计服务卡片时，用于展示的设计元素有明确分类，开发者可以使用以下元素来组织一张新卡片。

不同尺寸的卡片都有使用元素的上限，不要在卡片中放入过多纬度的信息，内容过于复杂会使用户的关注度不够聚焦。

如下列表所示，在微卡片尺寸下，无论是相同还是不同的元素，使用的数量都请不要超过 2 种。

微卡片 (2种元素)	小卡片 (3种元素)	中卡片 (3种元素)	大卡片 (4种元素)
图标	图标	图标	图标
数据	数据	数据	数据
文本	文本	文本	文本
按钮	按钮	按钮	按钮
图片	图片	图片	图片
/	/	宫格	宫格
/	/	列表	列表

如下图示例，卡片应当清晰的展示内容、布局以及业务逻辑，确保不同设计元素之间互不干扰。开发者可以尝试不同布局类型，熟练使用设计技巧对卡片进行布局，以此来满足用户对卡片的个性化需求。

微卡片展示例

内容由最多 2 种元素构成

小卡片展示例

内容由最多 3 种元素构成

中卡片展示例

内容由 3 种元素构成

大卡片展示例

内容由 4 种元素构成

合理融入品牌特征

适当的将应用品牌色或特征图形融入到卡片中，从而让卡片内容更加丰富。在服务卡片设计过程中，为了方便凸显应用的品牌形象，可以选择在卡片左上角露出应用图标。通用图标的尺寸为 20*20vp 的圆形图标，或可以选择使用其他的异形图标作为点缀。因为在卡片系统会默认展示应用名称，因此不需要再重复展示，若需要添加其他文本信息，请使用 14fp 的文本大小。

定义卡片的刷新机制

服务卡片提供自动刷新机制，开发者可以定义卡片自动刷新时间和频率，让用户时刻享受最新的服务内容，有规律的内容变更也更符合用户的心里预期。但频繁的内容刷新并不能带来显著的流量增益，甚至会引起用户对信息真实性的质疑以及使用体验。因此，开发者可以根据业务属性对时间的依赖性进行配置，例如消费类卡片，根据就餐时间刷新卡片内容。让卡片的内容刷新更贴近用户使用的自然规律。

卡片刷新时间的频率以 30 分钟为基础，开发者可根据业务性质向上叠加时间长度。例如，影音娱乐类的卡片没有在后台运行时，用户可以每隔 2 小时获取到最新的数据信息。

HarmonyOS 生态面向七大类业务对应用进行归类，按照七大类维度我们定义了不同的刷新时间机制：

• 家庭生活相关由于用户关注度较高，且跟个人信息相关，平台规定默认刷新时间在 30 分钟以上

• 出行与办公类应用属于低运营属性，通常情况下由用户主动触发功能，因此规定默认刷新时间在 1 小时以上

• 娱乐休闲类大多有固定更新时间，用户单次消耗时间长但频率较低，因此规定刷新时间为 2 小时以上

视觉风格

布局

服务卡片以展示信息内容为主，传递“弱交互、强服务”的设计理念，为用户提供一步准确直达的使用场景和体验。

尺寸与基础参数

服务卡片按照桌面宫格布局，以手机 4x6 宫格为基础分为 4 种尺寸。在修改手机桌面宫格布局后，微卡片和小卡片仍然按照桌面布局显示，中卡片和大卡片按照宫格最大宽度拉伸。因此在设计时需要考虑到卡片内容的尺寸适配。

服务卡片使用 HamronyOS 通用界面单位进行开发，在 Java UI 中可以使用虚拟像素（virtual pixels, vp）进行开发，详细规格可参考通用设计规范的介绍。在 Js UI 中由于可以设置 Auto Design 属性，像素（Pixel）与虚拟像素（virtual pixels, vp）具有同等概念，可以不做区分。

尺寸分类

微卡片（1*2 宫格）	小卡片（2*2 宫格）	中卡片（2*4 宫格）	大卡片（4*4 宫格）
150x54vp	150x150vp	316x150vp	316x344vp

服务卡片内请保留四周各 12vp 的安全间距，服务卡片内容尽可能保证在安全范围内，在圆角剪裁时避免对内容造成影响。

卡片圆角

在交付服务卡片时请保证背景是直角矩形，服务卡片的宿主会提供对应的圆角剪裁，保证在不同设备上服务卡片圆角效果一致。

设计师在进行设计时如果需要保证最终最终效果，可以在设计工具里使用 16vp 圆角预览效果，交付时确保直角即可。

	参数	场景
RadiusXS	4vp	通用超小圆角
RadiusS	8vp	通用小圆角
RadiusM	12vp	通用中圆角
RadiusL	16fp	卡片外轮廓默认圆角

提供预览效果

为了满足用户的合理预期，请考虑在网络连接不畅的情况下提供一个预览样式，昂用户了解卡片即将展示的内容。可以提供占位文字或几何图形来代替未能显示的内容，保证占位图或符号与展示卡片在视觉风格上效果统一。

色彩

卡片默认背景色

• 服务卡片的背景色尽可能保持干净整洁，不使用过度激烈的颜色，避免引起用户的视觉疲劳。

• 如果需要体现品牌色特征，请控制在合理范围内，保证用户阅读性和心理感受。

• 系统在浅色模式下默认使用白色，当用户修改系统主题为深色模式时，对应的卡片需要适配深色模式的色彩，卡片默认背景色建议使用系统推荐的#2E3033.

• 除此之外为了提升卡片整体的设计感，也可使用透明度的毛玻璃效果作为卡片背景，如使用此效果需要调用系统的模糊能力。

默认文本色

服务卡片内的多彩色参照 HarmonyOS 的色彩标准，可用于高亮文本和图标予以提示作用，突出卡片核心信息。

多彩色的饱和度较高，请不要过度使用，例如将多彩色直接用于整张卡片的背景或整段文字。

卡片多彩色

服务卡片内的多彩色参照 HarmonyOS 的色彩标准，可用于高亮文本和图标予以提示作用，突出卡片核心信息。多彩色的饱和度较高，请不要过度使用，例如将多彩色直接用于整张卡片的背景或整段文字。

深色模式

卡片背景若不实用模糊效果，在浅色模式下默认使用背景色#FFFFFF，深色模式下默认使用#2E3033。

场景1

局部元素使用透明度为 0% 的 png 资源，保证深色模式下不会渗出底色。

文本对应系统色板，使用分层参数匹配色彩值。

图片本身不处理深色模式，不用搭配多套资源。

场景2

多彩色的使用对应系统参数。若使用品牌色调，请按照业务自身的VI色彩处理深色模式。

卡片模糊

卡片模糊效果能够提升整体的设计质量，使卡片更好的与用户设备融为一体。使用卡片模糊时具体参数请与系统保持一致，为用户创造感官一致的体验。具体实现方式可参考开发者文档：卡片模糊调用方式。

设备支持模糊场景时

卡片背景若使用模糊效果也请适配深色模式，具体实现请调用系统的模糊能力，按照系统定义的卡片背景不透明度参数进行设计。

设备不支持模糊场景时

当卡片识别到设备或场景不支持模糊效果时，卡片背景色更改为无透明度的颜色参数。

字体

服务卡片定义了多种文本尺寸，这足以保证内容信息在界面中可以被明确区分且易于识别。

请参考默认文本色章节对于文本颜色的定义，将文本区域用于展示有必要的内容信息。此外，合理运用不同字重在卡片内的关系，帮助用户在阅读相对复杂的信息卡片时能够及时做出筛选。

字体使用最小 10fp，主要用在数据刻度或提示性文字，不能作为主要信息展示。

	参数	场景
Headline 5	38fp	数据、数字、字母缩写
Headline 6	30fp	数据、数字、字母缩写
Headline 8	20fp	较大标题
Subtitle 2	16fp	标题、主要内容
Body 2	14fp	小标题、正文、描述文本
Body 3	12fp	正文、描述文本
Caption	10fp	提示性文本、数据刻度

折叠屏、平板设备服务卡片适配

多设备卡片适配原则

为不同尺寸的卡片提供不同的功能

在卡片开发过程中请考虑适配不同尺寸的设备，特别是在折叠屏和平板设备上，设备屏幕尺寸的变化直接影响了卡片内容的展示。请发挥想象力设计具有自适应能力的卡片，避免在卡片内容不做任何处理的情况下直接适配成较大尺寸，原则上卡片尺寸越大呈现的信息要越丰富，可交互的范围也越大。

使用百分比方式配合标注

由于设备尺寸的不确定性会导致卡片的尺寸发生变化，设计师在交付卡片布局的过程中，可以使用百分比进行标注。例如标准尺寸的卡片宽度为 150vp，按钮距离卡片边缘间距为 24vp 时，当卡片宽度扩展时仍然使用相同的间距可能效果并不美观，我们可以换算出卡片的间距在标准尺寸下占整体比例的 16%，这样当卡片尺寸扩展到 200vp 时，卡片边距也就变成了 32vp，以此类推，能够保证一定程度下的适配效果。

卡片对应宫格比例对照表

服务卡片参照桌面宫格布局为基准参照物，通过换算对应宫格来实现在不同设备的桌面适配。为了减少卡片尺寸的变化规律，当手机从 46 布局切换至 56 布局时，需保证中卡片和大卡片的最大宽度不变化。在平板的桌面 2N 和 4N 对应的桌面宫格对应更换为 23 和 33。

*N为最大横向宫格数

手机	折叠屏	平板
1*2	1*2	1*2
2*2	2*2	2*2
2*N	2*N	2*3
4*N	4*N	3*3

多端适配尺寸

服务卡片需要适配除手机以外的折叠屏及平板等设备，可以在此处下载对应 Library 文件，文件内包含对应的桌面宫格和详细尺寸描述。

标准设计尺寸如下（单位：vp）：

设备	微卡片（1*2 宫格）	小卡片（2*2 宫格）	中卡片（2*4 宫格）	大卡片（4*4 宫格）
手机	150x54	150x150	316x150	316x344

因设备差异可能导致的尺寸变形如下（单位：vp）：

设备	微卡片（1*2 宫格）	小卡片（2*2 宫格）	中卡片（2*4 宫格）	大卡片（4*4 宫格）
	最小尺寸	最大尺寸	最小尺寸	最大尺寸	最小尺寸	最大尺寸	最小尺寸	最大尺寸
手机	132x54	150x54	132x158	150x160	316x150	344x175	316x344	344x402
折叠屏	192x58	206x58	192x162	206x150	564x162	622x150	564x360	622x340
平板	186x64	222x64	186x228	222x186	294x236	360x186	294x408	360x304

通用布局模板

在IDE工具中针对手机、折叠屏和平板的业务场景给出若干通用模板布局，开发者可以参考设计。

其他设备卡片规范

智慧屏

基本定义

• 智慧屏操作系统主要通过遥控器进行交互，因此在卡片设计上要避免交互行为的冲突，以整张卡片为焦点内容进行操作。

• 在卡片内不要进行热区划分，也不要对卡片进行过多功能的定义，智慧屏服务卡片仅作为信息数据外露的展示和服务界面的入口。

• 遥控器“上下左右”键：切换不同的富信息卡片。

• 遥控器 “OK” 键：点击后进入对应的服务卡片内容。

基础参数定义

尺寸分类

微卡片	小卡片	中卡片	大卡片
/	198 x 198 vp	/	/

卡片构成及注意事项

智慧屏的卡片主要由文本信息和内容区组成，内容区主要展示卡片数据，文本信息则为辅助展示。卡片内主要展示图文信息为主，由于交互特殊性，不要再卡片内设计按钮、可滑动列表、开关等操作指令。具体的视觉参照智慧屏的通用设计规范，斟酌对文字尺寸和颜色的使用，并保留固定的安全间距。注意事项不要使用带有透明度的背景色，会使卡片再获焦状态下看起来非常怪异。由于卡片宿主会展示对应的来源应用名称，因此不要在卡片内重复出现应用图标和应用名称。

字体

智慧屏作为远场交互设备，通用字体与手机版本基本保持一致，使用系统默认字体。

但在最小字体的使用上略有区别，智慧屏服务卡片的最小文本为 12fp，避免在远场文本的易阅读性。

	参数	场景
Headline 5	38fp	数据、数字、字母缩写
Headline 6	30fp	数据、数字、字母缩写
Headline 8	20fp	较大标题
Subtitle 2	16fp	标题、主要内容
Body 2	14fp	小标题、正文、描述文本
Body 3	12fp	正文、描述文本

通用模板

在 IDE 工具中针对智慧屏的业务场景给出了若干通用模板布局，设计师可参考设计。

穿戴卡片规范

基本定义

• 穿戴设备的服务卡片与 Launcher 保持平级架构，通过左右滑动表盘来切换不同的服务内容。

• 向右滑倒最后一张卡片时，用户可点击按钮进入全部服务卡片界面，选择自己心仪的服务内容。

交互规则

服务卡片不支持上下滑动切换更多，因此在设计时因可能控制信息内容在一屏。服务内容需要明确引导用户，每一级非空界面需要通过标题明确告知用户当前所处的应用或层级。卡片内支持多热区操作，考虑设备使用场景，不要在表盘内设计复杂的功能布局，基础规则可参照穿戴设计规范。

基础参数定义

穿戴设备由于硬件屏幕的限制，呈现界面为圆形，因此在开发服务卡片时应当考虑这一特殊因素，将主要信息内容集中在圆形尺寸内，防止卡片内容被裁剪。

尺寸分类

微卡片	小卡片	中卡片	大卡片
/	233 x 233 vp	/	/

字体

通用文本请使用系统默认字体。

根据不同的场景使用相应的字号，重要信息文本优先使用18fp以上的字号，确保信息的易读性

	参数	场景
Headline 4	40fp	数据
Headline 5	30fp	数据
Headline 6	24fp	数据、提醒文本
Headline 7	19fp	页面顶部标题
Body 1	19fp	列表正文、段落标题
Body 2	18fp	段落文本
Body 3	16fp	列表辅助文本、段落文本
Button 2	16fp	文本按钮
Caption	13fp	小辅助文本

通用模板

在IDE工具中针对穿戴的业务场景给出了若干通用模板布局，开发者可参考设计。

设计自检表

设计自检表详细列举出了在全场景设备设计和开发过程中应当注意的设计规则，提交审核前请再次检查各项是否符合规则要求，这将帮助服务减少用户舆情且提升用户体验的一致性。 自检表的要求范围分为“必选”与“推荐”两类。必选类一般为已总结出的较优解决方案或效果，表示相关设计需要按照此原则统一执行；推荐类指可能受服务品牌风格或业务特殊性影响，可适量做出修改。 请参考以下表格范围内提出的要求对服务进行检查。

类型	条目	说明	要求
卡片选择	选择尺寸	必须给支持免安装的 HarmonyOS 服务设计小尺寸（2*2）的服务卡片	必选
功能定义	根据卡片尺寸的不同，提供对应的功能。避免将小尺寸的卡片内容在不做任何处理的情况下适配成较大尺寸，建议尺寸越大呈现的信息、内容成分要越丰富，可交互的范围也越大。	推荐
自适应能力	多端适配	服务卡片必须具备一定的自适应能力，确保在卡片尺寸发生变化时，也能够使内容展示效果不受影响。极端情况可考虑使用原子布局能力进行布局，保证服务卡片具有更高能力的自适应性。	必选
刷新机制	服务刷新	根据业务属性，定义不同的刷新机制。确保卡片内容是动态的，用户可以时刻观察到卡片的变化，避免一成不变的展示同样的内容。服务卡片的被动刷新不允许少于30分钟。	必选
功能定义	热区规避	不要在卡片右上角区域增加热区。为了保证卡片在任何状态下的交互体验，卡片设计需要最大限度的考虑内容和热区的呈现范围。在某些特定的卡片呈现场景下，可能出现右上角区域热区被占用的情况，因此，请参阅卡片服务卡片基础交互规则和内容设计原则，保证卡片内容与系统能力不冲突。	必选
提供服务相关信息	不要滥用卡片资源，展示对用户有用的信息和图片。所有信息都请务必关联到应用的业务能力，不能提供不相关的运营内容、广告或流量入口。	必选
确保卡片功能	确保卡片是可操作的。服务卡片的使用空间非常有限，请合理的排布卡片内容之间的关系。不能在卡片内使用滑动、拖拽和长按等交互手势，导致与系统层级交互产生冲突。	必选
视觉规范	字体使用	严格遵守卡片内字体大小的使用，不要使用小于 10fp 的字体大小，确保用户对内容的阅读性。	必选
安全间距	确保卡片四周有足够的安全间距，保证在不同场景下内容不被截断，详细规则请参考视觉设计规范中对于安全间距的定义。	必选
提供直角卡片	不能自定义卡片背景的圆角。卡片的圆角剪裁会由宿主提供，即呈现卡片的业务主体，因此在卡片开发时必须提供直角矩形卡片。	必选
深色主题	必须支持深色主题。纯白色卡片需要支持深色主题的切换，以图片或多彩色为默认背景时可不适配深色主题。若应用给卡片配置了特殊的背景图片，请检视文字或操作按钮的显示效果，需要保证元素在复杂图片上的视觉效果。彩色的文本与图标需要确保在深色和浅色主题上的饱和度，便于用户识别。	必选
品牌特征	合理融入品牌特征。适当的将应用品牌色或特征融入到卡片中，从而让卡片更具特色。避免在卡片中出现 HarmonyOS 服务或应用的名称，名称会在桌面上展示在卡片底部，请将醒目的标题区域留给服务内容。	推荐
避免异形卡片	避免异形卡片的出现。设计师需要根据设计规范对卡片内容进行定义，不能使用纯透明背景或不规则的背景图案，在已规定好的范围内进行个性化的创作。卡片的核心内容依然是突出服务与信息，不要让夸张的设计过于喧兵夺主。	必选
提供卡片默认态	建议在网络连接不畅的情况下，提供卡片内容的预览样式，给予用户一个合理的预期，了解卡片即将展示的内容。可以提供占位文字或几何图案来代替未能及时显示的内容，保证占位图或符号与展示卡片的一致性。	推荐

服务流转

流转概述

服务流转是 HarmonyOS 的分布式操作方式。流转能力打破设备界限，多设备联动，使原子化服务可分可合、可流转，实现如邮件跨设备编辑、多设备协同健身、多屏游戏等分布式业务。

开发者通过嵌入流转图标，可以便捷地将服务流转到不同 HarmonyOS 设备，包括但不限于智慧屏、平板、手表、音箱等设备，也可灵活地切换和管理流转任务。流转实现多设备的协同联动，为开发者提供更广的使用场景和更新的产品视角，强化产品优势，实现体验升级，打造 HarmonyOS 超级终端服务体验。

开发者可以将流转功能融入到产品的设计中，打造有竞争力的分布式场景。例如：

1. 当用户在玩游戏时，手机作为手柄与智慧屏配合玩游戏。
2. 当用户使用教育类课程服务时，智慧屏可以播放老师的授课视频，用户可以在平板上进行答题和老师互动。
3. 当用户在直播购物时，智慧屏上可以播放主播的商品讲解，同时用户可以在手机上同步查看商品详情并进行下单。
4. 当用户在会议室进行项目汇报时，通过智慧屏展示文档的同时，可以利用手机进行文档翻页和批注。

通用流程

流转的流程包括流转触发、流转连接和流转结束三个阶段。在每个阶段用户都会接触到不同的控件以推动流程的进行。

流转到我的设备

HarmonyOS 致力于打造无缝的超级终端体验。服务在已授权设备之间流转，无需鉴权，一键直达。

流转到更多设备

为提供更广泛的使用场景和更便利的使用体验，HarmonyOS 也同样支持将服务流转到其他未授权设备上。流转到其他设备需要对端设备确认后方可流转。

流转流程

流转触发

根据触发方式的不同可分为系统推荐流转和用户手动流转。

系统推荐流转

当用户使用原子化服务时，所处环境中存在更优的可信设备，系统则自动为用户推荐设备，用户可确认是否启动流转，使服务智能无缝地流转到对应设备上运行。

例如当用户使用手机进行导航时，同时系统监测到用户正在佩戴智能表，为了提供更便捷的导航体验，系统会推荐用户将导航任务流转到智能表上进行。

用户手动流转

开发者也可在原子化服务中内嵌规范的流转图标，使用户可以手动选择合适的设备进行流转。用户点击图标后，会调起系统提供的流转面板。面板中会展示出原子化服务的信息及可流转的设备，引导用户进行后续的连接操作。

流转连接

流转到我的设备

HarmonyOS 致力于打造无缝流畅的流转体验。用户可以通过推荐气泡或者流转图标发起在我的设备（指已授权的 HarmonyOS 设备）间的服务流转。

推荐气泡发起

当检测到用户周围有更优的可流转设备（指已授权的 HarmonyOS 设备），屏幕上即会出现推荐气泡，用户点击推荐气泡完成服务的一键流转。

流转图标发起

用户也可自行点击服务内的流转图标，调起流转面板选择要流转的设备进行流转。

流转到更多设备

当用户需要将服务流转到其他未授权设备时，可以通过点击流转图标调出系统提供的流转面板来实现。用户选择要流转的非授权设备，对方设备上首先会显示一张介绍卡片来告知被流转的服务信息。当对方同意后，对方设备屏幕上会显示出多功能码，通过扫描以完成设备认证和服务流转。

流转结束

对于协同类的服务场景，在流转连接完成后，还需要支持服务后续的管理。开发者需要在服务页中内嵌正在流转状态的流转图标，使用户享受顺畅的全流程体验。

当用户需要结束流转任务时，除了直接关闭服务的方式外，也可以通过再次调出流转面板来完成。用户点击图标调出流转面板，点击“结束流转”按钮或者再次点击正在流转的设备以结束流转任务。

服务流转图标

为了保证在不同服务内流转体验的一致性，请使用 HarmonyOS 的流转图标。请不要创造流转图标样式，也不要绘制模仿流转图标。

下载流转图标

图标颜色

我们为您提供了多种图标颜色以适应不同的界面背景。

黑色样式		白色样式		自定义颜色样式
在白色或浅色背景上使用。		在黑色或深色背景上使用。		当与其他图标并排使用时，可以使用自定义颜色，以保持页面一致性

尺寸大小

流转图标为矩形图标，尺寸上请保持与其他业务图标等大，并与其保持安全距离。

交互状态

服务未转时使用默认状态图标，服务正在流转时使用静态或动态蓝色高亮图标。点击流转图标后，会拉起流转面板进行服务发起和结束。

图标位置

根据业务特性及体验继承综合考量，您可将流转图标置于一级界面或二级界面的特定位置中。

一级界面

一级界面中可将流转图标置于界面右上角或者底部工具栏。

请参考一级界面示范样式，不要将图标放在一级界面内非右上角及底部工具栏位置。

二级界面

二级界面中可将流转图标置于由“更多”或“分享”入口拉起的菜单弹出框或者底部弹框。当“更多”及“分享”入口同时存在时，优先选择“分享”入口。

请参考二级界面示范样式，不要将图标置于三级界面以上及不相关入口内。

长视频类服务

针对于已有跨设备业务的长视频类服务，为保证界面精简与认知一致，可以考虑将流转图标与原有业务图标进行融合。例如长视频服务具有投屏业务图标，点击图标后在选择设备的界面中可嵌入流转图标。

设计自检表

设计自检表详细列举出了在全场景设备设计和开发过程中应当注意的设计规则，提交审核前请再次检查各项是否符合规则要求，这将帮助服务减少用户舆情且提升用户体验的一致性。 自检表的要求范围分为“必选”与“推荐”两类。必选类一般为已总结出的较优解决方案或效果，表示相关设计需要按照此原则统一执行；推荐类指可能受服务品牌风格或业务特殊性影响，可适量做出修改。 请参考以下表格范围内提出的要求对服务进行检查。

类型	条目	说明	要求
流转图标	图标颜色	根据界面颜色选用深色、浅色或自定义颜色图标。需保证深浅模式下均清晰可读。	必选
图标尺寸	图标尺寸与其他业务图标保持等大。最小尺寸：16vp，最大尺寸：48vp。与其他业务图标保持安全距离。	必选
交互状态	未流转态使用默认图标，正在流转态使用静态或动态正在流转图标。	必选
图标位置	一级界面区域：1.界面右上角 2.底部工具栏二级界面区域：1.菜单弹出框 2.底部弹框长视频类服务可以将流转图标置于原有跨设备业务图标下一级页面。请勿将图标置于除以上指定位置外的界面位置。	必选
界面用语	请检查是否使用规范的界面用语和异常提示字符。	必选
流转流程	流转信息	请检查是否已配置原子化服务图标、名称、流转内容名称。	必选
流转连接	请务必调用系统提供的流转面板发起流转。	必选
流转结束	请调用系统提供的流转面板结束流转。不要通过自己创造的图标和方式结束流转。	推荐