设计系统与视觉规范

拆解项目的色彩、字体、间距、动效设计系统

理解设计系统的构成
掌握 CSS 变量的完整体系
理解动效设计原则
了解响应式断点策略

设计理念

朋友好学的设计语言参考 Linear、Vercel、Apple 的极简风格：深色为主、大量留白、玻璃拟态、克制微动效。设计原则：内容为王，界面隐形。

色彩系统

示例

/* 完整色彩体系（CSS 变量） */
:root {
  /* 品牌色 */
  --primary: #4f46e5;        /* 深靛蓝 - 主操作 */
  --primary-muted: rgba(79,70,229,0.1);

  /* 语义色 */
  --success: #10b981;       /* 通过/成功 */
  --warning: #f59e0b;       /* 警告/提示 */
  --danger: #ef4444;        /* 错误/删除 */
  --info: #3b82f6;          /* 信息 */

  /* 中性色（深色模式） */
  --bg: #0f172a;            /* 页面背景 */
  --bg-elevated: #1e293b;   /* 卡片背景 */
  --bg-elevated-2: #334155; /* 悬浮元素 */
  --foreground: #f1f5f9;    /* 主文字 */
  --foreground-secondary: #94a3b8; /* 次要文字 */
  --border: rgba(148,163,184,0.15);

  /* 玻璃拟态 */
  --glass-bg: rgba(30,41,59,0.6);
  --glass-border: rgba(148,163,184,0.1);
}

🐍色彩设计的底层逻辑

品牌色只用于主操作按钮和链接，别大面积用。语义色要守全球共识：绿=成功，红=错误，黄=警告。深色模式不是简单反色，得降饱和度、调对比度。所有颜色用 CSS 变量定义，支持主题切换和暗色模式适配。注意：WCAG AA 标准要求文字对比度 ≥ 4.5:1。

字体系统

示例

/* 字体栈 */
--font-sans: "Inter", "PingFang SC", "Microsoft YaHei", system-ui, sans-serif;
--font-mono: "JetBrains Mono", "Fira Code", "Cascadia Code", monospace;

/* 字号层级 */
--text-xs: 11px;    /* 辅助标签 */
--text-sm: 13px;    /* 次要文字 */
--text-base: 15px;  /* 正文 */
--text-lg: 18px;    /* 小标题 */
--text-xl: 22px;    /* 章节标题 */
--text-2xl: 28px;   /* 页面标题 */
--text-3xl: 36px;   /* Hero 大标题 */

间距与圆角

示例

/* 间距系统（4px 基准） */
--space-1: 4px;
--space-2: 8px;
--space-3: 12px;
--space-4: 16px;
--space-6: 24px;
--space-8: 32px;
--space-12: 48px;

/* 圆角系统 */
--radius-sm: 6px;    /* 小标签 */
--radius-md: 10px;   /* 按钮、输入框 */
--radius-lg: 16px;   /* 卡片 */
--radius-xl: 24px;   /* 大面板、弹窗 */

动效设计

示例

/* 动效规范 */
--duration-fast: 150ms;    /* 按钮悬停、颜色变化 */
--duration-normal: 250ms;  /* 卡片展开、面板切换 */
--duration-slow: 400ms;    /* 页面过渡、大动画 */

/* 缓动函数 */
--ease-out: cubic-bezier(0.16, 1, 0.3, 1);  /* 自然减速 */
--ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1); /* 弹性 */

💡动效设计原则

动效服务于功能，不装饰150-300ms 是舒适区间，超过 500ms 感觉拖沓用 ease-out（先快后慢），符合物理直觉用 Framer Motion 的 layout 动画自动处理位置变化尊重 prefers-reduced-motion（用户关闭动效时禁用）。

响应式断点

示例

/* 断点策略（移动优先） */
/* 默认：手机 < 768px */
/* md: 768px+  平板 */
/* lg: 1024px+ 桌面 */
/* xl: 1280px+ 大屏 */

/* 布局变化 */
/* 手机：单栏，底部 Tab 导航 */
/* 平板：两栏，侧边栏可收起 */
/* 桌面：三栏，完整导航 */

/* 代码编辑器 */
/* 手机：只读 + 编程键盘 */
/* 桌面：完整 Monaco Editor */

选择题

主操作按钮应该用什么颜色？

选择题

界面微动效（按钮、弹层、勾选）的舒适时长区间是？

资深工程师加餐

底层原理 · 大厂视角 · 工程经验，点卡片展开

千万别说「没什么难点」。按这条链讲：现象 → 你如何定位（日志、数据、复现）→ 根因 → 有哪些候选方案、各自代价 → 你最终怎么选、放弃了什么 → 上线后的量化收益。它展示的是解决未知问题的方法论，而这正是区分「会写代码」和「能扛事」的关键，也是高级岗面试的核心考点。

挑战任务

动效时长分级器

简单+50 XP

界面微动效的舒适区间是 150–300ms。请实现 classify_motion(ms)：小于 100ms 太突兀返回 'too-fast'，150–300ms 返回 'comfortable'，超过 500ms 返回 'sluggish'，其余返回 'ok'。

动效时长分级器

Python 0%

1 个测试用例

课后作业

设计系统文档

中等+20 XP

整理项目的设计系统文档：列出所有 CSS 变量、组件状态、动效规范。

设计系统文档

Python 0%

1 个测试用例