文档开发者中心
我的

HarmonyOS流转卡片设计规范分享

服务流转是 HarmonyOS 的分布式操作方式。流转能力打破设备界限,多设备联动,使原子化服务可分可合、可流转,实现如邮件跨设备编辑、多设备协同健身、多屏游戏等分布式业务。开发者通过嵌入流转图标,可以便捷地将服务流转到不同 HarmonyOS 设备,包括但不限于智慧屏、平板、手表、音箱等设备,也可灵活地切换和管理流转任务。流转实现多设备的协同联动,为开发者提供更广的使用场景和更新的产品视角,强化产品优势,实现体验升级,打造 HarmonyOS 超级终端服务体验。

%E5%9B%BE%E7%89%877.png

流转的流程包括流转触发、流转连接和流转结束三个阶段。在每个阶段用户都会接触到不同的控件以推动流程的进行。流转到我的设备,HarmonyOS 致力于打造无缝的超级终端体验。服务在已授权设备之间流转,无需鉴权,一键直达。流转到更多设备,为提供更广泛的使用场景和更便利的使用体验,HarmonyOS 也同样支持将服务流转到其他未授权设备上。流转到其他设备需要对端设备确认后方可流转。流转触发,根据触发方式的不同可分为系统推荐流转和用户手动流转。

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

%E5%9B%BE%E7%89%878.png

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

%E5%9B%BE%E7%89%879.png

     流转连接,流转到我的设备,HarmonyOS 致力于打造无缝流畅的流转体验。用户可以通过推荐气泡或者流转图标发起在我的设备(指已授权的 HarmonyOS 设备)间的服务流转。推荐气泡发起,当检测到用户周围有更优的可流转设备(指已授权的 HarmonyOS 设备),屏幕上即会出现推荐气泡,用户点击推荐气泡完成服务的一键流转。流转图标发起,用户也可自行点击服务内的流转图标,调起流转面板选择要流转的设备进行流转。流转到更多设备,当用户需要将服务流转到其他未授权设备时,可以通过点击流转图标调出系统提供的流转面板来实现。用户选择要流转的非授权设备,对方设备上首先会显示一张介绍卡片来告知被流转的服务信息。当对方同意后,对方设备屏幕上会显示出多功能码,通过扫描以完成设备认证和服务流转。%E5%9B%BE%E7%89%8710.png

流转连接控件,开发者在开发流转功能时,也需要关注流转控件的开发:流转面板,点击流转图标后,会拉起系统提供的流转面板进行流转的发起和结束。在流转面板中,开发者需要提供图标、名称及标题。介绍卡片,介绍卡片用于向用户展示服务内容及来源信息,因此开发者在开发流转服务时,需要提供服务的封面图、图标、名称及标题。流转结束,对于协同类的服务场景,在流转连接完成后,还需要支持服务后续的管理。开发者需要在服务页中内嵌正在流转状态的流转图标,使用户享受顺畅的全流程体验。当用户需要结束流转任务时,除了直接关闭服务的方式外,也可以通过再次调出流转面板来完成。用户点击图标调出流转面板,点击“结束流转”按钮或者再次点击正在流转的设备以结束流转任务。

服务流转图标,为了保证在不同服务内流转体验的一致性,请使用 HarmonyOS 的流转图标。请不要创造流转图标样式,也不要绘制模仿流转图标。官方提供了多种图标颜色以适应不同的界面背景。

11.png

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

%E5%9B%BE%E7%89%8711.png

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

%E5%9B%BE%E7%89%8712.png

图标位置,根据业务特性及体验继承综合考量,您可将流转图标置于一级界面或二级界面的特定位置中。一级界面中可将流转图标置于界面右上角或者底部工具栏。

%E5%9B%BE%E7%89%8713.png

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

%E5%9B%BE%E7%89%8714.png

二级界面中可将流转图标置于由“更多”或“分享”入口拉起的菜单弹出框或者底部弹框。当“更多”及“分享”入口同时存在时,优先选择“分享”入口。%E5%9B%BE%E7%89%8715.png

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

%E5%9B%BE%E7%89%8716.png

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

%E5%9B%BE%E7%89%8717.png

界面术语。使用术语:请使用流转到……、支持、使用、启用、兼容等术语。图标与文本:请勿在文本中单独穿插图标。异常提示:异常提示请调用系统控件(即时反馈或弹出框)对用户加以提醒,异常提示字符请使用规范用语。

本文根据HarmonyOS官方文档学习整理分享

attachmenttype
HarmonyOS流转卡片设计规范学习分享.docx
download
点赞
2
收藏
回复
7
分享
举报
浏览663 发布于2021-12-15 06:24未知归属地
全部评论
最多点赞
最新发布
最早发布
很有指导意义的实用分享,赞!
6楼回复于2022-01-10 07:07 未知归属地
不错的文章,受益匪浅。
5楼回复于2021-12-29 12:51 未知归属地

算是教程了吗

1
4楼回复于2021-12-21 02:45 未知归属地
  • 蛟龙腾飞
    规范,也是教程了,这个是我们学习过程摘出来的部分官方文档内容。
    2021-12-21 06:40 未知归属地
码住学习,每天进步!
3楼回复于2021-12-16 08:13 未知归属地
每天都能学到新知识,感恩。
2楼回复于2021-12-15 11:31 未知归属地
温故而知新,基本的东西还是要多熟悉
1楼回复于2021-12-15 08:11 未知归属地
写回答
新增插入模板功能
一键使用模板,快速填写内容,轻松发帖~
知道了
  • 为了保障您的信息安全,请勿上传您的敏感个人信息(如您的密码等信息)和您的敏感资产信息(如关键源代码、签名私钥、调试安装包、业务日志等信息),且您需自行承担由此产生的信息泄露等安全风险。
  • 如您发布的内容为转载内容,请注明内容来源。

我要发帖子

目录 收起
系统推荐流转,当用户使用原子化服务时,所处环境中存在更优的可信设备,系统则自动为用户推荐设备,用户可确认是否启动流转,使服务智能无缝地流转到对应设备上运行。
用户手动流转,开发者也可在原子化服务中内嵌规范的流转图标,使用户可以手动选择合适的设备进行流转。用户点击图标后,会调起系统提供的流转面板。面板中会展示出原子化服务的信息及可流转的设备,引导用户进行后续的连接操作。
流转连接,流转到我的设备,HarmonyOS 致力于打造无缝流畅的流转体验。用户可以通过推荐气泡或者流转图标发起在我的设备(指已授权的 HarmonyOS 设备)间的服务流转。推荐气泡发起,当检测到用户周围有更优的可流转设备(指已授权的 HarmonyOS 设备),屏幕上即会出现推荐气泡,用户点击推荐气泡完成服务的一键流转。流转图标发起,用户也可自行点击服务内的流转图标,调起流转面板选择要流转的设备进行流转。流转到更多设备,当用户需要将服务流转到其他未授权设备时,可以通过点击流转图标调出系统提供的流转面板来实现。用户选择要流转的非授权设备,对方设备上首先会显示一张介绍卡片来告知被流转的服务信息。当对方同意后,对方设备屏幕上会显示出多功能码,通过扫描以完成设备认证和服务流转。
流转连接控件,开发者在开发流转功能时,也需要关注流转控件的开发:流转面板,点击流转图标后,会拉起系统提供的流转面板进行流转的发起和结束。在流转面板中,开发者需要提供图标、名称及标题。介绍卡片,介绍卡片用于向用户展示服务内容及来源信息,因此开发者在开发流转服务时,需要提供服务的封面图、图标、名称及标题。流转结束,对于协同类的服务场景,在流转连接完成后,还需要支持服务后续的管理。开发者需要在服务页中内嵌正在流转状态的流转图标,使用户享受顺畅的全流程体验。当用户需要结束流转任务时,除了直接关闭服务的方式外,也可以通过再次调出流转面板来完成。用户点击图标调出流转面板,点击“结束流转”按钮或者再次点击正在流转的设备以结束流转任务。
服务流转图标,为了保证在不同服务内流转体验的一致性,请使用 HarmonyOS 的流转图标。请不要创造流转图标样式,也不要绘制模仿流转图标。官方提供了多种图标颜色以适应不同的界面背景。
图标位置,根据业务特性及体验继承综合考量,您可将流转图标置于一级界面或二级界面的特定位置中。一级界面中可将流转图标置于界面右上角或者底部工具栏。
长视频类服务,针对于已有跨设备业务的长视频类服务,为保证界面精简与认知一致,可以考虑将流转图标与原有业务图标进行融合。例如长视频服务具有投屏业务图标,点击图标后在选择设备的界面中可嵌入流转图标。
界面术语。使用术语:请使用流转到……、支持、使用、启用、兼容等术语。图标与文本:请勿在文本中单独穿插图标。异常提示:异常提示请调用系统控件(即时反馈或弹出框)对用户加以提醒,异常提示字符请使用规范用语。
元服务
01

HarmonyOS原子化服务开发快速入门教程 (下)

02

HarmonyOS原子化服务开发快速入门教程(中)

03

HarmonyOS原子化服务开发快速入门教程(上)

04

HarmonyOS原子化服务(四)功能创意经验总结

05

HarmonyOS原子化服务(三)服务卡片策划设计经验总结

06

HarmonyOS原子化服务(二)图标与快照设计经验总结

07

HarmonyOS原子化服务(一)名称与描述策划经验总结

08

HarmonyOS原子化服务虎年新春祝福来啦

09

HarmonyOS原子化服务开发—服务卡片接口整理

10

HarmonyOS穿戴卡片设计规范学习分享

11

HarmonyOS分享卡片设计规范学习分享

12

HarmonyOS流转卡片设计规范分享

13

HarmonyOS原子化服务开发实战-地图导航

14

HarmonyOS原子化服务开发实战-卡片刷新图片问题记录

15

HarmonyOS原子化服务开发实战-华为分享

16

原子化服务与服务卡片开发主要知识点与团队分工

17

原子化服务案例实战--卡片策划设计过程分享

18

HarmonyOS原子化服务开发实战-Js更新显示本地图片

19

HarmonyOS原子化服务开发实战-dialog自定义弹窗

20

HarmonyOS原子化服务卡片开发-快照实战说明

21

HarmonyOS服务卡片开发--模版及使用场景汇总

22

HarmonyOS卡片开发-JS/JAVA场景能力简析

23

HarmonyOS服务卡片开发-资源访问学习

24

HarmonyOS服务卡片开发-文件组织与配置学习

25

HarmonyOS服务卡片开发-HML语法学习

26

HarmonyOS服务卡片开发-API接口简析

27

HarmonyOS卡片编辑与背景模糊开发

28

HarmonyOS卡片开发-卡片可选功能开发学习

29

HarmonyOS卡片开发--服务卡片概述

30

HarmonyOS原子服务开发-对于NFC标签的规范

31

HarmonyOS原子化服务卡片模板 Immersive Patterm 体验分享

32

HarmonyOS原子化服务卡片图片颜色体验展示

33

HarmonyOS原子化服务卡片个人名片体验展示

34

HarmonyOS原子化服务Music卡片体验

了解社区公约,与您携手共创和谐专业的开发者社区。