# 界面介绍

## 📚 学习资源

- **详细界面教程**：[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 }