69 lines
2.8 KiB
Markdown
69 lines
2.8 KiB
Markdown
# 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)
|
||
|
||
- 已确认：字体使用默认，图标暂用占位，意图页为多选，背景色与渐变色已定。
|