表达｜用户输入

当用户带着明确需求找到AI时，关键一步是把想法说清楚。

这不只是输入几句话。用户可以通过文字、图片、语音等多种形式传达意图，AI也才能给出更靠谱的回应。

输入组件的设计，本质上是在为人机对话搭建顺畅的桥梁。目标是让每一次交互都自然、便捷、不卡壳。

设计目标

在用户表达诉求的阶段，输入组件承担着“翻译”重任。

借助文字描述、图片上传、语音输入等多元方式，用户与AI的互动拥有了更多维度的空间。

设计目标很清晰：让用户以最自然的方式完成输入，同时保证内容准确无误地传达给AI。

文本输入

输入框是最基础、最常见的交互控件。

它为用户提供编辑文本的入口，也是大模型接收信息的主要渠道。

文本框（Input）

当输入内容较短时，使用单行输入框即可。

为了提升录入效率，通常会在框内加入暗提示（占位符），引导用户快速理解该输入什么。

注：可以对一些特殊文本（如数字、网址）应用不一样的样式，便于识别。

文本域（Textarea）

需要输入大段文字时，多行文本域是更好的选择。

它给用户充分的空间来组织语言，适合撰写详细描述或复杂问题。

停止生成操作

当AI正在生成回答，而用户想中途叫停时，停止生成按钮通常紧挨着输入框放置。

这样的位置设计，能让用户快速触达、及时干预，避免等待不必要的内容。

语音输入

语音倾听过程

语音输入允许用户“动口不动手”。

系统会将语音实时转换成文字，并展示给用户确认。

这种方式在移动场景或双手不便时特别有用。

语音初次开始

用户第一次使用语音功能时，系统通常会弹出权限请求，询问是否允许麦克风访问。

用户可以选择“允许”开启语音，或“禁止”关闭该功能。

这是保障隐私的必要步骤。

语音异常

语音输入难免遇到意外，比如录音超时、网络中断导致识别失败。

设计时需要及时、清晰地告知用户发生了什么，并给出解决方案。

• 请重试
• 检查网络连接

文件输入

文件上传让用户可以通过文档、图片等文件表达意图。

AI基于文件内容进行理解和回答。这是从“文本对话”扩展到“多模态交流”的关键环节。

简单上传

基础上传方式适用于单文件且无需预览的场景。

用户点击按钮，弹出文件选择框，选中后直接上传。流程简单直接。

拖拽上传

这是一种更高效的上传方式。

用户只需将文件拖拽到指定区域，就能完成上传，省去了点击、浏览的步骤，体验更顺滑。

快捷命令

在AI产品中，常会预设一些常用意图的快捷命令。

用户点击即可快速输入。这避免了重复打字，提升了效率，也让交互更高效。

槽位填词

当用户触发特定命令后，系统会展示一个预先设定好的输入模板。

用户只需在空白处填写或选择即可。这种方式大大减少了输入负担，同时提高了准确性。

比如订机票的场景，用户只需填写日期、目的地等，剩下的交给AI。

引用输入

在AI回答或用户已发送内容的基础上再次提问时，引用输入功能允许用户直接引用原文（文本、图片、文档等）。

这样能更清晰地为提问提供上下文，AI给出的回答也更有针对性。

表达｜用户发送

当用户完成输入并点击发送后，发送组件负责把这些内容以结构化、易读的方式展示出来。

它是用户审视自己表达的“镜子”，也是后续对话的起点。

设计目标

发送组件需要让用户直观地看到自己说了什么。

• 文本的字体、字号、颜色要舒适，排版要清晰
• 图片要高清、加载快、呈现合适
• 文档要有简洁预览

同时，交互要简单易懂，操作反馈要即时明确。

更重要的是，用户应能轻松对已发送内容进行再次编辑或修改，提升灵活性。

发送交互操作

编辑发送

用户发送后如果发现错误或需要补充，可以对已发送的气泡进行再次编辑。

这避免了撤回重发的尴尬，提供了更灵活的交互体验。

删除发送

当某条气泡内容不再需要或发错了，用户可以选择删除它。

这给予了用户更大的控制权，也有助于保持对话界面的整洁。

引用发送

用户发送的气泡内容可以被引用，方便后续对话中回指。

无论是回应AI的观点，还是重复利用自己的信息，引用都能提升交流的连贯性和准确性。

发送异常

发送失败时，系统应迅速弹出清晰提示。

需要告知原因并提供解决办法，比如“网络异常，请重试”。

发送气泡内容

文本类

发送气泡中展示文本内容是最基本的形式。

为了可读性和可理解性，文本需要采用合适的字体、字号和颜色，排版也要合理。

注：可以对特殊文本（如数字、网址链接）应用不同样式。

图片类

发送气泡也能展示图片，丰富交流的生动性。

设计时需确保图片高清、加载迅速、呈现尺寸合适，让视觉信息清晰传达。

文档类

文档内容同样可以呈现在发送气泡中，增强对话的专业性和信息丰富度。

设计上应提供简洁的文档预览，兼顾清晰性和易用性。

混合类｜图片+文档

发送气泡可以同时展示图片和文档，让信息呈现方式更灵活。

这种方式特别适合需要图文并茂说明复杂问题的场景，让交流更深入高效。

引用内容

当用户引用气泡内容再次输入后，发送气泡可以展示文本、图片、文档等多种样式。

引用让信息的传承和迭代变得直观、全面，进一步提升交流效率。