# 非遗文化传承平台 - 设计规范

## 🎨 设计理念

### 核心设计原则

1. **文化传承** - 尊重传统，融入现代设计语言
2. **视觉层次** - 清晰的信息架构和内容组织
3. **体验优先** - 流畅的交互和良好的可用性
4. **品牌一致** - 统一的视觉风格和设计语言

### 设计关键词

- 传承千年（Heritage）
- 匠心独运（Craftsmanship）
- 文化自信（Cultural Pride）
- 活态传承（Living Heritage）
- 创新融合（Innovation & Fusion）

## 🎨 色彩系统

### 主色调

基于中国传统色彩体系，选取代表性色彩：

```css
/* 朱砂红 - 主品牌色 */
--color-primary: #C8363D;
--color-primary-hover: #A82E34;
--color-primary-active: #8B252B;

/* 金沙黄 - 强调色 */
--color-accent: #D4A574;

/* 墨绿 - 辅助色 1 */
--color-auxiliary-1: #2A5E4D;

/* 青黛蓝 - 辅助色 2 */
--color-auxiliary-2: #4A5F7F;
```

### 背景色

```css
/* 宣纸色 - 基础背景 */
--color-bg-base: #FAFAF8;

/* 纯白 - 容器背景 */
--color-bg-container: #FFFFFF;

/* 浅米黄 - Section 背景 */
--color-bg-section: #F5F0E8;
```

### 文本色

```css
/* 深灰黑 - 主文本 */
--color-text-primary: #2C2C2C;

/* 中灰 - 次要文本 */
--color-text-secondary: #666666;

/* 浅灰 - 辅助文本 */
--color-text-tertiary: #999999;

/* 极浅灰 - 占位文本 */
--color-text-quaternary: #CCCCCC;
```

### 语义色

```css
--color-success: #52C41A;
--color-warning: #FAAD14;
--color-error: #FF4D4F;
--color-info: #1890FF;
```

### 渐变

```css
/* 主品牌渐变 */
background: linear-gradient(135deg, #C8363D 0%, #8B252B 100%);

/* 温暖渐变 */
background: linear-gradient(135deg, #FFF9F0 0%, #F5F0E8 100%);

/* 优雅渐变 */
background: linear-gradient(135deg, #FAFAF8 0%, #FFFFFF 50%, #F5F0E8 100%);
```

## 📝 字体系统

### 字体家族

```css
/* 标题 - 衬线字体 */
--font-family-serif: 'Noto Serif SC', 'Songti SC', Georgia, serif;

/* 正文 - 无衬线字体 */
--font-family-sans: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto,
  'Helvetica Neue', Arial, 'Noto Sans', sans-serif, 'Noto Sans SC',
  'Microsoft YaHei';
```

### 字号等级

```css
--font-size-h1: 38px;
--font-size-h2: 30px;
--font-size-h3: 24px;
--font-size-h4: 20px;
--font-size-h5: 16px;

--font-size-base: 14px;
--font-size-lg: 16px;
--font-size-sm: 12px;
```

### 行高

```css
--line-height-base: 1.5715;
--line-height-heading: 1.2;
```

### 字重

```css
--font-weight-normal: 400;
--font-weight-medium: 500;
--font-weight-semibold: 600;
--font-weight-bold: 700;
```

## 📐 间距系统

### 基础间距

```css
--spacing-xs: 8px;
--spacing-sm: 12px;
--spacing-md: 16px;
--spacing-lg: 24px;
--spacing-xl: 32px;
--spacing-xxl: 48px;
```

### Section 间距

```css
--section-spacing: 80px;
--section-spacing-lg: 120px;
--section-spacing-sm: 60px;
```

## 🎯 圆角系统

```css
--border-radius-base: 8px;
--border-radius-lg: 12px;
--border-radius-sm: 6px;
--border-radius-xs: 4px;
```

## 🌫️ 阴影系统

```css
/* 小阴影 - 卡片、按钮 */
--shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.08);

/* 中阴影 - 悬浮卡片 */
--shadow-md: 0 4px 16px rgba(0, 0, 0, 0.12);

/* 大阴影 - Modal、Drawer */
--shadow-lg: 0 6px 24px rgba(0, 0, 0, 0.16);

/* 超大阴影 - 特殊强调 */
--shadow-xl: 0 12px 48px rgba(0, 0, 0, 0.2);

/* 纸张层叠效果 */
--shadow-paper:
  0 2px 4px rgba(0, 0, 0, 0.08),
  0 4px 8px rgba(0, 0, 0, 0.06),
  0 1px 2px rgba(0, 0, 0, 0.04);
```

## 🎬 动画系统

### 动画时长

```css
--duration-fast: 0.2s;
--duration-base: 0.3s;
--duration-slow: 0.5s;
```

### 缓动函数

```css
--ease-in-out: cubic-bezier(0.645, 0.045, 0.355, 1);
--ease-out: cubic-bezier(0.215, 0.61, 0.355, 1);
```

### 常用动画

```css
/* 渐显 */
@keyframes fadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}

/* 上滑渐显 */
@keyframes fadeInUp {
  from {
    opacity: 0;
    transform: translateY(30px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* 缩放渐显 */
@keyframes scaleIn {
  from {
    opacity: 0;
    transform: scale(0.9);
  }
  to {
    opacity: 1;
    transform: scale(1);
  }
}
```

## 🎭 组件设计规范

### 卡片（Card）

```css
/* 默认卡片 */
.heritage-card {
  border-radius: 12px;
  border: 1px solid #E8E3DB;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
  transition: all 0.3s ease;
}

.heritage-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12);
  border-color: #C8363D;
}
```

### 按钮（Button）

```css
/* 主按钮 */
.btn-primary {
  background: #C8363D;
  color: #FFFFFF;
  border: none;
  border-radius: 8px;
  padding: 10px 24px;
  font-weight: 500;
  box-shadow: 0 2px 0 rgba(200, 54, 61, 0.1);
}

.btn-primary:hover {
  background: #A82E34;
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(200, 54, 61, 0.3);
}
```

### 标签（Tag）

```css
.heritage-tag {
  background-color: #F5F0E8;
  color: #666666;
  border: none;
  border-radius: 4px;
  padding: 2px 8px;
  font-size: 12px;
}
```

## 📱 响应式断点

```css
/* 移动设备 */
@media (max-width: 576px) { ... }

/* 平板 */
@media (max-width: 768px) { ... }

/* 小屏桌面 */
@media (max-width: 992px) { ... }

/* 中屏桌面 */
@media (max-width: 1200px) { ... }

/* 大屏桌面 */
@media (min-width: 1200px) { ... }
```

## 🖼️ 图片使用规范

### 图片比例

- **Hero Banner**: 16:9
- **卡片封面**: 3:2
- **传承人头像**: 1:1
- **作品展示**: 4:3

### 图片优化

- 使用 WebP 格式（提供 JPG/PNG 降级）
- 图片压缩（质量 80-85%）
- 懒加载（Lazy Loading）
- 响应式图片（`srcset`、`sizes`）

### 占位图

使用 Unsplash 或 Pexels 作为开发阶段图片源：
- Unsplash: `https://images.unsplash.com/photo-{id}?w={width}`
- Pexels: `https://images.pexels.com/photos/{id}/{filename}?w={width}`

## ♿ 可访问性

### 颜色对比度

- 文本与背景对比度 >= 4.5:1
- 大文本（18px+）对比度 >= 3:1

### 键盘导航

- 所有交互元素支持键盘访问
- 清晰的焦点状态（`:focus`）
- 逻辑的 Tab 顺序

### 语义化 HTML

- 使用正确的 HTML5 语义标签
- 添加 ARIA 属性
- 为图片添加 alt 文本

## 🔍 SEO 优化

- 合理的标题层级（h1-h6）
- Meta 标签完整
- 结构化数据（JSON-LD）
- 友好的 URL 结构

## 📦 设计资源

### 设计工具

- Figma / Sketch - UI 设计
- Adobe Illustrator - 图标设计
- Adobe Photoshop - 图片处理

### 图标库

- Ant Design Icons
- 自定义非遗主题图标

### 字体资源

- Google Fonts - Noto Serif SC
- Google Fonts - Noto Sans SC

---

*设计规范持续更新中，如有疑问请联系设计团队*