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

很多富交互模式(例如:「拖放」、「行内编辑」、「上下文工具」)都有一个共同问题,就是缺少易发现性。所以「提供邀请」是成功完成人机交互的关键所在。

邀请就是引导用户进入下一个交互层次的提醒和暗示,通常包括意符(例如:实时的提示信息)和可供性,以表明在下一个界面可以做什么。当可供性中可感知的部分(Perceived Affordance)表现为意符时,人机交互的过程往往更加自然、顺畅。

意符(Signifiers):一种额外的提示,告诉用户可以采取什么行为,以及应该怎么操作;必须是可感知(例如:视觉、听觉、触觉等)。——摘自《设计心理学 1 》

可供性(Affordance):也被翻译成「示能」,由 James J. Gibson 提出,定义为物品的特性与决定物品用途的主体能力之间的关系;其中部分可感知(此部分定义为 Perceived Affordance),部分不可感知。——摘自《设计心理学 1 》


静态邀请

指通过可视化技术在页面上提供引导交互的邀请。


文本邀请示例
预览
文本邀请示例
白板式邀请示例
预览
白板式邀请示例
未完成邀请示例
预览
未完成邀请示例

引导操作邀请:一般以静态说明形式出现在页面上,不过它们在视觉上也可以表现出多种不同样式。常见类型:「文本邀请」、「白板式邀请」、「未完成邀请」。


漫游探索邀请示例
预览
漫游探索邀请示例
在用户首次登录时出现少量「探索点」,当用户点击「我知道了」,能快速切换到下一个探索点。

漫游探索邀请:是向用户介绍新功能的好方法,尤其是对于那些设计优良的界面。但是它不是「创口贴」,仅通过它不能解决界面交互的真正问题。

注:保持漫游过程简单,让用户容易退出和重新启动;保持内容简明扼要,与功能密切相关。



动态邀请

指以响应用户在特定位置执行特定操作的方式,提供特定的邀请。


悬停邀请示例 1
预览
悬停邀请示例 1
鼠标「悬停」整个卡片时,可被点击部分变为蓝色的「文字链」。
悬停邀请示例 2
预览
悬停邀请示例 2
鼠标「悬停」时,出现「选择此模板」的按钮。

悬停邀请:在鼠标悬停期间提供邀请。


推论邀请示例
预览
推论邀请示例
用户点击「赞」后,同时系统分析(既然用户喜欢这篇文章,那么可能对这一类文章都有兴趣)并提供开启「精打细算」的邀请。

推论邀请:用于交互期间,合理推断用户可能产生的需求。


更多内容邀请示例
预览
更多内容邀请示例
在 Modal 中会出现前后切换的箭头。

更多内容邀请:用于邀请用户查看更多内容。