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

AI 处理完成用户需求后,需以结构化、易读的方式来呈现各种类型的回答内容。

设计目标

结果展示需要合理规划信息层级,让重要内容和结构化信息更易识别。针对文本、图片、代码等不同类型的内容采用恰当的展示形式,既要保持视觉风格的统一性,又要充分考虑长文本的阅读体验,避免信息过载影响理解。


内容展示

文本内容

Preview

作为最基础的展示形式,需要处理好单行文本、多行文本和结构化文本(如列表、标题段落等)的呈现。通过合理的间距、字号和段落划分,提升长文本的可读性。对重点内容可使用高亮、加粗等样式突出,但需控制使用频率避免干扰。

图片内容

Preview

展示 AI 生成或处理的图片结果。默认以合适尺寸展示,支持预览大图和缩放细节。多图场景需注意排版美观,加载时提供占位图以避免布局跳动。

代码内容

Preview

为展示代码片段设计专门容器。使用等宽字体,支持代码语法高亮以增强可读性。提供代码复制功能,方便用户使用。代码过长时支持横向滚动,保持代码格式完整性。

交互卡片

Preview

用于特定场景下需要用户操作的结构化内容,如表单填写、参数调整等。卡片内可包含按钮、输入框等交互元素,操作需提供明确的反馈。

其他

Preview

用于展示表格、数学公式等特殊格式内容。可以与普通文本内容混合展示,保持整体视觉一致性。特殊内容的展示需考虑性能和兼容性,必要时提供降级方案。

内容组织

内容折叠

Preview

针对超过一屏的长内容,提供折叠功能以提升浏览效率。默认展示预览内容,用户可根据需要展开查看完整信息。折叠状态需有明确提示,展开/收起过程动画需流畅。

内容参考来源展示

Preview

在 RAG 等需要提供引用依据的场景下使用。参考来源默认收起以减少干扰,用户可以通过 hover 或点击方式查看详细引用内容。来源信息需简洁清晰,增强内容可信度。