heritage-ui/DESIGN.md

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

🎨 设计理念

核心设计原则

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

设计关键词

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

🎨 色彩系统

主色调

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

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

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

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

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

背景色

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

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

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

文本色

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

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

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

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

语义色

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

渐变

/* 主品牌渐变 */
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%);

📝 字体系统

字体家族

/* 标题 - 衬线字体 */
--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';

字号等级

--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;

行高

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

字重

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

📐 间距系统

基础间距

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

Section 间距

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

🎯 圆角系统

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

🌫️ 阴影系统

/* 小阴影 - 卡片、按钮 */
--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);

🎬 动画系统

动画时长

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

缓动函数

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

常用动画

/* 渐显 */
@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）

/* 默认卡片 */
.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）

/* 主按钮 */
.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）

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

📱 响应式断点

/* 移动设备 */
@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

---

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