mindfulness/spec_kit/Onboarding_UI_Opt/spec.md

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)

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