# Lesson 17.7: 风格落地——跨平台设计的选择与实现

## 本课目标

- 理解移动端和网页端设计的 5 个本质差异
- 掌握 iOS Human Interface Guidelines 和 Material Design 的核心区别
- 学会用决策树为自己的产品选择风格
- 能把风格选择翻译成 AI 可执行的 prompt

> **前置知识**：你已经认识了 13 种风格（Lesson 17.5），理解了它们的历史脉络（Lesson 17.6）。本课是最后一层——从"知道"到"做到"：为你的产品做出选择，并在不同平台上实现。

## 核心内容

### 为什么需要区分移动端和网页端？

你可能觉得："设计就是设计，平台不重要。"

但移动端和网页端的差异不是"屏幕大小"的问题，而是**交互范式**的根本不同：

```
网页端：鼠标精确点击 + 键盘输入 + 宽屏多窗口
移动端：手指模糊触摸 + 手势滑动 + 窄屏全沉浸
```

这意味着**同一套设计不能直接移植**——你需要为平台重新设计交互逻辑。

### 5 个本质差异

| 维度 | 网页端（Desktop Web） | 移动端（Mobile） |
|------|----------------------|------------------|
| **输入方式** | 鼠标精确点击 + 键盘 | 手指触摸（最小 44pt/48dp 热区） |
| **导航** | 顶部导航栏、侧边栏、面包屑 | 底部 Tab Bar、汉堡菜单、手势滑动 |
| **屏幕空间** | 宽屏多栏布局 | 窄屏单栏为主 |
| **注意力** | 可以多窗口并行 | 全屏沉浸、任务单一 |
| **网络** | 相对稳定 | 弱网、断网场景必须考虑 |

**关键结论**：移动端不是"把网页缩小"，而是需要重新设计交互逻辑。

### 两大平台设计语言对比

移动端被两大平台垄断了设计话语权：

#### iOS Human Interface Guidelines（Apple）

**设计哲学**：内容即界面——让界面"消失"，让内容说话。

**核心特征**：
- 克制、留白、让内容优先
- 毛玻璃模糊效果（backdrop-filter）
- 系统字体：San Francisco
- 返回：左上角返回 / 右滑返回
- 导航：底部 Tab Bar（最多 5 个）
- 按钮：CTA 通常在右上角或 Tab Bar 中心

**典型风格**：极简主义 + 玻璃拟态

#### Material Design（Google）

**设计哲学**：纸层隐喻——数字世界也有"物理规则"。

**核心特征**：
- 层级、阴影、动效反馈
- 浮动操作按钮（FAB）—— Android 标志性元素
- Ripple 点击反馈
- 系统字体：Roboto → Google Sans
- 返回：系统返回键 / 左滑
- 导航：底部 Tab Bar 或顶部 Tabs

**典型风格**：Material Design + 卡片化布局

#### 对比速查表

| 组件 | iOS | Android |
|------|-----|---------|
| 图标形状 | 圆角方形 | 自由形状 |
| 返回手势 | 右滑返回 | 左滑返回 |
| 主操作按钮 | CTA（右上角/Tab Bar 中心） | FAB（右下角悬浮） |
| 点击反馈 | 无明显反馈 | Ripple 波纹效果 |
| 字体 | San Francisco | Roboto / Google Sans |
| 弹窗 | Action Sheet（底部弹出） | Bottom Sheet / Dialog |
| 暗色模式 | 2019 iOS 13 引入 | 2019 Android 10 引入 |

### 移动端独有的设计模式

以下模式在网页端很少见，但在移动端是核心交互：

#### 底部 Tab Bar
```
┌─────────────────────────┐
│                         │
│        内容区域          │
│                         │
├─────────────────────────┤
│  🏠    🔍    ➕    💬    👤  │
│ 首页  搜索  发布  消息  我的 │
└─────────────────────────┘
```
网页端几乎不用底部导航，移动端是标配。

#### 手势交互
- 左滑删除、右滑返回
- 下拉刷新
- 长按菜单
- 双指缩放

这些在网页端是"可选增强"，在移动端是"核心交互"。

#### 推送通知
移动端独有的设计维度——通知中心、锁屏通知、横幅通知，都是 UI 的一部分。

### 完整决策树：产品类型 × 平台 → 推荐风格

```
你的产品是什么类型？
│
├── SaaS / 工具产品
│   ├── 纯网页 → 极简主义 + Bento Grid
│   │   └── 需要展示功能模块？→ Bento Grid 为主
│   │   └── 数据密集型？→ Material Design + Dashboard
│   ├── 纯移动端 → 遵循平台规范（iOS HIG / Material Design）
│   │   └── iOS 优先？→ 极简 + 毛玻璃
│   │   └── Android 优先？→ Material You + 动态配色
│   └── 跨平台 → 选择一套设计语言，用平台组件适配
│       └── 推荐：Material Design 为基础 + CupertinoWidget 适配 iOS
│
├── 品牌官网 / 营销页
│   ├── 网页端 → 极简 + 大 Hero，或 Bento Grid
│   │   └── 先锋/艺术品牌？→ Brutalism 或实验性
│   │   └── 高端/科技品牌？→ 玻璃拟态 + 暗色主题
│   └── 移动端（H5/小程序）→ 响应式，但交互按移动端重设计
│
├── 创意 / 作品集
│   ├── 网页端 → 都可以，Brutalism 最有辨识度
│   └── 移动端 → 极简 + 大图，让作品说话
│
├── AI 产品
│   └── AI 原生界面（暗色、对话框、极简）
│       └── 移动端适配：底部输入框 + 流式输出
│
└── 面向大众 / 政府 / 教育
    └── Material Design 或极简（安全牌、高可访问性）
        └── 避免：Brutalism、Neumorphism（可访问性差）
```

### 风格 → AI Prompt 翻译模板

Lesson 17.4 教了你"哲学化表述 + 具体约束"的方法。这里扩展到更多风格：

#### 通用模板

```
你是一个[风格名]风格的[平台]设计师。

视觉原则：
- [原则 1：如"内容即界面，让界面消失"]
- [原则 2：如"留白有张力，不是空缺"]
- [原则 3：如"每种色彩都有使命，不用装饰色"]

平台约束：
- 平台：[iOS / Android / Web / 响应式]
- 最小触控热区：[44pt (iOS) / 48dp (Android)]
- 导航模式：[底部 Tab Bar / 顶部导航 / 侧边栏]

Token 约束：
- 间距：[紧凑/宽松/极宽松]
- 颜色：限制在 [N] 种以内
- 字体：[只用无衬线 / 可混搭]
- 圆角：[0px / 4-8px / 12px+]
- 阴影：[无 / 轻微 / 粗偏移]

输出：一个完整的静态 HTML 页面。
```

#### 风格特化示例

**Bento Grid + 极简主义（SaaS 产品页）**：
```
你是一个 Bento Grid + 极简主义风格的网页设计师。

视觉原则：
- 功能模块化——每个功能一个格子，不等大拼贴
- 留白是呼吸——格子之间有足够间距
- 克制用色——主色 + 强调色，不超过 3 种

约束：
- 布局：CSS Grid，不等大矩形卡片
- 圆角：12px
- 阴影：轻微（0 4px 12px rgba(0,0,0,0.08)）
- 颜色：白色背景 + 深灰文字 + 1 个品牌色
- 字体：纯无衬线

输出：一个完整的静态 HTML 页面。
```

**印象派风格（艺术家作品集）**：
```
你是一个印象派风格的网页设计师。

视觉原则：
- 捕捉光线和瞬间——柔和、梦幻、不追求精确
- 色彩并置——不混合，让观者眼中融合
- 可见笔触——保留质感和温度

约束：
- 背景：油画质感纹理 + 柔焦效果
- 按钮：柔化边缘（border-radius: 20px）
- 配色：高明度、中高饱和、避免纯黑
- 字体：有手写感或衬线优雅感
- 动效：悬停时颜色渐变过渡（模拟湿颜料流动）

输出：一个完整的静态 HTML 页面。
```

**Neo-Brutalism（开发者工具）**：
```
你是一个 Neo-Brutalism 风格的网页设计师。

视觉原则：
- 粗暴即诚实——不修饰，直给
- 高对比、强冲击——黑+黄、黑+红
- 现代感——粗糙但不低质

约束：
- 边框：3px 实线黑色
- 圆角：0px 或 4px
- 阴影：粗偏移（box-shadow: 4px 4px 0 #000）
- 颜色：黑+黄+白，不超过 3 种
- 字体：等宽字体为主

输出：一个完整的静态 HTML 页面。
```

## 常见问题

**Q: 我的产品同时有网页版和 App，应该统一风格吗？**

A: **视觉风格统一，交互模式按平台调整**。比如你的品牌色是蓝色、风格是极简主义，这在两端都保持一致。但导航方式、按钮位置、手势交互要遵循各自平台的规范。不要在 iOS 上用 Android 的返回方式，也不要在网页上强制底部 Tab Bar。

**Q: 响应式设计和原生 App 设计有什么区别？**

A: **响应式**是一套代码适配多端，本质是"网页的自适应"——布局会变，但交互逻辑还是网页的。**原生 App**是为特定平台设计，交互逻辑完全遵循平台规范——手势、动画、系统组件都是原生的。如果你的产品需要高质量的移动端体验，原生 App 永远优于响应式网页。

**Q: 我不会写 prompt，怎么办？**

A: 用上面的模板，填空就行。核心是三件事：说清楚风格名、说清楚平台、说清楚 Token 约束。AI 不需要你写得优美，它需要你写得精确。

**Q: 选错风格会怎样？**

A: 最常见的错误是**风格与品牌定位不匹配**——比如高端奢侈品牌用了 Neo-Brutalism，或者开发者工具用了印象派风格。其次是**风格与平台不匹配**——比如在 iOS App 上用了 Material Design 的 FAB 按钮。前者让用户困惑，后者让用户不适。

## 相关概念

- **风格识别**（Lesson 17.5）— 本课的前置：先认识风格
- **风格溯源**（Lesson 17.6）— 本课的前置：理解风格为什么存在
- **排版美学**（Lesson 17.4）— 本课的平行层：排版风格选择
- **AI 原型实验室**（Lesson 17.2）— 本课的 prompt 模板在这里直接可用
- **Trigger Map**（Lesson 18）— 风格选择最终要服务于用户心理
- **设计系统搭建**（Lesson 17.3）— 风格最终要落地到 Token 和组件

## 下一步

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

- 进入下一课：Lesson 18 - Trigger Map：用户心理→功能映射
- 回顾风格溯源：Lesson 17.6 - 从美术运动到像素的演化之路
- 回顾 AI 原型实验室：Lesson 17.2 - 用 prompt 生成原型
- 返回主菜单

---
*阶段 3 | Lesson 17.7/26 | 上一课: Lesson 17.6 - 风格溯源 | 下一课: Lesson 17.8 - 品牌资产与设计交付*