性能优化-应用流畅度概述及指标

概述

在应用开发中，开发者应致力于确保用户在使用应用程序时能够体验无缝、自然和舒适的感觉。流畅的体验不仅能够提高用户的满意度，还能够增强用户对应用程序的好感度，并对应用程序的成功与否产生重要影响。

然而，感知流畅性不等同于系统性能。优秀的系统性能是保证用户感知流畅的必要条件，但好的系统性能不一定带来好的感知流畅性。系统性能、资源调度能力、图形渲染技术、硬件启动速度等指标必须通过界面反馈才能影响用户的感知，这意味着应用程序的界面设计、交互体验以及性能优化应当经过精心考量。例如，应用程序启动加载的流畅性，需要通过用户从点击动作到完全看到界面首页内容的体验评价来衡量，这其中包括用户感觉应用程序的首页是不是及时出现，画面的绘制过程是不是自然连贯等，这些因素都会综合影响用户的感知流畅性。

感知流畅性是人对加工信息难易程度的一种主观体验，它指手势触控、视觉感知、心理预期三者合一的综合体验。一方面是交互操作到响应开始的瞬时性，包括点击响应时延、滑动响应时延；另一方面是响应开始到加载完成过程中，动效和加载的同步以确保视觉感官的顺滑，包括最大连续丢帧率、动效时长。整体而言就是手势触控的完成时延和视觉感知的加载效果符合心理预期。一般而言，应用流畅体验的设计可以通过以下步骤实现：

1. 用户研究及目标制定：首先需要进行用户研究，了解目标用户群体的需求、偏好、行为习惯等信息。通过用户访谈、问卷调查、用户行为分析等方法，获取关于用户的信息，为后续设计提供基础数据。然后根据用户研究的结果，制定明确的用户体验目标，明确应用所要达到的用户体验效果和目标。
2. 信息架构设计：信息架构设计是用户体验设计的重要环节，它关注如何组织和呈现信息以满足用户的需求。
3. 用户体验设计：用户体验设计包含交互体验设计和视觉体验设计。交互体验设计是设计应用的交互界面，包括页面结构、导航设计、交互元素布局、交互方式设计等，确保用户能够顺畅地进行操作，减少用户的操作犹豫和错误。视觉体验设计是应用的视觉设计，包括动画设计、界面风格、色彩搭配、图标设计等，以提升用户的视觉体验和吸引力。
4. 原型设计和测试：设计应用的原型，并进行用户测试。通过原型测试，收集用户的反馈意见，了解用户在使用过程中的体验和问题，为后续优化提供依据。
5. 用户反馈和改进：发布应用后，及时收集用户的反馈意见，了解用户的使用体验和问题，不断改进和优化应用，以满足用户的需求和提高用户满意度。

通过这些设计流程，不仅可以提高用户对应用的满意度、促进用户的忠诚度，而且可以降低应用上线后出现的风险、提升用户好感、提高市场竞争力。接下来，本文将首先介绍用户感知的整体指标和测评方法，并分别针对流程中的交互流畅体验设计和视觉流畅体验设计介绍其设计原则和评价指标。

图1 感知流畅性示意图

用户体验设计

用户体验设计是一种以用户为中心的设计方法，旨在满足用户需求并创造愉悦、高效、流畅和有意义的产品体验。这需要开发者深入了解用户需求和行为，以便为他们提供最佳的交互和视觉体验。

在交互体验设计方面，开发者需要关注用户界面的直观性、操作的便捷性以及系统的响应速度。而在视觉体验设计方面，开发者需要注重产品的外观设计、动画效果和色彩搭配，以创造出令人愉悦的视觉效果。

在移动终端应用开发中，完成时延是指用户操作移动终端时，从输入触控指令到界面完全刷新结束并达到可以阅读的稳定状态所用时间，包括响应时延、动效时长以及加载完成时延。完成时延在用户体验设计中扮演着关键的角色，直接影响用户对产品的满意度和使用体验。其中，响应时延是评测交互流畅体验的关键指标，将在《交互流畅体验设计》中展开详解。动效时长、加载完成时延是评测视觉流畅体验的关键，动效时长由三方应用根据实际场景设计，并由三方应用进行保障；加载完成时延将在《视觉流畅体验设计》中展开详解。

流畅评测指标

完成时延反映了用户对响应速度的整体感受，主要影响用户对触控交互及时性和愉悦性的体验评价。在一定时延水平以上，完成时延越短越好，当完成时延小于一定水平后，用户的流畅体验不再继续提升。具体的推荐指标如下表所示：

表1 完成时延流畅性推荐指标

一级指标	二级指标	推荐指标
完成时延	控件响应完成时延	t完成时延≤600ms
	控件出现完成时延
	第三方应用启动完成时延	t完成时延≤1100ms
	第三方应用页面切换完成时延

说明

表格中名词解释如下：

• 第三方应用：指由独立开发者或公司开发并提供的应用程序，通过应用商店或其他渠道下载安装，如社交媒体应用、游戏、工具类应用等。
• 控件出现：由于用户触发某一控件调用机制而使控件在界面中出现的过程。
• 控件响应：使用者针对某一控件进行特定的操作时，控件通过形状，颜色，位置变化等方式给予使用者的反馈。

完成时延指标推荐测试的场景任务如下表所示：

表2 完成时延推荐测试任务

一级指标	二级指标	启动方式	示例任务
完成时延	应用启动	冷启动	社交软件启动、支付软件启动等
	页面切换	首次启动	消息列表进入对话详情
	控件出现	首次启动	输入法键盘弹出
	控件响应	首次启动	设置打开蓝牙

说明

表格中名词解释如下：

应用冷启动：应用启动时后台没有该应用的进程，系统通过重新创建一个新的进程分配给该应用的方式来启动。

根据完成时延进行评测后进行优化，优化的前后对比图如下所示：

图2 应用启动优化前后对比图

交互流畅体验设计

交互体验设计是产品与用户之间沟通的桥梁，其目的在于创造出令人愉悦、高效的用户体验。流畅的交互体验可以让用户与产品之间的互动更加自然、无缝，从而提升用户的满意度和忠诚度。一个流畅的交互体验不仅能够减少用户的认知负担，提高用户的操作效率，还能增强用户对产品的信任感和使用愉悦感。因此，交互设计是提升产品竞争力和用户体验的重要一环。而要保证交互体验的流畅性，通常包含以下步骤：

1. 根据设计原则设计交互界面：遵循设计原则设计交互界面、布局交互元素。
2. 根据交互方式选择触屏手势：正确选择触屏手势可以使用户操作更加直观、自然，从而提升用户体验。触屏手势通常分为基础手势和系统手势两类，设计师需要深入了解用户行为和习惯，结合具体场景选择合适的触屏手势。
3. 根据评测指标评估交互流畅性：评价指标提供了客观的标准来评判交互体验的质量。通过监测和分析评价指标，开发者可以建立起对用户体验的直观认识，及时发现交互体验中存在的问题，并有针对性地采取优化措施，以确保交互流畅性符合用户期望。
4. 根据评测结果迭代优化：开发者可以根据评测出来的结果，对应用进行迭代优化，满足用户的需求并提供更好的体验。具体关于点击响应的优化，可以参考最佳实践文章《点击响应优化》。

设计原则

遵循设计规范和设计原则是交互界面设计的基础，它们能够帮助开发者构建出更加合理、易用和符合用户需求的交互界面。在交互体验设计过程中，需要遵守的设计原则有：

• 一致性：一致性指交互界面的呈现形式和交互元素的操作需要保持一致，使用户在不同页面或模块间能够轻松理解和使用。遵循一致性原则，能够减少用户认知和记忆负担，赢得用户的青睐。一致性还可以提高用户的操作效率，因为用户在一个页面或模块上学会的操作方式可以迁移到其他页面或模块上，不需要重新学习。
• 简洁易用：简洁易用的设计原则是指要尽量去除冗余和复杂的功能及其元素，使用清晰明了的元素，避免信息过载。过多的元素呈现会分散用户的注意力，导致用户不能集中在主要功能上。简洁易用的设计能够降低用户的认知负担，提高用户的使用效率，使用户更加专注于完成任务，从而提升用户体验。
• 反馈清晰：反馈就是用户做了某项操作后，应用给用户一个响应。良好的反馈机制可以让用户清晰地感受到与应用的交互，提升交互的流畅性。当用户进行操作时，应用需要给予及时的反馈，让用户知道他们的操作是否成功，以及下一步该如何进行。这样可以增强用户对系统的控制感和信心，提高用户的满意度和体验质量。

在实际的交互界面设计中，开发者需要综合考虑这些原则，并根据具体的产品特点和用户需求进行灵活运用。

触屏手势

触屏手势是指用户在触摸屏幕上进行的特定手势动作，用于与设备进行交互和操作。通常触屏手势分为基础手势和敲击。

• 基础手势：指最基本的触屏手势，包括常见的点击、双击、长按、滑动等动作。基础手势不仅简单易学，而且为用户提供了直观的操作方式，使用户能够更加轻松地进行交互和操作。
• 敲击：敲击是指关节用力敲击屏幕等相关手势。

流畅评测指标

响应时延是用户操作移动终端时，从输入触控指令到系统开始将输出信息反馈到触控屏上的时间。响应时延分为点击响应时延和滑动响应时延。

• 点击响应时延：指用户在点击某个按钮或链接后，系统响应并显示相应内容所花费的时间。
• 滑动响应时延：指用户在滑动页面或应用时，系统响应并更新内容所花费的时间。

响应时延主要影响用户对触控交互及时性、控制感和愉悦性的体验评价。用户期望系统能够快速响应他们的操作，以获得即时的反馈。因此，响应时延不应高于用户可容忍的最长等待时间。研究表明，用户对于响应时延的感知是有一定的阈限的。在用户的延迟感觉阈限以上，响应时延越短，用户的流畅体验就会越好。然而，一旦响应时延接近或短于感觉阈限后，继续减小响应时延对流畅体验的收益就不再明显。因此，平衡响应时延和用户感知的阈限是非常重要的。

点击响应时延根据场景，具体可以划分为应用启动响应时延、页面切换响应时延和控件出现响应时延。滑动响应时延根据场景，具体可以划分为左右滑动响应时延和上下滑动响应时延。其感知流畅推荐指标如下表所示：

表3 响应时延流畅性推荐指标

一级指标	二级指标	推荐指标
点击响应时延	应用启动响应时延	t响应时间≤85ms
	页面切换响应时延
	控件出现响应时延
滑动响应时延	左右滑动响应时延	t响应时间≤60ms
	上下滑动响应时延

响应时延推荐测试的场景任务如表所示：

表4 响应时延推荐测试任务

一级指标	二级指标	启动方式	示例任务
点击响应时延	应用启动响应时延	冷启动	三方应用启动
	页面切换响应时延	首次启动	三方应用页面跳转
	控件出现响应时延	首次启动	短信对话内输入法键盘弹出
滑动响应时延	上下滑动	首次启动	图片缩略图页面上下滚动、三方应用首页滑动

根据点击响应时延进行优化，优化的前后对比图如下所示：

图3 点击响应优化前后对比图

视觉流畅体验设计

视觉体验设计是指在产品设计过程中，着重关注用户在视觉上的感知和体验，以达到美观、舒适、流畅的设计目标。生动美观的应用一般包含整体风格的设计、色彩搭配、排版布局等本流程，而保证应用流畅性的关键步骤是动效的设计。通过精心设计的动效，用户能够更直观地理解界面的变化和交互操作，从而提升用户对产品的满意度和使用体验。保证视觉体验的流畅性，通常包含以下步骤：

1. 根据设计原则设计动效：在设计动效时，需要根据用户体验和交互设计原则来确定动效的类型、时长、速度和效果。开发者应考虑到用户的心理认知和习惯，确保动效的设计能够引导用户完成操作，提升用户的操作效率和愉悦感。
2. 根据动效选择实现方式：在确定了动效的设计原则后，需要根据具体的技术和平台选择合适的实现方式。选择合适的实现方式需要考虑到动效的复杂度、性能要求、跨平台兼容性等。具体可以参考最佳实践《合理使用动画》与《合理使用页面间转场》。
3. 根据评测指标评估动效流畅性：设计和实现动效后，需要进行动效流畅性的评估，评测指标包括加载完成时延、最大连续丢帧数等。通过评估动效、加载流畅性，可以发现并解决其中的性能问题，确保用户在不同情况下都能够获得流畅的交互体验。
4. 根据评测结果迭代优化：开发者可以根据评测出来的结果，对应用进行迭代优化，满足用户的需求并提供更好的体验。具体关于丢帧的优化，具体可以参考最佳实践《长列表加载性能优化》。

设计原则

动效可以让用户界面更加生动有趣，增加用户对产品的兴趣，从而提升用户体验。详细的设计原则请参考动效指南中《设计原则》章节。

动效

动效分为动画和效果属性，动画负责如何动，效果属性负责控件在哪显示以及显示的内容，效果属性简称属性，属性包括布局属性、背景属性和外观属性等。动画会逐帧驱动属性的变化，以此来产生一帧帧的动画效果。常见的动效有转场动效、属性动效等，详细内容请参考通用设计指南中的《动效》章节。

流畅评测指标

设备界面感知流畅客观指标主要包括：

• 加载完成时延：指从页面加载开始到应用所有占位符加载完成所需要的时间。
• 最大连续丢帧数：指从页面开始有响应变化到页面结束刷新的过程中，由于显示器画面刷新频率低于预设的画面帧率而未能正常呈现的最大连续帧数。一般而言，当连续值超过3时，用户可以明显感知到卡顿掉帧，数值越大卡顿时间越长。

（1）加载完成时延

加载完成时延反应的是新页面出现后，元素控件出现过程的长短，主要影响用户对触控交互及时性、连续性和愉悦性的评价。较长的加载完成时延会降低用户体验，用户可能因为等待时间过长而感到不耐烦，甚至选择放弃使用应用。优化加载完成时延可以提高用户满意度，增加用户留存率。具体加载完成时延的感知流畅性如下表所示：

表5 加载完成时延感知流畅性推荐指标

一级指标	二级指标	推荐指标
加载完成时延	启动加载完成时延	t动效时长≤1100ms

加载完成时延指标推荐测试的场景任务如下表所示：

表6 加载完成时延推荐测试任务

一级指标	二级指标	启动方式	示例任务
加载完成时延	启动加载完成时延	冷启动	三方支付应用启动

（2）最大连续丢帧数

最大连续丢帧数反映的是用户感受到画面不连贯，卡顿的程度。最大连续丢帧数越接近于0，用户流畅性体验越好。最大连续丢帧数感知流畅性按下表进行评级：

表7 最大连续丢帧数感知流畅性推荐指标

一级指标	二级指标	推荐指标
最大连续丢帧数	页面上下滑动最大连续丢帧数	0帧

最大连续丢帧数推荐测试的场景任务如下表所示：

表8 最大连续丢帧数推荐测试任务

一级指标	二级指标	启动方式	示例任务
最大连续丢帧数	上下滑动	冷启动、高速滑动	三方应用首页滑动

根据最大连续丢帧数评测指标进行优化，优化的前后对比图如下所示：

图4 最大连续丢帧数优化前后对比图

总结

流畅、直观的用户界面可以增强用户的参与感和愉悦感，提升用户对产品或服务的满意度和使用体验。本文重点从交互流畅体验和视觉流畅体验两个流程上描述了如何设计和实现流畅应用：

• 交互流畅体验的基础要求包括符合用户习惯、风格一致和反馈清晰。

  符合用户习惯意味着应用程序的交互设计应当符合用户的操作习惯，让用户能够快速上手并且不感到陌生。风格一致表示应用程序的整体风格和交互方式应当保持一致，不会出现突兀的界面风格转变或操作逻辑变化。而反馈清晰则意味着应用程序在用户进行操作后，能够清晰地给出反馈，告知用户操作的结果或当前状态，从而避免用户的疑惑和困惑。这些基础要求的满足可以让用户在使用应用程序时感到更加自然和舒适。

• 视觉流畅体验的基础要求包括帧率稳定、响应及时和加载及时。

  帧率稳定指的是应用程序在运行过程中能够保持稳定的帧率输出，避免出现卡顿和画面闪烁的情况，从而让用户感受到流畅的界面切换和动画效果。响应及时表示应用程序对用户的操作能够快速做出响应，让用户感到交互的即时性和高效性。而加载及时指应用能够快速地加载并显示所需的内容和功能，不会出现长时间的等待或卡顿现象，让用户感到流畅和自然，提升用户的参与感和愉悦感。这些基础要求的满足可以让用户感受到应用程序的高效性和流畅性。

这两部分基础要求共同确保了应用程序的感知流畅性，并通过完成时延这个指标直观展示了用户对产品的满意度和使用体验。

在应用体验设计的过程中，为了提升用户的感知流畅度，开发者需要在设计和优化移动应用程序时考虑完成时延的影响，通过优化代码、减少不必要的后台任务、使用高效的算法和数据结构等手段降低时延，提升用户的感知流畅度。此外，合理的系统架构和服务器性能也对减小响应时延起着关键作用。除了技术方面的优化，开发者还需要关注响应时延对用户体验的影响，可以通过设计直观的交互界面、合理的动画效果以及优化用户交互流程来降低用户感知的时延。