logoAnt Design X

DesignDevelopmentComponentsPlayground
  • ❤️ Intention 意图设计
    • 介绍
    • 明确意图类型
    • 提供意图预期
    • 引导意图表达
  • 🎭 Role 角色设计
    • 介绍
    • 真实一致
    • 流畅自然
    • 有人情味
  • 💭 Conversation 会话设计
    • 介绍
    • 开始
    • 追问
    • 提示
    • 确认
    • 错误
    • 结束
  • 💻 Hybrid UI 混合界面设计
    • 介绍
    • 唤醒|AI 标识
    • 唤醒|欢迎提示
    • 表达|用户输入
    • 表达|用户发送
    • 确认|生成过程
    • 反馈|结果应用
    • 反馈|结果展示
  • RICH 设计范式简介

表达|用户发送

Resources

Ant Design
Ant Design Charts
Ant Design Pro
Pro Components
Ant Design Mobile
Ant Design Mini
Ant Design Web3
Ant Design Landing-Landing Templates
Scaffolds-Scaffold Market
Umi-React Application Framework
dumi-Component doc generator
qiankun-Micro-Frontends Framework
Ant Motion-Motion Solution
China Mirror 🇨🇳

Community

Awesome Ant Design
Medium
Twitter
yuque logoAnt Design in YuQue
Ant Design in Zhihu
Experience Cloud Blog
seeconf logoSEE Conf-Experience Tech Conference

Help

GitHub
Change Log
FAQ
Bug Report
Issues
Discussions
StackOverflow
SegmentFault

Ant XTech logoMore Products

yuque logoYuQue-Document Collaboration Platform
AntV logoAntV-Data Visualization
Egg logoEgg-Enterprise Node.js Framework
Kitchen logoKitchen-Sketch Toolkit
Galacean logoGalacean-Interactive Graphics Solution
xtech logoAnt Financial Experience Tech
Theme Editor
Made with ❤ by
Ant Group and Ant Design Community
loading

用于承载用户侧发送的对话内容,以结构化、易读的方式展示各种类型的用户发送内容。

设计目标

用户发送组件需具备清晰展示效果,以使用户能够直观地审视自己输入的内容,如文本采用合适字体、字号和颜色,排版合理;图片确保高分辨率、快加载速度和合适呈现;文档提供简洁预览。同时,交互设计要简单易懂,操作反馈及时明确。该组件还应提供便捷的再次编辑操作功能,设置明显图标或提示,以便用户能够轻松地对已输入内容进行修改与完善。


发送交互操作

编辑发送

Preview

用户在发送信息之后,若发现存在错误或需补充内容时,可以对已发送气泡进行再次编辑修改,提供更为便捷灵活的交互体验,使用户能够更好地表达自身意图。

删除发送

Preview

当用户认为某个气泡的内容不再需要或者发送错误时,可以选择将其删除,为用户提供更大的灵活性和控制权,同时提升界面的整洁和准确性。

引用发送

Preview
Preview
Preview
Preview

用户发送的气泡内容可被引用,为用户和 AI 的交流提供便利与灵活。可高效回应 AI 观点或重复利用自身信息,提升交流的连贯性与准确性。

发送异常

Preview
Preview

发送异常时,系统迅速弹出清晰提示及时告知用户原因,并提供解决方法,如重新发送等。

发送气泡内容

💬 文本类

Preview

发送气泡展示文本类内容,方便用户交流,提高信息的可读性与可理解性,使交流更顺畅高效。文本采用合适的字体、字号和颜色,排版合理。

注:可以对一些文本(如数字和网址超链接)运用特别的样式。

🎨 图片类

Preview

发送气泡展示图片类内容,增强交流的丰富性与生动性,助于清晰传达信息。设计应考虑图片的展示效果与用户体验,图片需确保高分辨率、快加载速度和合适呈现。

📃 文档类

Preview

发送气泡能够展示文档类内容,增强与 AI 交流的专业性和信息丰富度。在设计上,提供文档简洁预览,需充分考虑清晰性和易用性。

🧩 混合类|图片+文档

Preview

发送气泡可混合展示图片类和文档类内容,丰富分享方式,提升交流的生动性、专业性及信息丰富度。利于全面传达复杂信息,使交流深入高效。

🙌 引用内容

Preview

引用气泡内容再次输入后,发送气泡可展示文本、图片、文档等样式,丰富信息呈现,使交流直观、全面、高效。