提升响应感知:流式输出的用户体验设计


引言

1.1 痛点引入:那些“磨人”的交互场景

你有没有遇到过以下这些令人抓狂的体验?

  • 生成式AI对话:输入一段“帮我写一篇1万字的产品发布会演讲稿,主题是XX智能家居,要带情感共鸣”,然后屏幕上的“思考中…”小圆圈转了足足2分钟,界面死一般寂静,你一会儿刷新页面,一会儿关闭后台,一会儿怀疑是不是自己的Prompt写错了,最后终于——整个演讲稿一股脑砸下来,连排版的留白都显得刺眼,你根本不知道AI刚才在想什么,有没有按照你的要求调整重点?
  • 文件下载:上传了一个2G的高清视频素材到网盘,却只看到一个冷冰冰的“上传进度10%”条,既没有分段预览的提示,也没有剩余带宽波动的曲线,甚至偶尔会卡顿在某个百分比长达半分钟,你完全搞不懂网盘的服务器是不是在“摸鱼”,只能焦虑地盯着进度条发呆?
  • 实时协作文档:和同事一起在线编辑Excel表格,同事在A列加了一行复杂的公式,要引用整列B的数据,你的屏幕先是白屏了3秒,然后公式算好的结果才跳出来,期间你想知道结果对不对,连光标都不敢点,生怕打断同事的操作或者自己误操作覆盖了什么?

这些场景的核心问题是什么?不是系统处理速度不够快——很多时候服务器的带宽、GPU算力其实是足够的,或者即使不够快,也能通过优化压缩处理时间;而是系统和用户之间的“信息鸿沟”太大了:用户不知道系统在做什么、做了多少、做得对不对、什么时候能做完,整个过程充满了不确定性,而不确定性是用户焦虑感、挫败感的最大来源

根据尼尔森诺曼集团(NN/g)2024年最新的《感知响应时间与用户体验报告》,人类对“无响应界面”的忍耐阈值仅为1秒:如果界面在0.1秒内没有给出任何反馈,用户就会开始怀疑自己的操作是否生效;如果超过1秒还没有反馈,用户就会感到不耐烦;如果超过10秒,90%以上的用户会直接关闭页面或应用;如果超过30秒,用户对产品的品牌好感度会下降至少40%!

这就是我们今天要讨论的主题——流式输出的用户体验设计。流式输出(Streaming Output),简单来说就是“边处理边输出”的技术,它能打破系统和用户之间的“信息黑箱”,让用户实时感知到系统的工作状态,从而显著提升用户的感知响应速度、降低焦虑感、增强参与感和信任感

1.2 解决方案概述:什么是“好”的流式输出UX?

流式输出不是一个新鲜的技术概念——早在1990年代的早期浏览器(如Netscape Navigator 1.0),就已经支持HTML文档的流式渲染了:浏览器不需要等整个HTML文件下载完,而是下载一点就解析一点、渲染一点,让用户能更快看到页面的头部内容(如标题、导航栏),从而降低等待的焦虑感。

但在AI生成式应用、实时协作、大文件传输等新兴场景下,流式输出不再只是“技术优化的手段”,而是决定产品用户体验好坏的核心竞争力——甚至可以说,很多时候用户选择A产品而不是B产品,不是因为A的生成质量更高、速度更快,而是因为A的流式输出更“舒服”:它知道什么时候该停顿、什么时候该高亮、什么时候该给提示、什么时候该让用户干预。

那么,什么是“好”的流式输出UX呢?我总结了以下5个核心原则(这也是本文后续所有设计策略、技术实现的基石):

  1. 即时反馈原则:系统必须在0.1秒内给出“已收到请求,正在处理”的最低级反馈,最好能给出更具体的“正在做什么”的提示;
  2. 渐进式信息原则:输出的信息要按照“重要性优先级”从高到低、或者按照“逻辑顺序”从前往后、或者按照“情感节奏”从浅到深逐步呈现,不能一股脑砸下来;
  3. 可预测性原则:用户要能通过界面的反馈,大致预测到系统什么时候能完成处理、下一步会输出什么内容;
  4. 可控性原则:用户要有能力在流式输出的过程中干预系统——比如暂停、继续、停止、跳过某些内容、修改参数;
  5. 一致性原则:同一产品内的不同流式输出场景,反馈方式、输出节奏、交互逻辑要保持一致;不同产品的同类流式输出场景,也要遵循行业通用的规范。

1.3 最终效果展示:一个“令人愉悦”的AI对话流式输出案例

为了让大家更直观地理解“好”的流式输出UX是什么样的,我先展示一个我自己设计并实现的AI对话场景的最终效果(大家可以想象一下这个画面,或者后续跟着本文的实践环节自己动手实现):

假设你输入的Prompt是:“帮我写一篇关于XX奶茶新品‘青提乌龙冻冻桶’的小红书种草文案,面向18-25岁的女大学生,要带emoji、有场景感、最后加个话题标签,字数控制在300字左右。”

然后界面的变化是这样的:

  1. 0.1秒内:你的Prompt气泡下方立刻出现了一个AI的头像气泡框,气泡框左上角有个小小的“✨”动画,表示“AI已激活,正在思考”;
  2. 0.3秒内:气泡框里出现了第一行小字提示:“📍正在分析场景:夏日女大学生宿舍/图书馆/约会”;
  3. 0.8秒内:小字提示消失,气泡框里开始逐字逐句、有节奏地输出种草文案——遇到标点符号(尤其是句号、感叹号、问号)会稍微停顿0.1-0.3秒,遇到emoji会稍微停顿0.2-0.4秒并放大一下再缩小回去,遇到换行符会停顿0.5秒并弹出一个小小的“🍵”或“📝”装饰动画;
  4. 输出到第280字左右的时候:气泡框里的输出速度稍微变慢了一点,然后在第302字(刚好符合要求)的时候停止,最后在文案的右下角弹出一个小小的“✅”动画,表示“生成完成”;
  5. 整个过程中:气泡框的右上角有三个按钮——“⏸️暂停”“🔄重新生成”“❌停止并清空”,都是悬浮显示的,鼠标移上去才会变大;
  6. 生成完成后:文案可以被选中、复制、修改,三个按钮变成了“✏️编辑Prompt”“🔄重新生成”“💾保存到草稿箱”。

怎么样?这个体验是不是比“转2分钟小圆圈然后砸下来一堆文字”要舒服得多?


第一章:核心概念与理论基础

1.1 核心概念定义

在正式开始讨论流式输出的用户体验设计之前,我们必须先明确几个容易混淆的核心概念:

1.1.1 流式输出(Streaming Output)

技术定义:流式输出是一种数据传输和处理模式,指的是发送方(如服务器、GPU)不需要等待所有数据生成/处理完毕,而是生成/处理一小段数据就立即发送一小段数据;接收方(如浏览器、APP)也不需要等待所有数据接收完毕,而是接收一小段数据就立即解析/渲染一小段数据

从技术架构的角度来看,流式输出通常基于以下几种协议或技术实现:

  • HTTP/1.1 Chunked Transfer Encoding:早期浏览器和服务器常用的流式传输协议,通过将HTTP响应体分成多个“块(Chunk)”来传输,每个块都有自己的大小标识,最后用一个大小为0的块表示传输结束;
  • WebSocket:全双工通信协议,允许服务器主动向客户端推送数据,不需要客户端先发起请求,非常适合实时协作、实时聊天、实时监控等需要双向流式传输的场景;
  • Server-Sent Events (SSE):单向流式传输协议,只允许服务器主动向客户端推送数据,不允许客户端主动向服务器发送数据(客户端只能通过HTTP GET请求建立连接),比WebSocket更轻量、更简单,非常适合AI生成式应用、股票行情推送等只需要服务器单向推送数据的场景;
  • gRPC Streaming:基于HTTP/2的双向流式传输协议,支持定义严格的消息格式,非常适合微服务架构下的内部通信;
  • WebRTC DataChannel:基于UDP的双向流式传输协议,支持低延迟、高可靠性的传输,非常适合实时视频会议、实时游戏等对延迟要求极高的场景。

用户体验定义:从UX的角度来看,流式输出不仅仅是一种技术模式,更是一种**“与用户持续对话”的交互模式**——它能打破系统和用户之间的“单向等待、单向输出”的传统交互,建立起一种“双向感知、双向反馈”的新型交互。

1.1.2 感知响应时间(Perceived Response Time)

感知响应时间是指用户从发起操作(如点击按钮、输入Prompt)到感知到系统已经给出“有效反馈”的时间间隔

注意,这里的“有效反馈”不是指系统已经完成处理,而是指系统已经给出了“让用户知道自己的操作已经生效、系统正在工作”的反馈——比如前面提到的AI头像气泡框里的“✨”动画、或者文件下载进度条的第一帧变化。

感知响应时间和实际响应时间(Actual Response Time) 是两个完全不同的概念:实际响应时间是指系统从接收请求到完成处理的时间间隔,是客观的、可以用秒表测量的;而感知响应时间是主观的、取决于用户的心理状态和系统的反馈方式的——很多时候,我们可以通过优化反馈方式,让用户的感知响应时间远小于实际响应时间。

比如,假设某个AI生成式应用的实际响应时间是30秒:

  • 如果界面只显示一个转30秒的小圆圈,然后砸下来一堆文字,用户的感知响应时间就是30秒,90%以上的用户会关闭页面;
  • 如果界面在0.1秒内显示一个“✨”动画,然后0.3秒内显示“正在分析场景”的提示,然后0.8秒内开始逐字逐句输出文字,用户的感知响应时间就只有0.8秒,90%以上的用户会愿意等待到最后。

这就是感知响应时间的魔力——我们无法改变系统的实际响应速度(除非我们有更多的带宽、更强的GPU算力),但我们可以通过优化反馈方式,改变用户的感知响应速度

1.1.3 渐进式信息呈现(Progressive Information Disclosure)

渐进式信息呈现是指将信息按照“重要性优先级”从高到低、或者按照“逻辑顺序”从前往后、或者按照“情感节奏”从浅到深逐步呈现给用户,而不是一次性将所有信息都呈现给用户。

渐进式信息呈现是UX设计中一个非常经典的原则,最早由Don Norman在《设计心理学》一书中提出——他认为,人类的短期记忆容量是有限的(只能同时记住7±2个信息单元),如果一次性呈现太多信息,用户会感到信息过载,从而无法有效地处理信息

流式输出是渐进式信息呈现的最佳载体之一——因为流式输出本身就是“边生成/处理边输出”的,我们可以很容易地控制信息的呈现顺序和节奏。

比如,在生成式AI对话场景下,我们可以按照以下重要性优先级来呈现信息:

  1. 核心观点/结论:比如“这篇小红书种草文案的核心卖点是‘青提的清甜+乌龙的茶香+冻冻的Q弹’”;
  2. 支持性细节:比如“场景是夏日女大学生宿舍看剧、图书馆刷题、和闺蜜约会逛街”;
  3. 情感化描述:比如“咬一口冻冻,Q弹爽口,仿佛咬了一口夏天的云朵”;
  4. 行动号召/话题标签:比如“姐妹们快冲!#XX奶茶新品 #青提乌龙冻冻桶 #夏日饮品推荐”。

当然,在实际的AI对话场景下,我们很难让AI先输出核心观点再输出细节——因为AI的生成逻辑通常是“从左到右、逐字逐句”的;但我们可以通过后续的优化(比如高亮核心观点、折叠非核心细节)来实现渐进式信息呈现。

1.1.4 可预测性与可控性

可预测性和可控性是人类心理安全感的两个重要来源——如果用户能预测到系统的行为,并且能控制系统的行为,他们就会感到安全、放松,从而更愿意使用这个产品

在流式输出的场景下,可预测性和可控性尤其重要——因为流式输出是一个“持续的、动态的”过程,用户不知道下一步会发生什么,也不知道什么时候会结束,所以如果我们不给用户提供可预测性和可控性的反馈,他们就会感到焦虑、失控。

可预测性的UX体现

  • 进度指示器:比如文件下载进度条、AI生成进度百分比(如果能估算的话);
  • 剩余时间估算:比如“预计还需要2分30秒完成生成”;
  • 输出节奏控制:比如遇到标点符号停顿、遇到emoji停顿,让用户能大致预测到下一个字/下一句话什么时候会出现;
  • 状态提示:比如“正在生成第1段文字”“正在渲染第2张图片”。

可控性的UX体现

  • 暂停/继续按钮:比如用户突然有急事要离开,可以暂停流式输出,等回来再继续;
  • 停止按钮:比如用户发现AI生成的内容不符合自己的要求,可以立即停止生成,不需要等到最后;
  • 跳过按钮:比如用户不想看AI生成的某些细节,可以跳过这些内容;
  • 修改参数按钮:比如用户在生成图片的过程中,可以随时修改图片的尺寸、风格、色彩等参数。

1.2 问题背景:流式输出为什么突然火了?

流式输出不是一个新鲜的技术概念——早在1990年代的早期浏览器(如Netscape Navigator 1.0),就已经支持HTML文档的流式渲染了;但在2022年ChatGPT发布之后,流式输出突然成为了AI生成式应用、实时协作、大文件传输等新兴场景的“标配”技术,这背后有以下几个原因:

1.2.1 生成式AI的爆发

2022年11月30日,OpenAI发布了ChatGPT,一款基于GPT-3.5的生成式AI对话应用——它的出现彻底改变了人们与计算机交互的方式,也让流式输出成为了AI生成式应用的“核心竞争力”。

为什么生成式AI必须要用流式输出?主要有以下几个原因:

  1. 生成时间长:GPT-3.5、GPT-4、Claude 3等大型语言模型(LLM)生成一段长文本(如1万字的演讲稿)通常需要几十秒甚至几分钟的时间,如果不用流式输出,用户会因为等待时间太长而直接关闭页面;
  2. 生成逻辑是“从左到右、逐字逐句”的:LLM的生成逻辑是基于前一个词预测后一个词的,所以它生成完一个词就可以立即发送一个词,不需要等到所有词都生成完;
  3. 可以让用户实时纠错:如果用户发现AI生成的内容不符合自己的要求,可以立即停止生成,不需要等到最后,从而节省用户的时间和系统的算力。

根据OpenAI的内部数据,使用流式输出的ChatGPT用户留存率比不使用流式输出的版本高47%——这个数据足以说明流式输出对AI生成式应用的重要性。

1.2.2 实时协作的普及

近年来,随着远程办公的普及,实时协作文档(如Google Docs、腾讯文档、飞书文档)、实时协作设计工具(如Figma、Sketch Cloud)、实时协作项目管理工具(如Jira Align、Asana)越来越受到人们的欢迎——这些工具的核心竞争力就是“实时性”,而流式输出是实现“实时性”的最佳技术手段之一。

比如,在Google Docs中,你和同事一起在线编辑文档的过程中,你输入的每一个字、修改的每一个格式,都会通过WebSocket协议实时推送给同事,同事的界面也会实时更新——这个过程就是双向流式输出的过程。

1.2.3 大文件传输的需求增长

近年来,随着高清视频、VR/AR内容、3D模型等大文件的普及,大文件传输的需求也越来越大——如果不用流式输出,下载一个2G的高清视频素材可能需要几十分钟甚至几个小时的时间,而且如果中途网络断开,还需要重新下载;而如果用流式输出(如迅雷的P2P流式下载、百度网盘的分段流式下载),不仅可以让用户更快看到文件的部分内容(如高清视频的前10分钟预览),而且如果中途网络断开,还可以从断点继续下载,不需要重新下载。

1.2.4 用户对体验的要求提高

随着互联网技术的发展,用户对产品的要求也越来越高——他们不再满足于“能用”,而是要求“好用”“舒服”“有温度”;而流式输出正是提升产品用户体验的“秘密武器”之一——它能打破系统和用户之间的“信息鸿沟”,让用户实时感知到系统的工作状态,从而显著提升用户的感知响应速度、降低焦虑感、增强参与感和信任感。

1.3 核心理论基础:流式输出UX设计的心理学与认知学依据

流式输出的用户体验设计不是“拍脑袋”决定的——它背后有坚实的心理学与认知学依据。在本节中,我将介绍几个与流式输出UX设计密切相关的核心理论:

1.3.1 菲特定律(Fitts’s Law)

菲特定律是由美国心理学家Paul Fitts在1954年提出的,它是一个关于人机交互中点击/触摸目标时间的数学模型。

菲特定律的数学公式是:
MT=a+b×log⁡2(DW+1) MT = a + b \times \log_2 \left( \frac{D}{W} + 1 \right) MT=a+b×log2(WD+1)
其中:

  • MTMTMT(Movement Time):移动到目标并点击/触摸目标的时间;
  • aaabbb:常数,取决于输入设备(如鼠标、触摸屏)和用户的熟练程度;
  • DDD(Distance):初始位置到目标中心的距离;
  • WWW(Width):目标在移动方向上的宽度。

菲特定律告诉我们:目标越近、越大,点击/触摸目标的时间就越短

在流式输出的UX设计中,菲特定律主要应用于暂停/继续/停止等控制按钮的设计——我们应该把这些控制按钮放在离用户最近的位置(比如AI头像气泡框的右上角,或者文件下载进度条的右侧),并且在用户需要的时候(比如鼠标移到气泡框或进度条上)才把按钮放大,这样用户点击/触摸按钮的时间就会最短,从而提升可控性的体验。

1.3.2 席克定律(Hick’s Law)

席克定律是由美国心理学家William Edmund Hick和英国心理学家Ray Hyman在1952年提出的,它是一个关于人类做选择时间的数学模型。

席克定律的数学公式是:
RT=a+b×log⁡2(n+1) RT = a + b \times \log_2 (n + 1) RT=a+b×log2(n+1)
其中:

  • RTRTRT(Reaction Time):做选择的时间;
  • aaabbb:常数,取决于用户的熟练程度和选择的复杂度;
  • nnn:可供选择的选项数量。

席克定律告诉我们:可供选择的选项数量越多,做选择的时间就越长;当可供选择的选项数量超过7±2个时,人类的短期记忆容量就会过载,做选择的时间会呈指数级增长。

在流式输出的UX设计中,席克定律主要应用于控制按钮的数量设计——我们应该尽量减少控制按钮的数量,最好控制在3个以内(比如暂停/继续、重新生成、停止并清空),这样用户做选择的时间就会最短,从而提升可控性的体验。

1.3.3 韦伯定律(Weber’s Law)

韦伯定律是由德国生理学家Ernst Heinrich Weber在1834年提出的,它是一个关于人类感知差异阈值的数学模型。

韦伯定律的数学公式是:
ΔII=K \frac{\Delta I}{I} = K IΔI=K
其中:

  • ΔI\Delta IΔI(Difference Threshold):人类能感知到的最小差异;
  • III(Initial Stimulus):初始刺激的强度;
  • KKK(Weber Fraction):常数,取决于刺激的类型(如视觉、听觉、触觉)。

韦伯定律告诉我们:人类能感知到的最小差异与初始刺激的强度成正比——也就是说,初始刺激的强度越大,人类能感知到的最小差异就越大。

在流式输出的UX设计中,韦伯定律主要应用于进度指示器的更新频率设计输出节奏的控制设计

  1. 进度指示器的更新频率设计:比如文件下载进度条,当进度在0%-10%的时候,初始刺激的强度很小,所以我们应该让进度条更新得频繁一点(比如每0.1秒更新一次),让用户能明显感知到进度的变化;当进度在90%-100%的时候,初始刺激的强度很大,所以我们可以让进度条更新得慢一点(比如每0.5秒更新一次),用户也能明显感知到进度的变化;
  2. 输出节奏的控制设计:比如生成式AI对话场景下的逐字输出,当输出速度很慢的时候(比如每秒输出1个字),初始刺激的强度很小,所以我们应该让输出节奏保持稳定,不要有太大的波动;当输出速度很快的时候(比如每秒输出10个字),初始刺激的强度很大,所以我们可以让输出节奏有一些波动(比如遇到标点符号停顿、遇到emoji停顿),用户也能明显感知到节奏的变化。
1.3.4 斯金纳的操作性条件反射(Operant Conditioning)

斯金纳的操作性条件反射是由美国心理学家B.F. Skinner在1938年提出的,它是一个关于人类行为与奖励/惩罚之间关系的理论。

斯金纳认为,人类的行为是由行为的后果(奖励或惩罚)决定的:如果一个行为的后果是奖励(积极强化),那么这个行为就会被重复;如果一个行为的后果是惩罚(消极强化或惩罚),那么这个行为就会被减少或避免。

在流式输出的UX设计中,斯金纳的操作性条件反射主要应用于持续反馈的设计——我们应该在流式输出的过程中,不断给用户提供“积极强化”的反馈(比如逐字输出的文字、进度条的变化、小小的装饰动画),让用户感到“系统正在工作、我的等待是有价值的”,从而更愿意继续等待下去。

比如,在生成式AI对话场景下,逐字输出的文字就是一种“积极强化”的反馈——用户每等0.1-0.3秒,就能看到一个新的字,这种“持续的、微小的奖励”会让用户的大脑分泌多巴胺,从而感到愉悦、放松,更愿意继续等待到最后。

根据斯金纳的实验,“可变比率强化”(Variable Ratio Schedule)是最有效的强化方式——也就是说,奖励的间隔是随机的,用户不知道下一个奖励什么时候会到来,这种“不确定性的奖励”会让用户的大脑分泌更多的多巴胺,从而更愿意重复这个行为。

在流式输出的UX设计中,我们可以适当地应用“可变比率强化”——比如在逐字输出的过程中,偶尔弹出一个小小的装饰动画(比如🍵、📝、✨),装饰动画的出现间隔是随机的,用户不知道下一个装饰动画什么时候会到来,这种“不确定性的奖励”会让用户感到更愉悦、更放松。

1.3.5 认知负荷理论(Cognitive Load Theory)

认知负荷理论是由澳大利亚心理学家John Sweller在1988年提出的,它是一个关于人类短期记忆容量与学习效率之间关系的理论。

认知负荷理论认为,人类的短期记忆容量是有限的(只能同时记住7±2个信息单元),如果短期记忆的负荷超过了容量,人类就会感到信息过载,从而无法有效地处理信息、学习新知识

认知负荷理论将认知负荷分为三种类型:

  1. 内在认知负荷(Intrinsic Cognitive Load):由学习内容本身的复杂度决定的,是无法避免的;
  2. 外在认知负荷(Extraneous Cognitive Load):由学习内容的呈现方式决定的,是可以避免的;
  3. 相关认知负荷(Germane Cognitive Load):由学习者对学习内容的深度加工决定的,是我们应该鼓励的。

在流式输出的UX设计中,认知负荷理论主要应用于渐进式信息呈现的设计——我们应该尽量减少外在认知负荷,增加相关认知负荷,具体来说:

  1. 按照重要性优先级呈现信息:先呈现核心观点/结论,再呈现支持性细节,最后呈现情感化描述/行动号召,这样用户的短期记忆只会先处理最重要的信息,不会感到信息过载;
  2. 控制输出节奏:不要输出得太快,也不要输出得太慢,输出得太快会让用户的短期记忆来不及处理信息,输出得太慢会让用户感到不耐烦;
  3. 高亮核心信息:比如用粗体、斜体、不同的颜色高亮核心观点/结论,这样用户的注意力会更容易集中在核心信息上,从而增加相关认知负荷;
  4. 折叠非核心信息:比如将支持性细节、情感化描述折叠起来,用户想看的时候再展开,这样可以减少外在认知负荷。

1.4 概念结构与核心要素组成

在本节中,我们将对流式输出的用户体验设计进行结构化的拆解,梳理出它的概念结构和核心要素组成。

1.4.1 概念结构

流式输出的用户体验设计是一个多层次、多维度的概念结构,它可以分为以下三个层次:

  1. 技术层:是流式输出UX设计的基础,负责实现数据的传输和处理;
  2. 交互层:是流式输出UX设计的核心,负责实现用户与系统之间的交互;
  3. 情感层:是流式输出UX设计的升华,负责让用户感到愉悦、放松、有温度。

这三个层次是相互关联、相互影响的:没有技术层的支持,交互层和情感层就无法实现;没有交互层的设计,技术层的价值就无法体现,情感层也无法建立;没有情感层的升华,交互层的体验就会显得冷冰冰、没有温度。

为了更直观地展示这三个层次的关系,我画了一个ER实体关系图(Mermaid格式):

支持

建立

TECHNICAL_LAYER

string

protocol

协议:HTTP/1.1 Chunked、WebSocket、SSE、gRPC Streaming、WebRTC DataChannel

string

data_format

数据格式:JSON、XML、Protobuf、Plain Text

string

error_handling

错误处理:重试、超时、错误提示

INTERACTION_LAYER

string

immediate_feedback

即时反馈:激活动画、状态提示

string

progressive_disclosure

渐进式信息呈现:输出顺序、输出节奏、高亮、折叠

string

predictability

可预测性:进度指示器、剩余时间估算、状态提示

string

controllability

可控性:暂停/继续、停止、跳过、修改参数

string

consistency

一致性:反馈方式、输出节奏、交互逻辑

EMOTIONAL_LAYER

string

pleasure

愉悦感:装饰动画、可变比率强化

string

relaxation

放松感:稳定的输出节奏、清晰的反馈

string

trust

信任感:可预测性、可控性、透明性

string

engagement

参与感:持续的反馈、可控的交互

1.4.2 核心要素组成

除了概念结构之外,流式输出的用户体验设计还有以下几个核心要素组成,这些要素是我们在设计流式输出UX时必须要考虑的:

1.4.2.1 激活反馈(Activation Feedback)

激活反馈是指系统在接收到用户的请求后0.1秒内给出的最低级反馈,它的作用是让用户知道“自己的操作已经生效,系统正在工作”,从而消除用户的怀疑。

激活反馈的常见形式有:

  • 动画:比如AI头像的闪烁、小圆圈的转动、✨的闪烁;
  • 文字提示:比如“正在处理…”“AI已激活…”;
  • 视觉变化:比如按钮的状态变化(从可点击变为不可点击,颜色从蓝色变为灰色)、输入框的状态变化(从可输入变为不可输入)。
1.4.2.2 状态提示(Status Indicator)

状态提示是指系统在处理请求的过程中给出的更具体的“正在做什么”的提示,它的作用是让用户知道“系统正在做什么,有没有按照自己的要求处理”,从而增强用户的可预测性和信任感。

状态提示的常见形式有:

  • 文字提示:比如“📍正在分析场景:夏日女大学生宿舍/图书馆/约会”“📝正在生成第1段文字”“🖼️正在渲染第2张图片”;
  • 进度指示器:比如文件下载进度条、AI生成进度百分比(如果能估算的话)、上传/下载剩余带宽波动曲线;
  • 剩余时间估算:比如“预计还需要2分30秒完成生成”“预计还需要15分20秒完成下载”。
1.4.2.3 输出节奏(Output Rhythm)

输出节奏是指流式输出的速度和停顿的规律,它的作用是让用户感到“舒服、自然、有情感”,从而增强用户的愉悦感和放松感。

输出节奏的设计原则有:

  • 符合人类的阅读节奏:人类的阅读速度通常是每秒2-5个字(中文)或每秒5-10个单词(英文),所以我们应该将输出速度控制在这个范围内;
  • 遇到标点符号停顿:遇到逗号停顿0.1-0.2秒,遇到句号、感叹号、问号停顿0.2-0.4秒,遇到换行符停顿0.3-0.6秒;
  • 遇到特殊内容停顿:遇到emoji停顿0.2-0.5秒并放大一下再缩小回去,遇到图片预览图停顿0.5-1秒,遇到链接停顿0.2-0.3秒;
  • 适当应用可变比率强化:偶尔放慢或加快输出速度,偶尔弹出一个小小的装饰动画,让用户感到“惊喜”。
1.4.2.4 控制按钮(Control Buttons)

控制按钮是指用户在流式输出的过程中可以用来干预系统的按钮,它的作用是让用户感到“可控、有话语权”,从而增强用户的可控性和信任感。

控制按钮的设计原则有:

  • 数量尽量少:最好控制在3个以内,符合席克定律;
  • 位置尽量近:放在离用户最近的位置,符合菲特定律;
  • 状态清晰:按钮的状态(可点击/不可点击、激活/未激活)要清晰;
  • 视觉变化明显:鼠标移上去按钮要变大或变色,点击按钮要有明显的反馈(比如动画、声音)。
1.4.2.5 完成反馈(Completion Feedback)

完成反馈是指系统在完成处理后给出的反馈,它的作用是让用户知道“系统已经完成处理,现在可以使用输出的内容了”,从而消除用户的等待焦虑感。

完成反馈的常见形式有:

  • 动画:比如✅的闪烁、🎉的弹出、AI头像的微笑;
  • 文字提示:比如“生成完成!”“下载完成!”“上传完成!”;
  • 视觉变化:比如按钮的状态变化(从不可点击变为可点击,颜色从灰色变为蓝色)、输入框的状态变化(从不可输入变为可输入)、输出内容的高亮(比如整个文案或图片边框闪烁一下);
  • 声音提示:比如“叮”的一声、轻快的音乐片段(可选,因为有些用户可能不喜欢声音提示)。

1.5 概念之间的关系:核心属性维度对比与交互关系图

在本节中,我们将对与流式输出UX设计密切相关的几个概念(感知响应时间、实际响应时间、渐进式信息呈现、可预测性、可控性)进行核心属性维度的对比,并画出它们的交互关系图。

1.5.1 核心属性维度对比

为了更直观地对比这几个概念的核心属性,我整理了一个Markdown表格:

概念名称 核心属性 客观/主观 可测量性 与流式输出的关系 优化方式
感知响应时间 用户从发起操作到感知到有效反馈的时间间隔 主观 不可直接测量,需通过用户调研或眼动仪间接测量 流式输出的核心目标是降低感知响应时间 即时反馈、渐进式信息呈现、可预测性、可控性
实际响应时间 系统从接收请求到完成处理的时间间隔 客观 可直接用秒表或日志测量 流式输出无法改变实际响应时间,但可以让用户忽略实际响应时间 增加带宽、增强GPU算力、优化算法、压缩数据
渐进式信息呈现 按照重要性/逻辑/情感顺序逐步呈现信息 主观+客观 可通过信息架构设计间接测量 流式输出是渐进式信息呈现的最佳载体 控制输出顺序、控制输出节奏、高亮核心信息、折叠非核心信息
可预测性 用户能预测到系统的行为的程度 主观 需通过用户调研间接测量 可预测性能增强用户的感知响应速度、降低焦虑感 进度指示器、剩余时间估算、状态提示、稳定的输出节奏
可控性 用户能控制系统的行为的程度 主观 需通过用户调研间接测量 可控性能增强用户的感知响应速度、降低焦虑感、增强信任感 暂停/继续按钮、停止按钮、跳过按钮、修改参数按钮
1.5.2 交互关系图

为了更直观地展示这几个概念之间的交互关系,我画了一个Mermaid流程图:

用户重试操作

用户关闭页面或应用

用户放弃阅读/使用输出内容

用户感到失控,关闭页面或应用

用户等待超时,关闭页面或应用

用户发起操作

系统是否在0.1秒内给出激活反馈?

用户感知到操作生效,怀疑消除

用户开始怀疑自己的操作,感知响应时间增加

系统是否给出状态提示/进度指示器/剩余时间估算?

用户能预测到系统的行为,可预测性增强,焦虑感降低

用户无法预测到系统的行为,可预测性降低,焦虑感增加

用户流失

系统是否按照渐进式信息呈现的原则输出内容?

用户的短期记忆不会过载,愉悦感和放松感增强

用户的短期记忆过载,信息过载,愉悦感和放松感降低

系统是否给出控制按钮?

用户能控制系统的行为,可控性增强,信任感增强

用户无法控制系统的行为,可控性降低,信任感降低

系统是否在完成处理后给出完成反馈?

用户感知到处理完成,等待焦虑感消除,参与感增强

用户不知道处理是否完成,继续等待,焦虑感增加

用户使用输出内容,用户留存率和品牌好感度提升

1.6 本章小结

在本章中,我们主要介绍了流式输出的用户体验设计的核心概念、问题背景、核心理论基础、概念结构与核心要素组成、概念之间的关系。

1.6.1 核心内容回顾
  1. 核心概念定义
    • 流式输出:一种数据传输和处理模式,也是一种“与用户持续对话”的交互模式;
    • 感知响应时间:用户从发起操作到感知到有效反馈的时间间隔,是主观的;
    • 渐进式信息呈现:按照重要性/逻辑/情感顺序逐步呈现信息,避免信息过载;
    • 可预测性与可控性:人类心理安全感的两个重要来源。
  2. 问题背景
    • 生成式AI的爆发;
    • 实时协作的普及;
    • 大文件传输的需求增长;
    • 用户对体验的要求提高。
  3. 核心理论基础
    • 菲特定律:目标越近、越大,点击/触摸时间越短;
    • 席克定律:选项数量越少,做选择的时间越短;
    • 韦伯定律:能感知到的最小差异与初始刺激的强度成正比;
    • 斯金纳的操作性条件反射:持续的、微小的、可变的奖励能让用户更愿意等待;
    • 认知负荷理论:人类的短期记忆容量有限,要减少外在认知负荷,增加相关认知负荷。
  4. 概念结构:分为技术层、交互层、情感层三个层次,相互关联、相互影响;
  5. 核心要素组成:激活反馈、状态提示、输出节奏、控制按钮、完成反馈;
  6. 概念之间的关系:感知响应时间是核心目标,实际响应时间是基础,渐进式信息呈现是载体,可预测性和可控性是保障。
1.6.2 本章的重要性

本章是整篇文章的“基础篇”——只有理解了这些核心概念、理论基础、概念结构和核心要素组成,我们才能在后续的章节中设计出“好”的流式输出UX,才能在实践环节中实现出“令人愉悦”的流式输出应用。

在下一章中,我们将进入“设计篇”——介绍不同场景下(如生成式AI对话、实时协作文档、大文件传输)的流式输出UX设计策略和最佳实践。

Logo

AtomGit 是由开放原子开源基金会联合 CSDN 等生态伙伴共同推出的新一代开源与人工智能协作平台。平台坚持“开放、中立、公益”的理念,把代码托管、模型共享、数据集托管、智能体开发体验和算力服务整合在一起,为开发者提供从开发、训练到部署的一站式体验。

更多推荐