1. 排版 (Typography)
原则: 字体选择是设计的灵魂。
Do:
- ✅ 选择独特且有个性的字体
- ✅ 标题使用引人注目的字体，正文使用易读字体
- ✅ 尝试意想不到的字体配对
- ✅ 使用字体变体（font-weight, font-style）创造层次
- ✅ 精确控制字间距（letter-spacing）和行高（line-height）
Don't:
- ❌ 使用通用字体：Arial, Helvetica, Inter, Roboto, 系统字体
- ❌ 所有文本使用相同的字体和大小
- ❌ 忽略字体加载性能（使用 font-display: swap）
推荐字体来源:
- Google Fonts (选择小众、独特的字体)
- 自定义字体（如果项目允许）
示例字体组合:
```css
/ 极简编辑风格 /
--font-heading: 'Playfair Display', serif;
--font-body: 'Source Sans Pro', sans-serif;
/ 现代科技风格 /
--font-heading: 'Space Mono', monospace;
--font-body: 'DM Sans', sans-serif;
/ 优雅奢华风格 /
--font-heading: 'Cormorant Garamond', serif;
--font-body: 'Lato', sans-serif;
```
2. 颜色与主题 (Color & Theme)
原则: 颜色定义情绪和品牌。
Do:
- ✅ 使用 CSS 变量保持一致性
- ✅ 主色调 + 鲜明点缀色的组合
- ✅ 考虑色彩心理学（蓝色=信任，红色=紧迫，绿色=成功）
- ✅ 使用渐变营造深度（但要有品味）
- ✅ 保持色彩对比度（WCAG AA 标准：至少 4.5:1）
Don't:
- ❌ 俗套配色：白色背景 + 紫色渐变
- ❌ 过多颜色（3-5 个主色已足够）
- ❌ 忽略可访问性
示例主题:
```css
:root {
/ 极简黑白 /
--color-primary: #000000;
--color-secondary: #ffffff;
--color-accent: #ff3366;
/ 复古未来 /
--color-primary: #1a1a2e;
--color-secondary: #16213e;
--color-accent: #00fff5;
--color-highlight: #ff006e;
/ 自然有机 /
--color-primary: #2d6a4f;
--color-secondary: #52b788;
--color-accent: #ffc857;
}
```
3. 动效 (Animation & Motion)
原则: 动画应该增强体验，而不是分散注意力。
Do:
- ✅ 优先使用 CSS 动画（性能更好）
- ✅ 设计页面加载动画（首次印象）
- ✅ 使用
animation-delay 实现元素逐个显示 - ✅ 悬停状态添加微妙过渡
- ✅ 滚动触发动画（Intersection Observer）
- ✅ 对于 React，使用 Framer Motion 或 React Spring
Don't:
- ❌ 过度使用动画（每个元素都在动）
- ❌ 动画持续时间过长（> 500ms 会让人不耐烦）
- ❌ 忽略
prefers-reduced-motion 媒体查询
示例动画:
```css
/ 页面加载 - 元素逐个淡入 /
.fade-in-up {
animation: fadeInUp 0.6s ease-out forwards;
opacity: 0;
}
.fade-in-up:nth-child(1) { animation-delay: 0.1s; }
.fade-in-up:nth-child(2) { animation-delay: 0.2s; }
.fade-in-up:nth-child(3) { animation-delay: 0.3s; }
@keyframes fadeInUp {
from {
opacity: 0;
transform: translateY(30px);
}
to {
opacity: 1;
transform: translateY(0);
}
}
/ 悬停效果 /
.card {
transition: transform 0.3s ease, box-shadow 0.3s ease;
}
.card:hover {
transform: translateY(-8px);
box-shadow: 0 20px 40px rgba(0,0,0,0.15);
}
```
4. 空间构成 (Spatial Composition)
原则: 布局应该引导视线，创造视觉节奏。
Do:
- ✅ 尝试不对称布局
- ✅ 使用重叠元素创造深度
- ✅ 对角线流程引导视线
- ✅ 打破网格的元素（但有意图）
- ✅ 宽敞的留白或精心控制的密度
- ✅ 使用 Grid 和 Flexbox 创造复杂布局
Don't:
- ❌ 所有元素居中对齐
- ❌ 均匀分布的网格（无聊）
- ❌ 忽略响应式设计
示例布局技巧:
```css
/ 不对称网格 /
.grid-asymmetric {
display: grid;
grid-template-columns: 2fr 1fr;
gap: 40px;
}
/ 重叠效果 /
.overlap-container {
position: relative;
}
.overlap-item {
position: absolute;
z-index: 2;
transform: translate(-20%, -20%);
}
/ 对角线流程 /
.diagonal-section {
transform: skewY(-3deg);
padding: 100px 0;
}
.diagonal-section > * {
transform: skewY(3deg);
}
```
5. 背景和视觉细节 (Background & Visual Details)
原则: 背景营造氛围和深度。
Do:
- ✅ 渐变网格
- ✅ 噪点纹理
- ✅ 几何图案
- ✅ 分层透明度
- ✅ 戏剧性阴影
- ✅ 装饰性边框
- ✅ 自定义光标（如果适合风格）
- ✅ 颗粒叠加效果
Don't:
- ❌ 纯色背景（除非极简风格）
- ❌ 低质量或不相关的库存图片
- ❌ 过度使用阴影（box-shadow 污染）
示例背景效果:
```css
/ 渐变网格背景 /
.gradient-grid {
background:
linear-gradient(90deg, rgba(255,255,255,0.05) 1px, transparent 1px),
linear-gradient(rgba(255,255,255,0.05) 1px, transparent 1px),
linear-gradient(135deg, #667eea 0%, #764ba2 100%);
background-size: 50px 50px, 50px 50px, 100% 100%;
}
/ 噪点纹理 /
.noise-texture {
position: relative;
}
.noise-texture::before {
content: '';
position: absolute;
inset: 0;
background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noise'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' /%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noise)' opacity='0.05'/%3E%3C/svg%3E");
pointer-events: none;
}
/ 玻璃态效果 /
.glass-card {
background: rgba(255, 255, 255, 0.1);
backdrop-filter: blur(10px);
border: 1px solid rgba(255, 255, 255, 0.2);
box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1);
}
```
|