197 lines
5.4 KiB
Markdown
197 lines
5.4 KiB
Markdown
# 界面介绍
|
||
|
||
## 📚 学习资源
|
||
|
||
- **详细界面教程**：[n8n界面完全指南](https://n8n.akashio.com/article/n8n-ui)
|
||
- **快捷键大全**：在界面中按 `?` 查看完整快捷键列表
|
||
- **视频教程**：观看官方界面操作演示
|
||
|
||
n8n的界面直观易用，主要由工作流画布、节点面板、参数配置区和执行日志等部分组成。
|
||
|
||
## 🖥️ 主界面布局
|
||
|
||
**顶部工具栏** → **左侧节点面板** + **中央画布区域** + **右侧属性面板** → **底部执行面板**
|
||
|
||
- **顶部工具栏**：工作流名称、保存、执行、激活/停用、设置
|
||
- **左侧节点面板**：节点库，拖拽添加功能
|
||
- **中央画布区域**：工作流设计区域
|
||
- **右侧属性面板**：节点配置和参数设置
|
||
- **底部执行面板**：执行历史和调试信息
|
||
|
||
## 🔧 核心功能区域
|
||
|
||
### 1. 顶部工具栏
|
||
|
||
| 功能 | 图标 | 说明 |
|
||
|------|------|------|
|
||
| **工作流名称** | 📝 | 点击可重命名工作流 |
|
||
| **保存** | 💾 | 保存当前工作流 |
|
||
| **执行** | ▶️ | 手动执行工作流 |
|
||
| **激活/停用** | 🔄 | 控制工作流自动运行 |
|
||
| **设置** | ⚙️ | 工作流设置和配置 |
|
||
|
||
### 2. 左侧节点面板
|
||
|
||
**功能分类**：
|
||
- 🔥 **触发器 (Triggers)**：工作流的起点
|
||
- 📥 **输入 (Input)**：数据获取节点
|
||
- 🔄 **处理 (Process)**：数据处理和转换
|
||
- 🧠 **逻辑 (Logic)**：条件判断和流程控制
|
||
- 📤 **输出 (Output)**：结果输出和通知
|
||
|
||
**使用方法**：
|
||
1. 浏览或搜索所需节点
|
||
2. 拖拽到画布中央
|
||
3. 连接节点建立数据流
|
||
|
||
### 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)** | 移动端适配布局 | 查看功能，不建议编辑 |
|
||
|
||
## 🎯 界面使用技巧
|
||
|
||
### 高效工作技巧
|
||
|
||
1. **快捷键组合**：
|
||
```
|
||
Ctrl + Tab # 快速添加节点
|
||
Ctrl + D # 复制当前节点
|
||
Shift + 方向键 # 精确移动节点
|
||
```
|
||
|
||
2. **批量操作**：
|
||
- 框选多个节点批量操作
|
||
- 批量删除、复制和移动
|
||
- 批量配置相同参数
|
||
|
||
3. **工作流组织**：
|
||
- 使用注释节点添加说明
|
||
- 合理命名节点和工作流
|
||
- 使用颜色标记重要节点
|
||
|
||
### 调试和测试
|
||
|
||
1. **步骤执行**：
|
||
- 单独测试每个节点
|
||
- 查看数据流转过程
|
||
- 验证输出结果
|
||
|
||
2. **错误处理**：
|
||
- 查看详细错误信息
|
||
- 使用错误触发器
|
||
- 设置重试机制
|
||
|
||
!!! tip "界面优化建议"
|
||
- 定期清理不用的工作流
|
||
- 合理组织工作流文件夹
|
||
- 使用标签系统分类管理
|
||
- 定期导出备份重要工作流
|
||
|
||
## 📚 延伸学习
|
||
|
||
- **详细界面教程**：[n8n界面完全指南](https://n8n.akashio.com/article/n8n-ui)
|
||
- **快捷键大全**：在界面中按 `?` 查看完整快捷键列表
|
||
- **视频教程**：观看官方界面操作演示
|
||
|
||
---
|
||
|
||
掌握了界面操作后，您就可以高效地设计和管理工作流了！
|
||
|
||
[上一章：本地部署](local-deployment/){ .md-button } [下一章：凭证管理](credentials/){ .md-button .md-button--primary }
|