AI + Design，探索 AI产品界面设计范式（中）
表达｜用户输入
当用户带着明确的需求找到AI时，关键的一步就是如何把想法“说清楚”。这不仅仅是打几个字那么简单——通过文字、图片、语音等多种形式的输入组件，用户能更精准地传达意图，AI也才能给出更靠谱的回应。输入组件的设计，本质上是在为人机对话搭建一座顺畅的桥梁，让每一次交互都自然、便捷、不卡壳。
设计目标
在用户表达诉求的阶段，输入组件承担着“翻译”重任。借助文字描述、图片上传、语音输入等多元方式，用户与AI的互动拥有了更多维度的空间。设计的目标很清晰：让用户能以最自然的方式完成输入，同时保证内容准确无误地传达给AI。
文本输入
输入框是最基础、最常见的交互控件，它为用户提供了编辑文本的入口，是大模型接收信息的主要渠道。
文本框（Input）
当输入内容较短时，使用单行输入框即可。为了提升录入效率，通常会在框内加入暗提示（占位符），引导用户快速理解该输入什么。
注：可以对一些特殊文本（如数字、网址）应用不一样的样式，便于识别。
文本域（Textarea）
需要输入大段文字时，多行文本域是更好的选择。它给用户充分的空间来组织语言，适合撰写详细描述或复杂问题。
停止生成操作
当AI正在生成回答，而用户想中途叫停时，停止生成按钮通常紧挨着输入框放置。这样的位置设计，让用户能快速触达、及时干预，避免等待不必要的内容。
语音输入
语音倾听过程
语音输入允许用户“动口不动手”，系统将语音实时转换成文字，并展示给用户确认。这种方式在移动场景或双手不便时特别有用。
语音初次开始
用户第一次使用语音功能时，系统通常会弹出权限请求，询问是否允许麦克风访问。用户可以选择“允许”开启语音，或“禁止”关闭该功能。这是保障隐私的必要步骤。
语音异常
语音输入难免遇到意外，比如录音超时、网络中断导致识别失败。设计时需要及时、清晰地告知用户发生了什么，并给出解决方案，比如“请重试”或“检查网络连接”。
文件输入
文件上传让用户可以通过文档、图片等文件表达意图，AI基于文件内容进行理解和回答。这是从“文本对话”扩展到“多模态交流”的关键环节。
简单上传
基础上传方式适用于单文件且无需预览的场景。用户点击按钮，弹出文件选择框，选中后直接上传。流程简单直接。
拖拽上传
更高效的上传方式——用户只需将文件拖拽到指定区域，就能完成上传。省去了点击、浏览的步骤，体验顺滑。
快捷命令
在AI产品中，常会预设一些常用意图的快捷命令，用户点击即可快速输入。这避免了重复打字，提升了效率，也让交互更高效。
槽位填词
当用户触发特定命令后，系统会展示一个预先设定好的输入模板，用户只需在空白处填写或选择即可。这种方式大大减少了输入负担，同时提高了准确性——比如订机票的场景，用户只需填写日期、目的地等，剩下的交给AI。
引用输入
在AI回答或用户已发送内容的基础上再次提问时，引用输入功能允许用户直接引用原文（文本、图片、文档等）。这样能更清晰地为提问提供上下文，AI给出的回答也更有针对性。
表达｜用户发送
当用户完成输入并点击发送后，发送组件负责把这些内容以结构化、易读的方式展示出来。它是用户审视自己表达的“镜子”，也是后续对话的起点。
设计目标
发送组件需要让用户能直观地看到自己说了什么：文本的字体、字号、颜色要舒适，排版要清晰；图片要高清、加载快、呈现合适；文档要有简洁预览。同时，交互要简单易懂，操作反馈要即时明确。更重要的是，用户应能轻松对已发送内容进行再次编辑或修改，提升灵活性。
发送交互操作
编辑发送
用户发送后如果发现错误或需要补充，可以对已发送的气泡进行再次编辑。这避免了撤回重发的尴尬，提供了更灵活的交互体验。
删除发送
当某条气泡内容不再需要或发错了，用户可以选择删除它。这给予了用户更大的控制权，保持对话界面的整洁。
引用发送
用户发送的气泡内容可以被引用，方便后续对话中回指。无论是回应AI的观点，还是重复利用自己的信息，引用都能提升交流的连贯性和准确性。
发送异常
发送失败时，系统应迅速弹出清晰提示，告知原因并提供解决办法，比如“网络异常，请重试”。
发送气泡内容
文本类
发送气泡中展示文本内容是最基本的形式。为了可读性和可理解性，文本需要采用合适的字体、字号和颜色，排版要合理。
注：可以对特殊文本（如数字、网址链接）应用不同样式。
图片类
发送气泡也能展示图片，丰富交流的生动性。设计时需确保图片高清、加载迅速、呈现尺寸合适，让视觉信息清晰传达。
文档类
文档内容同样可以呈现在发送气泡中，增强对话的专业性和信息丰富度。设计上应提供简洁的文档预览，兼顾清晰性和易用性。
混合类｜图片+文档
发送气泡可以同时展示图片和文档，让信息呈现方式更灵活。这种方式特别适合需要图文并茂说明复杂问题的场景，让交流更深入高效。
引用内容
当用户引用气泡内容再次输入后，发送气泡可以展示文本、图片、文档等多种样式。引用让信息的传承和迭代变得直观、全面，进一步提升交流效率。
