谭振兴聊前端

Appearance

谭振兴聊前端 - UI设计规范 ​

设计理念 ​

核心价值 ​

  • 专业性： 体现前端技术的专业水准
  • 简洁性： 突出内容，减少视觉干扰
  • 现代感： 采用当前流行的设计趋势
  • 易用性： 优秀的用户体验和可访问性

设计原则 ​

  1. 内容为王： 设计服务于内容展示
  2. 一致性： 保持视觉和交互的一致性
  3. 响应式： 适配所有设备和屏幕尺寸
  4. 可访问性： 符合WCAG 2.1 AA标准
  5. 性能优先： 设计不影响页面性能

色彩系统 ​

主色调 ​

品牌蓝色（Primary Blue）

css
--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 Scale）

css
--gray-50: #f8fafc;
--gray-100: #f1f5f9;
--gray-200: #e2e8f0;
--gray-300: #cbd5e1;
--gray-400: #94a3b8;
--gray-500: #64748b;
--gray-600: #475569;
--gray-700: #334155;
--gray-800: #1e293b;
--gray-900: #0f172a;

使用场景：

  • 文本内容
  • 边框和分割线
  • 背景色
  • 次要信息

语义色彩 ​

成功色（Success）

css
--success-500: #10b981;
--success-600: #059669;

警告色（Warning）

css
--warning-500: #f59e0b;
--warning-600: #d97706;

错误色（Error）

css
--error-500: #ef4444;
--error-600: #dc2626;

主题模式 ​

浅色主题（Light Theme）

  • 背景色：#ffffff
  • 主要文本：#1e293b
  • 次要文本：#64748b
  • 边框色：#e2e8f0

深色主题（Dark Theme）

  • 背景色：#0f172a
  • 主要文本：#f1f5f9
  • 次要文本：#94a3b8
  • 边框色：#334155

字体系统 ​

字体族 ​

中文字体栈

css
font-family: 
  "PingFang SC",
  "Hiragino Sans GB",
  "Microsoft YaHei",
  "WenQuanYi Micro Hei",
  sans-serif;

英文字体栈

css
font-family: 
  "Inter",
  "SF Pro Display",
  -apple-system,
  BlinkMacSystemFont,
  "Segoe UI",
  Roboto,
  sans-serif;

代码字体栈

css
font-family: 
  "JetBrains Mono",
  "Fira Code",
  "SF Mono",
  Monaco,
  "Cascadia Code",
  "Roboto Mono",
  Consolas,
  monospace;

字体大小 ​

标题层级

css
/* H1 - 页面主标题 */
.text-4xl { font-size: 2.25rem; line-height: 2.5rem; }

/* H2 - 章节标题 */
.text-3xl { font-size: 1.875rem; line-height: 2.25rem; }

/* H3 - 小节标题 */
.text-2xl { font-size: 1.5rem; line-height: 2rem; }

/* H4 - 子标题 */
.text-xl { font-size: 1.25rem; line-height: 1.75rem; }

/* H5 - 小标题 */
.text-lg { font-size: 1.125rem; line-height: 1.75rem; }

/* H6 - 最小标题 */
.text-base { font-size: 1rem; line-height: 1.5rem; }

正文文本

css
/* 大号正文 */
.text-lg { font-size: 1.125rem; line-height: 1.75rem; }

/* 标准正文 */
.text-base { font-size: 1rem; line-height: 1.5rem; }

/* 小号正文 */
.text-sm { font-size: 0.875rem; line-height: 1.25rem; }

/* 辅助文本 */
.text-xs { font-size: 0.75rem; line-height: 1rem; }

字重 ​

css
.font-light { font-weight: 300; }    /* 细体 */
.font-normal { font-weight: 400; }   /* 常规 */
.font-medium { font-weight: 500; }   /* 中等 */
.font-semibold { font-weight: 600; } /* 半粗 */
.font-bold { font-weight: 700; }     /* 粗体 */

间距系统 ​

基础间距单位 ​

css
/* 基础单位：4px */
.space-1 { margin/padding: 0.25rem; }  /* 4px */
.space-2 { margin/padding: 0.5rem; }   /* 8px */
.space-3 { margin/padding: 0.75rem; }  /* 12px */
.space-4 { margin/padding: 1rem; }     /* 16px */
.space-5 { margin/padding: 1.25rem; }  /* 20px */
.space-6 { margin/padding: 1.5rem; }   /* 24px */
.space-8 { margin/padding: 2rem; }     /* 32px */
.space-10 { margin/padding: 2.5rem; }  /* 40px */
.space-12 { margin/padding: 3rem; }    /* 48px */
.space-16 { margin/padding: 4rem; }    /* 64px */
.space-20 { margin/padding: 5rem; }    /* 80px */

布局间距规范 ​

组件内间距

  • 按钮内边距：12px 24px
  • 卡片内边距：24px
  • 表单元素内边距：12px 16px

组件间间距

  • 相关元素：8px-16px
  • 独立组件：24px-32px
  • 页面区块：48px-64px

页面布局间距

  • 页面边距：16px (移动端) / 24px (桌面端)
  • 内容区域最大宽度：1200px
  • 侧边栏宽度：280px

组件设计规范 ​

按钮组件 ​

主要按钮（Primary Button）

css
.btn-primary {
  background-color: var(--primary-600);
  color: white;
  padding: 12px 24px;
  border-radius: 8px;
  font-weight: 500;
  transition: all 0.2s ease;
}

.btn-primary:hover {
  background-color: var(--primary-700);
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(37, 99, 235, 0.3);
}

次要按钮（Secondary Button）

css
.btn-secondary {
  background-color: transparent;
  color: var(--primary-600);
  border: 1px solid var(--primary-600);
  padding: 12px 24px;
  border-radius: 8px;
  font-weight: 500;
  transition: all 0.2s ease;
}

.btn-secondary:hover {
  background-color: var(--primary-50);
  transform: translateY(-1px);
}

按钮尺寸

  • 大号：padding: 16px 32px; font-size: 1.125rem;
  • 标准：padding: 12px 24px; font-size: 1rem;
  • 小号：padding: 8px 16px; font-size: 0.875rem;

卡片组件 ​

基础卡片

css
.card {
  background-color: white;
  border-radius: 12px;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
  border: 1px solid var(--gray-200);
  padding: 24px;
  transition: all 0.2s ease;
}

.card:hover {
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
  transform: translateY(-2px);
}

文章卡片

  • 标题：font-size: 1.25rem; font-weight: 600;
  • 摘要：font-size: 1rem; color: var(--gray-600);
  • 元信息：font-size: 0.875rem; color: var(--gray-500);

表单组件 ​

输入框

css
.input {
  width: 100%;
  padding: 12px 16px;
  border: 1px solid var(--gray-300);
  border-radius: 8px;
  font-size: 1rem;
  transition: all 0.2s ease;
}

.input:focus {
  outline: none;
  border-color: var(--primary-500);
  box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1);
}

标签

css
.label {
  display: block;
  font-size: 0.875rem;
  font-weight: 500;
  color: var(--gray-700);
  margin-bottom: 8px;
}

导航组件 ​

顶部导航

  • 高度：64px
  • 背景：白色/半透明
  • 阴影：0 1px 3px rgba(0, 0, 0, 0.1)
  • 粘性定位：sticky top-0

导航链接

css
.nav-link {
  color: var(--gray-600);
  font-weight: 500;
  padding: 8px 16px;
  border-radius: 6px;
  transition: all 0.2s ease;
}

.nav-link:hover {
  color: var(--primary-600);
  background-color: var(--primary-50);
}

.nav-link.active {
  color: var(--primary-600);
  background-color: var(--primary-100);
}

图标系统 ​

图标库 ​

  • 主要图标库： Lucide React
  • 图标风格： 线性图标，2px描边
  • 图标尺寸： 16px, 20px, 24px, 32px

图标使用规范 ​

尺寸对应

  • 16px：小号按钮、表单元素
  • 20px：导航菜单、列表项
  • 24px：标准按钮、卡片标题
  • 32px：页面标题、重要操作

颜色规范

  • 主要图标：继承文本颜色
  • 交互图标：var(--primary-600)
  • 状态图标：对应语义色彩

动画与过渡 ​

过渡时长 ​

css
/* 快速过渡 - 颜色、透明度变化 */
.transition-fast { transition: all 0.15s ease; }

/* 标准过渡 - 大多数交互 */
.transition-normal { transition: all 0.2s ease; }

/* 慢速过渡 - 布局变化 */
.transition-slow { transition: all 0.3s ease; }

缓动函数 ​

css
.ease-out { transition-timing-function: cubic-bezier(0, 0, 0.2, 1); }
.ease-in { transition-timing-function: cubic-bezier(0.4, 0, 1, 1); }
.ease-in-out { transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1); }

常用动画效果 ​

悬停效果

css
.hover-lift:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

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

加载动画

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

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

淡入动画

css
@keyframes fadeIn {
  from { opacity: 0; transform: translateY(20px); }
  to { opacity: 1; transform: translateY(0); }
}

.animate-fade-in {
  animation: fadeIn 0.5s ease-out;
}

响应式设计 ​

断点系统 ​

css
/* 移动端 */
@media (max-width: 640px) { /* sm */ }

/* 平板端 */
@media (min-width: 641px) and (max-width: 1024px) { /* md */ }

/* 桌面端 */
@media (min-width: 1025px) { /* lg */ }

/* 大屏幕 */
@media (min-width: 1280px) { /* xl */ }

响应式规范 ​

布局适配

  • 移动端：单列布局，全宽显示
  • 平板端：两列布局，适当边距
  • 桌面端：多列布局，最大宽度限制

字体缩放

  • 移动端：基础字号 14px
  • 平板端：基础字号 15px
  • 桌面端：基础字号 16px

间距调整

  • 移动端：减少间距，紧凑布局
  • 桌面端：增加间距，舒适阅读

可访问性设计 ​

颜色对比度 ​

  • 正文文本：对比度 ≥ 4.5:1
  • 大号文本：对比度 ≥ 3:1
  • 非文本元素：对比度 ≥ 3:1

焦点状态 ​

css
.focus-visible {
  outline: 2px solid var(--primary-500);
  outline-offset: 2px;
}

语义化标记 ​

  • 使用正确的HTML语义标签
  • 提供alt属性和aria标签
  • 确保键盘导航可用

设计资源 ​

设计工具 ​

  • 主要工具： Figma
  • 图标资源： Lucide Icons
  • 字体资源： Google Fonts
  • 配色工具： Coolors.co

组件库 ​

  • 基础组件： Headless UI
  • 动画库： Framer Motion
  • 图表库： Chart.js
  • 代码高亮： Prism.js

设计检查清单 ​

视觉设计

  • [ ] 色彩搭配协调
  • [ ] 字体层级清晰
  • [ ] 间距规范统一
  • [ ] 对比度符合标准

交互设计

  • [ ] 交互反馈及时
  • [ ] 状态变化明确
  • [ ] 错误提示友好
  • [ ] 加载状态清晰

响应式设计

  • [ ] 多设备适配完美
  • [ ] 触摸友好
  • [ ] 性能优化
  • [ ] 可访问性良好

这套UI设计规范确保了网站的视觉一致性和用户体验质量，为开发团队提供了明确的设计指导。

用代码构建未来，让技术改变世界 🚀 | 专注前端技术，分享开发经验

Copyright © 2025 tanzhenxing.com 版权所有