AI + Design，探索 AI产品界面设计范式（中）

表达｜用户输入

当用户带着明确的需求找到AI时，关键的一步就是如何把想法“说清楚”。这不仅仅是打几个字那么简单——通过文字、图片、语音等多种形式的输入组件，用户能更精准地传达意图，AI也才能给出更靠谱的回应。输入组件的设计，本质上是在为人机对话搭建一座顺畅的桥梁，让每一次交互都自然、便捷、不卡壳。

设计目标

在用户表达诉求的阶段，输入组件承担着“翻译”重任。借助文字描述、图片上传、语音输入等多元方式，用户与AI的互动拥有了更多维度的空间。设计的目标很清晰：让用户能以最自然的方式完成输入，同时保证内容准确无误地传达给AI。

文本输入

输入框是最基础、最常见的交互控件，它为用户提供了编辑文本的入口，是大模型接收信息的主要渠道。

文本框（Input）

当输入内容较短时，使用单行输入框即可。为了提升录入效率，通常会在框内加入暗提示（占位符），引导用户快速理解该输入什么。

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

文本域（Textarea）

需要输入大段文字时，多行文本域是更好的选择。它给用户充分的空间来组织语言，适合撰写详细描述或复杂问题。

停止生成操作

当AI正在生成回答，而用户想中途叫停时，停止生成按钮通常紧挨着输入框放置。这样的位置设计，让用户能快速触达、及时干预，避免等待不必要的内容。

语音输入

语音倾听过程

语音输入允许用户“动口不动手”，系统将语音实时转换成文字，并展示给用户确认。这种方式在移动场景或双手不便时特别有用。

语音初次开始

用户第一次使用语音功能时，系统通常会弹出权限请求，询问是否允许麦克风访问。用户可以选择“允许”开启语音，或“禁止”关闭该功能。这是保障隐私的必要步骤。

语音异常

语音输入难免遇到意外，比如录音超时、网络中断导致识别失败。设计时需要及时、清晰地告知用户发生了什么，并给出解决方案，比如“请重试”或“检查网络连接”。

文件输入

文件上传让用户可以通过文档、图片等文件表达意图，AI基于文件内容进行理解和回答。这是从“文本对话”扩展到“多模态交流”的关键环节。

简单上传

基础上传方式适用于单文件且无需预览的场景。用户点击按钮，弹出文件选择框，选中后直接上传。流程简单直接。

拖拽上传

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

快捷命令

在AI产品中，常会预设一些常用意图的快捷命令，用户点击即可快速输入。这避免了重复打字，提升了效率，也让交互更高效。

槽位填词

当用户触发特定命令后，系统会展示一个预先设定好的输入模板，用户只需在空白处填写或选择即可。这种方式大大减少了输入负担，同时提高了准确性——比如订机票的场景，用户只需填写日期、目的地等，剩下的交给AI。

引用输入

在AI回答或用户已发送内容的基础上再次提问时，引用输入功能允许用户直接引用原文（文本、图片、文档等）。这样能更清晰地为提问提供上下文，AI给出的回答也更有针对性。

表达｜用户发送

当用户完成输入并点击发送后，发送组件负责把这些内容以结构化、易读的方式展示出来。它是用户审视自己表达的“镜子”，也是后续对话的起点。

设计目标

发送组件需要让用户能直观地看到自己说了什么：文本的字体、字号、颜色要舒适，排版要清晰；图片要高清、加载快、呈现合适；文档要有简洁预览。同时，交互要简单易懂，操作反馈要即时明确。更重要的是，用户应能轻松对已发送内容进行再次编辑或修改，提升灵活性。

发送交互操作

编辑发送

用户发送后如果发现错误或需要补充，可以对已发送的气泡进行再次编辑。这避免了撤回重发的尴尬，提供了更灵活的交互体验。

删除发送

当某条气泡内容不再需要或发错了，用户可以选择删除它。这给予了用户更大的控制权，保持对话界面的整洁。

引用发送

用户发送的气泡内容可以被引用，方便后续对话中回指。无论是回应AI的观点，还是重复利用自己的信息，引用都能提升交流的连贯性和准确性。

发送异常

发送失败时，系统应迅速弹出清晰提示，告知原因并提供解决办法，比如“网络异常，请重试”。

发送气泡内容

文本类

发送气泡中展示文本内容是最基本的形式。为了可读性和可理解性，文本需要采用合适的字体、字号和颜色，排版要合理。

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

图片类

发送气泡也能展示图片，丰富交流的生动性。设计时需确保图片高清、加载迅速、呈现尺寸合适，让视觉信息清晰传达。

文档类

文档内容同样可以呈现在发送气泡中，增强对话的专业性和信息丰富度。设计上应提供简洁的文档预览，兼顾清晰性和易用性。

混合类｜图片+文档

发送气泡可以同时展示图片和文档，让信息呈现方式更灵活。这种方式特别适合需要图文并茂说明复杂问题的场景，让交流更深入高效。

引用内容

当用户引用气泡内容再次输入后，发送气泡可以展示文本、图片、文档等多种样式。引用让信息的传承和迭代变得直观、全面，进一步提升交流效率。