LiHongwei-cn 设计资源库
一、色彩系统
深色主题（高级感首选）
:root {
--bg-primary: #0a0a0f;
--bg-secondary: #12121a;
--bg-card: #1a1a2e;
--text-primary: #e0e0e0;
--text-secondary: #a0a0a0;
--accent: #d4af37; /* 金色 */
--accent-hover: #f0d060;
--border: #2a2a3e;
}
浅色主题（专业感）
:root {
--bg-primary: #ffffff;
--bg-secondary: #f8f9fa;
--bg-card: #ffffff;
--text-primary: #1a1a2e;
--text-secondary: #6b7280;
--accent: #2563eb; /* 蓝色 */
--accent-hover: #1d4ed8;
--border: #e5e7eb;
}
配色工具
- Coolors：https://coolors.co — 随机生成配色方案
- ColorHunt：https://colorhunt.co — 精选配色方案
- Realtime Colors：https://realtimecolors.com — 实时预览配色
- Tailwind Colors：https://tailwindcss.com/docs/customizing-colors
二、字体搭配
中文字体
- 思源黑体（Noto Sans CJK）：免费商用，现代无衬线
- 思源宋体（Noto Serif CJK）：学术/正式场合
- 霞鹜文楷（LXGW WenKai）：开源楷体，优雅文艺
- 得意黑（Smiley Sans）：开源黑体，设计感强
英文字体
- Inter：现代无衬线，UI 首选
- JetBrains Mono：代码字体，程序员最爱
- Playfair Display：衬线字体，高级感
- Space Grotesk：几何无衬线，科技感
搭配方案
- 现代简洁：Inter + 思源黑体
- 学术专业：Playfair Display + 思源宋体
- 科技感：Space Grotesk + 得意黑
- 文艺清新：LXGW WenKai + Space Grotesk
字体加载
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+SC:wght@300;400;500;700&display=swap');
body {
font-family: 'Inter', 'Noto Sans SC', -apple-system, sans-serif;
}
三、图标库
1. Lucide Icons ⭐ 12k+
- 链接：https://github.com/lucide-icons/lucide
- 特点：shadcn/ui 默认图标，极简风格
- 安装：
npm install lucide-react
2. Heroicons ⭐ 22k+
- 链接：https://github.com/tailwindlabs/heroicons
- 特点：Tailwind 官方图标
3. Phosphor Icons ⭐ 1.5k+
- 链接：https://github.com/phosphor-icons/react
- 特点：6 种粗细，风格统一
4. Tabler Icons ⭐ 18k+
- 链接：https://github.com/tabler/tabler-icons
- 特点：4000+ 图标，免费商用
5. Iconify ⭐ 3k+
- 链接：https://github.com/iconify/iconify
- 特点：100+ 图标库统一接口
四、设计工具
免费
- Figma：https://figma.com — 最流行的在线设计工具
- Penpot：https://penpot.app — 开源 Figma 替代
- Excalidraw：https://excalidraw.com — 手绘风格白板
- tldraw：https://tldraw.com — 极简白板
付费
- Sketch：macOS 专用，UI 设计标杆
- Adobe XD：Adobe 生态
- Framer：设计 + 原型 + 代码
五、灵感来源
设计作品
- Dribbble：https://dribbble.com — 设计师社区
- Behance：https://behance.net — Adobe 设计社区
- Awwwards：https://awwwards.com — 网页设计奖项
开源设计
- UIverse：https://uiverse.io — 开源 UI 组件
- Hover.dev：https://hover.dev — React 动画组件
- Motion Primitives：https://motion-primitives.com — 动画组件
设计系统
- Material Design：https://m3.material.io — Google 设计系统
- Human Interface：https://developer.apple.com/design/human-interface-guidelines — Apple 设计指南
- Fluent UI：https://fluent2.microsoft.design — Microsoft 设计系统
六、设计原则
视觉层次
- 大小：重要内容更大
- 粗细：标题粗体，正文常规
- 颜色：强调色突出重点
- 间距：相关内容靠近，无关内容远离
留白
- 内容间距：至少 8px
- 卡片间距：16-24px
- 区块间距：32-48px
- 页面边距：至少 24px
一致性
- 圆角：统一使用 4px/8px/12px
- 阴影：统一使用一种阴影
- 动画：统一时长 200-300ms
- 颜色：只用 2-3 种主色
七、响应式设计
断点
/* 移动端 */
@media (max-width: 640px) { ... }
/* 平板 */
@media (min-width: 641px) and (max-width: 1024px) { ... }
/* 桌面 */
@media (min-width: 1025px) { ... }
最佳实践
- 移动优先：先写移动端样式
- 流式布局：使用 % 和 vw/vh
- 弹性图片：max-width: 100%
- 媒体查询：按需添加桌面样式
八、性能优化
图片
- 格式：WebP > PNG > JPG
- 尺寸：按需加载，不要过大
- 懒加载：
loading="lazy"
字体
- 子集化：只加载需要的字符
- 预加载：
<link rel="preload"> - 显示策略：
font-display: swap
CSS
- 压缩：生产环境压缩 CSS
- 关键 CSS：内联首屏 CSS
- 避免嵌套：减少选择器复杂度