7abc7becee
- 添加TypeScript配置 - 添加Vite构建配置 - 添加项目依赖（React 18, Ant Design 5, React Router等） - 添加.gitignore配置
382 lines
6.6 KiB
Markdown
382 lines
6.6 KiB
Markdown
# 非遗文化传承平台 - 设计规范
|
||
|
||
## 🎨 设计理念
|
||
|
||
### 核心设计原则
|
||
|
||
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
|
||
|
||
---
|
||
|
||
*设计规范持续更新中，如有疑问请联系设计团队*
|