567 lines
12 KiB
Markdown
567 lines
12 KiB
Markdown
# SFTP文件管理系统 - UI设计系统
|
||
|
||
## 设计理念
|
||
|
||
SFTP文件管理系统采用**现代简约、专业高效**的设计理念，注重用户体验和操作效率。设计系统遵循以下核心原则：
|
||
|
||
- **清晰性**：界面层次分明，信息一目了然
|
||
- **一致性**：统一的视觉语言和交互模式
|
||
- **效率性**：减少操作步骤，提升工作效率
|
||
- **可访问性**：符合WCAG 2.1 AA标准，支持键盘导航
|
||
|
||
---
|
||
|
||
## 1. 颜色系统
|
||
|
||
### 1.1 主色调
|
||
|
||
| 颜色名称 | Hex值 | RGB值 | 用途 |
|
||
|---------|-------|-------|------|
|
||
| 主色（Primary） | `#0d6efd` | rgb(13, 110, 253) | 主要操作按钮、链接、选中状态 |
|
||
| 成功（Success） | `#198754` | rgb(25, 135, 84) | 成功提示、连接状态 |
|
||
| 警告（Warning） | `#ffc107` | rgb(255, 193, 7) | 警告信息、加载状态 |
|
||
| 危险（Danger） | `#dc3545` | rgb(220, 53, 69) | 删除操作、错误提示 |
|
||
| 信息（Info） | `#0dcaf0` | rgb(13, 202, 240) | 信息提示 |
|
||
|
||
### 1.2 中性色
|
||
|
||
| 颜色名称 | Hex值 | 用途 |
|
||
|---------|-------|------|
|
||
| 深灰（Dark） | `#212529` | 导航栏背景、深色文字 |
|
||
| 中灰（Gray-600） | `#6c757d` | 次要文字、边框 |
|
||
| 浅灰（Gray-200） | `#e9ecef` | 工具栏背景、分割线 |
|
||
| 极浅灰（Gray-100） | `#f8f9fa` | 面板头部背景 |
|
||
| 白色（White） | `#ffffff` | 主背景、卡片背景 |
|
||
|
||
### 1.3 状态颜色
|
||
|
||
| 状态 | 颜色 | 用途 |
|
||
|------|------|------|
|
||
| 连接成功 | `#198754` | SFTP连接状态指示器 |
|
||
| 连接失败 | `#dc3545` | 连接错误状态 |
|
||
| 连接中 | `#ffc107` | 连接进行中状态 |
|
||
| 选中状态 | `#0d6efd` | 文件列表选中项背景 |
|
||
| 悬停状态 | `#f8f9fa` | 文件项悬停背景 |
|
||
|
||
### 1.4 对比度要求
|
||
|
||
- **正文文字**：与背景对比度 ≥ 4.5:1
|
||
- **大号文字**（18px+）：与背景对比度 ≥ 3:1
|
||
- **交互元素**：与背景对比度 ≥ 3:1
|
||
|
||
---
|
||
|
||
## 2. 字体系统
|
||
|
||
### 2.1 字体族
|
||
|
||
```css
|
||
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto,
|
||
'Helvetica Neue', Arial, 'Noto Sans', sans-serif,
|
||
'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol';
|
||
```
|
||
|
||
**说明**：
|
||
- 优先使用系统字体，确保跨平台一致性
|
||
- 支持中英文混排
|
||
- 无衬线字体，提升可读性
|
||
|
||
### 2.2 字体大小
|
||
|
||
| 元素 | 大小 | 行高 | 用途 |
|
||
|------|------|------|------|
|
||
| H1 标题 | 32px (2rem) | 1.2 | 页面主标题 |
|
||
| H2 标题 | 24px (1.5rem) | 1.3 | 模块标题 |
|
||
| H3 标题 | 20px (1.25rem) | 1.4 | 子模块标题 |
|
||
| 正文 | 14px (0.875rem) | 1.5 | 正文内容 |
|
||
| 小号文字 | 12px (0.75rem) | 1.5 | 辅助信息、文件大小、日期 |
|
||
| 按钮文字 | 14px (0.875rem) | 1.5 | 按钮标签 |
|
||
|
||
### 2.3 字重
|
||
|
||
| 字重 | 值 | 用途 |
|
||
|------|-----|------|
|
||
| 细体 | 300 | 次要信息 |
|
||
| 常规 | 400 | 正文内容 |
|
||
| 中等 | 500 | 强调文字 |
|
||
| 粗体 | 600 | 标题、重要信息 |
|
||
| 特粗 | 700 | 导航栏品牌 |
|
||
|
||
---
|
||
|
||
## 3. 间距系统
|
||
|
||
### 3.1 基础间距单位
|
||
|
||
使用 **8px** 作为基础间距单位，所有间距应为 8px 的倍数。
|
||
|
||
| 间距名称 | 值 | 用途 |
|
||
|---------|-----|------|
|
||
| xs | 4px (0.25rem) | 图标与文字间距 |
|
||
| sm | 8px (0.5rem) | 小元素间距 |
|
||
| md | 16px (1rem) | 标准元素间距 |
|
||
| lg | 24px (1.5rem) | 大元素间距 |
|
||
| xl | 32px (2rem) | 区块间距 |
|
||
| xxl | 48px (3rem) | 大区块间距 |
|
||
|
||
### 3.2 组件内边距
|
||
|
||
| 组件 | 内边距 | 说明 |
|
||
|------|--------|------|
|
||
| 导航栏 | 8px 16px | 垂直 8px，水平 16px |
|
||
| 工具栏 | 8px 16px | 垂直 8px，水平 16px |
|
||
| 面板头部 | 8px | 统一 8px |
|
||
| 文件项 | 8px 12px | 垂直 8px，水平 12px |
|
||
| 按钮 | 6px 12px | 小按钮 |
|
||
| 按钮（大） | 10px 20px | 主要按钮 |
|
||
|
||
---
|
||
|
||
## 4. 组件规范
|
||
|
||
### 4.1 导航栏
|
||
|
||
```css
|
||
.navbar {
|
||
background-color: #212529;
|
||
color: #ffffff;
|
||
padding: 8px 16px;
|
||
height: 48px;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: space-between;
|
||
}
|
||
|
||
.navbar-brand {
|
||
font-size: 18px;
|
||
font-weight: 600;
|
||
color: #ffffff;
|
||
}
|
||
```
|
||
|
||
**规范**：
|
||
- 固定高度：48px
|
||
- 深色背景：`#212529`
|
||
- 白色文字
|
||
- 品牌名称左对齐，操作按钮右对齐
|
||
|
||
### 4.2 工具栏
|
||
|
||
```css
|
||
.toolbar {
|
||
background-color: #e9ecef;
|
||
border-bottom: 1px solid #dee2e6;
|
||
padding: 8px 16px;
|
||
display: flex;
|
||
align-items: center;
|
||
gap: 8px;
|
||
}
|
||
```
|
||
|
||
**规范**：
|
||
- 浅灰背景：`#e9ecef`
|
||
- 按钮组间距：8px
|
||
- 按钮大小：`btn-sm`（小按钮）
|
||
- 支持响应式换行
|
||
|
||
### 4.3 双面板
|
||
|
||
```css
|
||
.panels-container {
|
||
display: flex;
|
||
flex: 1;
|
||
overflow: hidden;
|
||
}
|
||
|
||
.panel {
|
||
flex: 1;
|
||
display: flex;
|
||
flex-direction: column;
|
||
border-right: 1px solid #dee2e6;
|
||
background-color: #ffffff;
|
||
}
|
||
|
||
.panel:last-child {
|
||
border-right: none;
|
||
}
|
||
```
|
||
|
||
**规范**：
|
||
- 等宽分布：`flex: 1`
|
||
- 面板间分割线：1px 实线
|
||
- 背景色：白色
|
||
- 支持垂直滚动
|
||
|
||
### 4.4 文件列表项
|
||
|
||
```css
|
||
.file-item {
|
||
padding: 8px 12px;
|
||
cursor: pointer;
|
||
display: flex;
|
||
align-items: center;
|
||
border-bottom: 1px solid #f0f0f0;
|
||
transition: background-color 0.15s ease;
|
||
user-select: none;
|
||
}
|
||
|
||
.file-item:hover {
|
||
background-color: #f8f9fa;
|
||
}
|
||
|
||
.file-item.selected {
|
||
background-color: #0d6efd;
|
||
color: #ffffff;
|
||
}
|
||
```
|
||
|
||
**规范**：
|
||
- 最小高度：44px（触摸目标）
|
||
- 悬停效果：浅灰背景
|
||
- 选中状态：主色背景 + 白色文字
|
||
- 过渡动画：150ms
|
||
|
||
### 4.5 按钮
|
||
|
||
```css
|
||
.btn-primary {
|
||
background-color: #0d6efd;
|
||
border-color: #0d6efd;
|
||
color: #ffffff;
|
||
padding: 6px 12px;
|
||
border-radius: 4px;
|
||
font-size: 14px;
|
||
transition: all 0.15s ease;
|
||
}
|
||
|
||
.btn-primary:hover {
|
||
background-color: #0b5ed7;
|
||
border-color: #0a58ca;
|
||
}
|
||
|
||
.btn-primary:focus {
|
||
box-shadow: 0 0 0 0.25rem rgba(13, 110, 253, 0.25);
|
||
}
|
||
```
|
||
|
||
**规范**：
|
||
- 圆角：4px
|
||
- 过渡动画：150ms
|
||
- 焦点状态：可见的焦点环
|
||
- 禁用状态：降低透明度至 0.65
|
||
|
||
### 4.6 模态框
|
||
|
||
```css
|
||
.modal-content {
|
||
border-radius: 8px;
|
||
border: none;
|
||
box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.15);
|
||
}
|
||
|
||
.modal-header {
|
||
border-bottom: 1px solid #dee2e6;
|
||
padding: 16px;
|
||
}
|
||
|
||
.modal-body {
|
||
padding: 16px;
|
||
}
|
||
|
||
.modal-footer {
|
||
border-top: 1px solid #dee2e6;
|
||
padding: 12px 16px;
|
||
}
|
||
```
|
||
|
||
**规范**：
|
||
- 圆角：8px
|
||
- 阴影：中等深度
|
||
- 内边距：16px
|
||
- 头部/底部边框：1px 浅灰
|
||
|
||
---
|
||
|
||
## 5. 交互规范
|
||
|
||
### 5.1 悬停效果
|
||
|
||
- **文件项**：背景色变化（`#f8f9fa`）
|
||
- **按钮**：颜色加深 + 轻微阴影
|
||
- **链接**：下划线显示
|
||
- **过渡时间**：150ms
|
||
|
||
### 5.2 点击反馈
|
||
|
||
- **按钮**：按下时轻微缩放（scale: 0.98）
|
||
- **文件项**：选中状态立即显示
|
||
- **禁用状态**：不响应点击
|
||
|
||
### 5.3 加载状态
|
||
|
||
```css
|
||
.loading {
|
||
opacity: 0.6;
|
||
pointer-events: none;
|
||
position: relative;
|
||
}
|
||
|
||
.loading::after {
|
||
content: '';
|
||
position: absolute;
|
||
top: 50%;
|
||
left: 50%;
|
||
width: 20px;
|
||
height: 20px;
|
||
margin: -10px 0 0 -10px;
|
||
border: 2px solid #0d6efd;
|
||
border-top-color: transparent;
|
||
border-radius: 50%;
|
||
animation: spin 0.6s linear infinite;
|
||
}
|
||
```
|
||
|
||
### 5.4 键盘导航
|
||
|
||
- **Tab键**：按顺序聚焦可交互元素
|
||
- **Enter键**：激活按钮、打开文件/目录
|
||
- **Delete键**：删除选中文件
|
||
- **F2键**：重命名文件
|
||
- **F5键**：刷新文件列表
|
||
- **Esc键**：关闭模态框、取消选择
|
||
|
||
### 5.5 拖拽操作
|
||
|
||
```css
|
||
.file-item.dragging {
|
||
opacity: 0.5;
|
||
}
|
||
|
||
.file-list.drag-over {
|
||
background-color: #e7f3ff;
|
||
border: 2px dashed #0d6efd;
|
||
}
|
||
```
|
||
|
||
---
|
||
|
||
## 6. 响应式设计
|
||
|
||
### 6.1 断点
|
||
|
||
| 设备类型 | 宽度范围 | 布局调整 |
|
||
|---------|---------|---------|
|
||
| 移动端 | < 768px | 双面板垂直排列 |
|
||
| 平板 | 768px - 1024px | 双面板水平排列，字体稍小 |
|
||
| 桌面 | > 1024px | 标准布局 |
|
||
|
||
### 6.2 移动端适配
|
||
|
||
```css
|
||
@media (max-width: 768px) {
|
||
.panels-container {
|
||
flex-direction: column;
|
||
}
|
||
|
||
.panel {
|
||
height: 50%;
|
||
border-right: none;
|
||
border-bottom: 1px solid #dee2e6;
|
||
}
|
||
|
||
.file-size,
|
||
.file-date {
|
||
display: none; /* 隐藏次要信息 */
|
||
}
|
||
|
||
.toolbar {
|
||
flex-wrap: wrap;
|
||
}
|
||
|
||
.navbar-brand {
|
||
font-size: 16px;
|
||
}
|
||
}
|
||
```
|
||
|
||
### 6.3 触摸优化
|
||
|
||
- **触摸目标**：最小 44x44px
|
||
- **间距**：触摸元素间距 ≥ 8px
|
||
- **手势**：支持滑动、长按
|
||
|
||
---
|
||
|
||
## 7. 图标系统
|
||
|
||
### 7.1 图标库
|
||
|
||
使用 **Bootstrap Icons** 或 **Heroicons**，确保图标风格统一。
|
||
|
||
### 7.2 图标大小
|
||
|
||
| 用途 | 大小 | 说明 |
|
||
|------|------|------|
|
||
| 文件图标 | 20px | 文件列表中的文件类型图标 |
|
||
| 操作图标 | 16px | 工具栏按钮图标 |
|
||
| 状态图标 | 12px | 连接状态指示器 |
|
||
|
||
### 7.3 图标颜色
|
||
|
||
- **默认**：`#6c757d`（中灰）
|
||
- **悬停**：`#212529`（深灰）
|
||
- **选中**：`#ffffff`（白色，在深色背景上）
|
||
- **状态**：使用对应的状态颜色
|
||
|
||
---
|
||
|
||
## 8. 阴影系统
|
||
|
||
| 层级 | 阴影值 | 用途 |
|
||
|------|--------|------|
|
||
| 无 | `none` | 默认状态 |
|
||
| 小 | `0 1px 2px rgba(0, 0, 0, 0.05)` | 卡片、按钮悬停 |
|
||
| 中 | `0 0.5rem 1rem rgba(0, 0, 0, 0.15)` | 模态框、下拉菜单 |
|
||
| 大 | `0 1rem 3rem rgba(0, 0, 0, 0.175)` | 大型弹窗 |
|
||
|
||
---
|
||
|
||
## 9. 动画规范
|
||
|
||
### 9.1 过渡时间
|
||
|
||
| 动画类型 | 时间 | 缓动函数 |
|
||
|---------|------|---------|
|
||
| 颜色变化 | 150ms | `ease` |
|
||
| 位置变化 | 200ms | `ease-out` |
|
||
| 缩放变化 | 200ms | `ease-in-out` |
|
||
| 淡入淡出 | 300ms | `ease` |
|
||
|
||
### 9.2 动画原则
|
||
|
||
- **减少动画**：尊重 `prefers-reduced-motion` 设置
|
||
- **性能优先**：使用 `transform` 和 `opacity`，避免 `width`/`height`
|
||
- **适度使用**：动画应增强体验，而非干扰操作
|
||
|
||
---
|
||
|
||
## 10. 可访问性规范
|
||
|
||
### 10.1 颜色对比度
|
||
|
||
- 正文文字：≥ 4.5:1
|
||
- 大号文字：≥ 3:1
|
||
- 交互元素：≥ 3:1
|
||
|
||
### 10.2 焦点状态
|
||
|
||
所有可交互元素必须有可见的焦点指示器：
|
||
|
||
```css
|
||
*:focus {
|
||
outline: 2px solid #0d6efd;
|
||
outline-offset: 2px;
|
||
}
|
||
|
||
*:focus:not(:focus-visible) {
|
||
outline: none; /* 鼠标点击时不显示 */
|
||
}
|
||
```
|
||
|
||
### 10.3 ARIA标签
|
||
|
||
- 图标按钮：添加 `aria-label`
|
||
- 表单输入：关联 `label` 元素
|
||
- 状态信息：使用 `aria-live` 区域
|
||
|
||
### 10.4 键盘导航
|
||
|
||
- Tab顺序：符合视觉顺序
|
||
- 快捷键：提供清晰的提示
|
||
- 跳过链接：长页面提供跳转到主要内容
|
||
|
||
---
|
||
|
||
## 11. 设计令牌（Design Tokens）
|
||
|
||
### 11.1 CSS变量定义
|
||
|
||
```css
|
||
:root {
|
||
/* 颜色 */
|
||
--color-primary: #0d6efd;
|
||
--color-success: #198754;
|
||
--color-warning: #ffc107;
|
||
--color-danger: #dc3545;
|
||
--color-dark: #212529;
|
||
--color-gray-600: #6c757d;
|
||
--color-gray-200: #e9ecef;
|
||
--color-gray-100: #f8f9fa;
|
||
--color-white: #ffffff;
|
||
|
||
/* 间距 */
|
||
--spacing-xs: 4px;
|
||
--spacing-sm: 8px;
|
||
--spacing-md: 16px;
|
||
--spacing-lg: 24px;
|
||
--spacing-xl: 32px;
|
||
|
||
/* 字体 */
|
||
--font-size-base: 14px;
|
||
--font-size-sm: 12px;
|
||
--font-size-lg: 18px;
|
||
--line-height-base: 1.5;
|
||
|
||
/* 圆角 */
|
||
--border-radius-sm: 4px;
|
||
--border-radius-md: 8px;
|
||
|
||
/* 阴影 */
|
||
--shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.05);
|
||
--shadow-md: 0 0.5rem 1rem rgba(0, 0, 0, 0.15);
|
||
|
||
/* 过渡 */
|
||
--transition-base: 150ms ease;
|
||
}
|
||
```
|
||
|
||
---
|
||
|
||
## 12. 实施检查清单
|
||
|
||
### 视觉质量
|
||
- [ ] 所有颜色符合对比度要求
|
||
- [ ] 字体大小符合规范
|
||
- [ ] 间距使用 8px 倍数
|
||
- [ ] 图标风格统一
|
||
- [ ] 阴影使用适度
|
||
|
||
### 交互质量
|
||
- [ ] 所有可点击元素有 `cursor-pointer`
|
||
- [ ] 悬停效果流畅（150ms）
|
||
- [ ] 焦点状态可见
|
||
- [ ] 加载状态有反馈
|
||
- [ ] 错误信息清晰
|
||
|
||
### 响应式
|
||
- [ ] 移动端布局测试通过
|
||
- [ ] 触摸目标 ≥ 44px
|
||
- [ ] 无水平滚动
|
||
- [ ] 文字大小可读
|
||
|
||
### 可访问性
|
||
- [ ] 键盘导航完整
|
||
- [ ] ARIA标签正确
|
||
- [ ] 颜色对比度达标
|
||
- [ ] 屏幕阅读器友好
|
||
|
||
---
|
||
|
||
## 更新日志
|
||
|
||
### v1.0.0 (2026-02-02)
|
||
- ✅ 初始设计系统发布
|
||
- ✅ 定义颜色、字体、间距系统
|
||
- ✅ 制定组件和交互规范
|
||
- ✅ 建立响应式和可访问性标准
|