1. 项目概述一次对“等待”的深度解构最近在折腾Claude Code的时候我被一个极其微小的细节给“震”住了。不是它强大的代码生成能力也不是它丝滑的对话体验而是当它“思考”时屏幕上那个不断变化的提示词。你可能也见过——“正在处理”、“正在思考”、“正在分析”、“正在生成”……起初我以为就那么几种直到我偶然在它的设置里看到了一个名为spinnerVerbs的配置项点开一看好家伙整整187个不同的动词短语这可不是什么简单的“加载中…”。这187个词每一个都精准地描述了Claude Code在后台可能正在进行的不同“心智活动”。从“正在构思”到“正在重构”从“正在调试”到“正在优化”它不是在用一个模糊的进度条敷衍你而是在用语言告诉你“我知道你现在在等我也没闲着我正在为你做这件具体的事。”这个发现让我这个老码农兼产品爱好者瞬间兴奋起来。我们天天把“用户体验”挂在嘴边但真正的顶级体验往往就藏在这种用户甚至不会主动察觉的细节里。Claude Code的spinnerVerbs和与之相关的turnCompletionVerbs就是教科书级别的案例。它们完美诠释了一家追求极致的公司是如何将“消除用户等待时的焦虑感”和“建立透明、可信的交互预期”做到极致的。这不是一个功能这是一种产品哲学。今天我们就来彻底拆解这个案例看看这187种说“正在处理”的方式背后到底藏着哪些值得我们每一个开发者、产品经理深思的用户体验设计逻辑。2. 核心概念解析SpinnerVerbs 与 TurnCompletionVerbs要理解Claude Code的巧思我们得先搞清楚两个核心配置项spinnerVerbs和turnCompletionVerbs。它们虽然都关乎“动词”但扮演的角色截然不同共同构成了一个完整的交互反馈闭环。2.1 SpinnerVerbs动态化、场景化的过程反馈spinnerVerbs直译过来是“旋转器动词”。这里的“旋转器”指的就是那个代表“加载中”的动态图标或文字提示。所以spinnerVerbs就是一个动词词库专门用于在AI模型进行计算、生成内容的等待过程中动态显示给用户看。它的核心价值在于“过程透明化”和“场景适配”。过程透明化传统的加载提示如一个转圈圈或简单的“处理中”是黑盒的。用户不知道后台在干嘛只能干等。而Claude Code的spinnerVerbs将黑盒打开了一条缝。当它在“思考”如何重构你的代码时它会显示“正在重构”当它在“理解”你的复杂需求时它会显示“正在解析”。这相当于AI在向你“汇报”它的当前工作状态极大地降低了用户的未知焦虑。场景适配这187个动词不是随机堆砌的。它们大致可以归为几类对应不同的任务场景分析与理解类正在分析、正在解析、正在理解、正在消化、正在梳理……构思与生成类正在构思、正在起草、正在撰写、正在生成、正在编织……计算与处理类正在计算、正在处理、正在运行、正在编译模拟、正在验证……优化与改进类正在优化、正在重构、正在精简、正在调试、正在增强……创意与探索类正在头脑风暴、正在探索、正在实验、正在设想……这种分类使得反馈不再是千篇一律的。当你让Claude Code写一首诗时它显示“正在押韵”当你让它修复一个Bug时它显示“正在调试”。这种精准的反馈让用户感觉AI真的在“对症下药”而不是在运行一套固定的、与上下文无关的流程。注意spinnerVerbs的切换通常是随机的或者根据上下文有简单的逻辑匹配但它并非实时反映AI模型内部的确切步骤那太复杂且不稳定。它的设计初衷是心理层面的——通过提供看似合理、具体的状态描述来提升用户的感知质量和等待体验。2.2 TurnCompletionVerbs精准的、结果导向的完成宣告如果说spinnerVerbs关注的是“过程”那么turnCompletionVerbs关注的就是“结果”。它定义了当AI完成一次回复生成后用于结束当前状态的那个动词。你通常会在AI停止“思考”准备开始“说话”的那一瞬间看到它。它的核心价值在于“动作完成感”和“交互仪式感”。常见的turnCompletionVerbs包括“完成”、“结束”、“已就绪”、“回答完毕”、“生成结束”等。这个词通常更简短、更具终结性。它的作用在于明确状态切换清晰地告诉用户“思考”过程已经终止“输出”阶段即将开始或已经开始。增强交互节奏像对话中的一个自然停顿或转折点让整个交互更有“对话感”而不是机械的请求-响应。在一些更精细的设计中turnCompletionVerbs也可能与任务类型轻微挂钩例如在完成一个创造性任务后显示“创作完成”在完成一个分析任务后显示“分析完毕”但相比spinnerVerbs它的变化通常较少更侧重于稳定和清晰的结束信号。2.3 二者协同构建完整的认知-反馈循环这两个配置项共同工作形成了一个完美的用户体验循环用户发起请求- 2.系统进入等待状态从spinnerVerbs词库中选取一个动词展示如“正在构思”- 3.AI计算完成- 4.系统使用turnCompletionVerbs中的一个动词宣告结束如“完成”- 5.开始输出结果。这个循环的关键在于它用语言模拟了人类专家提供服务时的自然状态接受任务、告知客户“我正在为您做XX”、完成后告知“好了这是结果”。这种设计将冷冰冰的机器计算包装成了有温度、可预期的服务过程。3. 设计哲学与用户体验深度剖析Claude Code 这187个动词的设计绝非一时兴起或炫技。它背后蕴含着一套深刻且成熟的产品设计哲学直指用户体验的几个核心痛点。我们来逐一拆解。3.1 对抗“进度条焦虑”将不确定性转化为可感知的进展在数字产品中等待是原罪。尤其是当等待时间不确定时如AI生成用户会迅速产生焦虑、挫败感甚至怀疑系统是否已经崩溃。传统的静态进度条或旋转图标对于不确定任务来说是一种“虚假的确定性”反而会加剧焦虑因为用户不知道它要转多久。Claude Code 的解决方案是用丰富的、变化的文本反馈来替代单一的视觉反馈。心理学上有一个“知觉控制理论”即当人们感觉对情境有更多了解和控制时即使实际等待时间不变其负面情绪也会大大降低。这187个动词就是在不断给予用户“知觉控制”。它告诉你“正在发生什么”看到“正在重构”你就知道它没跑偏确实在处理代码结构问题。它暗示了“工作的复杂性”动词的切换和多样性暗示后台正在进行一系列复杂的、不同的子任务从而让用户对较长的等待时间产生合理的心理预期——“哦它在做这么多事等一会儿是应该的”。它提供了“新鲜的刺激”动态变化的文字比一个静止的图标更能吸引用户的注意力减少无聊感。用户可能会好奇“下一个词会是什么”这种微小的互动分散了等待的注意力。3.2 建立专业信任感通过细节彰显能力与诚意信任是用户愿意持续使用一个工具尤其是AI工具的基础。如何建立信任靠的不仅是最终结果的质量更是整个交互过程中流露出的专业性和可靠性。这187个高度专业、场景化的动词就是建立专业信任的“暗器”。彰显领域专业性一个能说出“正在解耦”、“正在实现多态”、“正在处理边界条件”的AI和一个只会说“正在处理”的AI哪个更像一个资深程序员显然是前者。这些术语是开发者社区的“行话”使用它们能瞬间拉近与专业用户的距离传递出“我懂你也懂这件事”的信号。体现细致与用心能为一个“加载状态”准备187种说法这种对细节的偏执本身就是一种强大的品质信号。它向用户暗示“我们在你看得见和看不见的地方都投入了极大的心血。”这种感知会潜移默化地提升用户对产品整体质量的评价。管理用户预期当AI显示“正在生成一个简单的函数”和“正在设计一个复杂的系统架构”时用户对输出结果的长度、深度和等待时间的预期是完全不同的。精准的动词帮助设定了正确的预期避免了用户因预期不符而产生的失望感。3.3 提升交互的“对话感”与“人性化”AI助手的目标是模拟人类对话。在真实的人类对话中当一方在思考时往往会有些许语言或非语言的暗示比如“嗯……”、“让我想想”、“这个问题有点复杂我需要梳理一下”。Claude Code 的spinnerVerbs就是在数字化地模拟这种“思考时的喃喃自语”。从“状态”到“动作”传统的“加载中”是一个状态描述而“正在构思”是一个动作描述。动作比状态更具动态感和生命力更接近人类的行为模式。丰富的情绪与风格有些动词带有情感色彩如“正在精心编织”、“正在努力调试”。“精心”、“努力”这些副词虽然配置里可能只是动词短语的意味给冷冰冰的机器注入了一丝拟人的情感让交互显得更亲切。创造独特的品牌个性这187个词的选词风格、范围共同塑造了Claude Code的品牌个性——专业、细致、富有创造力、甚至有点书卷气。这与某些追求极简、冷峻风格的产品形成了鲜明对比。3.4 可配置性的启示将体验细节交给用户最让我惊叹的是Claude Code 竟然将spinnerVerbs和turnCompletionVerbs做成了可配置项通常在高级设置或开发者设置中。这意味着什么这意味着产品团队承认“我们精心设计的这187个词可能并不适合所有人。我们给你选择权。” 这是一种更深层次的尊重。满足个性化需求有些用户可能觉得花里胡哨就喜欢简洁的“思考中”。有些极客用户可能想自己编辑一套更硬核、更符合自己口味的动词列表。提供调试与娱乐空间开发者可以修改这些列表观察交互变化这本身就是一个有趣的彩蛋或调试工具。社区甚至可能分享自己创作的“动词包”。彰显技术自信敢于把UI文案这种通常被严格管控的部分开放出来体现了产品在架构上的解耦做得很好也体现了团队对核心体验的自信——即使你改了文案产品的核心价值代码生成能力依然稳固。这个可配置的设计将一流的用户体验从“我们为你设计好的最佳方案”提升到了“我们为你提供了创造属于你自己最佳体验的工具”的层次。4. 技术实现思路与仿建指南看懂了设计哲学手痒的开发者肯定会想这个功能太棒了我能不能在自己的项目里实现一个类似的当然可以虽然我们无法复制Claude的AI模型但实现一个智能化的、动态的等待状态提示系统在技术上是完全可行的。下面我来拆解一个高仿的实现方案。4.1 核心架构设计整个系统可以划分为三个核心模块动词词库管理模块负责存储、分类和管理那几十甚至上百个动词短语。上下文分析与动词选择模块根据当前任务类型、用户输入或其他上下文从词库中智能选取最合适的动词。前端展示与动画模块负责以优雅的方式将选中的动词展示给用户并可能伴有平滑的过渡动画。// 一个简化的概念性代码结构 class IntelligentSpinner { constructor() { this.verbLibraries { analyze: [正在分析, 正在解析, 正在梳理逻辑, 正在消化需求], generate: [正在生成, 正在撰写, 正在创作, 正在编织代码], optimize: [正在优化, 正在重构, 正在精简, 正在提升性能], debug: [正在调试, 正在排查, 正在定位问题, 正在修复], // ... 更多类别 }; this.currentContext analyze; // 默认上下文 } // 根据用户输入或任务类型分析上下文 analyzeContext(userInput) { if (userInput.includes(bug) || userInput.includes(错误)) { this.currentContext debug; } else if (userInput.includes(优化) || userInput.includes(重构)) { this.currentContext optimize; } else if (userInput.includes(写) || userInput.includes(生成)) { this.currentContext generate; } else { this.currentContext analyze; } } // 获取下一个要显示的动词 getNextVerb() { const library this.verbLibraries[this.currentContext]; // 简单实现随机选取。高级实现可以顺序轮询、避免重复等。 const randomIndex Math.floor(Math.random() * library.length); return library[randomIndex]; } // 启动动态显示 start(el) { this.intervalId setInterval(() { el.textContent this.getNextVerb(); }, 2000); // 每2秒切换一次动词 } stop() { clearInterval(this.intervalId); } }4.2 动词词库的构建与分类艺术构建词库是第一步也是体现产品品味的关键。来源可以结合目标领域如编程、写作、设计的专业术语、日常口语、甚至带有些许文学色彩的词语。Claude的列表显然经过了精心筛选和润色。分类逻辑不要胡乱堆砌。像前面分析的按任务类型分类是最直观的。你也可以按“动作阶段”分如理解期、构思期、生成期、检查期或者按“情感基调”分如中性、积极、严谨、创意。数量与质量并非越多越好。187个是一个令人印象深刻的数字但对于大多数应用20-50个精心挑选、覆盖主要场景的动词已经能带来显著提升。关键是每个词都要贴切、自然、不突兀。4.3 上下文感知的智能匹配策略随机切换动词是基础版进阶版需要让动词切换得“合情合理”。基于用户输入的简单关键词匹配如上例代码所示通过分析用户请求中的关键词判断任务类型。基于任务阶段的顺序播放对于一个已知的多步骤任务可以预设一个动词序列。例如代码审查任务可能是[“正在解析代码结构” “正在检查语法规范” “正在分析潜在风险” “正在生成审查意见”]。基于模型中间状态的反馈高阶如果能从AI模型后端获取一些简单的中间状态信号如“embedding完成”、“正在调用工具X”、“生成进度50%”则可以映射到更精确的动词上。这是最理想但实现难度也最大的方式。基于历史交互的个性化如果用户频繁进行某一类任务系统可以倾向于多显示该类任务相关的动词。4.4 前端平滑展示与动画细节展示方式直接影响体验。渐隐渐现动词切换时采用CSSopacity过渡或fadeIn/fadeOut动画避免生硬的瞬间跳变。打字机效果对于较短的动词可以模拟打字机逐个字母出现的效果增加“正在生成这个状态”的生动感。与加载动画结合动词文本通常伴随一个微妙的、非抢戏的动画如一个缓慢脉动的圆点、一条流动的细线共同营造“工作中”的氛围。容器稳定确保显示动词的文本容器宽度固定或过渡平滑避免因动词长短不一导致页面其他元素抖动。实操心得在实现时动词切换的频率需要仔细拿捏。太快如每秒一次会显得慌乱、不真实太慢如10秒一次则失去了动态反馈的意义。2-4秒是一个比较舒适的区间。同时要确保在任务真正结束时能立即清除这个动态状态并清晰触发turnCompletionVerbs的展示哪怕只是瞬间以完成整个状态循环。5. 超越Claude在你的产品中应用此设计模式Claude Code的案例给我们提供了一个绝佳的设计模式范本。我们可以将这个“动态场景化状态反馈”的模式迁移到无数其他产品和场景中大幅提升用户体验。5.1 适用场景分析任何需要用户等待且后台任务可被粗略分类或分阶段的场景都适用此模式AI与机器学习产品这是最直接的领域。文本生成、图像生成、代码生成、数据预测等。复杂数据处理与报表系统“正在汇总数据”、“正在计算指标”、“正在生成图表”、“正在渲染可视化”。文件上传与处理工具不仅仅是“上传中”可以是“正在校验文件”、“正在压缩图片”、“正在转换格式”、“正在准备预览”。编译与构建工具“正在解析依赖”、“正在编译模块”、“正在链接”、“正在优化体积”。网络请求与API调用对于耗时较长的API可以显示“正在连接服务器”、“正在验证身份”、“正在获取数据”、“正在解析响应”。安装程序与更新程序早已有之但可以做得更细致。“正在检查环境”、“正在备份旧文件”、“正在安装组件”、“正在配置设置”、“正在清理临时文件”。5.2 设计实施的关键决策点当你决定在自己的产品中加入类似功能时需要思考以下几个问题粒度把控动词要具体到什么程度是“正在处理”这种大类还是“正在计算用户过去30天的日均活跃度”这种极度具体的描述原则是在用户能理解且不觉得啰嗦的范围内尽可能具体。通常描述一个合理的“子任务”级别最为合适。真实性边界你的动词描述需要多大程度上反映真实的后台进程如果完全随机但用户发现“正在加密数据”后结果只是简单格式转换会产生欺骗感。最佳实践是基于真实流程的阶段进行抽象映射即使不是100%实时对应也要在逻辑上说得通。一致性原则动词的风格需要与你的产品品牌调性一致。一个严肃的金融软件用“正在编织数字”、“正在玩转算盘”可能就不合适而一个创意设计工具则可以用更活泼、拟人化的词汇。国际化与本地化如果你做的是多语言产品这187个动词的翻译将是一个巨大的挑战。不仅要翻译字面意思更要翻译出背后的语境和感觉。这可能需要对词库进行裁剪或为不同语言文化定制不同的词库。5.3 避坑指南与常见问题坑1动词与最终结果严重不符。这是最大的风险。比如显示“正在深度优化”结果只改了一个变量名。这会严重损害信任。对策动词选择逻辑必须保守宁可泛泛不可夸大。对于结果不确定性高的任务使用更通用的动词。坑2过度设计导致干扰。动态文字如果动画太花哨、切换太频繁反而会干扰用户阅读最终结果。对策保持动画简洁、优雅。允许用户在设置中关闭动态提示或选择简化模式。坑3增加了不必要的复杂性。对于耗时极短1秒的操作增加动态提示是多此一举甚至因渲染和切换造成延迟感。对策设置一个延迟阈值例如预计操作时间1.5秒再启动动态提示。对于短任务使用静态提示或无提示。坑4未能覆盖所有场景。词库准备不足导致在某些边缘场景下系统只能回退到难看的“正在处理…”。对策建立词库的默认回退机制和扩展机制。可以设置一个“通用”类别并设计后台日志记录那些触发回退的场景以便后续补充词库。6. 从细节到体系构建卓越用户体验的思考Claude Code的spinnerVerbs不仅仅是一个精巧的功能点它更像一个启示提醒我们用户体验的竞争已经深入到何等细微的层面。当核心功能如代码生成能力各家差距逐渐缩小时这些“第二眼”甚至“第三眼”的细节就成了决定产品气质和用户粘性的关键。它告诉我们一流的用户体验是系统性的不是一个孤立的亮点而是像spinnerVerbs与turnCompletionVerbs、与整体对话节奏、与品牌语调协同工作的一个体系。充满同理心的真正站在用户等待时的心理状态去思考用设计去缓解焦虑而不是无视它。敢于在“看不见”的地方投入的愿意为了一瞬间的、可能很多用户不会刻意关注的提示文字去构建一个包含187个选项的词库和选择逻辑。可配置与开放的尊重用户的差异性给予高级用户控制和探索的空间。作为开发者或产品人我们或许暂时没有资源去打磨187种说法但我们可以从今天开始审视自己产品中每一个让用户等待的时刻。那个旋转的圆圈旁边是不是可以加上一句更贴心的话那个进度条是不是可以分解成几个更有意义的步骤当你开始思考这些问题并付诸行动时你就已经在通往“一流体验”的路上了。细节处见真章这句话在用户体验领域永不过时。