看作品
AI资产
AI资产
AI设计
AI设计
学课程
找工作
找设计师
找素材
登录
注册
1.5.6
AI时代的“进度条”:拆解文本、图像、语音背后的生成动效与UX逻辑
Cappo
北京
/
UI设计师
/
81天前
/
770浏览
版权
私信
关注
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产品相关设计,欢迎交流讨论~
8
举报
|
声明
7
分享
原创文章
UI
网页
AI创作
UX
AI
agent
vibe
相关推荐
换一换
当前C端产品AI能力实测-旅行规划
244
Cappo
传统UX失效?AI时代设计师转型手记
1
Cappo
LUI 会取代 GUI 吗?AI 产品形态的真正分水岭
453
Cappo
Prompt界面如何设计的让用户“敢开口”
7
Cappo
在 AI 产品设计中,如何平衡流程自动化与用户参与度?
291
Cappo
关注
AIGC
王序啦
设计师如何在业务中体现个人价值
16
Cappo
私募搜搜网-移动&PC端设计
119
Cappo
3步快速搞定搜索设计
48
Cappo
图层整理术—你的源文件足够整洁吗
94
Cappo
会员精选
欧贝玛暖贴品牌视觉升级全案 ✖ 西九里颜究社
560
西九里品牌咨询
推广
评论
登录
评论你的想法~
表情
发布评论
喜欢TA的作品吗?喜欢就快来夸夸TA吧!
推荐素材
你可能喜欢
换一换
从冷峻科技到优雅雕塑 | M22品牌VI设计
207
干杯设计
这几年社交AI全球化创意沉淀 |Design & Beyond
208
雨成
亚马逊Amazon视觉全案 I 品牌方:ThreeKey
461
何康江
超级符号,电商视觉引擎
254
Eyu_
SHOKZ韶音|OPENFIT PRO CG|耳机工艺篇
440
Natura_自然现象
王者荣耀 马年限定《路启千秋》系列PV
267
INFINI映纷创意
相关收藏夹
换一换
关注
AIGC
王序啦
关注
产品设计提案
40
ahaaha5464
关注
IP形象设计
3372
SnakeKwok
关注
IP形象及IP内容
7503
蔡蔡文化
关注
C君精选-吉祥物设计
2891
你好C君
关注
小家电
552
鱼叔T_T
大家都在看
查看更多
IP 形象
国庆
LOGO 设计
海报设计
插画设计
壁纸图片
作品集
VI 设计
UI 设计规范
AI 绘画
表情包
PPT模板
ui \
ui。=
#ui
ui,
UI!
ui
ui
ui’
ui是
ui‘’
#ui|
UI、
#UI
UI,
ui
#设计
#设计
设计
#设计
设计’
设计
a设计
以设计
、设计
设计的
及设计
把设计
it设计
AS设计
it设计是
by设计
设计in
in设计
是也设计
设计、
设计
#设计#
@设计
登录注册
8
登录即可同步推荐记录哦
7
登录即可加入我的收藏
评论
登录即可评论想法
分享
分享