# Lesson 17.5: 风格识别——13 种网页设计风格速查

## 本课目标

- 掌握 13 种主流网页设计风格的视觉特征和一句话定义
- 学会用 4 步法在 30 秒内判断任何网站的设计风格
- 建立"风格光谱"心智模型——理解风格之间的关系而非孤立记忆
- 能在写 PRD、做竞品分析、和设计师沟通时准确描述风格

> **前置知识**：你已经了解了 UI 设计词典（Lesson 17.1）中的 108 个界面模式。本课往上走一层——不教你"这个叫什么组件"，教你"这个属于什么风格"。

## 核心内容

### 为什么产品主理人需要懂风格识别？

```
❌ "竞品的网站看起来挺好看的，我们也想要那种感觉"
✅ "竞品用的是 Bento Grid 布局 + 极简主义风格，适合展示功能模块"

❌ "设计师给的方案太丑了，能不能改好看点？"
✅ "当前方案是 Neo-Brutalism 风格，和我们高端品牌的定位不匹配，建议走 Editorial Minimalism"
```

**三个场景你一定会用到**：

1. **竞品分析**——看到竞品网站就能判断它的设计策略
2. **写 PRD**——用风格术语描述视觉需求，而不是"好看一点"
3. **评审设计稿**——有依据地判断设计方案是否匹配品牌定位

### 13 种风格速查卡

按时间线排列，每种风格标注：一句话定义、3 个视觉特征、代表作品、识别关键词。

---

#### 1. 原始网页 Raw HTML（1991-96）

**一句话**：不是"没设计"，是"没法设计"。

**视觉特征**：
- 灰色背景、Times New Roman、蓝色链接
- 纯文本流式排列，图片是奢侈品
- `<hr>` 水平线分隔内容

**代表**：CERN 第一个网站、早期 Yahoo

**识别关键词**：灰色页面、纯文本、蓝色链接——但它不是故意的，是技术限制

---

#### 2. Web 2.0（2004-10）

**一句话**：光泽即正义，渐变即高级。

**视觉特征**：
- **光泽按钮**——按钮顶部有白色高光渐变，最标志性的元素
- 反射效果——Logo/图标下方有倒影
- 高饱和色彩（亮橙、天蓝、草绿）

**代表**：早期 Twitter、Digg、Delicious、早期 Dropbox

**识别关键词**：看到光泽按钮 + 反射效果 = 100% Web 2.0

---

#### 3. 拟物设计 Skeuomorphism（2007-12）

**一句话**：屏幕看起来像真实世界的物品。

**视觉特征**：
- 仿真材质：皮革缝线、木纹桌面、金属旋钮
- 图标极度写实（计算器有真实按钮高光）
- 装饰性大于功能性

**代表**：iOS 1-6、早期 Instagram（相机图标）

**识别关键词**：皮革、木纹、金属——"看起来像真的"

---

#### 4. 扁平设计 Flat Design（2012-17）

**一句话**：一切装饰都是原罪。

**视觉特征**：
- 零阴影、零渐变、零纹理
- 纯色块、极简线条图标
- 大量留白、无衬线字体主导

**代表**：Windows 8/10、iOS 7+

**识别关键词**：极度干净、纯色块、"什么都是平的"

---

#### 5. Material Design（2014-至今）

**一句话**：数字世界的纸张，有层级有阴影。

**视觉特征**：
- 纸层隐喻——元素像纸片叠放，阴影表示层级
- 浮动操作按钮（FAB）——圆形、彩色、悬浮
- Ripple 点击反馈效果

**代表**：Google 全家桶、Android 应用

**识别关键词**：纸层感、FAB 按钮、卡片、阴影有"意义"

---

#### 6. 极简主义 Minimalism（2015-至今）

**一句话**：大图、长页、干净到没个性。

**视觉特征**：
- Hero Image 大图 + 叠加标题 + CTA
- 单栏长滚动页面
- 大量留白、排版驱动

**代表**：Stripe、Linear、几乎所有现代 SaaS

**识别关键词**：大图开头、单栏长页、"所有 SaaS 长得一样"

---

#### 7. 新拟态 Neumorphism（2019-21）

**一句话**：元素从同色背景中"挤"出来。

**视觉特征**：
- 柔和双阴影（一亮一暗）
- 整体色调统一（浅灰/米色）
- 像"面团"或"软泥"质感

**代表**：概念设计为主，实际产品很少采用

**识别关键词**：同色凸起感、"面团质感"、灰蒙蒙——但可访问性差，已衰落

---

#### 8. 玻璃拟态 Glassmorphism（2020-22）

**一句话**：毛玻璃半透明，看得透但看不清。

**视觉特征**：
- 背景模糊 + 前景透明
- 彩色渐变背景烘托
- 微妙的 1px 边框

**代表**：Apple 系统 UI、macOS Big Sur、Apple Vision Pro

**识别关键词**：毛玻璃、半透明、背景模糊

---

#### 9. 野兽派 Brutalism（2014-至今）

**一句话**：看起来"没设计过"——但它是故意的。

**视觉特征**：
- 裸露的系统字体、浏览器默认样式
- 故意不对齐、打破网格
- 高对比度、黑白或荧光色

**代表**：Bloomberg（旧版）、Balenciaga、Hacker News、Craigslist

**识别关键词**：粗暴直接、反精致——和原始网页的区别是"故意的"

---

#### 10. Bento Grid（2022-至今）

**一句话**：便当盒格子，不等大卡片拼贴。

**视觉特征**：
- 不等大矩形卡片拼贴
- 圆角、微妙阴影、精致渐变
- 每格独立内容模块

**代表**：Apple.com 产品页、Linear、Vercel、Raycast

**识别关键词**：便当盒格子、不等大卡片、"Apple 风"

---

#### 11. Claymorphism（2022-至今）

**一句话**：3D 粘土，膨胀卡通。

**视觉特征**：
- 3D 粘土质感元素
- 圆润、膨胀、卡通感
- 柔和阴影 + 内阴影营造立体

**代表**：概念设计、儿童/创意类产品

**识别关键词**：3D 粘土、膨胀感、卡通圆润

---

#### 12. 新丑风 Neubrutalism（2022-至今）

**一句话**：粗糙 + 现代，丑得有态度。

**视觉特征**：
- 粗黑边框、高对比色块（黑+黄、黑+红）
- 无圆角或极小圆角
- 阴影偏移明显（`box-shadow: 4px 4px 0`）
- 保留 Brutalism 的粗犷 + 现代动画和排版

**代表**：Figma 早期官网、Gumroad

**识别关键词**：粗边框、偏移阴影、撞色——比 Brutalism 更"精致地丑"

---

#### 13. AI 原生界面（2024-至今）

**一句话**：界面消失，对话为王。

**视觉特征**：
- 对话框为核心界面
- 流式文本输出、打字机效果
- 暗色主题为主
- 极简——把空间让给内容

**代表**：ChatGPT、Claude.ai、Perplexity

**识别关键词**：对话框、流式输出、"界面几乎不存在"

---

### 4 步识别法

看到一个网站，按顺序判断：

```
第 1 步：看"装饰程度"
├── 几乎无装饰、裸露结构 → Brutalism 或原始网页
│   └── 故意的？→ Brutalism；技术限制？→ 原始网页
├── 精致但克制 → 扁平 / Material / 极简
└── 丰富质感 → 拟物 / 玻璃拟态 / Claymorphism

第 2 步：看"布局结构"
├── 不等大格子拼贴 → Bento Grid
├── 单栏长滚动 → 现代极简 / SaaS 标准
├── 多栏报刊式 → Editorial / 杂志风
└── 无明显网格 → Brutalism / 实验性

第 3 步：看"光影与材质"
├── 毛玻璃半透明 → Glassmorphism
├── 同色凸起双阴影 → Neumorphism
├── 3D 粘土膨胀 → Claymorphism
├── 纸层叠放阴影 → Material Design
├── 光泽按钮 + 反射 → Web 2.0
├── 仿真皮革/木纹 → Skeuomorphism
└── 零阴影纯色块 → Flat Design

第 4 步：看"交互方式"
├── 对话框 + 流式输出 → AI 原生界面
├── 全屏动画沉浸 → Flash 遗风 / WebGL
└── 标准点击导航 → 常规网页
```

### 风格光谱图

风格不是孤立存在的，它们在一条光谱上：

```
秩序/克制                                          混乱/张力
←─────────────────────────────────────────────────────────→

极简主义    Bento Grid    Material    扁平设计    拟物设计
    │           │           │           │           │
    └───────────┴───────────┴───────────┴───────────┘
                    精致、有规则、商业主流

                                    Neo-Brutalism    Brutalism
                                        │               │
                                        └───────────────┘
                                        粗糙、反规则、先锋实验
```

**光谱的两端**：
- 左端（秩序）：极简、Bento Grid——追求清晰、效率、可预测
- 右端（混乱）：Brutalism、Neo-Brutalism——追求态度、反叛、不可预测
- 中间：Material、扁平、拟物——平衡美学与功能

## 常见问题

**Q: 一个网站只能属于一种风格吗？**

A: 不一定。很多网站是混合风格——比如 Apple 产品页同时使用 Bento Grid 布局 + 极简主义美学 + 玻璃拟态效果。识别时可以组合描述："Bento Grid + 极简主义"。

**Q: Brutalism 和原始网页有什么区别？**

A: 视觉上可能很像，但**意图完全不同**。原始网页是技术限制下的无奈；Brutalism 是刻意的设计选择——"我知道规则，但我选择打破它"。就像一个人穿破洞牛仔裤和一个人裤子真的破了，看起来一样但含义不同。

**Q: 哪种风格最适合 SaaS 产品？**

A: 目前主流选择是**极简主义 + Bento Grid**。原因：信息层级清晰、模块化好、响应式友好、开发成本低。但这不是唯一选择——如果你的目标用户是开发者或年轻群体，Neo-Brutalism 反而更有辨识度。

**Q: 风格会"过时"吗？**

A: 会，但不是消失，而是从"主流"变成"经典"或"复古"。Web 2.0 的光泽按钮现在看很过时，但如果故意用在复古主题设计中，反而成了风格。关键不是追流行，而是**风格是否匹配你的品牌定位和用户期望**。

## 相关概念

- **UI 设计词典**（Lesson 17.1）— 本课的上一层：模式叫什么
- **排版美学**（Lesson 17.4）— 本课的平行层：排版风格选择
- **风格溯源**（Lesson 17.6）— 本课的下一层：这些风格从哪来
- **风格落地**（Lesson 17.7）— 本课的应用层：怎么选、怎么做

## 下一步

请调用 `AskUserQuestion` 展示以下选项，让学习者点击选择；从每条中提炼 1-5 个词作为 label，其余写入 description，不要要求输入数字：

- 进入下一课：Lesson 17.6 - 风格溯源：从美术运动到像素的演化之路
- 回顾 UI 设计词典：Lesson 17.1 - 108 个界面模式速查
- 返回主菜单

---
*阶段 3 | Lesson 17.5/26 | 上一课: Lesson 17.4 - 排版美学 | 下一课: Lesson 17.6 - 风格溯源*