logoAnt Design

⌘ K
  • 设计
  • 研发
  • 组件
  • 博客
  • 资源
5.3.3
  • Ant Design
    • 介绍
    • 设计价值观
    • 实践案例
  • 全局样式
    • 色彩
    • 布局
    • 字体
    • 图标
    • 暗黑模式
    • 阴影
  • 设计模式
    • 概览
    • 模板文档
      • 表单页
      • 数据可视化页
      • 详情页
    • 全局规则
      • 反馈
      • 导航
      • 数据录入
      • 数据展示
      • 数据格式
      • 文案
      • 按钮
      • 数据列表
    • 原则
      • 亲密性
      • 对齐
      • 对比
      • 重复
      • 直截了当
      • 足不出户
      • 简化交互
      • 提供邀请
      • 巧用过渡
      • 即时反应
  • 设计模式 - 探索
    • 概览
    • 模板文档
      • 表单页
      • 工作台
      • 列表页
      • 结果页
      • 异常页
    • 全局规则
      • 导航
      • 消息与反馈
      • 空状态
  • 可视化
  • 动效
  • 图形化
查询模式
反馈模式

即时反应

巧用过渡概览

相关资源

Ant Design Charts
Ant Design Pro
Ant Design Pro Components
Ant Design Mobile
Ant Design Mini
Ant Design Landing-首页模板集
Scaffolds-脚手架市场
Umi-React 应用开发框架
dumi-组件/文档研发工具
qiankun-微前端框架
ahooks-React Hooks 库
Ant Motion-设计动效
国内镜像站点 🇨🇳

社区

Awesome Ant Design
Medium
Twitter
yuqueAnt Design 语雀专栏
Ant Design 知乎专栏
体验科技专栏
seeconfSEE Conf-蚂蚁体验科技大会
加入我们

帮助

GitHub
更新日志
常见问题
报告 Bug
议题
讨论区
StackOverflow
SegmentFault

Ant XTech更多产品

yuque语雀-构建你的数字花园
AntVAntV-数据可视化解决方案
EggEgg-企业级 Node.js 框架
kitchenKitchen-Sketch 工具集
xtech蚂蚁体验科技
主题编辑器
Made with ❤ by
蚂蚁集团和 Ant Design 开源社区

「提供邀请」的强大体现在 交互之前 给出反馈,解决易发现性问题;「巧用过渡」的有用体现在它能够在 交互期间 为用户提供视觉反馈;「即时反应」的重要性体现在 交互之后 立即给出反馈。

就像「牛顿第三定律」所描述作用力和反作用一样,用户进行了操作或者内部数据发生了变化,系统就应该立即有一个对应的反馈,同时输入量级越大、重要性越高,那么反馈量级越大、重要性越高。

虽然反馈太多(准确的说,错误的反馈太多)是一个问题,但是反馈太少甚至没有反馈的系统,则让人感觉迟钝和笨拙,用户体验更差。

牛顿第三定律 :当两个物体互相作用时,彼此施加于对方的力,其大小相等、方向相反。——摘自《维基百科》


查询模式

确定类目示例
预览
确定类目示例
用户所查询的关键词,只会在「话题」、「问题」、「文章」这 3 种类目中出现。
不确定类目示例
预览
不确定类目示例
用户所查询的关键词,其所属的类目数量不确定,可能 4 个,可能 5 个,可能更多。

自动完成:用户输入时,下拉列表会随着输入的关键词显示匹配项。根据查询结果分类的多少,可以分为「确定类目」、「不确定类目」两种类型。


实时搜索示例
预览
实时搜索示例
用户输入一个搜索值,系统随即显示查询结果。

实时搜索:随着用户输入,实时显示搜索结果。「自动完成」、「实时建议」的近亲。



反馈模式

实时预览示例
预览
实时预览示例
根据用户的输入,提供关于密码强度和有效性的实时反馈。

实时预览:在用户提交输入之前,让他先行了解系统将如何处理他的输入。

注:解决错误最好的办法,就是不让错误发生。而「实时预览」就是有效避免错误的好设计。


渐进式展现:在必要的时候提供必要的提示,而不是一股脑儿显示所有提示,导致界面混乱,增加认知负担。案例详见「足不出户/渐进式展现」。


按钮加载示例
预览
按钮加载示例
表格加载示例
预览
表格加载示例
富列表加载示例
预览
富列表加载示例
页面加载示例
预览
页面加载示例

进度指示:当一个操作需要一定时间完成时,就需要即时告知进度,保持与用户的沟通。常见的进度指示:「按钮加载」、「表格加载」、「富列表加载」、「页面加载」。可根据操作的量级和重要性,展示不同类型的进度指示。


点击刷新示例
预览
点击刷新示例

点击刷新:告知用户有新内容,并提供按钮等工具帮助用户查看新内容。


定时示例
预览
定时示例
新增的列表项「高亮」,持续几秒后恢复正常。

定时刷新:无需用户介入,定时展示新内容。