鸿蒙开发实例 | 鸿蒙原子化服务卡片开发完美体验

骑猪看日落 2024-04-01 11:44 80阅读 0赞

![31a91ff74a55846e92e3dfc451c31552.jpeg][]

> HarmonyOS 3.0提供了桌面服务卡片的功能，上滑App的图标可显示一个卡片，展示App的简报信息，也可以与用户进行交互。

## 01、**服务卡片的作用及意义** ##

微软的WP系统最先开创了移动设备卡片设计系统，但是当年受众面依然很窄，WP系统虽然很流畅、用了很多的磁吸卡片设计，但是问题就在于应用太少，而且太依赖卡片带来的交互逻辑，单纯地把图标切换成卡片，而非做成零层交互逻辑。

零层交互逻辑是让用户仅在桌面就能使用App中的部分功能，删繁就简，这种性质的操作没有点击程序，点击下级程序（全新页面），再点击下下级程序（全新页面）等一系列复杂的路径，这就是零层级交互。

很多用户有查看天气的习惯，有时候，我们在乎的是未来一周的天气，但更多时候，我们只在乎24小时内的天气，看天气预报来决定出门需要穿几件衣服，需不需要带雨伞。

如果用传统系统查看天气预报，则需要打开相应的应用或者桌面插件；如果使用服务卡片查看当日天气，则不需要，只需将“天气”这个原子组件固定在桌面，每次查看时拉动时间轴就可以了，不需要二次打开，这也是零层级交互。

HarmonyOS 2.0除了强调零层操作之外，更把生态互联作为主打方向，实现多终端的同步应用，在鸿蒙生态下，可以更好地呈现卡片的效果。

## 02、**什么是服务卡片** ##

服务卡片是 FA 的一种界面展示形式，将 FA 的重要信息或操作直接放置到卡片中，用户通过操作卡片就可以达到应用的使用体验，这样做大大减少了应用的使用层级性。

卡片常用于嵌入到其他应用中作为其界面的一部分显示（也可以使用原子化服务将应用保存到服务中心中，这种方式不需要安装应用），并支持拉起页面、发送消息等基础的交互功能。

服务卡片实际界面如图1所示。

![09948af50c9d543431d5a193912dc71c.png][]

■ 图1 服务卡片实际界面

桌面上混合着服务卡片和应用图标。例如天气服务卡片，展示了多时段天气；运动健康服务卡片，展示了运动步数等重要信息。如果应用图标下方有提示条，则表示该应用嵌有服务卡片，用手指上滑该图标可呼出服务卡片，如图1中的天气、图库、运动健康和备忘录等，均可以上滑图标呼出服务卡片。

## 03、**服务卡片的3个特征** ##

服务卡片有3个特征：易用可见、智能可选和多端可变。

(1) 易用可见：凸显服务信息的内容外露，减少层级跳转。

(2) 智能可选：全天可变的数据信息，支持自定义类型的服务卡片设计。

(3) 多端可变：适配多端设备的自适应属性。

## 04、 **服务卡片设计规范** ##

### 1●数量选择 ###

每个应用均能配置多个服务卡片，但是每个Page Ability配置的服务卡片总数不能超过16个。

例如，一个天气的应用可以制作当地天气、多时段天气、多天天气、穿衣提醒等不同内容的卡片信息，但如果将这些卡片配置在同一个Page Ability上，总数量不可以超过16个。

每个服务卡片可以选择4种服务卡片尺寸。例如，系统为每个应用提供4种尺寸规格，小尺寸的卡片尺寸为必选项。

每个服务卡片被用户使用时可以创建多个实例。例如用户手动添加了当地天气的服务卡片，可以通过对单个服务卡片的重复添加实现多个实例。

### 2●尺寸选择 ###

每个应用在选择服务卡片时，按需选择对应尺寸，保证内容效益最大化。

服务卡片尺寸分为微尺寸（1×2）、小尺寸（ 2×2 ）、中尺寸（ 2×4 ）和大尺寸(4×4) 4种，其中小尺寸为必选尺寸。

同一种尺寸还支持多个不同内容布局的卡片，可以通过服务卡片管理界面进行选择，应用方可以指定某一个服务卡片作为默认展示。

#### （1）微尺寸：微尺寸卡片能提供简单的数据信息、快捷指令和快捷入口。 ####

例如，华为音乐可以提供一个微尺寸卡片，仅展示歌曲名字、歌手名字及歌曲缩略图；运动健康仅展示步数数据，如图2所示。

![42e4ac6a92530bf253eb7370ff1a71ef.png][]

■ 图2 微尺寸服务卡片

#### （2）小尺寸：小尺寸卡片能提供精简的服务信息内容、丰富的展示特性信息、即时信息或操作提示等。例如，相机卡片提供了更多的操作功能，如图3所示。 ####

![e2dbd8b5e6cd002746829fa8fd0f47e1.png][]

■ 图3 小尺寸服务卡片

#### （3）中尺寸和大尺寸：中尺寸和大尺寸卡片能提供两种以上纬度的服务信息展示和多个可交互的热区展示，展示更加沉浸于丰富的视觉图片及采用多个宫格和列表的内容展示。 ####

例如，相机中尺寸服务卡片展示了更多相机操作入口，如图4所示；华为音乐大尺寸服务卡片，上面展示正在播放的音乐，下面展示推荐歌曲列表，如图5所示。

![9e189dc45141478a9342ecca3ed1cb87.png][]

■ 图4 中尺寸服务卡片

![74f599f6af8d5234bd7ca6f65e7aa2e1.png][]

■ 图5 大尺寸服务卡片

### 3● 内容构成 ###

服务卡片由多种设计元素组合而成，以下7种常见信息元素可以作为内容选择：

图标、数据、文本、按钮、图片、宫格和列表。

在组织服务卡片内容的时候可以按照尺寸的大小来判断应当选择哪种元素，包括元素组合的数量。

如图6所示，对于微尺寸卡片，建议卡片上内容元素不超过两种，可以在图标、数据、文本和图片中选择最多两种元素进行组合，以达到内容收益尽可能多且不显得繁杂的效果。

对于小尺寸卡片，建议卡片上的内容不超过3种，可以在图标、数据、文本、按钮和图片中选择最多3种元素进行组合。中尺寸和大尺寸卡片可根据业务需要自由选择。

![e655585f087b439792e9b78a1926ea3c.png][]

■ 图6 卡片尺寸和元素对应关系图

## 05、**服务卡片运行机制** ##

### 1●服务卡片整体框架 ###

服务卡片整体框架主要包含3部分：卡片使用方、卡片管理服务和卡片提供方，如图7所示。

*  **卡片使用方：**显示卡片内容的宿主应用，控制卡片在宿主中展示的位置，如桌面、服务中心和搜索等。
 *  **卡片管理服务：**用于管理系统中所添加卡片的常驻代理服务，包括卡片对象的管理与使用，以及卡片周期性刷新等。
 *  **卡片提供方：**提供卡片显示内容的HarmonyOS应用或原子化服务，控制卡片的显示内容、控件布局及控件单击事件。

![d4ee241511e626de167f57aa869adec4.png][]

■ 图7 服务卡片整体框架

## 06、**服务卡片生命周期回调函数** ##

卡片提供方控制卡片实际显示的内容、控件布局及控件单击事件。应用或原子化服务想要成为一个卡片提供方，需要实现卡片相关的回调函数。

服务卡片关键回调函数如表1所示。

表1 服务卡片关键回调函数

![c13fd7907cfa119e79c0e117cf4ffa1e.png][]

服务卡片生命周期回调函数时序如图8所示。

![4a60d7d9eca94c7419d6e709243adbe8.png][]

■ 图8 服务卡片生命周期回调函数时序图

卡片管理服务不负责卡片应用进程保活，卡片管理服务在相应的时机拉起卡片提供方进程，调用创建、更新、删除卡片等回调。

[31a91ff74a55846e92e3dfc451c31552.jpeg]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/01/1920a08b937240ecbe94c5f1d1b8538c.jpeg
[09948af50c9d543431d5a193912dc71c.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/01/071dd67d971b4f61ab5b3f5ea4135f62.png
[42e4ac6a92530bf253eb7370ff1a71ef.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/01/0ee6e09662a84609a54d2c164fd7bb41.png
[e2dbd8b5e6cd002746829fa8fd0f47e1.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/01/83982aea5c4f483c8a976a5e79f386de.png
[9e189dc45141478a9342ecca3ed1cb87.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/01/81edb15dc2474d1d8f6499e745e886df.png
[74f599f6af8d5234bd7ca6f65e7aa2e1.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/01/8500f8d2195444b2950fbdee9fad31c4.png
[e655585f087b439792e9b78a1926ea3c.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/01/9d9ec4bf98e64a2eaea17990061a2d96.png
[d4ee241511e626de167f57aa869adec4.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/01/1d1d2ed192594974999e271da0233d69.png
[c13fd7907cfa119e79c0e117cf4ffa1e.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/01/05e7e2060f8048a791e5b5486f512ea2.png
[4a60d7d9eca94c7419d6e709243adbe8.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/01/bea02f020e49406db3368f74a49555c0.png