UI设计系统规范

1. 设计原则

1.1 设计理念

简洁高效: 界面简洁明了，操作高效便捷
一致性: 统一的设计语言和交互模式
可访问性: 支持无障碍访问和键盘操作
响应式: 适配不同屏幕尺寸和设备

1.2 设计目标

提供专业、现代化的视觉体验
符合国人使用习惯和审美偏好
支持高效的工作流程
确保良好的可维护性

2. 色彩系统

2.1 主色调

/* 主品牌色 */
--primary-50: #f0f9ff;
--primary-100: #e0f2fe;
--primary-200: #bae6fd;
--primary-300: #7dd3fc;
--primary-400: #38bdf8;
--primary-500: #0ea5e9;  /* 主色 */
--primary-600: #0284c7;
--primary-700: #0369a1;
--primary-800: #075985;
--primary-900: #0c4a6e;

/* 辅助色 */
--secondary-50: #f8fafc;
--secondary-100: #f1f5f9;
--secondary-200: #e2e8f0;
--secondary-300: #cbd5e1;
--secondary-400: #94a3b8;
--secondary-500: #64748b;  /* 辅助色 */
--secondary-600: #475569;
--secondary-700: #334155;
--secondary-800: #1e293b;
--secondary-900: #0f172a;

2.2 功能色彩

/* 成功色 */
--success-50: #f0fdf4;
--success-500: #22c55e;
--success-600: #16a34a;

/* 警告色 */
--warning-50: #fffbeb;
--warning-500: #f59e0b;
--warning-600: #d97706;

/* 错误色 */
--error-50: #fef2f2;
--error-500: #ef4444;
--error-600: #dc2626;

/* 信息色 */
--info-50: #f0f9ff;
--info-500: #3b82f6;
--info-600: #2563eb;

2.3 中性色彩

/* 灰色系 */
--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;

2.4 背景色彩

/* 背景色 */
--bg-primary: #ffffff;
--bg-secondary: #f8fafc;
--bg-tertiary: #f1f5f9;
--bg-overlay: rgba(0, 0, 0, 0.5);

/* 边框色 */
--border-light: #e2e8f0;
--border-medium: #cbd5e1;
--border-dark: #94a3b8;

3. 字体系统

3.1 字体族

/* 中文字体 */
--font-family-zh: "PingFang SC", "Microsoft YaHei", "微软雅黑", "Helvetica Neue", Arial, sans-serif;

/* 英文字体 */
--font-family-en: "Inter", "SF Pro Display", -apple-system, BlinkMacSystemFont, sans-serif;

/* 等宽字体 */
--font-family-mono: "SF Mono", "Monaco", "Inconsolata", "Roboto Mono", monospace;

3.2 字体大小

/* 标题字体 */
--text-xs: 0.75rem;    /* 12px */
--text-sm: 0.875rem;   /* 14px */
--text-base: 1rem;     /* 16px */
--text-lg: 1.125rem;   /* 18px */
--text-xl: 1.25rem;    /* 20px */
--text-2xl: 1.5rem;    /* 24px */
--text-3xl: 1.875rem;  /* 30px */
--text-4xl: 2.25rem;   /* 36px */
--text-5xl: 3rem;      /* 48px */

3.3 字体权重

--font-thin: 100;
--font-light: 300;
--font-normal: 400;
--font-medium: 500;
--font-semibold: 600;
--font-bold: 700;
--font-extrabold: 800;
--font-black: 900;

3.4 行高

--leading-none: 1;
--leading-tight: 1.25;
--leading-snug: 1.375;
--leading-normal: 1.5;
--leading-relaxed: 1.625;
--leading-loose: 2;

4. 间距系统

4.1 基础间距

--space-0: 0;
--space-1: 0.25rem;   /* 4px */
--space-2: 0.5rem;    /* 8px */
--space-3: 0.75rem;   /* 12px */
--space-4: 1rem;      /* 16px */
--space-5: 1.25rem;   /* 20px */
--space-6: 1.5rem;    /* 24px */
--space-8: 2rem;      /* 32px */
--space-10: 2.5rem;   /* 40px */
--space-12: 3rem;     /* 48px */
--space-16: 4rem;     /* 64px */
--space-20: 5rem;     /* 80px */
--space-24: 6rem;     /* 96px */
--space-32: 8rem;     /* 128px */

4.2 组件间距

/* 组件内边距 */
--padding-xs: var(--space-2);
--padding-sm: var(--space-3);
--padding-md: var(--space-4);
--padding-lg: var(--space-6);
--padding-xl: var(--space-8);

/* 组件外边距 */
--margin-xs: var(--space-2);
--margin-sm: var(--space-3);
--margin-md: var(--space-4);
--margin-lg: var(--space-6);
--margin-xl: var(--space-8);

5. 圆角系统

--radius-none: 0;
--radius-sm: 0.125rem;   /* 2px */
--radius-md: 0.375rem;   /* 6px */
--radius-lg: 0.5rem;     /* 8px */
--radius-xl: 0.75rem;    /* 12px */
--radius-2xl: 1rem;      /* 16px */
--radius-3xl: 1.5rem;    /* 24px */
--radius-full: 9999px;

6. 阴影系统

/* 基础阴影 */
--shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
--shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
--shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
--shadow-xl: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);

/* 特殊阴影 */
--shadow-inner: inset 0 2px 4px 0 rgba(0, 0, 0, 0.06);
--shadow-outline: 0 0 0 3px rgba(59, 130, 246, 0.5);

7. 组件设计规范

7.1 按钮组件

主要按钮

.btn-primary {
  background-color: var(--primary-500);
  color: white;
  padding: var(--space-3) var(--space-6);
  border-radius: var(--radius-md);
  font-weight: var(--font-medium);
  font-size: var(--text-sm);
  border: none;
  cursor: pointer;
  transition: all 0.2s ease;
}

.btn-primary:hover {
  background-color: var(--primary-600);
  transform: translateY(-1px);
  box-shadow: var(--shadow-md);
}

次要按钮

.btn-secondary {
  background-color: transparent;
  color: var(--primary-500);
  border: 1px solid var(--primary-500);
  padding: var(--space-3) var(--space-6);
  border-radius: var(--radius-md);
  font-weight: var(--font-medium);
  font-size: var(--text-sm);
  cursor: pointer;
  transition: all 0.2s ease;
}

.btn-secondary:hover {
  background-color: var(--primary-50);
  border-color: var(--primary-600);
}

7.2 输入框组件

.input {
  width: 100%;
  padding: var(--space-3) var(--space-4);
  border: 1px solid var(--border-medium);
  border-radius: var(--radius-md);
  font-size: var(--text-sm);
  color: var(--gray-700);
  background-color: var(--bg-primary);
  transition: all 0.2s ease;
}

.input:focus {
  outline: none;
  border-color: var(--primary-500);
  box-shadow: var(--shadow-outline);
}

.input::placeholder {
  color: var(--gray-400);
}

7.3 卡片组件

.card {
  background-color: var(--bg-primary);
  border: 1px solid var(--border-light);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
  overflow: hidden;
  transition: all 0.2s ease;
}

.card:hover {
  box-shadow: var(--shadow-md);
  transform: translateY(-2px);
}

.card-header {
  padding: var(--space-6);
  border-bottom: 1px solid var(--border-light);
  background-color: var(--bg-secondary);
}

.card-body {
  padding: var(--space-6);
}

.card-footer {
  padding: var(--space-6);
  border-top: 1px solid var(--border-light);
  background-color: var(--bg-secondary);
}

7.4 导航组件

顶部导航

.navbar {
  height: 60px;
  background-color: var(--bg-primary);
  border-bottom: 1px solid var(--border-light);
  display: flex;
  align-items: center;
  padding: 0 var(--space-6);
  box-shadow: var(--shadow-sm);
}

.navbar-brand {
  font-size: var(--text-xl);
  font-weight: var(--font-bold);
  color: var(--primary-500);
  text-decoration: none;
}

.navbar-nav {
  display: flex;
  align-items: center;
  gap: var(--space-8);
  margin-left: auto;
}

.navbar-item {
  color: var(--gray-600);
  text-decoration: none;
  font-weight: var(--font-medium);
  padding: var(--space-2) var(--space-4);
  border-radius: var(--radius-md);
  transition: all 0.2s ease;
}

.navbar-item:hover {
  color: var(--primary-500);
  background-color: var(--primary-50);
}

侧边导航

.sidebar {
  width: 280px;
  background-color: var(--bg-primary);
  border-right: 1px solid var(--border-light);
  height: calc(100vh - 60px);
  overflow-y: auto;
}

.sidebar-nav {
  padding: var(--space-4);
}

.sidebar-item {
  display: flex;
  align-items: center;
  padding: var(--space-3) var(--space-4);
  color: var(--gray-600);
  text-decoration: none;
  border-radius: var(--radius-md);
  margin-bottom: var(--space-1);
  transition: all 0.2s ease;
}

.sidebar-item:hover {
  background-color: var(--primary-50);
  color: var(--primary-500);
}

.sidebar-item.active {
  background-color: var(--primary-100);
  color: var(--primary-600);
  font-weight: var(--font-medium);
}

8. 图标系统

8.1 图标库

主要图标库: FontAwesome 6.0
备用图标库: Heroicons, Lucide
图标风格: 线性图标为主，填充图标为辅

8.2 图标尺寸

.icon-xs { width: 12px; height: 12px; }
.icon-sm { width: 16px; height: 16px; }
.icon-md { width: 20px; height: 20px; }
.icon-lg { width: 24px; height: 24px; }
.icon-xl { width: 32px; height: 32px; }

8.3 图标使用规范

保持图标风格一致
使用合适的图标尺寸
提供图标的语义化含义
支持高对比度显示

9. 动画系统

9.1 过渡动画

/* 基础过渡 */
.transition {
  transition: all 0.2s ease;
}

.transition-fast {
  transition: all 0.15s ease;
}

.transition-slow {
  transition: all 0.3s ease;
}

9.2 悬停动画

.hover-lift:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow-lg);
}

.hover-scale:hover {
  transform: scale(1.05);
}

.hover-fade:hover {
  opacity: 0.8;
}

9.3 加载动画

@keyframes spin {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}

.animate-spin {
  animation: spin 1s linear infinite;
}

@keyframes pulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.5; }
}

.animate-pulse {
  animation: pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
}

10. 响应式设计

10.1 断点设置

/* 移动端 */
@media (max-width: 767px) {
  .sidebar { width: 100%; }
  .navbar-nav { display: none; }
}

/* 平板端 */
@media (min-width: 768px) and (max-width: 1023px) {
  .sidebar { width: 240px; }
}

/* 桌面端 */
@media (min-width: 1024px) {
  .sidebar { width: 280px; }
}

10.2 网格系统

.container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 var(--space-4);
}

.grid {
  display: grid;
  gap: var(--space-6);
}

.grid-cols-1 { grid-template-columns: repeat(1, 1fr); }
.grid-cols-2 { grid-template-columns: repeat(2, 1fr); }
.grid-cols-3 { grid-template-columns: repeat(3, 1fr); }
.grid-cols-4 { grid-template-columns: repeat(4, 1fr); }

11. 无障碍设计

11.1 颜色对比度

正常文本: 至少 4.5:1 的对比度
大文本: 至少 3:1 的对比度
非文本元素: 至少 3:1 的对比度

11.2 键盘导航

所有交互元素支持键盘访问
提供清晰的焦点指示
支持 Tab 键导航

11.3 屏幕阅读器

提供语义化的 HTML 结构
使用适当的 ARIA 标签
提供替代文本描述

设计系统版本: 1.0.0
创建时间: 2025年10月22日
维护者: Peterfei

FilesExpand file tree

ui-design-system.md

Latest commit

History

ui-design-system.md

File metadata and controls

UI设计系统规范

1. 设计原则

1.1 设计理念

1.2 设计目标

2. 色彩系统

2.1 主色调

2.2 功能色彩

2.3 中性色彩

2.4 背景色彩

3. 字体系统

3.1 字体族

3.2 字体大小

3.3 字体权重

3.4 行高

4. 间距系统

4.1 基础间距

4.2 组件间距

5. 圆角系统

6. 阴影系统

7. 组件设计规范

7.1 按钮组件

主要按钮

次要按钮

7.2 输入框组件

7.3 卡片组件

7.4 导航组件

顶部导航

侧边导航

8. 图标系统

8.1 图标库

8.2 图标尺寸

8.3 图标使用规范

9. 动画系统

9.1 过渡动画

9.2 悬停动画

9.3 加载动画

10. 响应式设计

10.1 断点设置

10.2 网格系统

11. 无障碍设计

11.1 颜色对比度

11.2 键盘导航

11.3 屏幕阅读器