5.4 KiB
5.4 KiB
界面介绍
📚 学习资源
- 详细界面教程：n8n界面完全指南
- 快捷键大全：在界面中按
?查看完整快捷键列表 - 视频教程：观看官方界面操作演示
n8n的界面直观易用，主要由工作流画布、节点面板、参数配置区和执行日志等部分组成。
🖥️ 主界面布局
顶部工具栏 → 左侧节点面板 + 中央画布区域 + 右侧属性面板 → 底部执行面板
- 顶部工具栏：工作流名称、保存、执行、激活/停用、设置
- 左侧节点面板：节点库，拖拽添加功能
- 中央画布区域：工作流设计区域
- 右侧属性面板：节点配置和参数设置
- 底部执行面板：执行历史和调试信息
🔧 核心功能区域
1. 顶部工具栏
| 功能 | 图标 | 说明 |
|---|---|---|
| 工作流名称 | 📝 | 点击可重命名工作流 |
| 保存 | 💾 | 保存当前工作流 |
| 执行 | ▶️ | 手动执行工作流 |
| 激活/停用 | 🔄 | 控制工作流自动运行 |
| 设置 | ⚙️ | 工作流设置和配置 |
2. 左侧节点面板
功能分类：
- 🔥 触发器 (Triggers)：工作流的起点
- 📥 输入 (Input)：数据获取节点
- 🔄 处理 (Process)：数据处理和转换
- 🧠 逻辑 (Logic)：条件判断和流程控制
- 📤 输出 (Output)：结果输出和通知
使用方法：
- 浏览或搜索所需节点
- 拖拽到画布中央
- 连接节点建立数据流
3. 中央画布区域
这是设计工作流的主要区域：
基本操作：
- 添加节点：从左侧拖拽或按
Tab键 - 连接节点：拖拽节点间的连接点
- 移动节点：直接拖拽节点位置
- 删除节点：选中后按
Delete键
画布快捷键：
| 操作 | 快捷键 | 说明 |
|---|---|---|
| 添加节点 | Tab |
快速添加节点菜单 |
| 保存工作流 | Ctrl + S |
保存当前工作流 |
| 执行工作流 | Ctrl + Enter |
手动执行 |
| 全选 | Ctrl + A |
选择所有节点 |
| 复制/粘贴 | Ctrl + C/V |
复制粘贴节点 |
| 撤销/重做 | Ctrl + Z/Y |
撤销重做操作 |
4. 右侧属性面板
当选中节点时显示：
- 节点配置：参数设置和选项
- 凭证管理：API密钥和认证信息
- 表达式编辑器：动态数据处理
- 测试功能：单独测试节点功能
5. 底部执行面板
显示工作流执行信息：
- 执行历史：历史运行记录
- 调试信息：节点执行状态和数据
- 错误日志：失败原因和修复建议
- 性能监控：执行时间和资源使用
🎨 界面主题和定制
主题切换
n8n支持明暗两种主题：
=== "明亮主题" - 适合白天工作环境 - 高对比度，清晰易读 - 经典的工作界面风格
=== "暗色主题" - 适合长时间编程工作 - 护眼，减少疲劳 - 现代化的设计风格
布局自定义
面板调整：
- 拖拽面板分割线调整大小
- 双击面板标题折叠/展开
- 右键菜单隐藏不需要的面板
画布设置：
- 网格显示开关
- 缩放级别控制
- 节点对齐辅助线
🔍 搜索和导航
全局搜索
搜索范围：
- 节点名称和描述
- 工作流名称
- 凭证名称
- 执行历史
搜索技巧：
- 使用关键词快速定位
- 支持模糊匹配
- 搜索结果按相关度排序
面包屑导航
显示当前位置和路径：
工作流 > 节点名称 > 配置选项
📱 响应式设计
n8n界面支持不同屏幕尺寸：
| 屏幕尺寸 | 布局调整 | 建议操作 |
|---|---|---|
| 大屏 (>1920px) | 所有面板完整显示 | 最佳体验，推荐使用 |
| 标准 (1366-1920px) | 面板可调整大小 | 良好体验，主流配置 |
| 小屏 (1024-1366px) | 面板自动折叠 | 基本可用，建议折叠侧栏 |
| 平板 (<1024px) | 移动端适配布局 | 查看功能，不建议编辑 |
🎯 界面使用技巧
高效工作技巧
-
快捷键组合：
Ctrl + Tab # 快速添加节点 Ctrl + D # 复制当前节点 Shift + 方向键 # 精确移动节点 -
批量操作：
- 框选多个节点批量操作
- 批量删除、复制和移动
- 批量配置相同参数
-
工作流组织：
- 使用注释节点添加说明
- 合理命名节点和工作流
- 使用颜色标记重要节点
调试和测试
-
步骤执行：
- 单独测试每个节点
- 查看数据流转过程
- 验证输出结果
-
错误处理：
- 查看详细错误信息
- 使用错误触发器
- 设置重试机制
!!! tip "界面优化建议" - 定期清理不用的工作流 - 合理组织工作流文件夹 - 使用标签系统分类管理 - 定期导出备份重要工作流
📚 延伸学习
- 详细界面教程：n8n界面完全指南
- 快捷键大全：在界面中按
?查看完整快捷键列表 - 视频教程：观看官方界面操作演示
掌握了界面操作后，您就可以高效地设计和管理工作流了！
上一章：本地部署{ .md-button } 下一章：凭证管理{ .md-button .md-button--primary }