harmonyos-best-practices-mcp 0.1.0

package/data/docs/bpta-smartwatchnavigation.md

@@ -0,0 +1,384 @@
+# 智能穿戴导航协同
+
+> 来源: https://developer.huawei.com/consumer/cn/doc/best-practices/bpta-smartwatchnavigation
+> 文档标识(fileName): bpta-smartwatchnavigation  
+> 目录(catalogName): best-practices  
+> 语言: cn  
+> 更新时间: 2026-06-23 03:38:34  
+> 导航地址: /hmos/hmos-dp1
+
+---
+#### 概述
+
+本文以智能手表的协同导航功能为典型案例，系统阐述了手机与智能穿戴设备通过通信协作实现地图导航的技术方案，主要包含了智能穿戴设备协同导航的体验设计、方案设计、界面开发及功能开发。
+
+- [体验设计](#section1736651042110)：从设计与交互层面，展示智能穿戴设备协同导航的体验设计要点。
+- [方案设计](#section8229111792118)：从交互流程层面，展示智能穿戴设备协同导航应用整体的实现方案。
+- [界面开发](#section15111857670)：从手机与智能穿戴设备双端，展示手机与智能穿戴设备协同导航中的界面开发要点。
+- [功能开发](#section88311141387)：展示智能穿戴设备协同导航应用中的核心功能开发的原理与开发步骤。
+
+#### 体验设计
+
+本章节从[UX设计](#section10370135220120)和[UI交互](#section1914862101311)两个维度，详细阐述智能穿戴设备协同导航的体验设计方案。
+
+## UX设计
+
+在智能穿戴设备协同导航实践中，涉及手机与智能穿戴设备的互联通信，双方协同完成导航功能，因此UX设计需要同时考虑手机端与智能穿戴设备端。手机端UX设计以地图展示页为核心，智能穿戴设备端UX设计以地图展示页、导航页为核心，具体设计如下表所示。
+
+**表1** 智能穿戴设备协同导航手机与智能穿戴设备侧UX设计
+
+| 手机侧页面 | 效果图（手机） | 效果图（智能穿戴设备） |
+| --- | --- | --- |
+| 首页（地图展示页） |  |  |
+| 导航页 | 不涉及 |  |
+
+## UI交互
+
+智能穿戴设备协同导航的UI交互设计主要包含以下关键特性：
+
+1. 导航提醒：手表通过振动反馈提示用户。
+2. 双端同步：目的地选择在手机与手表端实时同步。
+3. 常亮显示：导航过程中保持手表屏幕常亮，导航结束后关闭常亮。
+4. 交互控制：支持通过旋转表冠缩放地图视图。
+
+#### 方案设计
+
+本章节将系统阐述智能穿戴设备协同导航的交互逻辑，完整呈现手机与智能穿戴设备协同的实现方案。
+
+## 实现方案
+
+![](https://contentcenter-vali-drcn.dbankcdn.cn/pvt_2/DeveloperAlliance_scene_100_1/e0/v3/ks3KCz3fT2O_1BY4X15Sbg/zh-cn_image_0000002353086117.jpg?HW-CC-KV=V1&HW-CC-Date=20260623T075621Z&HW-CC-Expire=86400&HW-CC-Sign=3BA5341ED09B1ACC9DEF01B01B28CD77FE75C80ECB0A89F7C3A3D379B3F796D6 "点击放大")
+
+#### 界面开发
+
+本章节将详细阐述协同导航场景下手机端与智能穿戴设备端的核心界面开发规范，重点解析双端界面开发的关键技术要点。
+
+## 手机端界面开发核心要点
+
+手机端界面开发规范要点：
+
+1. 沉浸式地图展示：全屏适配，优化视觉呈现。
+2. 交互设计：采用半模态转场实现操作按钮唤起。
+
+![](https://contentcenter-vali-drcn.dbankcdn.cn/pvt_2/DeveloperAlliance_scene_100_1/1f/v3/btKQhSFZQd2glhPoeVmxXA/note_3.0-zh-cn.png?HW-CC-KV=V1&HW-CC-Date=20260623T075621Z&HW-CC-Expire=86400&HW-CC-Sign=36BEF7791DF1CD46D03FD2291D0E1B0DE59CB3DB1B819BE75E7DA15F3D0F3E93) 
+
+沉浸式地图展示，开发者可参考[窗口沉浸式](https://developer.huawei.com/consumer/cn/doc/best-practices/bpta-multi-device-window-immersive)。
+
+操作按钮的拉起，开发者可以参考[半模态转场](https://developer.huawei.com/consumer/cn/doc/harmonyos-references/ts-universal-attributes-sheet-transition)。
+
+## 智能穿戴设备端界面开发核心要点
+
+由于智能穿戴设备屏幕尺寸有限且采用圆形表盘设计，界面开发需特别注意：
+
+1. 内容适配：确保显示内容完整居中，避免挤压或截断。
+2. 布局优化：针对圆形屏幕特性进行UX适配。
+
+![](https://contentcenter-vali-drcn.dbankcdn.cn/pvt_2/DeveloperAlliance_scene_100_1/16/v3/B0llhNYQSLG-rm5zMyXqQw/note_3.0-zh-cn.png?HW-CC-KV=V1&HW-CC-Date=20260623T075621Z&HW-CC-Expire=86400&HW-CC-Sign=ED9513374899A505D058A92D39500AC492A7C983CF43190020A7FA6864323881) 
+
+智能穿戴设备界面开发具体可参考[智能穿戴应用开发](https://developer.huawei.com/consumer/cn/doc/best-practices/bpta-smartwatch)。
+
+#### 功能开发
+
+本章节将详细解析智能穿戴设备协同导航的核心功能开发，重点阐述[地图操作](#section1084068101014)、[互联通信](#section5132818141013)、[消息通知](#section113733017108)和[振感提示](#section15991113613101)四大核心功能的实现方案，为开发者提供明确的技术指导。
+
+## 地图操作
+
+地图操作主要涉及地图展示以及地图绘制两个功能，地图展示能力开发者可以参考[显示地图](https://developer.huawei.com/consumer/cn/doc/harmonyos-guides/map-presenting)。
+
+智能穿戴设备协同导航的地图绘制功能通过[MapComponentController](https://developer.huawei.com/consumer/cn/doc/harmonyos-references/map-map-mapcomponentcontroller)实现，具体包含以下核心操作：
+
+**地图点击（目的地标记）：**
+
+**图1** 地图点击操作时序图  
+![](https://contentcenter-vali-drcn.dbankcdn.cn/pvt_2/DeveloperAlliance_scene_100_1/ba/v3/Bqp6Pi6VRrOp_WqK0gs7sQ/zh-cn_image_0000002318967344.jpg?HW-CC-KV=V1&HW-CC-Date=20260623T075621Z&HW-CC-Expire=86400&HW-CC-Sign=2C177B8891351336293C9D4E7692C3E73FF3707005B39136AEF8401E68E2D333 "点击放大")
+
+开发步骤如下：
+
+1. 注册地图点击事件监听器，在回调函数中将触点的地理坐标持久化存储至destination_Position状态变量中。
+
+   ```
+   // Destination location information obtained based on the map click event.
+   @StorageLink('destination_Position') @Watch('changeDestinationPositionMark') destination_Position: mapCommon.LatLng =
+     {
+       longitude: 0,
+       latitude: 0
+     };
+   // ...
+   aboutToAppear(): void {
+     // ...
+     // Map initialization callback
+     this.callback = async (err, mapController) => {
+       if (!err) {
+         // ...
+         let mapOnclickCallBack = async (position: mapCommon.LatLng) => {
+           if (this.isStartNavigation) {
+             // If the navigation has started, you are not allowed to click on the mobile phone.
+             this.isBarShow = false;
+           } else {
+             // Send destination information to the watch for synchronization
+             this.connectUtils.sendMessage(JSON.stringify(new CommunicationInformation(1, undefined, position)));
+             // Modify destination_Position to trigger changeDestinationPositionMark
+             // To refresh the destination mark on the map.
+             this.destination_Position = position;
+             this.isBarShow = true;
+           }
+         };
+         this.mapEventManager.on('mapLoad', mapLoadCallback);
+         this.mapEventManager.on('mapClick', mapOnclickCallBack);
+       }
+     };
+     // Obtains the connected watch device and subscribes to the watch's message sending event.
+     this.connectUtils.getConnectedDevices();
+     try {
+       this.connectUtils.notifyClient = wearEngine.getNotifyClient(this.getUIContext().getHostContext());
+     } catch (err) {
+       hilog.error(0x0000, TAG,
+         `Failed to get notify client. Cause code: ${err.code}, message: ${err.message}`);
+     }
+   }
+   ```
+2. 监听destination_Position变化，调用[addMarker()](https://developer.huawei.com/consumer/cn/doc/harmonyos-references/map-map-mapcomponentcontroller#addmarker)动态更新目的地地图标记。
+
+   ```
+   // Destination location information obtained based on the map click event.
+   @StorageLink('destination_Position') @Watch('changeDestinationPositionMark') destination_Position: mapCommon.LatLng =
+     {
+       longitude: 0,
+       latitude: 0
+     };
+   // ...
+   /*
+    * Triggered when destination_Position changes.
+    * Used to refresh the destination marker on the map when the destination changes.
+    */
+   async changeDestinationPositionMark() {
+     if (this.mapController) {
+       this.mapController.clear();
+       let markerOptions: mapCommon.MarkerOptions = {
+         position: this.destination_Position,
+         rotation: 0,
+         visible: true,
+         zIndex: 0,
+         alpha: 1,
+         anchorU: 0.5,
+         anchorV: 1,
+         clickable: true,
+         draggable: true,
+         flat: false,
+       };
+       try {
+         await this.mapController.addMarker(markerOptions);
+       } catch (err) {
+         hilog.error(0x0000, TAG,
+           `Failed to add marker. Cause code: ${err.code}, message: ${err.message}`);
+       }
+     }
+   }
+   ```
+
+**路径导航：**
+
+1. 根据当前位置与目的地位置，生成导航路线信息。
+
+   ```
+   Button($r('app.string.DrawRoute'))
+     .width(158)
+     .height(40)
+     .onClick(async () => {
+       let params: navi.RouteParams = {
+         origins: [
+           {
+             latitude: this.myLocation.latitude,
+             longitude: this.myLocation.longitude
+           }
+         ],
+         destination: this.destination_Position,
+         language: 'zh_CN'
+       };
+       const result = await navi.getWalkingRoutes(params);
+       let drawRouteUtil: DrawRouteUtils = new DrawRouteUtils();
+       // Draw a route on a map using navigation route information.
+       drawRouteUtil.drawRoute(this.mapController, result.routes[0].steps[0].roads)
+     })
+   ```
+2. 通过调用[addPolyline()](https://developer.huawei.com/consumer/cn/doc/harmonyos-references/map-map-mapcomponentcontroller#addpolyline)接口，结合导航路线信息，绘制可视化路径。
+
+   ```
+   /*
+    * Draw a navigation route on a map
+    * The first parameter needs to be transferred to MapComponentController to operate the map.
+    * The second parameter needs to pass in the navigation information to draw the navigation route.
+    * @param mapController : map controller for drawing markers or routes on a map.
+    * @param steps : Navigation route information obtained through the Map Kit
+    */
+   async drawRoute(mapController: map.MapComponentController | undefined, steps: Array<navi.RouteRoad>) {
+     if (mapController === undefined) {
+       hilog.info(0X0000, TAG, 'Drawing failed');
+       return;
+     }
+     let roads: Array<mapCommon.LatLng> = [];
+     let des_arr: RouteInfomation[] = [];
+     for (let index = 0; index < steps.length; index++) {
+       for (let i = 0; i < steps[index].polyline.length; i++) {
+         roads.push(steps[index].polyline[i]);
+         des_arr.push(new RouteInfomation(steps[index].action as string, steps[index].distance, steps[index].duration))
+       }
+     }
+
+     // The route segment information is stored in the AppStorage and then sent to the watch through the WearEngine.
+     AppStorage.setOrCreate('routeInfomation', des_arr);
+
+     let polylineOption: mapCommon.MapPolylineOptions = {
+       points: roads,
+       color: 0xFF089C57,
+       jointType: mapCommon.JointType.ROUND,
+       width: 24
+     };
+
+     // Use MapComponentController to draw a route on a map
+     mapController.addPolyline(polylineOption).catch((error: Error) => {
+       let err = error as BusinessError;
+       if (err.code) {
+         hilog.error(0x0000, TAG,
+           `Failed to add poly line. Cause code: ${err.code}, message: ${err.message}`);
+       }
+     }).then(() => {
+       hilog.info(0X0000, TAG, 'Drawing success');
+     });
+   }
+   ```
+
+![](https://contentcenter-vali-drcn.dbankcdn.cn/pvt_2/DeveloperAlliance_scene_100_1/4d/v3/L3TsC4qARwGfTfRX0_J1-A/note_3.0-zh-cn.png?HW-CC-KV=V1&HW-CC-Date=20260623T075621Z&HW-CC-Expire=86400&HW-CC-Sign=4313DD30CF4779B85CE7B0A69B5A906EC14811ED405A539325E2DD02621B6115) 
+
+地图实现依赖Map Kit能力，使用前首先需要申请Map服务，详情请参考Map Kit[开发准备](https://developer.huawei.com/consumer/cn/doc/harmonyos-guides/map-config-agc)。
+
+## 互联通信
+
+智能穿戴设备协同导航系统通过设备间通信协议实现双端数据同步，各类消息通过头部TAG标志位进行区分，具体消息类型定义如下表所示：
+
+**表2** 消息实体类消息类型表
+
+| 消息类型 | TAG标志位取值 | 作用 |
+| --- | --- | --- |
+| 路线信息 | 0 | 用于同步导航路线信息。 |
+| 目的地定位 | 1 | 用于同步目的地定位信息。 |
+| 信号信息 | 2及以上 | 用于信号，包括手机侧告知手表侧导航已开启、手表侧告知手机侧导航结束等。 |
+
+在对端消息监听（手机端与智能穿戴设备端均使用，监听对方发来的消息）的回调中，会对发送的消息进行转码，并根据TAG标志位进行数据的存储，分别用于不同的逻辑。
+
+```
+/**
+ * Callback Method for Listening to Peer Communication.
+ */
+private onMsgCallback: Callback<wearEngine.P2pMessage> = (data: wearEngine.P2pMessage): void => {
+  let str: string = '';
+  // Decodes the intercepted content into a character string.
+  if (canIUse('SystemCapability.Utils.Lang')) {
+    let decoder: util.TextDecoder = util.TextDecoder.create();
+    str = decoder.decodeToString(data.content);
+  }
+  // Convert the JSON character string to the CommunicationInformation type.
+  let communicationInformation: CommunicationInformation = JSON.parse(str);
+  // Determine the information type based on the tag.
+  if (communicationInformation.tag === 0) {
+    // When tag is set to 0,Indicates that the transferred information is path description information,
+    // which is stored in AppStorage to refresh the watch navigation page.
+    AppStorage.setOrCreate('route_information', communicationInformation.routeInfomation);
+  } else if (communicationInformation.tag === 1) {
+    // When tag is set to 1, Indicates that the transferred information is destination location information
+    // and is saved to the AppStorage for synchronizing the destination logo of the mobile phone and watch.
+    AppStorage.setOrCreate('destination_Position', communicationInformation.location);
+  } else if (communicationInformation.tag === 2) {
+    // Signal sent from your phone to your watch when navigation starts, indicating that navigation starts.
+    AppStorage.setOrCreate('isStartNavigation', true);
+  } else {
+    // Signal sent from your watch to your phone when navigation ends, indicating that navigation ends.
+    AppStorage.setOrCreate('isStartNavigation', false);
+  }
+}
+```
+
+![](https://contentcenter-vali-drcn.dbankcdn.cn/pvt_2/DeveloperAlliance_scene_100_1/a5/v3/sunI3qY4RB6ol0bOWC7j1g/note_3.0-zh-cn.png?HW-CC-KV=V1&HW-CC-Date=20260623T075621Z&HW-CC-Expire=86400&HW-CC-Sign=415293228D2FD6273ACB9F11EE6B1ACD51A348019D90C47D4F5384E7DB52C0DF) 
+
+手机手表互联通信的具体实现，详情可参考[智能穿戴应用开发](https://developer.huawei.com/consumer/cn/doc/best-practices/bpta-smartwatch)与[应用间消息通信](https://developer.huawei.com/consumer/cn/doc/harmonyos-guides/p2p_communication)。
+
+## 消息通知
+
+在导航启动阶段，手机端需通过WearEngine提供的notify()接口向智能穿戴设备端发送通知消息，告知手表端导航开始。
+
+```
+/*
+ * Method of notifying a message to watch.
+ */
+notifyMessage() {
+  // Configure the notification content.
+  // Including the package name of the notification source, notification title, and notification content.
+  let type1Notification: wearEngine.Notification = {
+    type: wearEngine.NotificationType.NOTIFICATION_WITHOUT_BUTTONS,
+    bundleName: 'com.example.smartwatchmapnavigation',
+    title: 'smartwatchmapnavigation',
+    text: 'walk navigation start',
+  }
+  let options: wearEngine.NotificationOptions = {
+    notification: type1Notification,
+    onAction: (feedback: wearEngine.NotificationFeedback) => {
+      hilog.info(0x000, TAG,
+        `one button notify get feedback is ${feedback.action ? feedback.action : feedback.errorCode}`);
+    }
+  }
+
+  // Sends a notification to the watch based on notifyClient.
+  // This method can be invoked only by apps on mobile phones.
+  this.notifyClient!.notify(this.deviceRandomId, options).then(result => {
+    hilog.info(0x000, TAG, `Succeeded in sending notification.`);
+  }).catch((error: BusinessError) => {
+    hilog.error(0x000, TAG, `Failed to send notification. Code is ${error.code}, message is ${error.message}`);
+  })
+}
+```
+
+![](https://contentcenter-vali-drcn.dbankcdn.cn/pvt_2/DeveloperAlliance_scene_100_1/03/v3/v3Zi1vlcSOKSDjlvvNF6Xw/note_3.0-zh-cn.png?HW-CC-KV=V1&HW-CC-Date=20260623T075621Z&HW-CC-Expire=86400&HW-CC-Sign=66043171E8833E7A2D263B0316C7A0329DC1AED42FA19D233C1F939B61352B20) 
+
+消息通知依赖wearengine服务，详情可参考[智能穿戴应用开发](https://developer.huawei.com/consumer/cn/doc/best-practices/bpta-smartwatch)与[穿戴设备模板化通知](https://developer.huawei.com/consumer/cn/doc/harmonyos-guides/device_notification)。
+
+## 振感提示
+
+在导航过程中，智能穿戴设备需要使用振动向开发者提供振感提示。
+
+```
+// Vibration Tools Class
+export class VibratorUtil {
+  /*
+   * The method of  Vibration.
+   */
+  Vibrator() {
+    try {
+      // Use the startVibration method to enable vibration and set the duration.
+      vibrator.startVibration({
+        type: 'time',
+        duration: 1000,
+      }, {
+        id: 0,
+        usage: 'alarm'
+      }, (error: BusinessError) => {
+        if (error) {
+          hilog.error(0x0000, TAG, `Failed to start vibration. Code: ${error.code}, message: ${error.message}`);
+          return;
+        }
+        hilog.info(0x0000, TAG, 'Succeed in starting vibration');
+      });
+    } catch (err) {
+      let e: BusinessError = err as BusinessError;
+      hilog.error(0x00000, TAG, `An unexpected error occurred. Code: ${e.code}, message: ${e.message}`);
+    }
+  }
+}
+```
+
+![](https://contentcenter-vali-drcn.dbankcdn.cn/pvt_2/DeveloperAlliance_scene_100_1/1f/v3/9x2MvcvcTD-8gnVDMB_ceg/note_3.0-zh-cn.png?HW-CC-KV=V1&HW-CC-Date=20260623T075621Z&HW-CC-Expire=86400&HW-CC-Sign=0E9B7F60E96BE448CC5F588BFBAA4D768E4AB429B0BBC273D6F3630AFA2E5E7A) 
+
+使用振动需要进行权限申请，详情可参考[振动开发指导(ArkTS)](https://developer.huawei.com/consumer/cn/doc/harmonyos-guides/vibrator-guidelines)。
+
+#### 示例代码
+
+- [基于WearEngine实现协同导航应用](https://gitcode.com/harmonyos_samples/SmartWatchMapNavigation)

package/data/docs/bpta-smooth-application-design.md

@@ -0,0 +1,225 @@
+# 性能体验设计
+
+> 来源: https://developer.huawei.com/consumer/cn/doc/best-practices/bpta-smooth-application-design
+> 文档标识(fileName): bpta-smooth-application-design  
+> 目录(catalogName): best-practices  
+> 语言: cn  
+> 更新时间: 2026-06-23 03:39:23  
+> 导航地址: /hmos/hmos-dp1
+
+---
+#### 概述
+
+在应用开发中，确保用户使用应用程序时体验无缝、自然、舒适。流畅体验能提高用户满意度，增强用户好感，影响应用成功。
+
+感知流畅性不等同于系统性能。优秀的系统性能是保证用户感知流畅的必要条件，但良好的系统性能不一定带来优秀的感知流畅性。系统性能、资源调度能力、图形渲染技术、硬件启动速度等指标必须通过界面反馈才能影响用户感知。因此，应用程序的界面设计、交互体验及性能优化应当经过精心考量。例如，应用程序启动加载的流畅性，需要通过用户从点击动作到完全看到界面首页内容的体验来衡量，包括首页是否及时出现、画面绘制过程是否自然连贯等因素，这些都会综合影响用户的感知流畅性。
+
+感知流畅性是指手势触控、视觉感知和心理预期三者合一的综合体验。具体包括两方面：
+
+一是交互操作到响应开始的瞬时性，如点击响应时延和滑动响应时延。
+
+二是响应开始到加载完成过程中，动效和加载的同步以确保视觉感官的顺滑，如最大连续丢帧率和动效时长。
+
+总体来说，手势触控的完成时延和视觉感知的加载效果应符合心理预期。应用流畅体验的设计可以通过以下步骤实现：
+
+1. 用户研究及目标制定：进行用户研究，了解目标用户群体的需求、偏好、行为习惯等信息。使用用户访谈、问卷调查、用户行为分析等方法，获取用户信息，为后续设计提供基础数据。根据用户研究结果，制定明确的用户体验目标，确定应用需达到的用户体验效果。
+2. 信息架构设计是用户体验设计的重要环节，关注信息的组织和呈现以满足用户需求。
+3. 用户体验设计包括交互体验设计和视觉体验设计。交互体验设计涉及应用的交互界面，如页面结构、导航设计、交互元素布局和交互方式设计，确保用户操作顺畅，减少操作犹豫和错误。视觉体验设计涵盖应用的视觉元素，如动画设计、界面风格、色彩搭配和图标设计，以提升用户的视觉体验和吸引力。
+4. 设计应用原型并进行用户测试。收集用户反馈，了解使用体验和问题，为后续优化提供依据。
+5. 用户反馈和改进：发布应用后，及时收集用户反馈，了解使用体验和遇到的问题，持续优化应用，以满足用户需求并提升满意度。
+
+通过这些设计流程，不仅能提高用户满意度和忠诚度，还能降低应用风险，提升用户好感，增强市场竞争力。接下来，将首先介绍用户感知的整体指标和测评方法，然后分别阐述交互流畅体验和视觉流畅体验的设计原则及评价指标。
+
+**图1** 感知流畅性示意图   
+![](https://contentcenter-vali-drcn.dbankcdn.cn/pvt_2/DeveloperAlliance_scene_100_1/27/v3/s-DZQPgrQfq2NlQpTliKgg/zh-cn_image_0000002194011640.png?HW-CC-KV=V1&HW-CC-Date=20260623T075633Z&HW-CC-Expire=86400&HW-CC-Sign=DB841A97785992A23BA044F8A66E1856EB787ABCEF59B9426A05BC8C961D5E55 "点击放大")
+
+#### 用户体验设计
+
+用户体验设计是一种以用户为中心的设计方法，旨在满足用户需求并创造愉悦、高效、流畅和有意义的产品体验。这需要开发者深入了解用户需求和行为，以便为他们提供最佳的交互和视觉体验。
+
+在交互体验设计中，关注用户界面直观性、操作便捷性和系统响应速度。在视觉体验设计中，注重产品外观、动画效果和色彩搭配，创造愉悦的视觉效果。
+
+在移动终端应用开发中，完成时延是指用户操作移动终端时，从输入触控指令到界面完全刷新结束并达到可以阅读的稳定状态所用时间，包括响应时延、动效时长以及加载完成时延。完成时延在用户体验设计中扮演着关键的角色，直接影响用户对产品的满意度和使用体验。其中，响应时延是评测交互流畅体验的关键指标，将在[《交互流畅体验设计》](#section1552815191113)中展开详解。动效时长、加载完成时延是评测视觉流畅体验的关键，动效时长由三方应用根据实际场景设计，并由三方应用进行保障；加载完成时延将在[《视觉流畅体验设计》](#section1374318811135)中展开详解。
+
+#### 流畅评测指标
+
+完成时延反映了用户对响应速度的感受，主要影响触控交互的及时性和愉悦性。当完成时延低于特定阈值时，用户的流畅体验将不再提升。具体推荐指标如下表所示：
+
+**表1** 完成时延流畅性推荐指标
+
+| 一级指标 | 二级指标 | 推荐指标 |
+| --- | --- | --- |
+| 完成时延 | 控件响应完成时延 | t完成时延≤600ms |
+| 控件出现完成时延 |
+| 第三方应用启动完成时延 | t完成时延≤1100ms |
+| 第三方应用页面切换完成时延 |
+| 应用内点击操作完成时延 | t完成时延≤900ms |
+
+![](https://contentcenter-vali-drcn.dbankcdn.cn/pvt_2/DeveloperAlliance_scene_100_1/50/v3/6Uxq9_gSSJmVuTxOWzmyvw/note_3.0-zh-cn.png?HW-CC-KV=V1&HW-CC-Date=20260623T075633Z&HW-CC-Expire=86400&HW-CC-Sign=9D47DEBEC123D77F405C0DF9996F267CD20A22178A52000F3203DC36732BEE20) 
+
+表格中名词解释：
+
+- 第三方应用：指由独立开发者或公司开发并提供的应用程序，通过应用商店或其他渠道下载安装，如社交媒体应用、游戏、工具类应用等。
+
+- 控件出现：用户触发调用机制后，控件在界面中显示的过程。
+- 控件响应：针对控件进行特定操作时，控件通过形状、颜色、位置变化等方式给予反馈。
+
+完成时延指标推荐测试的场景任务如下表所示：
+
+**表2** 完成时延推荐测试任务
+
+| 一级指标 | 二级指标 | 启动方式 | 示例任务 |
+| --- | --- | --- | --- |
+| 完成时延 | 第三方应用启动 | 冷启动 | 社交软件启动、支付软件启动等 |
+| 第三方应用页面切换 | 首次启动 | 消息列表进入对话详情 |
+| 控件出现完成时延 | 首次启动 | 输入法键盘弹出 |
+| 控件响应完成时延 | 首次启动 | 设置打开蓝牙 |
+
+![](https://contentcenter-vali-drcn.dbankcdn.cn/pvt_2/DeveloperAlliance_scene_100_1/f/v3/EpMssgleRX2DHr5u2xL0Bg/note_3.0-zh-cn.png?HW-CC-KV=V1&HW-CC-Date=20260623T075633Z&HW-CC-Expire=86400&HW-CC-Sign=1AA87D107EA9843F665729E7E806C650B2A24BF35A301F7DF93CE0761944125F) 
+
+表格名词解释：
+
+冷启动：应用启动时后台没有该应用的进程，系统通过重新创建一个新的进程分配给该应用的方式来启动。
+
+根据完成时延进行评测并优化，优化前后对比图如下所示。
+
+**图2** 应用启动优化前后对比图   
+![](https://contentcenter-vali-drcn.dbankcdn.cn/pvt_2/DeveloperAlliance_scene_100_1/21/v3/koHo3GpSTL-kZkG0t3nYlQ/zh-cn_image_0000002193852052.gif?HW-CC-KV=V1&HW-CC-Date=20260623T075633Z&HW-CC-Expire=86400&HW-CC-Sign=10A56F972761D4100092BC4ABD458B5823DE74DB0DCBCCFA3D0426F3C826D9A4 "点击放大")
+
+#### 交互流畅体验设计
+
+交互体验设计是产品与用户之间沟通的桥梁，旨在创造令人愉悦、高效的用户体验。流畅的交互体验使用户与产品之间的互动更加自然、无缝，从而提升用户满意度和忠诚度。流畅的交互体验能减少用户认知负担，提高操作效率，增强用户对产品的信任感和使用愉悦感。因此，交互设计是提升产品竞争力和用户体验的重要环节。要保证交互体验的流畅性，包含以下步骤：
+
+1. 根据设计原则设计交互界面，布局交互元素。
+2. 根据交互方式选择触屏手势：正确选择触屏手势可使用户操作更加直观、自然，提升用户体验。触屏手势分为基础手势和敲击两类，设计师需深入了解用户行为和习惯，结合具体场景选择合适的触屏手势。
+3. 根据评测指标评估交互流畅性：评价指标提供客观标准，评判交互体验质量。监测分析评价指标，建立用户体验直观认识，发现交互体验问题，采取优化措施，确保交互流畅性符合用户期望。
+4. 根据评测结果迭代优化：开发者可以根据评测出来的结果，对应用进行迭代优化，满足用户的需求并提供更好的体验。具体关于点击响应的优化，可以参考最佳实践文章[《点击响应时延分析》](https://developer.huawei.com/consumer/cn/doc/best-practices/bpta-click-to-click-response-optimization)。
+
+## 设计原则
+
+遵循设计规范和原则是交互界面设计的基础。它们帮助开发者构建合理、易用和符合用户需求的交互界面。在设计过程中，需要遵守以下原则：
+
+- 一致性是指交互界面的呈现形式和交互元素的操作保持一致，以便用户在不同页面或模块间轻松理解和使用。遵循一致性原则可以减少用户认知和记忆负担，提高操作效率。用户在一个页面或模块上学会的操作方式可以迁移到其他页面或模块上，无需重新学习。
+- 简洁易用的设计原则是指去除冗余和复杂的功能及其元素，使用清晰明了的元素，避免信息过载。过多的元素会分散用户的注意力，使用户无法集中在主要功能上。简洁易用的设计能降低用户的认知负担，提高使用效率，使用户更专注于完成任务，提升用户体验。
+- 反馈清晰：用户操作后，应用需立即响应。良好的反馈机制使用户明确感知与应用的交互，提升流畅性。用户操作时，应用应即时反馈，确认操作成功，并指导下一步操作。这增强用户对系统的控制感和信心，提高满意度和体验质量。
+
+在交互界面设计中，开发者应结合具体产品特点和用户需求，灵活应用设计原则。
+
+## 触屏手势
+
+[触屏手势](https://developer.huawei.com/consumer/cn/doc/design-guides/hmi-touchscreen-0000001928273206#section328711113449)是用户在触摸屏幕上进行的特定动作，用于与设备交互。基础手势是最基本的触屏手势，包括常见的点击、双击、长按、滑动等动作。基础手势不仅简单易学，而且为用户提供了直观的操作方式，使用户能够更加轻松地进行交互和操作。
+
+## 流畅评测指标
+
+响应时延指用户操作移动终端时，从输入触控指令到系统反馈的时间。响应时延分为点击和滑动响应时延。
+
+- 点击响应时延：指用户在点击某个按钮或链接后，系统响应并显示相应内容所花费的时间。
+- 滑动响应时延：指用户在滑动页面或应用时，系统响应并更新内容所花费的时间。
+
+  响应时延显著影响用户对触控交互的及时性、控制感和愉悦性的体验。用户期望系统快速响应其操作，以获得即时反馈。响应时延应控制在用户可接受的最长等待时间以内。研究显示，用户对响应时延的感知存在阈限。当响应时延超过这一阈限时，响应时延越短，用户的流畅体验越好。但当响应时延接近或低于阈限时，继续减少响应时延对流畅体验的提升不再明显。因此，平衡响应时延与用户感知阈限至关重要。
+
+点击响应时延可细分为应用启动响应时延、页面切换响应时延和控件出现响应时延。滑动响应时延可细分为抛滑响应时延和拖滑响应时延。感知流畅的推荐指标如下表所示：
+
+**表3** 响应时延流畅性推荐指标
+
+| 一级指标 | 二级指标 | 推荐指标 |
+| --- | --- | --- |
+| 点击响应时延 | 应用启动响应时延 | t响应时延≤100ms |
+| 页面切换响应时延 |
+| 控件出现响应时延 |
+| 滑动响应时延 | 抛滑响应时延 | t响应时延≤80ms |
+| 拖滑响应时延 | t响应时延≤60ms |
+
+响应时延推荐测试的场景任务见表。
+
+**表4** 响应时延推荐测试任务
+
+| 一级指标 | 二级指标 | 启动方式 | 示例任务 |
+| --- | --- | --- | --- |
+| 点击响应时延 | 应用启动响应时延 | 冷启动 | 三方应用启动 |
+| 页面切换响应时延 | 首次启动 | 三方应用页面跳转 |
+| 控件出现响应时延 | 首次启动 | 短消息对话内输入法键盘弹出 |
+| 滑动响应时延 | 抛滑 | 首次启动 | 列表上下抛滑 |
+| 拖滑 | 首次启动 | 列表上下拖滑 |
+
+#### 视觉流畅体验设计
+
+视觉体验设计是指在产品设计过程中，重点关注用户在视觉上的感知和体验，以实现美观、舒适、流畅的设计目标。具体步骤包括整体风格设计、色彩搭配和排版布局。动效设计是保证应用流畅性的关键步骤，通过精心设计的动效，用户可以更直观地理解界面变化和交互操作，从而提升对产品的满意度和使用体验。确保视觉体验流畅性的步骤如下：
+
+1. 根据设计原则设计动效：设计动效时，参考用户体验和交互设计原则，确定动效的类型、时长、速度和效果。考虑用户心理认知和习惯，确保动效引导用户完成操作，提升操作效率和愉悦感。
+2. 根据动效选择实现方式：在确定了动效的设计原则后，需要根据具体的技术和平台选择合适的实现方式。选择合适的实现方式需要考虑到动效的复杂度、性能要求、跨平台兼容性等。具体可以参考最佳实践[《动画使用指导》](https://developer.huawei.com/consumer/cn/doc/best-practices/bpta-fair-use-animation)与[《页面间转场》](https://developer.huawei.com/consumer/cn/doc/best-practices/bpta-page-transition)。
+3. 根据评测指标评估动效流畅性：设计实现后，进行动效流畅性评估，指标包括加载时延、最大连续丢帧数等。评估可以发现解决性能问题，确保用户获得流畅交互体验。
+4. 根据评测结果迭代优化：开发者可以根据评测出来的结果，对应用进行迭代优化，满足用户的需求并提供更好的体验。具体关于丢帧的优化，具体可以参考最佳实践[《长列表加载丢帧优化》](https://developer.huawei.com/consumer/cn/doc/best-practices/bpta-best-practices-long-list)。
+
+## 设计原则
+
+动效可以让用户界面更加生动有趣，增加用户对产品的兴趣，从而提升用户体验。详细的设计原则请参考动效指南中《[设计原则](https://developer.huawei.com/consumer/cn/doc/design-guides/animation-design-principles-0000001750237392)》章节。
+
+## 动效
+
+动效分为动画和效果属性，动画负责如何动，效果属性负责控件在哪显示以及显示的内容，效果属性简称属性，属性包括布局属性、背景属性和外观属性等。动画会逐帧驱动属性的变化，以此来产生一帧帧的动画效果。常见的动效有转场动效、属性动效等，发生转场特别是涉及到大面积UI的改变时，应注意前后两页的背景是否一致，避免因为背景一帧切换造成闪烁。如果一定要切换背景颜色，可以使用动画进行过渡。详细内容请参考通用设计指南中的《[动效](https://developer.huawei.com/consumer/cn/doc/design-guides/design-animation-0000001750078484)》章节。
+
+在涉及多个动效的开发场景中，需注意动效之间的配合，避免因动画开始时间、动画曲线等因素的差异导致动效异常。
+
+## 流畅评测指标
+
+设备界面感知流畅的客观指标主要包括：
+
+- 加载完成时延：指从页面加载开始到应用所有占位符加载完成所需要的时间。
+- 最大连续丢帧数：指从页面开始有响应变化到页面结束刷新的过程中，由于显示器画面刷新频率低于预设的画面帧率而未能正常呈现的最大连续帧数。一般而言，当连续值超过3时，用户可以明显感知到卡顿掉帧，数值越大卡顿时间越长。
+
+（1）加载完成时延反应的是新界面出现后，元素控件出现过程的长短，主要影响用户对触控交互及时性、连续性和愉悦性的评价。
+
+加载完成时延反映新页面出现后，元素控件显示所需的时间。这直接影响用户对触控交互及时性、连续性和愉悦性的评价。较长的加载完成时延会降低用户体验，用户可能因等待时间过长而感到不耐烦，甚至放弃使用应用。优化加载完成时延可提高用户满意度和留存率。具体加载完成时延的感知流畅性如下表所示：
+
+**表5** 加载完成时延感知流畅性推荐指标
+
+| 一级指标 | 二级指标 | 推荐指标 |
+| --- | --- | --- |
+| 加载完成时延 | 启动加载完成时延 | t动效时长≤1100ms |
+
+加载完成时延指标推荐测试的场景任务见下表。
+
+**表6** 加载完成时延推荐测试任务
+
+| 一级指标 | 二级指标 | 启动方式 | 示例任务 |
+| --- | --- | --- | --- |
+| 加载完成时延 | 启动加载完成时延 | 冷启动 | 三方支付应用启动 |
+
+（2）最大连续丢帧数。
+
+最大连续丢帧数反映画面连贯性和卡顿情况。该数值越接近0，用户体验越流畅。根据下表评级感知流畅性：
+
+**表7** 最大连续丢帧数感知流畅性推荐指标
+
+| 一级指标 | 二级指标 | 推荐指标 |
+| --- | --- | --- |
+| 最大连续丢帧数 | 页面上下滑动最大连续丢帧数 | 0帧 |
+
+最大连续丢帧数推荐测试场景任务如下表所示。
+
+**表8** 最大连续丢帧数推荐测试任务
+
+| 一级指标 | 二级指标 | 启动方式 | 示例任务 |
+| --- | --- | --- | --- |
+| 最大连续丢帧数 | 上下滑动 | 冷启动、高速滑动 | 三方应用首页滑动 |
+
+根据最大连续丢帧数的评测指标进行优化，优化前后对比图如下所示。
+
+**图3** 最大连续丢帧数优化前后对比图   
+![](https://contentcenter-vali-drcn.dbankcdn.cn/pvt_2/DeveloperAlliance_scene_100_1/71/v3/GSUIfZPUTICsaeI1VW2gpA/zh-cn_image_0000002194011636.gif?HW-CC-KV=V1&HW-CC-Date=20260623T075633Z&HW-CC-Expire=86400&HW-CC-Sign=B87734D53DAC7B012694985AACF0F9BA9A13C245682965FEA7BA05FEB807A992 "点击放大")
+
+#### 总结
+
+流畅、直观的用户界面能增强用户的参与感和愉悦感，提升对产品或服务的满意度和使用体验。本文重点介绍如何从交互流畅性和视觉流畅性两方面设计和实现流畅应用。
+
+- 交互流畅体验的基础要求包括符合用户习惯、风格一致和反馈清晰。
+
+  符合用户习惯意味着应用程序的交互设计应符合用户操作习惯，让用户快速上手且不感到陌生。风格一致表示应用程序的整体风格和交互方式应保持一致，避免界面风格突变或操作逻辑变化。反馈清晰则意味着应用程序在用户操作后，能清晰给出反馈，告知操作结果或当前状态，避免用户疑惑。这些基础要求的满足使用户在使用应用程序时感到自然舒适。
+- 视觉流畅体验的基础要求包括帧率稳定、响应及时和加载及时。
+
+  帧率稳定指应用程序运行时能保持稳定的帧率输出，避免卡顿和画面闪烁，确保用户感受到流畅的界面切换和动画效果。响应及时指应用程序对用户操作快速响应，增强交互的即时性和高效性。加载及时指应用快速加载并显示所需内容和功能，避免长时间等待或卡顿，提升用户的流畅体验和参与感。这些基础要求的满足可让用户感受到应用程序的高效性和流畅性。
+
+这两部分基础要求共同确保了应用程序的感知流畅性，并通过完成时延指标直观展示了用户的满意度和使用体验。
+
+在应用体验设计过程中，为了提升用户感知的流畅度，开发者需在设计和优化移动应用程序时考虑完成时延的影响。具体措施包括：优化代码、减少不必要的后台任务、使用高效的算法和数据结构，以降低时延。合理的系统架构和服务器性能同样对减少响应时延至关重要。除了技术优化，开发者还需关注响应时延对用户体验的影响。通过设计直观的交互界面、合理的动画效果及优化用户交互流程，可以进一步降低用户感知的时延。