大多数产品团队在设计 AI 引用时，只是将其构想为紧挨着生成文本的整齐蓝色小数字。他们在高速连接环境下完成开发，看着预览在半秒内弹出，然后就此了事。这在测试环境中行得通，但在面对真实的互联网环境时，往往难以维持。
来源会失效。公司会删除博客文章。政府门户网站在没有重定向的情况下重新组织 URL。付费墙会突然出现。CDN 会出现波动。AI 三个月前扫描过的文档可能在昨天就被重写了。如果你的引用组件只会在一切顺利时表现得很好，那么当情况出错时，它就会向用户撒谎。更糟糕的是，它会让用户困惑于这些证据是否曾经真正存在过。
一个可靠的引用系统需要传达“状态”。不仅仅是一个超链接，也不仅仅是一个工具提示。它需要实时告诉读者，这些证据目前处于什么情况。
为四种真实状态进行设计
将引用视为一个微型的状态机。AI 呈现的每个来源都可能处于四种情况之一，你的界面应该诚实地处理每一种情况。
加载中 (Loading)。 用户点击上标数字，系统开始获取预览、片段或原始页面。在等待期间，要向用户展示“正在进行中”。一个骨架屏占位符、一个脉动的摘录框，甚至是一句简单的“正在获取来源...”都比沉默要好。沉默会让用户怀疑点击是否生效。在模型边思考边输出来源的流式界面中，加载状态还能为你争取时间去解析链接，而不会阻塞文本生成。
可用 (Available)。 这是每个人都在设计的状态。链接可以正常跳转，文本内容仍与模型看到的一致，用户可以获得清晰的摘录和直接链接。但不要仅仅丢下一个原始 URL。要显示标题、域名和相关段落。为读者提供足够的上下文，让他们决定是否要离开当前页面。括号里放一个原始的 href 链接在技术上确实是引用，但并不是好的用户体验。
已变更 (Changed)。 这种情况最让人沮丧。页面加载成功了，但内容中不再包含 AI 所引用的那段话或数据。也许是发布者更新了文章，也许是 AI 训练时的快照抓取了一个后来发生变化的标题。你的组件应该标记出这种差异，而不是假装一切都对得上。一句类似“该来源自索引以来已更新”的小提示，可以防止用户浪费十分钟去寻找一段已经不存在的句子。这也能维护信任。如果你掩盖了这种不匹配，用户最终会认为你的产品在胡编乱造。
缺失 (Missing)。 404 错误、超时、付费墙，或者是返回了 200 状态码但只显示“内容已删除”通用页面的服务器。不要让链接在那儿蓝闪闪地挂着，假装它还能用。用直白的语言替换它：“页面已删除”、“链接不再可用”或“来源离线”。如果你知道失败的原因，请说明。如果存在 Internet Archive 或缓存副本，请提供。目标是完成闭环，而不是让读者陷入困境。
无障碍设计是不容妥协的
引用组件位于 UI 中高流量、高风险的部分。它们理应获得与结账表单或航班预订流程同等的严谨对待。
使用文字来显示状态。色盲用户无法仅依靠绿点或红框。请将你的指示器与文字结合使用：“可用”、“已修改”、“不可用”。这个微小的标签对所有视力正常的用户也有帮助，因为状态颜色在不同文化或产品中的含义很少是完全一致的。
为屏幕阅读器编写描述性名称。为你的链接添加标签，让使用屏幕阅读器的人能听到有用的信息。不要只读“链接”，而是读出“来源 3：审计日志保留政策”。这能让听者在决定打开之前，准确知道他们会看到什么。
保护阅读流。点击引用不应使 AI 生成的答案凭空消失。使用侧边栏、模态框或行内展开。读者打开来源是为了验证某个特定的观点。如果你的界面抹去了他们正在阅读的观点，你就迫使他们在寻找证据时必须依靠工作记忆来记住刚才的内容。这增加了不必要的认知负荷。
有意识地管理焦点。当用户打开引用时，将键盘焦点移至新的面板或弹出窗口中。当他们关闭时，将焦点送回触发点。不要在流式输出仍在向页面写入来源时劫持焦点。让用户保持掌控感。
请谨慎处理流式输出。如果您的生成式界面在引用内容到达时即时添加引用，请不要为每一个新的上标数字都向屏幕阅读器用户发送一条通知。请进行批量处理。当积累了两个或三个引用时，再发布一个礼貌的摘要，例如“新增两个来源”。不断的干扰会使辅助技术用户无法阅读输出内容。
记住引用的证明作用
这一点再怎么强调也不为过。引用展示的是出处，而不是真理性。
当 AI 引用一个来源时，它表达的是：“我在这里找到了这段措辞。”它并不是在说：“这位专家是正确的。”它也不是在说：“这项研究开展得很严谨。”它甚至不是在说：“我正确理解了上下文。”引用是一张回溯到原始证据的地图。读者仍需亲自走过那条路径，并判断该证据是否站得住脚。
您的设计应当明确这种区别。使用可以让用户快速浏览相关行内容的摘录。显示发布日期，以便读者了解证据的时效性。如果来源是论坛、新闻稿或原始研究，请呈现这些背景信息，以便读者进行适当的权衡。构建界面是为了支持人类的判断，而不是取代它。
进行现实测试
一个通过了视觉审查的引用组件仅仅完成了一半。你需要