# Onboarding UI Optimization (高层规范)

## 1. 背景与目标

本需求旨在根据最新的设计稿（Visual References），对现有的 Onboarding 流程界面进行视觉升级与体验优化。目标是打造一个温暖、极简且高质感的用户引导流程。

### 核心目标
- **视觉升级**：实现设计稿中的配色、排版与组件样式（暖色调、衬线字体风格）。
- **组件复用**：提取通用的布局容器、按钮与输入组件。
- **交互流畅**：确保输入、选择与页面切换的流畅体验。

## 2. 视觉设计规范 (Visual Specifications)

基于提供的设计稿与确认信息，定义以下视觉基调：

### 2.1 整体风格
- **背景色**：`#FFF4EA` (Warm Beige)。
- **字体**：
  - 使用系统默认衬线字体 (System Serif) 作为主要字体。
  - 预留字体配置接口，方便后续替换自定义字体文件。
  - 颜色主要为深棕色 (例如 `#4A3B32`)。
- **按钮**：
  - **下一步按钮**：
    - 底部居中，圆形。
    - **背景渐变**：`#F69F7B` (起) → `#F99CC0` (止)。
    - **图标**：白色箭头 SVG (需生成)。
  - **Skip 按钮**：右上角，纯文字 "Skip ->"，衬线体。

### 2.2 页面布局
- **Header**：包含状态栏占位与 "Skip" 按钮。
- **Body**：垂直居中分布主要内容（问题 + 交互区域）。
- **Footer**：底部居中放置圆形下一步按钮。

## 3. 页面详细需求

### 3.1 称呼页 (Name Input)
- **标题**：“我可以怎么称呼你？” (Serif)
- **交互区域**：
  - 白色圆角矩形容器。
  - 输入框居中，占位符或默认值显示 "Hao"。
  - 光标样式需定制（粉色竖线）。
- **逻辑**：
  - 输入非空时，键盘回车或点击底部按钮进入下一页。
  - 支持跳过。

### 3.2 意图选择页 (Intent Selection)
- **标题**：“你希望得到什么帮助？” (Serif)
- **交互区域**：
  - 2x2 网格布局。
  - **选项卡片**：
    - 白色圆角矩形背景。
    - 内容：左侧 Icon (占位) + 右侧/居中 文字。
    - 示例选项：❤️ 爱情, ⛅ 生活, 🌴 旅游, 💼 职场
  - **选中状态**：需补充选中态设计（如边框高亮或背景微变）。
- **逻辑**：
  - **多选**。
  - 选择后点击底部按钮进入下一页。

## 4. 技术实现建议

- **布局容器**：创建一个通用的 `OnboardingLayout` 组件，处理背景、SafeArea、Skip 按钮与底部按钮。
- **字体**：封装 `SerifText` 组件，目前映射到系统 Serif，后续可一键替换。
- **图标**：使用 `expo-vector-icons` 或简单 View 占位，箭头图标使用内联 SVG。
- **渐变**：使用 `expo-linear-gradient` 实现按钮背景。

## 5. 待确认事项 (Open Questions)

- 已确认：字体使用默认，图标暂用占位，意图页为多选，背景色与渐变色已定。