logoAnt Design X

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

唤醒|欢迎提示

Resources

Ant Design Charts
Ant Design Pro
Ant Design Pro Components
Ant Design Mobile
Ant Design Mini
Ant Design Landing-Landing Templates
Scaffolds-Scaffold Market
Umi-React Application Framework
dumi-Component doc generator
qiankun-Micro-Frontends Framework
ahooks-React Hooks Library
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 产品时,欢迎提示组件可迅速帮助他们了解 AI 的能力和用法,从而降低学习成本,提升初始体验。

设计目标

欢迎 & 提示组件适用于唤醒 AI 阶段,目标是让用户快速理解 AI 能实现的功能范围及意图预期:

  • 清晰传达 AI 的功能和能力: 帮助用户快速认知并掌握 AI 的使用方法。
  • 降低用户学习成本: 精心设计的提示与推荐内容使用户快速上手。
  • 提供温馨体验: 用视觉吸引力与直观设计提升用户满意度和忠诚度。

👋 欢迎组件

通过生动的文案和直观的介绍,欢迎组件帮助用户了解 AI 产品,减少学习困惑。其设计注重吸引注意力,为用户打造便捷、温馨的初始体验。

注: 欢迎组件通常搭载推荐组件,可适用于不同场景。


👂 提示组件

提示组件通过用户行为、偏好和历史数据,精准推荐内容与服务:

  • 个性化推荐: 提高用户发现有价值内容的效率。
  • 持续优化: 随着用户数据的积累动态调整推荐,满足用户的变化需求。

注: 提示组件通常与欢迎组件结合使用。


组合场景示例

示意 1:简洁清晰的欢迎介绍与问题推荐

  • 特点: 简单直接的文案和设计,帮助用户快速理解。

独立式
助手式


示意 2:主标题和辅助解释

  • 特点: 突出推荐功能,辅助文案可自定义。

独立式
助手式


示意 3:去除背景,突出推荐功能

  • 特点: 推荐功能细化描述,帮助用户更深入理解。

独立式
助手式


示意 4:加入品牌形象,分组推荐功能

  • 特点: 分组信息展示,信息层次清晰。

独立式


示意 5:精心设计的视觉效果与文案

  • 特点: 通过视觉吸引与引导文案,增强用户兴趣。

独立式