新增文档说明

spec_kit/Onboarding_UI_Opt/spec.md

@@ -0,0 +1,68 @@
+# 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)
+
+- 已确认：字体使用默认，图标暂用占位，意图页为多选，背景色与渐变色已定。