看点高级的
拿点有用的
学点真干货
找点新财路
发布
登录
注册
AI时代的“进度条”:拆解文本、图像、语音背后的生成动效与UX逻辑
Cappo
北京
/
UI设计师
/
179天前
/
828浏览
版权
私信
关注
AI时代的“进度条”:拆解文本、图像、语音背后的生成动效与UX逻辑
Cappo
关注
收藏
在传统的GUI(图形用户界面)时代,尼尔森交互设计第一定律“系统状态可见性”的终极体现,就是一个正在转动的“菊花图”(Loading Spinner)或是一根缓慢爬行的进度条。因为传统软件是“检索型”的,系统通常只需要几百毫秒就能从数据库里捞出结果。
但在生成式AI(AIGC)时代,这种交互范式几乎失效了。
大模型是“推理型”和“创作型”的,生成一篇深度报告、渲染一张高精度图片,可能需要几秒甚至几分钟。在这个充满不确定性的高延迟黑盒中,UX设计师面临的挑战发生了质变:
收藏
将“等待”本身设计成一种沉浸式的体验,成为了AI产品的必修课。
今天,我们就从人机交互(HCI)的底层逻辑出发,深度盘点生成式AI在文本、图像、语音、智能体四大场景下的典型交互动效。
一、文本生成:制造“实时对话”的错觉
1. 流式输出(Streaming Output)
交互表现:
文字像老式打字机一样,一个字、一个词地接连吐出,伴随光标的闪烁或平滑推进。
Gemini的流式输出 (当下最常见文本输出形式)
收藏
底层逻辑:
如果让用户干等10秒再给出完整段落,极易引发“系统卡死”的恐慌。流式输出将漫长的等待拆解为每隔几十毫秒一次的视觉反馈,牢牢抓住了用户的视觉焦点。同时,它完美模拟了人类“边想边说”的节奏,在潜意识中建立了一种“它正在专心致志陪我聊天”的陪伴感。
2. 思考链的白盒化(Chain of Thought Visibility)
交互表现:
以 DeepSeek R1 或 OpenAI o系列模型为代表,在给出最终答案前,会先展示一个动态折叠面板,实时显示AI当前的“内心OS”(例如:“正在搜索最新财报”、“发现逻辑矛盾,尝试重新推导…”)。
DeepSeek会展示思考过程
收藏
底层逻辑:
算力黑盒容易让人产生戒备。超大模型的深度推理时间可能长达数分钟,传统的Loading根本压不住这种焦虑。当用户亲眼目睹AI经历了如此严谨、甚至带有自我纠错的“思考流”后,不仅能从心理上合理化这段漫长的等待,即使最终答案有微小瑕疵,用户的包容度也会大幅提高。
收藏
二、图像生成:让“不确定性”变成多巴胺奖励
图像生成的算力消耗更大。这里的UX核心在于:如何让盲盒般的等待过程变得有趣,同时赋予用户“及时止损”的权利。
1. 渐进式解码(Progressive Rendering)
交互表现:
画面并非像传统网页一样从上到下加载,而是从一张布满噪点、极度模糊的图,随着进度推进,轮廓逐渐清晰,细节逐渐锐利(常见于Midjourney或Stable Diffusion)。
Midjourney生成图像时的渐进式解码
收藏
底层逻辑:
这其实是扩散模型(Diffusion Model)“潜空间去噪”过程的真实写照。设计师没有隐藏这个过程,而是将其直接暴露给用户。看着画面从无到有,本身就是一种极具多巴胺奖励的盲盒体验。
容错机制:
更重要的是,用户在进度达到20%时,就能隐约看出构图走向。如果发现AI完全理解错了提示词,用户可以立刻点击“中断(Cancel)”,既不浪费耐心,也为平台节省了昂贵的算力。
2. 骨架魔法与动态占位
交互表现:
输入提示词后,原本的空白区域会出现流动的渐变色块、闪烁的魔法星尘。
豆包生图交互-AI“魔法”的具象化表达
收藏
底层逻辑:
填补生图初期的“视觉真空期”。这是一种积极的情绪反馈,暗示用户:“系统已经听懂了你的诉求,正在施展魔法,请保持期待。”
三、语音与情感交互:赋予恰到好处的“生命感”
当我们进入实时语音交互(如各大模型的实时语音通话模式)时,屏幕上甚至不再有文字,UI退化到了极致的极简状态。
动态声纹与呼吸光球(Dynamic Waveforms & Orbs)
交互表现:
界面中心只有一个抽象的光球或流动的波纹。当AI倾听时,它微微脉动;思考时,缓慢旋转;说话时,随着音量和情绪跳跃。
GPT的呼吸光球
收藏
底层逻辑:
为什么大厂不直接做一个具象化的3D数字人脸?因为现阶段数字人的微表情如果不同步,极易引发令人毛骨悚然的“恐怖谷效应”。用抽象的流体和光影来传递情绪,反而能留给用户最大的想象空间。
收藏
打断机制的视觉化:
语音交互最重要的是“可随时插话打断”。当用户突然发声,光球瞬间从“剧烈跳动”变为“收缩静止”,这给予了用户最直观的掌控反馈:“我闭嘴了,现在听你说。”
四、复杂智能体(Agent):展现“自动化工作流”
当AI从“单点问答工具”进化为“独立执行复杂目标的Agent”时,交互的复杂度呈指数级上升。
任务清单步进式(Step-by-step Task List)
交互表现:
当你让Agent执行“帮我写一份包含最新数据的行业分析PPT”时,UI会生成一个动态的待办列表:打勾“已制定计划”、打勾“正在检索数据”、高亮“正在排版页面”……
Claude Code的任务清单 (Todos)
收藏
底层逻辑:
这是一个UX设计的悖论——AI越强大、越能自己干活,用户其实越容易恐慌(“它到底在后台搞什么?会不会乱发邮件?”)。步进式UI明确划定了AI的工作边界。更关键的是,如果任务失败,用户能清晰地看到是哪一步断了(比如是“没搜到数据”,而不是“排版不行”),从而针对性地微调指令,而不是全盘推翻。
收藏
结语:做AI时代的“心理学架构师”
在AI时代,Loading设计早已不再是掩盖系统性能缺陷的遮羞布,而是展示产品智能化程度的橱窗。
作为UX设计师,我们的画布已经从静态的屏幕像素,延伸到了人机博弈的时间轴里。只有懂一点底层模型逻辑,我们才能设计出最符合技术特性的交互语言。最细节的设计,往往就隐藏在那些让“等待”变得优雅的几百毫秒之中。
-------
如果你对AI产品体验感兴趣 或也在做AI产品相关设计,欢迎交流讨论~
10
举报
|
声明
9
分享
原创文章
UI
网页
AI创作
UX
AI
agent
vibe
相关推荐
换一换
Typeless首页重设计:AI 产品越往前,越考验设计基本功
320
Cappo
当前C端产品AI能力实测-旅行规划
277
Cappo
传统UX失效?AI时代设计师转型手记
347
Cappo
LUI 会取代 GUI 吗?AI 产品形态的真正分水岭
496
Cappo
Prompt界面如何设计的让用户“敢开口”
767
Cappo
关注
AIGC
王序啦
在 AI 产品设计中,如何平衡流程自动化与用户参与度?
299
Cappo
会员精选
1秒钟复刻爆款视频喂饭教程
42
Ai训练师大宇
推广
私募搜搜网-移动&PC端设计
119
Cappo
3步快速搞定搜索设计
48
Cappo
图层整理术—你的源文件足够整洁吗
94
Cappo
评论
登录
评论你的想法~
表情
发布评论
喜欢TA的作品吗?喜欢就快来夸夸TA吧!
推荐素材
你可能喜欢
换一换
网络保卫战
283
帛竹
山内山外咖啡 金山岭主题 |品牌设计|北京
253
BucksDesign
康师傅风味环游|品牌包装全案设计系列
352
在想创意
隐形眼镜品牌设计 美瞳包装 包装设计 LOGO vi VI设计
351
郑昌洪品牌vi包装
IP设计|夜间人格档案
205
山奇咩咩
吕水仙手作茶铺-品牌全案设计
139
言合品牌设计
相关收藏夹
换一换
关注
AIGC
王序啦
关注
AIGC
ending_c
关注
简历/作品集/述职
3735
瘫_ATAN
关注
品牌vi完整思路and呈现方式
1762
废才
关注
地产VI
1726
喾二
关注
设计的方法论
1006
jamylee
大家都在看
查看更多
IP 形象
国庆
LOGO 设计
海报设计
插画设计
壁纸图片
作品集
VI 设计
UI 设计规范
AI 绘画
表情包
PPT模板
#ui
ui \
ui。=
ui 、
ui·
ui,
UI!
ui
ui
ui’
ui‘’
#ui|
UI、
#UI
UI,
设计a
设计#
#设计
#设计
设计
#设计
设计’
设计
、设计
it设计
AS设计
by设计
设计in
in设计
a设计
设计.
#设计#
设计】
设计
设计、
设计
设计
🤮设计
登录注册
10
登录即可同步推荐记录哦
9
登录即可加入我的收藏
评论
登录即可评论想法
分享
分享