钉钉、飞书、金山、腾讯文档编辑器基础交互梳理
%3bfill-opacity:1%3b'/%3e %3c/svg%3e){kind=small}
%3bfill-opacity:1%3b'/%3e %3c/svg%3e){kind=small}
钉钉、飞书、金山、腾讯文档编辑器基础交互梳理
页面管理
钉钉、飞书、金山、腾讯文档编辑器基础交互梳理
智能文档基础交互
功能模块交互
组件 | 交互类型 | 招乎文档 | 钉钉文档 | 飞书文档 | 金山文档 | 腾讯文档 | 总结 |
文档状态 | - | 有编辑态和阅读态 | 有编辑态和阅读态 | 有编辑态和阅读态 | 仅编辑态 | 仅编辑态 | |
顶部操作栏 | - | 有 | 有 | 无 | 有 | 无 | |
空白列 | hover | 无效果 | 空白列：左侧新增组件按钮
| 空白列：左侧新增组件按钮 | 空白列：左侧新增组件按钮 | 空白列：左侧新增组件按钮 | |
click | 默认文案 | 默认文案 | | 默认文案 | | ||
组件全局 | hover | 左侧展示快捷操作 | 左侧展示快捷操作，右侧出现评论图标 | 左侧展示快捷操作 | 左侧展示快捷操作，右侧出现评论图标 | 左侧展示快捷操作 | |
左侧快捷操作 | hover | | 出现提示“拖拽移动/点击打开菜单栏” | 即出现菜单栏 | 出现提示“点击打开菜单栏，拖拽移动位子” | 仅按钮效果 | |
click | | 点击打开菜单栏 | 无效果 | 点击打开菜单栏 | 点击打开菜单 | | |
拖拽 | | 拖拽移动位子 | 拖拽移动位子 | 拖拽移动位子 | 拖拽移动位子 | 钉钉文档有特殊提示样式 | |
文本 | hover | | 标题：操作图标 正文：无效果 | 标题：操作图标 正文：无效果 | 标题：操作图标 正文：无效果 | 标题：操作图标 正文：无效果 | 统一 |
click | 文本太光标 | 文本态光标 | 文本态光标 | 文本态光标 | 文本态光标 | 统一 | |
hover操作 | 无效果 | 按钮底色 | 按钮变主题色+toast提示 | 按钮变主题色+toast提示 | 无效果 | | |
有序列表 | hover | 无效果 | 无效果 | 无效果 | 无效果 | 无效果 | 统一 |
click | 文本态光标 | 文本态光标 | 文本态光标 | 文本态光标 | 文本态光标 | 统一 | |
无序列表 | hover | 无效果 | 无效果 | 无效果 | 无效果 | 无效果 | 统一 |
click | 文本态光标 | 文本态光标 | 文本态光标 | 文本态光标 | 文本态光标 | 统一 | |
任务列表 | hover | 无效果 | 底色，列表右侧出现操作按钮 | 底色，列表右侧出现操作按钮 | 无效果 | 无效果 | |
click | 文本态光标 | 底色，文本态光标 | 底色，文本态光标 | 文本态光标 | 文本态光标，列表右侧出现操作按钮 | | |
引用 | hover | 无效果 | 无效果 | 无效果 | 无效果 | 无效果 | 统一 |
click | 文本态光标 | 文本态光标 | 文本态光标 | 文本态光标 | 文本态光标 | 统一 | |
表格 | hover | 无效果 | 单元格：无组件左侧出现菜单操作，有组件出现组件相应的快捷操作按钮
分割线：可调整行高列宽 | 单元格：无组件左侧出现菜单操作，有组件出现组件相应的快捷操作按钮
分割线：可调整行高列宽
出现表格表头区域
分割线操作锚点 | 无效果 | 无效果 | |
点击后 | 出现表格表头区域 | 出现表格表头区域
顶部出现操作项
分割线及右下角操作/拖拽锚点 | | 出现表格表头区域 | 出现表格表头区域 | | |
选中后hover | | | | | | | |
框选 | | | | | | | |
代码块 | hover | | 描边 | 出现操作按钮 | 无效果，操作默认显示 | 无效果 | |
click | | 出现操作按钮和收起操作按钮，文本态光标 | 同hover，文本态光标 | 同hover，文本态光标 | 左上角出现悬浮操作按钮，文本态光标 | | |
| 其他交互 | | | hover | | | |
折叠块 | | | - | - | - | - | |
高亮块 | hover | | 描边 | 顶部出现操作按钮 | 无效果 | 无效果 | |
click | | 顶部出现操作按钮 | 同hover | 无效果 | 顶部出现操作按钮 | | |
其他交互 | | hover图标，出现提示 | | | | | |
图片 | hover | | 描边，鼠标箭头态 | 可操作描边，顶部操作按钮，鼠标手指态， | 无效果 | 无效果 | |
click | | 顶部操作按钮，鼠标放大镜 | 描边颜色变深，鼠标放大镜态 | 可操作描边，顶部操作按钮，鼠标手指态 | 蓝色蒙版，可操作锚点，鼠标箭头态 | | |
再次点击 | | 预览大图 | 预览大图 | 预览大图 | 双击预览大图 | | |
链接 | hover | | 标题视图：底色
卡片视图：无效果 | 标题视图：底色+下划线+操作按钮
链接视图：底色+下划线+操作按钮
卡片视图：描边+操作按钮
预览图视图：可操作描边+操作按钮 | 标题视图：蓝色底色+底部操作按钮
链接视图：下划线+底部操作按钮
卡片视图：无效果 | 标题视图：底色+下划线
链接视图：底色
卡片视图：无效果 | |
click | | 标题视图：底色
卡片视图：增加描边+顶部操作按钮 | 标题视图：打开网页
链接视图：打开网页
卡片视图：打开网页
预览图视图：可在窗口使用网页，点击预览图里的链接打开网页 | 标题视图：打开网页
链接视图：打开网页
卡片视图：描边+顶部操作按钮 | 标题视图：顶部操作按钮
链接视图：顶部操作按钮
卡片视图：描边+顶部操作按钮 | | |
再次点击 | | 均打开链接 | - | 卡片视图：打开网页 | 无效果，均需要点击操作按钮打开网页 | | |
文件 | hover | | 链接视图：底色
卡片视图：底色 | 文本视图：底色+顶部操作按钮
卡片视图：描边+顶部操作按钮
预览视图：顶部操作按钮 | -
没找到插入文件功能 | 文字链：底色
图标+文字链：底色
书签卡片：无效果
预览：文件信息+操作 | |
click | | 链接视图：底色+顶部操作
卡片视图：底色+描边+顶部操作 | 文本视图：文件预览
卡片视图：双击文件预览
预览视图：出现描边 | - | 文字链：顶部操作按钮
图标+文字链：顶部操作按钮
书签卡片：描边+顶部操作按钮
预览：描边+顶部操作按钮 | | |
双击 | | | | - | 文字链：顶部文案编辑操作按钮
图标+文字链：顶部文案编辑操作按钮
书签卡片：预览
预览：无效果 | | |
分割线 | hover | | 底色 | | | | |
click | | 顶部操作按钮 | 底色 | 底色 | | | |
日期 | hover | | 叠加底色 | | | - | |
click | | 唤出日期选择器 | 唤出日期选择器及其他信息编辑 | | - | | |
表情 | hover | | 底色 | - | 底色 | - | |
click | | 唤起表情选择下拉 | - | 唤起表情选择下拉 | - | | |
分栏 | hover | | 操作图标 | 默认不显示，hover出现底色 | 默认不显示，hover出现底色 | 无明显效果 | 钉钉：退出编辑模式底色依旧存在。
腾讯：默认和hover均无底色， |
click | | | | | 出现分割线 | ||
视频 | hover | | | 视频信息，底部操作栏和拖拽锚地，顶部操作按钮 | - | 视频信息，拖拽锚点 | |
click | | 描边+顶部操作按钮 | 蓝色描边 | - | 描边+顶部操作按钮 | | |
状态 | | | - | - | - | - | |
@他人 | hover | | 增加底色（变深） | 增加底色（变浅） | 无效果 | 增加底色 | |
| click | | 无效果 | 名片 | 名片 | 无效果 | |
小结 | | | hover组件左侧展示快捷操作，右侧出现评论图标；
hover快捷操作出现提示“拖拽移动/点击打开菜单栏”，点击打开菜单栏
Hover：
1、无效果：正文、有序列表、无序列表、引用、卡片链接、视频/文件预览视图
（文本类/有背景色的卡片/预览视图）
2、增加底色：任务列表、链接视图（标题视图链接、链接视图文件）、表情、分割线
3、叠加灰底色：文件（包含视频、图片）卡片视图、所有操作按钮
4、叠加蓝底色：人员
5、增加描边：代码块、高亮块、图片
Click:
有编辑操作的组件：顶部出现操作按钮
1、叠加底色：链接、
2、叠加描边：卡片视图链接/文件、视频
优点：卡片式组件hover时叠加描边，效果比较清晰。
缺点：分栏颜色过多，且推出编辑后依旧存在。hover和click的效果略复杂。
| hover组件左侧展示快捷操作，可编辑组件顶部出现操作按钮，点击仅光标定位，部分组件点击叠加描边（如视频）或描边颜色变深
Hover：
1、无效果：正文、有序列表、无序列表、引用（文本类）
2、增加底色：分栏、任务列表、日期（蓝色）、人员（底色变浅）
3、增加边框：图片、卡片视图/预览链接、卡片视图文件
Click:
1、增加底色：分割线
2、增加边框：图片（颜色变深）、视频、预览视图文件
优点：因为hover即出现快捷操作和编辑按钮，交互效果明显，hover和click不需要区分。所以相对来说体验感相对其他更统一和简洁。
缺点：分栏默认不显示底色/边框等，最开始编辑时体验感不佳。 | hover组件左侧展示快捷操作，右侧出现评论图标；
hover快捷操作出现提示“点击打开菜单栏/拖拽移动位置”，点击打开菜单栏
Hover：
增加底色：分栏（灰）、标题视图链接/文件（蓝）、日期（蓝）
其他均无效果
Click:
1、增加边框：图片、卡片视图链接
2、增加底色：分割线（蓝）
优点：hover的交互效果少且简洁
缺点：hover交互效果少，反馈就少 | hover组件左侧展示快捷操作，右侧出现评论图标；
hover快捷操作无提示，点击打开菜单栏
Hover：
1、增加底色：文字链的链接/文件（灰）、标题+链接的链接/文件（灰）
2、展示信息：视频
其他均无效果
优点：hover的交互效果少且简洁
缺点：分栏默认与hover均不显示底色/边框等，编辑时体验感不佳。hover交互效果少，反馈就少。 | |
|
hover时候光标形态
组件 | 钉钉文档 | 飞书文档 | 金山文档 | 腾讯文档 |
左侧快捷操作 | 文本态 | | | |
文本 | 文本态 | | | |
有序列表 | 文本态 | | | |
无序列表 | 文本态 | | | |
任务列表 | 文本态 | | | |
引用 | 文本态 | | | |
表格 | | | | |
代码块 | | | | |
折叠块 | | | | |
高亮块 | | | | |
图片 | 默认：
点击后：放大镜 | | | |
链接 | 默认态（箭头） | | | |
文件 | | | | |
分割线 | | | | |
日期 | | | | |
表情 | | | | |
分栏 | | | | |
视频 | | | | |
状态 | | | | |
人员 | （点击态）手掌 | | | |
其他交互效果
交互说明 | 钉钉文档
有编辑态和阅读态，顶部有操作栏 | 飞书文档
有编辑态和阅读态，顶部无操作栏 | 金山文档
仅编辑态，顶部有操作栏 | 腾讯文档
仅编辑态，顶部无操作栏 | 总结 |
从页面内部框选 |  所有组件：蓝色遮罩
有序/无序/任务列表、引用组件仅框选文字部分 |   图片、文件、视频：蓝色描边
分栏：灰底色（hover效果）
其他组件：蓝色遮罩
有序/无序/任务列表组件仅框选文字部分
引用可框选整个组件 |   分栏：灰底色（hover效果）
其他组件：蓝色遮罩
都可框选整个组件，且所在行呈选中状态
|   有序/无序/任务列表、引用、高亮块组件仅框选文字/内容部分 | 建议效果：
1、从外部框选
所有组件效果均为选中效果
2、从内部框选
有序/无序/任务列表组件仅框选文字部分
其他框选整个组件l暗色遮罩效果
|
从页面外部框选 | 不可从页面外部框选 |  所有组件：蓝色遮罩、且所在行呈选中状态 | 内外统一效果 |   所有组件：蓝色遮罩、且所在行呈选中状态 | |
Ctrl+C/Ctrl+V复制效果 | 标题、有序/无序/任务列表、引用复制文字带组件效果
高亮块、分栏复制内部内容不带组件效果 | | |
| |
光标定位后插入组件 | | | | | |
组件前后插入光标 | 基本能定位于组件前/后
1.有序/无序/任务列表、引用组件定位于组件内文字内容前
2.当组件占位不止一行时，定位于最后一行前方 | 1.有序/无序/任务列表、引用组件定位于组件内文字内容前
2.代码块、高亮块、表格、分栏定位于组件内部
3.图片、卡片类、分割线、视频、预览图类组件无法定位组件前 | 1.有序/无序/任务列表、引用组件定位于文字内容前
2.代码块、高亮块、表格、分栏定位于组件内部
3.图片、卡片类、分割线无法定位组件前 | 1.有序/无序/任务列表、引用组件定位于文字内容前
2.代码块、高亮块、表格、分栏定位于组件内部
3.图片、卡片类、分割线、视频无法定位组件前 | 除钉钉文档外，其他三文档统一，但钉钉均能定位的体验更佳。 |
光标在组件前时回车 | 换行 | 换行 | 换行 | 换行 | |
光标在组件中时回车 | 有序/无序/任务列表、引用、分栏、高亮块：当前组件格式换行，多次回车均保留当前组件格式
表格：单元格内换行
图片：光标定位在图片后方
卡片视图文件/视频：下方有组件时，定位/选中下方组件 | 有序/无序/任务列表、引用、分栏、高亮块：当前组件格式换行，多次回车均保留当前组件格式 | 有序/无序/任务列表、引用、分栏、高亮块：当前组件格式换行，多次回车均保留当前组件格式 | 不保留当前格式换行 | |
光标在组件后时回车 | 默认：换行
有序/无序/任务列表、引用：当前组件格式换行，两次回车恢复默认
| 默认：换行
有序/无序/任务列表、引用：当前组件格式换行，两次回车恢复默认
| 默认：换行
有序/无序/任务列表、引用：当前组件格式换行，两次回车恢复默认 | 默认：换行
有序/无序/任务列表：当前组件格式换行，两次回车恢复默认
引用：换行 | |
光标在组件前时退格 | | | | | |
光标在组件中时退格 | | | | | |
光标在组件后时退格 | | | | | |
CTRL+A | | | | | |
重要全局交互
组件 | 钉钉文档 | 飞书文档 | 金山文档 | 腾讯文档 | 总结 |
页面中「+」组件下拉菜单打开位置和方向 |   默认向右下方展开，菜单高度自适应并且有最小展示高度，当下方页面高度不足以承载最小高度菜单时，向右上展开。 |   计算所点击「+」所处位置页面百分比形式？向左展开。 |  默认向左下方展开，当下方页面高度不足以承载下拉菜单时，向左上展开。 |  默认向正下方展开，当下方页面高度不足以承载下拉菜单时，向正上展开。 | |
六个点和「+」号操作下拉菜单的消失规则 | 重新打开或者重新点击其他部分 | 一级：鼠标离开菜单
二级：鼠标离开菜单
|  有问题，不参考 | 一级：鼠标点击其他目标后
二级：鼠标离开菜单 | |
功能模块的嵌套效果&规则
组件 | | 钉钉文档 | 飞书文档 | 金山文档 | 腾讯文档 | 招乎文档 | 备注 |
引用 | 截图 |  仅能叠加普通文本、列表和图片 |   除了引用、高亮块和表格，其他均可叠加 |   |   所有模块均可叠加 | | |
文本样式 | ✅ | ✅ | ✅ | ✅ | | 字号、字色、背景色、下划线等 | |
标题 | ❌ | ✅ 大纲同步标题 | ❌ | 仅改变字体样式，大纲不同步 | | | |
列表 | ✅ | ✅ | ❌ | ✅ | | | |
引用 | ❌ | ❌ | ❌ | ✅ | | | |
行内代码 | ✅ | ✅ | ✅ | ✅ | | | |
代码块 | ❌ | ✅ | ❌ | ✅ | | | |
高亮块 | ❌ | ❌ | 添加高亮块，引用内容变为高亮块内部内容 | ✅ | | | |
分栏 | ❌ | ✅ | 添加分栏，引用内容变为分栏内部内容 | ✅ | | | |
表格 | ❌ | ❌ | ❌ | ✅ | | | |
图片 | ✅ | ✅ | ❌ | ✅ | | | |
文件 | ❌ | ✅ | ❌ | ✅ | | | |
链接 | 链接视图可以，卡片视图不行 | ✅只有链接视图 | 链接和标题视图可以，卡片视图不行 | ✅ | | | |
@提及人 | ✅ | ✅ | ✅ | ✅ | | | |
思维导图等卡片类 | ❌ | ✅ | ❌ | ✅ | | | |
方案建议：建议引用能嵌套的东西少一点，保持引用的一个基本样式，没什么场景需要引用嵌套其他功能模块吧。建议参考飞书（多）和钉钉（少）。 | |||||||
高亮块 | 截图 |   均可叠加 |   |   |   | | |
文本样式 | ✅ | ✅ | ✅ | ✅ | | | |
标题 | ✅大纲同步标题 | 仅改变字体样式，大纲不同步 | 仅改变字体样式，大纲不同步 | 仅改变字体样式，大纲不同步 | | | |
列表 | ✅ | ✅ | ✅ | ✅ | | | |
引用 | ✅ | ✅ | ❌ | ✅ | | | |
行内代码 | ✅ | ✅ | ✅ | ✅ | | | |
高亮块 | ✅ | ❌ | ❌ | ✅ | | | |
分栏 | ✅ | ❌ | ❌ | ✅ | | | |
表格 | ✅ | ❌ | ❌ | ✅ | | | |
图片 | ✅ | ❌ | ✅ | ✅ | | | |
文件 | ✅ | ❌ | ✅ | ✅ | | | |
链接 | ✅ | ✅ | ✅ | ✅ | | | |
@提及人 | ✅ | ✅ | ✅ | ✅ | | | |
思维导图等卡片类 | ✅ | ❌ | ✅ | ✅ | | | |
方案建议：高亮块、分栏、表格、思维导图等比较复杂的卡片类模块不可叠加。 | |||||||
分栏 | 截图 |   分栏内部可叠加分栏
没有发现栏数量限制
总结：🚫无限制 |  不可叠加分栏，再插入分栏，默认当前分栏增加一栏，最多可添加10栏 |  不可叠加表格、分栏
最多可添加10栏 |  不可叠加分栏
最多可添加10栏 | | |
文本样式 | ✅ | ✅ | ✅ | ✅ | | | |
标题 | ✅大纲同步标题 | ✅大纲同步标题 | 仅改变字体样式，大纲不同步 | ✅大纲同步标题 | | | |
列表 | ✅ | ✅ | ✅ | ✅ | | | |
引用 | ✅ | ✅ | ✅ | ✅ | | | |
行内代码 | ✅ | ✅ | ✅ | ✅ | | | |
高亮块 | ✅ | ✅ | ✅ | ✅ | | | |
分栏 | ✅ | ❌ | ❌ | ❌ | | | |
表格 | ✅ | ✅ | ✅ | ✅ | | | |
图片 | ✅ | ✅ | ✅ | ✅ | | | |
文件 | ✅ | ✅ | ✅ | ✅ | | | |
链接 | ✅ | ✅ | ✅ | ✅ | | | |
@提及人 | ✅ | ✅ | ✅ | ✅ | | | |
思维导图等卡片类 | ✅ | ✅ | ✅ | ✅ | | | |
方案建议：分栏限制10栏，不可叠加分栏。 | |||||||
表格 | 截图 |  不可叠加表格 |  不可叠加表格 |  |  | | |
文本样式 | ✅ | ✅ | ✅ | ✅ | | | |
标题 | ✅ | ✅ | 仅改变字体样式，大纲不同步 | ❌ | | | |
列表 | ✅ | ✅ | ✅ | ❌ | | | |
引用 | ✅ | ✅ | ✅ | ❌ | | | |
行内代码 | ✅ | ✅ | ✅ | ✅ | | | |
高亮块 | ✅ | ✅ | ❌ | ❌ | | | |
分栏 | ✅ | ✅ | ❌ | ❌ | | | |
表格 | ❌ | ❌ | ❌ | ❌ | | | |
图片 | ✅ | ✅ | ✅ | ✅ | | | |
文件 | ✅ | ✅ | ✅ | ❌ | | | |
链接 | ✅ | ✅ | ✅ | ❌ | | | |
@提及人 | ✅ | ✅ | ✅ | ❌ | | | |
思维导图等卡片类 | ✅ | ✅ | ✅ | ❌ | | | |
方案建议：表格和分栏不叠加，其他可不限制。 | |||||||
折叠块 | 无 | 无 | 无 | 无 | 无参考价值，腾讯文档折叠块非卡片类组件 | | |
浮动工具栏
流程图竞品分析
目 录
喜欢就点个赞吧~
评论 0
