500 lines
13 KiB
Markdown
500 lines
13 KiB
Markdown
# MixVideo UI/UX 设计规范
|
||
|
||
## 设计理念
|
||
|
||
### 核心原则
|
||
1. **用户至上**: 以用户体验为中心的设计
|
||
2. **简洁高效**: 简洁的界面，高效的操作流程
|
||
3. **一致性**: 统一的视觉语言和交互模式
|
||
4. **可访问性**: 支持无障碍访问和多设备适配
|
||
5. **现代化**: 符合现代设计趋势的视觉风格
|
||
|
||
### 设计目标
|
||
- **专业性**: 体现专业视频创作工具的品质
|
||
- **易用性**: 降低学习成本，提升操作效率
|
||
- **美观性**: 现代化的视觉设计，愉悦的用户体验
|
||
- **功能性**: 功能导向的界面布局和交互设计
|
||
|
||
## 视觉设计系统
|
||
|
||
### 颜色系统
|
||
```css
|
||
/* 主色调 - 现代蓝色系 */
|
||
:root {
|
||
--primary-50: #eff6ff;
|
||
--primary-100: #dbeafe;
|
||
--primary-200: #bfdbfe;
|
||
--primary-300: #93c5fd;
|
||
--primary-400: #60a5fa;
|
||
--primary-500: #3b82f6; /* 主品牌色 */
|
||
--primary-600: #2563eb;
|
||
--primary-700: #1d4ed8;
|
||
--primary-800: #1e40af;
|
||
--primary-900: #1e3a8a;
|
||
|
||
/* 中性色系 */
|
||
--gray-50: #f9fafb;
|
||
--gray-100: #f3f4f6;
|
||
--gray-200: #e5e7eb;
|
||
--gray-300: #d1d5db;
|
||
--gray-400: #9ca3af;
|
||
--gray-500: #6b7280;
|
||
--gray-600: #4b5563;
|
||
--gray-700: #374151;
|
||
--gray-800: #1f2937;
|
||
--gray-900: #111827;
|
||
|
||
/* 语义色彩 */
|
||
--success-500: #10b981;
|
||
--warning-500: #f59e0b;
|
||
--error-500: #ef4444;
|
||
--info-500: #3b82f6;
|
||
}
|
||
```
|
||
|
||
### 颜色使用规范
|
||
- **主色**: 用于主要操作按钮、链接、重要状态指示
|
||
- **中性色**: 用于文本、边框、背景、次要元素
|
||
- **语义色**: 用于状态反馈、警告、错误、成功提示
|
||
|
||
### 字体系统
|
||
```css
|
||
/* 字体族 */
|
||
font-family: {
|
||
sans: ['Inter', '-apple-system', 'BlinkMacSystemFont', 'Segoe UI', 'Roboto', 'sans-serif'],
|
||
mono: ['JetBrains Mono', 'Fira Code', 'Monaco', 'Consolas', 'monospace']
|
||
}
|
||
|
||
/* 字体大小 */
|
||
fontSize: {
|
||
xs: ['0.75rem', { lineHeight: '1rem' }], /* 12px */
|
||
sm: ['0.875rem', { lineHeight: '1.25rem' }], /* 14px */
|
||
base: ['1rem', { lineHeight: '1.5rem' }], /* 16px */
|
||
lg: ['1.125rem', { lineHeight: '1.75rem' }], /* 18px */
|
||
xl: ['1.25rem', { lineHeight: '1.75rem' }], /* 20px */
|
||
'2xl': ['1.5rem', { lineHeight: '2rem' }], /* 24px */
|
||
'3xl': ['1.875rem', { lineHeight: '2.25rem' }], /* 30px */
|
||
'4xl': ['2.25rem', { lineHeight: '2.5rem' }], /* 36px */
|
||
}
|
||
```
|
||
|
||
### 字体使用规范
|
||
- **标题**: 使用较大字号，font-weight: 600-700
|
||
- **正文**: 使用base字号，font-weight: 400
|
||
- **说明文字**: 使用sm字号，颜色为gray-600
|
||
- **代码**: 使用mono字体族
|
||
|
||
### 间距系统
|
||
```css
|
||
/* 基于8px网格的间距系统 */
|
||
spacing: {
|
||
0: '0px',
|
||
1: '0.25rem', /* 4px */
|
||
2: '0.5rem', /* 8px */
|
||
3: '0.75rem', /* 12px */
|
||
4: '1rem', /* 16px */
|
||
5: '1.25rem', /* 20px */
|
||
6: '1.5rem', /* 24px */
|
||
8: '2rem', /* 32px */
|
||
10: '2.5rem', /* 40px */
|
||
12: '3rem', /* 48px */
|
||
16: '4rem', /* 64px */
|
||
20: '5rem', /* 80px */
|
||
24: '6rem', /* 96px */
|
||
}
|
||
```
|
||
|
||
### 圆角系统
|
||
```css
|
||
borderRadius: {
|
||
none: '0',
|
||
sm: '0.125rem', /* 2px */
|
||
DEFAULT: '0.25rem', /* 4px */
|
||
md: '0.375rem', /* 6px */
|
||
lg: '0.5rem', /* 8px */
|
||
xl: '0.75rem', /* 12px */
|
||
'2xl': '1rem', /* 16px */
|
||
'3xl': '1.5rem', /* 24px */
|
||
full: '9999px',
|
||
}
|
||
```
|
||
|
||
### 阴影系统
|
||
```css
|
||
boxShadow: {
|
||
xs: '0 1px 2px 0 rgb(0 0 0 / 0.05)',
|
||
sm: '0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1)',
|
||
DEFAULT: '0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1)',
|
||
md: '0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1)',
|
||
lg: '0 20px 25px -5px rgb(0 0 0 / 0.1), 0 8px 10px -6px rgb(0 0 0 / 0.1)',
|
||
xl: '0 25px 50px -12px rgb(0 0 0 / 0.25)',
|
||
glow: '0 0 20px rgb(59 130 246 / 0.15)',
|
||
}
|
||
```
|
||
|
||
## 组件设计规范
|
||
|
||
### 按钮设计
|
||
```typescript
|
||
// 按钮变体
|
||
const buttonVariants = {
|
||
primary: 'bg-primary-600 text-white hover:bg-primary-700 focus:ring-primary-500',
|
||
secondary: 'bg-gray-200 text-gray-900 hover:bg-gray-300 focus:ring-gray-500',
|
||
outline: 'border border-gray-300 text-gray-700 hover:bg-gray-50 focus:ring-primary-500',
|
||
ghost: 'text-gray-700 hover:bg-gray-100 focus:ring-gray-500',
|
||
danger: 'bg-red-600 text-white hover:bg-red-700 focus:ring-red-500',
|
||
};
|
||
|
||
// 按钮尺寸
|
||
const buttonSizes = {
|
||
sm: 'px-3 py-1.5 text-sm',
|
||
md: 'px-4 py-2 text-base',
|
||
lg: 'px-6 py-3 text-lg',
|
||
};
|
||
|
||
// 按钮状态
|
||
const buttonStates = {
|
||
default: '',
|
||
loading: 'opacity-75 cursor-not-allowed',
|
||
disabled: 'opacity-50 cursor-not-allowed',
|
||
};
|
||
```
|
||
|
||
### 输入框设计
|
||
```typescript
|
||
const inputStyles = {
|
||
base: 'block w-full rounded-md border-gray-300 shadow-sm focus:border-primary-500 focus:ring-primary-500',
|
||
error: 'border-red-300 text-red-900 placeholder-red-300 focus:border-red-500 focus:ring-red-500',
|
||
disabled: 'bg-gray-50 text-gray-500 cursor-not-allowed',
|
||
};
|
||
|
||
const inputSizes = {
|
||
sm: 'px-3 py-1.5 text-sm',
|
||
md: 'px-3 py-2 text-base',
|
||
lg: 'px-4 py-3 text-lg',
|
||
};
|
||
```
|
||
|
||
### 卡片设计
|
||
```typescript
|
||
const cardStyles = {
|
||
base: 'bg-white rounded-lg shadow-sm border border-gray-200',
|
||
hover: 'hover:shadow-md transition-shadow duration-200',
|
||
interactive: 'cursor-pointer hover:shadow-lg transform hover:-translate-y-1 transition-all duration-200',
|
||
selected: 'ring-2 ring-primary-500 border-primary-500',
|
||
};
|
||
```
|
||
|
||
### 模态框设计
|
||
```typescript
|
||
const modalStyles = {
|
||
overlay: 'fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center p-4 z-50',
|
||
container: 'bg-white rounded-lg shadow-xl max-w-md w-full max-h-screen overflow-y-auto',
|
||
header: 'px-6 py-4 border-b border-gray-200',
|
||
body: 'px-6 py-4',
|
||
footer: 'px-6 py-4 border-t border-gray-200 flex justify-end space-x-3',
|
||
};
|
||
```
|
||
|
||
## 布局设计规范
|
||
|
||
### 网格系统
|
||
```css
|
||
/* 12列网格系统 */
|
||
.grid-cols-12 { grid-template-columns: repeat(12, minmax(0, 1fr)); }
|
||
.col-span-1 { grid-column: span 1 / span 1; }
|
||
.col-span-2 { grid-column: span 2 / span 2; }
|
||
/* ... */
|
||
.col-span-12 { grid-column: span 12 / span 12; }
|
||
|
||
/* 响应式断点 */
|
||
@media (min-width: 640px) { /* sm */ }
|
||
@media (min-width: 768px) { /* md */ }
|
||
@media (min-width: 1024px) { /* lg */ }
|
||
@media (min-width: 1280px) { /* xl */ }
|
||
@media (min-width: 1536px) { /* 2xl */ }
|
||
```
|
||
|
||
### 页面布局
|
||
```typescript
|
||
// 主布局结构
|
||
const layoutStructure = {
|
||
header: 'h-16 bg-white border-b border-gray-200',
|
||
sidebar: 'w-64 bg-gray-50 border-r border-gray-200',
|
||
main: 'flex-1 overflow-auto',
|
||
content: 'max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-6',
|
||
};
|
||
|
||
// 侧边栏导航
|
||
const sidebarStyles = {
|
||
nav: 'space-y-1 px-3 py-4',
|
||
item: 'flex items-center px-3 py-2 text-sm font-medium rounded-md',
|
||
active: 'bg-primary-100 text-primary-700',
|
||
inactive: 'text-gray-600 hover:bg-gray-100 hover:text-gray-900',
|
||
};
|
||
```
|
||
|
||
### 内容区域
|
||
```typescript
|
||
const contentStyles = {
|
||
section: 'mb-8',
|
||
sectionHeader: 'mb-4',
|
||
sectionTitle: 'text-2xl font-bold text-gray-900',
|
||
sectionDescription: 'text-gray-600 mt-1',
|
||
card: 'bg-white rounded-lg shadow-sm border border-gray-200 p-6',
|
||
};
|
||
```
|
||
|
||
## 交互设计规范
|
||
|
||
### 动画系统
|
||
```css
|
||
/* 过渡动画 */
|
||
.transition-all { transition: all 0.2s ease-in-out; }
|
||
.transition-colors { transition: color, background-color, border-color 0.2s ease-in-out; }
|
||
.transition-transform { transition: transform 0.2s ease-in-out; }
|
||
|
||
/* 进入动画 */
|
||
@keyframes fadeIn {
|
||
from { opacity: 0; }
|
||
to { opacity: 1; }
|
||
}
|
||
|
||
@keyframes slideUp {
|
||
from { transform: translateY(10px); opacity: 0; }
|
||
to { transform: translateY(0); opacity: 1; }
|
||
}
|
||
|
||
@keyframes scaleIn {
|
||
from { transform: scale(0.95); opacity: 0; }
|
||
to { transform: scale(1); opacity: 1; }
|
||
}
|
||
|
||
/* 加载动画 */
|
||
@keyframes spin {
|
||
from { transform: rotate(0deg); }
|
||
to { transform: rotate(360deg); }
|
||
}
|
||
|
||
@keyframes pulse {
|
||
0%, 100% { opacity: 1; }
|
||
50% { opacity: 0.5; }
|
||
}
|
||
```
|
||
|
||
### 交互状态
|
||
```typescript
|
||
const interactionStates = {
|
||
hover: {
|
||
button: 'hover:bg-opacity-90 hover:shadow-md',
|
||
card: 'hover:shadow-lg hover:-translate-y-1',
|
||
link: 'hover:text-primary-600 hover:underline',
|
||
},
|
||
focus: {
|
||
input: 'focus:ring-2 focus:ring-primary-500 focus:border-primary-500',
|
||
button: 'focus:outline-none focus:ring-2 focus:ring-primary-500 focus:ring-offset-2',
|
||
},
|
||
active: {
|
||
button: 'active:transform active:scale-95',
|
||
tab: 'bg-primary-100 text-primary-700 border-primary-500',
|
||
},
|
||
disabled: {
|
||
button: 'opacity-50 cursor-not-allowed',
|
||
input: 'bg-gray-50 text-gray-500 cursor-not-allowed',
|
||
},
|
||
};
|
||
```
|
||
|
||
### 反馈机制
|
||
```typescript
|
||
// 加载状态
|
||
const loadingStates = {
|
||
spinner: 'animate-spin h-5 w-5 text-primary-600',
|
||
skeleton: 'animate-pulse bg-gray-200 rounded',
|
||
progress: 'bg-primary-600 h-2 rounded-full transition-all duration-300',
|
||
};
|
||
|
||
// 状态指示
|
||
const statusIndicators = {
|
||
success: 'bg-green-100 text-green-800 border border-green-200',
|
||
warning: 'bg-yellow-100 text-yellow-800 border border-yellow-200',
|
||
error: 'bg-red-100 text-red-800 border border-red-200',
|
||
info: 'bg-blue-100 text-blue-800 border border-blue-200',
|
||
};
|
||
|
||
// 通知样式
|
||
const notificationStyles = {
|
||
container: 'fixed top-4 right-4 z-50 space-y-2',
|
||
item: 'bg-white rounded-lg shadow-lg border p-4 max-w-sm',
|
||
success: 'border-l-4 border-green-500',
|
||
error: 'border-l-4 border-red-500',
|
||
warning: 'border-l-4 border-yellow-500',
|
||
info: 'border-l-4 border-blue-500',
|
||
};
|
||
```
|
||
|
||
## 响应式设计规范
|
||
|
||
### 断点系统
|
||
```typescript
|
||
const breakpoints = {
|
||
sm: '640px', // 小屏幕手机
|
||
md: '768px', // 平板
|
||
lg: '1024px', // 小型桌面
|
||
xl: '1280px', // 桌面
|
||
'2xl': '1536px', // 大屏桌面
|
||
};
|
||
|
||
// 响应式设计原则
|
||
const responsiveRules = {
|
||
mobile: {
|
||
// 移动端优先
|
||
padding: 'px-4',
|
||
fontSize: 'text-sm',
|
||
spacing: 'space-y-4',
|
||
},
|
||
tablet: {
|
||
// 平板适配
|
||
padding: 'md:px-6',
|
||
fontSize: 'md:text-base',
|
||
spacing: 'md:space-y-6',
|
||
},
|
||
desktop: {
|
||
// 桌面适配
|
||
padding: 'lg:px-8',
|
||
fontSize: 'lg:text-lg',
|
||
spacing: 'lg:space-y-8',
|
||
},
|
||
};
|
||
```
|
||
|
||
### 自适应布局
|
||
```typescript
|
||
// 网格自适应
|
||
const responsiveGrid = {
|
||
mobile: 'grid-cols-1',
|
||
tablet: 'md:grid-cols-2',
|
||
desktop: 'lg:grid-cols-3 xl:grid-cols-4',
|
||
};
|
||
|
||
// 侧边栏响应式
|
||
const responsiveSidebar = {
|
||
mobile: 'hidden', // 移动端隐藏
|
||
tablet: 'md:block md:w-64', // 平板显示
|
||
desktop: 'lg:w-72', // 桌面加宽
|
||
};
|
||
```
|
||
|
||
## 无障碍设计规范
|
||
|
||
### 键盘导航
|
||
```typescript
|
||
const keyboardNavigation = {
|
||
focusable: 'focus:outline-none focus:ring-2 focus:ring-primary-500',
|
||
skipLink: 'sr-only focus:not-sr-only focus:absolute focus:top-4 focus:left-4',
|
||
tabIndex: {
|
||
interactive: '0',
|
||
nonInteractive: '-1',
|
||
},
|
||
};
|
||
```
|
||
|
||
### 屏幕阅读器支持
|
||
```typescript
|
||
const screenReaderSupport = {
|
||
srOnly: 'sr-only', // 仅屏幕阅读器可见
|
||
ariaLabel: 'aria-label', // 无障碍标签
|
||
ariaDescribedBy: 'aria-describedby', // 描述关联
|
||
role: 'role', // 元素角色
|
||
};
|
||
```
|
||
|
||
### 颜色对比度
|
||
```typescript
|
||
// 确保足够的颜色对比度
|
||
const contrastRatios = {
|
||
normalText: '4.5:1', // 普通文本最小对比度
|
||
largeText: '3:1', // 大文本最小对比度
|
||
uiComponents: '3:1', // UI组件最小对比度
|
||
};
|
||
```
|
||
|
||
## 性能优化规范
|
||
|
||
### 图片优化
|
||
```typescript
|
||
const imageOptimization = {
|
||
formats: ['webp', 'avif', 'jpg', 'png'],
|
||
sizes: {
|
||
thumbnail: '150x150',
|
||
small: '300x300',
|
||
medium: '600x600',
|
||
large: '1200x1200',
|
||
},
|
||
lazy: 'loading="lazy"',
|
||
responsive: 'sizes="(max-width: 768px) 100vw, (max-width: 1200px) 50vw, 33vw"',
|
||
};
|
||
```
|
||
|
||
### 动画性能
|
||
```css
|
||
/* 使用transform和opacity进行动画 */
|
||
.animate-optimized {
|
||
will-change: transform, opacity;
|
||
transform: translateZ(0); /* 启用硬件加速 */
|
||
}
|
||
|
||
/* 避免动画布局属性 */
|
||
.avoid-layout-animation {
|
||
/* 避免动画这些属性：width, height, padding, margin, top, left */
|
||
}
|
||
```
|
||
|
||
### 虚拟化列表
|
||
```typescript
|
||
// 大列表虚拟化
|
||
const virtualizationConfig = {
|
||
itemHeight: 80,
|
||
containerHeight: 600,
|
||
overscan: 5, // 预渲染项目数
|
||
threshold: 100, // 启用虚拟化的最小项目数
|
||
};
|
||
```
|
||
|
||
## 设计审查清单
|
||
|
||
### 视觉设计
|
||
- [ ] 是否符合品牌色彩规范
|
||
- [ ] 字体大小和层次是否清晰
|
||
- [ ] 间距是否遵循8px网格系统
|
||
- [ ] 阴影和圆角是否一致
|
||
- [ ] 图标风格是否统一
|
||
|
||
### 交互设计
|
||
- [ ] 交互反馈是否及时明确
|
||
- [ ] 加载状态是否友好
|
||
- [ ] 错误提示是否清晰
|
||
- [ ] 操作流程是否简洁
|
||
- [ ] 快捷键是否合理
|
||
|
||
### 响应式设计
|
||
- [ ] 移动端适配是否完整
|
||
- [ ] 平板端布局是否合理
|
||
- [ ] 桌面端是否充分利用空间
|
||
- [ ] 断点切换是否平滑
|
||
- [ ] 触摸目标是否足够大
|
||
|
||
### 无障碍设计
|
||
- [ ] 颜色对比度是否符合标准
|
||
- [ ] 键盘导航是否完整
|
||
- [ ] 屏幕阅读器支持是否充分
|
||
- [ ] 焦点指示是否清晰
|
||
- [ ] 语义化标签是否正确
|
||
|
||
### 性能优化
|
||
- [ ] 图片是否优化
|
||
- [ ] 动画是否流畅
|
||
- [ ] 大列表是否虚拟化
|
||
- [ ] 资源是否懒加载
|
||
- [ ] 关键渲染路径是否优化
|