logoAnt Design

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

足不出户

相关资源

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

社区

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

帮助

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

Ant XTech logo更多产品

yuque logo语雀-构建你的数字花园
AntV logoAntV-数据可视化解决方案
Egg logoEgg-企业级 Node.js 框架
Kitchen logoKitchen-Sketch 工具集
Galacean logoGalacean-互动图形解决方案
xtech logo蚂蚁体验科技
主题编辑器
Made with ❤ by
蚂蚁集团和 Ant Design 开源社区
loading

能在这个页面解决的问题,就不要去其它页面解决,因为任何页面刷新和跳转都会引起变化盲视(Change Blindness),导致用户心流(Flow)被打断。频繁的页面刷新和跳转,就像在看戏时,演员说完一行台词就安排一次谢幕一样。

变化盲视(Change Blindness):指视觉场景中的某些变化并未被观察者注意到的心理现象。产生这种现象的原因包括场景中的障碍物,眼球运动、地点的变化,或者是缺乏注意力等。——摘自《维基百科》

心流(Flow):也有别名以化境 (Zone) 表示,亦有人翻译为神驰状态,定义是一种将个人精神力完全投注在某种活动上的感觉;心流产生时同时会有高度的兴奋及充实感。——摘自《维基百科》


覆盖层

推荐示例
预览
推荐示例
用户点击「删除」后,直接操作;出现 Message 告知用户操作成功,并提供用户「撤销」的按钮;用户进行下一个操作或者 1 分钟内不进行任何操作, Message 消失,用户无法再「撤销」。
推荐示例
预览
推荐示例
特例:在执行某些无法「撤销」的操作时,可以点击「删除」后,出现 Popconfirm 进行二次确认,在当前页面完成任务。
不推荐示例
预览
不推荐示例
滥用 Modal 进行二次确认,就像「狼来了」一样,既打断用户心流(无法将上下文带到弹出框中),也无法避免失误的发生。

二次确认覆盖层:避免滥用 Modal 进行二次确认,应该勇敢的让用户去尝试,给用户机会「撤销」即可。


详情覆盖层示例
预览
详情覆盖层示例
通过「点击」图标查看更多详情信息。

详情覆盖层:一般在列表中,通过用户「悬停」/「点击」某个区块,在当前页加载该条列表项的更多详情信息。

注:使用「悬停」激活时,当鼠标移入时,需要设置 0.5 秒左右的延迟触发;当鼠标移出时,立刻关闭覆盖层


输入覆盖层示例
预览
输入覆盖层示例
鼠标「点击」图标触发;鼠标「点击」悬浮层以外的其他区块后,直接保存输入结果并退出。

输入覆盖层:在覆盖层上,让用户直接进行少量字段的输入。



嵌入层

列表嵌入层示例
预览
列表嵌入层示例

列表嵌入层:在列表中,显示某条列表项的详情信息,保持上下文不中断。


标签页示例
预览
标签页示例

标签页:将多个平级的信息进行整理和分类了,一次只显示一组信息。



虚拟页面

在交互过程中,「覆盖层」可以在当前页面上方显示附加内容和交互链接;「嵌入层」可以在页面内部实现同样效果;而「虚拟页面」不局限机械时代的「页面」,可以利用信息时代的特点构建一种新型「页面」。



流程处理

长期以来,Web 实现流程的方式就是把每个步骤放在一个单独的页面上。虽然这种做法是分解问题最简单的方式,但并不是最佳解决方案。对于某些「流程处理」而言,让用户始终待在同一个页面上则更有必要。


渐进式展现示例
预览
渐进式展现示例

渐进式展现:基于用户的操作/某种特定规则,渐进式展现不同的操作选项。


配置程序示例
预览
配置程序示例

配置程序:通过提供一系列的配置项,帮助用户完成任务或者产品组装。


弹出框覆盖层示例
预览
弹出框覆盖层示例

弹出框覆盖层:虽然弹出框的出现会打断用户的心流,但是有时候在弹出框中使用「步骤条」来管理复杂流程也是可行的。