onboarding: 转场动画、名字步取消自动跳页、标题个性化招呼语、Skip/提醒步等文案与交互优化

Co-authored-by: Cursor <cursoragent@cursor.com>
2026-02-09 17:33:53 +08:00
parent aa4e1e9947
commit b4ec17fcac
11 changed files with 105 additions and 35 deletions
--- a/client/app/(onboarding)/onboarding.tsx
+++ b/client/app/(onboarding)/onboarding.tsx
@@ -213,6 +213,7 @@ export default function OnboardingScreen() {
      onSkip={onSkip}
      onBack={onBack}
      showBackButton={stepIndex > 0}
+      userName={name}
    >
      {currentStep.type === 'name' && (
        <NameInputStep
@@ -233,7 +234,7 @@ export default function OnboardingScreen() {

      {currentStep.type === 'reminder' && (
        <ReminderStep
-          value={reminderTimes}
+          value={Math.max(1, reminderTimes)}
          onChange={setReminderTimes}
          onFinish={onFinish}
          onSkip={() => {
--- a/client/components/onboarding/NameInputStep.tsx
+++ b/client/components/onboarding/NameInputStep.tsx
@@ -95,8 +95,7 @@ export function NameInputStep({ value, onChangeText, onNext }: NameInputStepProp
            blurOnSubmit={true}
            onSubmitEditing={() => {
              Keyboard.dismiss();
-              // 有输入时，“完成”直接进入下一步，避免真机卡在键盘上
-              if (value.trim().length > 0) onNext();
+              // 不再自動跳頁，僅收起鍵盤；前進需點擊底部 ➡️
            }}
          />
        </View>
--- a/client/components/onboarding/OnboardingLayout.tsx
+++ b/client/components/onboarding/OnboardingLayout.tsx
@@ -1,8 +1,11 @@
-import React from 'react';
-import { View, StyleSheet, SafeAreaView, TouchableOpacity, StatusBar, Text, Image, Platform } from 'react-native';
+import React, { useRef, useEffect } from 'react';
+import { View, StyleSheet, SafeAreaView, TouchableOpacity, StatusBar, Text, Image, Platform, Animated, Easing } from 'react-native';
 import { useTranslation } from 'react-i18next';
 import { OnboardingColors, OnboardingFont } from '@/constants/OnboardingTheme';

+const TRANSITION_OFFSET = 24;
+const TRANSITION_DURATION = 280;
+
 interface OnboardingLayoutProps {
  children: React.ReactNode;
  title?: string;
@@ -11,6 +14,8 @@ interface OnboardingLayoutProps {
  onSkip: () => void;
  onBack?: () => void;
  showBackButton?: boolean;
+  /** 用户名字，仅在名字步骤之后的第一个问题（currentStep === 1）且非空时显示招呼语 */
+  userName?: string;
 }

 export function OnboardingLayout({ 
@@ -20,9 +25,48 @@ export function OnboardingLayout({
  totalSteps,
  onSkip, 
  onBack,
-  showBackButton = false
+  showBackButton = false,
+  userName = '',
 }: OnboardingLayoutProps) {
  const { t } = useTranslation();
+  const showGreeting = currentStep === 1 && userName.trim().length > 0;
+  const displayName = userName.trim();
+  const prevStepRef = useRef(currentStep);
+  const isFirstRenderRef = useRef(true);
+  const translateX = useRef(new Animated.Value(0)).current;
+  const opacity = useRef(new Animated.Value(1)).current;
+
+  useEffect(() => {
+    if (isFirstRenderRef.current) {
+      isFirstRenderRef.current = false;
+      prevStepRef.current = currentStep;
+      return;
+    }
+    if (prevStepRef.current === currentStep) return;
+
+    const direction = currentStep > prevStepRef.current ? 'forward' : 'back';
+    prevStepRef.current = currentStep;
+
+    const startX = direction === 'forward' ? TRANSITION_OFFSET : -TRANSITION_OFFSET;
+    translateX.setValue(startX);
+    opacity.setValue(0.72);
+
+    Animated.parallel([
+      Animated.timing(translateX, {
+        toValue: 0,
+        duration: TRANSITION_DURATION,
+        useNativeDriver: true,
+        easing: Easing.out(Easing.cubic),
+      }),
+      Animated.timing(opacity, {
+        toValue: 1,
+        duration: TRANSITION_DURATION,
+        useNativeDriver: true,
+        easing: Easing.out(Easing.cubic),
+      }),
+    ]).start();
+  }, [currentStep, translateX, opacity]);
+
  return (
    <View style={styles.container}>
      <StatusBar barStyle="dark-content" />
@@ -49,16 +93,29 @@ export function OnboardingLayout({
          </TouchableOpacity>
        </View>

-        {/* Title & Progress Row */}
+        {/* Title & Progress Row（名字步骤后第一步且名字非空时显示招呼语 + 问题） */}
        <View style={styles.titleRow}>
+          <View style={styles.titleBlock}>
+            {showGreeting && (
+              <Text style={styles.greetingText}>{t('onboardingSurvey.greeting', { name: displayName })}</Text>
+            )}
            <Text style={styles.questionTitle}>{title}</Text>
+          </View>
          <Text style={styles.progressText}>({currentStep}/{totalSteps})</Text>
        </View>
        
-        {/* Content */}
-        <View style={styles.content}>
+        {/* Content：step 切换时滑动 + 淡入 */}
+        <Animated.View
+          style={[
+            styles.content,
+            {
+              opacity,
+              transform: [{ translateX }],
+            },
+          ]}
+        >
          {children}
-        </View>
+        </Animated.View>
      </SafeAreaView>
    </View>
  );
@@ -114,13 +171,22 @@ const styles = StyleSheet.create({
    alignItems: 'flex-end',
    paddingHorizontal: 20,
    marginTop: 20,
-    marginBottom: 20,
+    marginBottom: 8,
+  },
+  titleBlock: {
+    flex: 1,
+    justifyContent: 'flex-end',
+  },
+  greetingText: {
+    fontSize: 22,
+    color: OnboardingColors.questionTitle,
+    fontFamily: OnboardingFont.question,
+    marginBottom: 4,
  },
  questionTitle: {
    fontSize: 22,
    color: OnboardingColors.questionTitle,
    fontFamily: OnboardingFont.question,
-    flex: 1,
  },
  progressText: {
    fontSize: 18,
--- a/client/components/onboarding/ReminderStep.tsx
+++ b/client/components/onboarding/ReminderStep.tsx
@@ -19,8 +19,8 @@ export function ReminderStep({ value, onChange, onFinish }: ReminderStepProps) {
  const insets = useSafeAreaInsets();

  const handleReduce = () => {
-    // 允许 0～5；0 表示关闭每日提醒
-    if (value > 0) onChange(value - 1);
+    // 本页最小为 1；不接收提醒请使用右上角 Skip
+    if (value > 1) onChange(value - 1);
  };

  const handleAdd = () => {
@@ -36,7 +36,9 @@ export function ReminderStep({ value, onChange, onFinish }: ReminderStepProps) {

        <View style={styles.numberWrapper}>
          <Text style={styles.numberText}>{value}</Text>
-          <Text style={styles.unitText}>{t('dailyReminder.timesUnit')}</Text>
+          <Text style={styles.unitText}>
+            {value === 1 ? t('dailyReminder.timesUnitSingular') : t('dailyReminder.timesUnit')}
+          </Text>
        </View>

        <TouchableOpacity onPress={handleAdd} activeOpacity={0.7}>
--- a/client/components/onboarding/SelectionStep.tsx
+++ b/client/components/onboarding/SelectionStep.tsx
@@ -2,7 +2,6 @@ import React from 'react';
 import { View, StyleSheet, TouchableOpacity, ScrollView, Text } from 'react-native';
 import { useSafeAreaInsets } from 'react-native-safe-area-context';
 import { OnboardingColors, OnboardingFont } from '@/constants/OnboardingTheme';
-import SelectedIcon from '@/assets/images/icon/selected_icon.svg';
 import BtnNotClicked from '@/assets/images/icon/btn_Notclicked.svg';
 import BtnClicked from '@/assets/images/icon/btn_clicked.svg';

@@ -39,16 +38,11 @@ export function SelectionStep({ options, selectedIds, onToggle, onNext, onSkip }
          return (
            <TouchableOpacity
              key={option.id}
-              style={styles.optionCard}
+              style={[styles.optionCard, isSelected && styles.optionCardSelected]}
              onPress={() => onToggle(option.id)}
              activeOpacity={0.7}
            >
              <Text style={styles.optionText}>{option.label}</Text>
-              {isSelected && (
-                <View style={styles.iconWrapper}>
-                  <SelectedIcon width={20} height={20} />
-                </View>
-              )}
            </TouchableOpacity>
          );
        })}
@@ -67,7 +61,7 @@ export function SelectionStep({ options, selectedIds, onToggle, onNext, onSkip }
 const styles = StyleSheet.create({
  container: {
    flex: 1,
-    paddingTop: 20,
+    paddingTop: 8,
  },
  scroll: {
    flex: 1,
@@ -82,7 +76,7 @@ const styles = StyleSheet.create({
    borderRadius: 20,
    flexDirection: 'row',
    alignItems: 'center',
-    justifyContent: 'space-between',
+    justifyContent: 'center',
    paddingHorizontal: 24,
    marginBottom: 12,
    shadowColor: '#000',
@@ -91,15 +85,14 @@ const styles = StyleSheet.create({
    shadowRadius: 10,
    elevation: 2,
  },
+  optionCardSelected: {
+    backgroundColor: OnboardingColors.cardSelected,
+  },
  optionText: {
    fontSize: 18,
    color: OnboardingColors.textPrimary,
    fontWeight: '500',
    fontFamily: OnboardingFont.question,
-    flex: 1,
-  },
-  iconWrapper: {
-    marginLeft: 10,
  },
  footer: {
    position: 'absolute',
--- a/client/src/i18n/locales/all.json
+++ b/client/src/i18n/locales/all.json
@@ -25,6 +25,7 @@
      "q4Desc": "You can skip. We’ll stay with you along the way."
    },
    "onboardingSurvey": {
+      "greeting": "Hi {{name}},",
      "steps": {
        "name": { "title": "What should we call you?", "placeholder": "Mama" },
        "status": {
@@ -115,6 +116,7 @@
    "dailyReminder": {
      "title": "Daily Reminder",
      "timesUnit": "times",
+      "timesUnitSingular": "time",
      "pushLabel": "Push Reminder",
      "ok": "Ok",
      "minus": "Decrease",
@@ -183,7 +185,7 @@
      "progress": "{{current}}/{{total}}",
      "next": "下一步",
      "skip": "跳過",
-      "skipAll": "跳過整個引導",
+      "skipAll": "跳過",
      "q1Title": "你最近的感受更接近哪一種？",
      "q1Desc": "沒有對錯，你可以跳過，之後也能慢慢調整。",
      "q2Title": "你更希望獲得哪種支持？",
@@ -194,6 +196,7 @@
      "q4Desc": "你可以直接跳過，我們會在之後繼續陪你。"
    },
    "onboardingSurvey": {
+      "greeting": "{{name}}，你好",
      "steps": {
        "name": { "title": "我可以怎麼稱呼你？", "placeholder": "媽媽" },
        "status": {
@@ -284,6 +287,7 @@
    "dailyReminder": {
      "title": "每日提醒",
      "timesUnit": "次",
+      "timesUnitSingular": "次",
      "pushLabel": "推送提醒",
      "ok": "確定",
      "minus": "減少次數",
--- a/client/src/i18n/locales/en.json
+++ b/client/src/i18n/locales/en.json
@@ -11,7 +11,7 @@
    "progress": "{{current}}/{{total}}",
    "next": "Next",
    "skip": "Skip",
-    "skipAll": "Skip onboarding",
+    "skipAll": "Skip",
    "q1Title": "How are you feeling lately?",
    "q1Desc": "No right or wrong. You can skip and adjust later.",
    "q2Title": "What kind of support do you want?",
@@ -59,6 +59,7 @@
  "dailyReminder": {
    "title": "Daily Reminder",
    "timesUnit": "times",
+    "timesUnitSingular": "time",
    "pushLabel": "Push Reminder",
    "ok": "Ok",
    "minus": "Decrease",
--- a/client/src/i18n/locales/es.json
+++ b/client/src/i18n/locales/es.json
@@ -9,7 +9,7 @@
    "progress": "{{current}}/{{total}}",
    "next": "Siguiente",
    "skip": "Saltar",
-    "skipAll": "Saltar introducción",
+    "skipAll": "Saltar",
    "q1Title": "¿Cómo te sientes últimamente?",
    "q1Desc": "No hay respuestas correctas. Puedes saltar y ajustar después.",
    "q2Title": "¿Qué tipo de apoyo quieres?",
@@ -57,6 +57,7 @@
  "dailyReminder": {
    "title": "Recordatorio diario",
    "timesUnit": "veces",
+    "timesUnitSingular": "vez",
    "pushLabel": "Recordatorio Push",
    "ok": "Ok",
    "minus": "Disminuir",
--- a/client/src/i18n/locales/pt.json
+++ b/client/src/i18n/locales/pt.json
@@ -9,7 +9,7 @@
    "progress": "{{current}}/{{total}}",
    "next": "Próximo",
    "skip": "Pular",
-    "skipAll": "Pular introdução",
+    "skipAll": "Pular",
    "q1Title": "Como você tem se sentido ultimamente?",
    "q1Desc": "Não há certo ou errado. Você pode pular e ajustar depois.",
    "q2Title": "Que tipo de apoio você quer?",
@@ -57,6 +57,7 @@
  "dailyReminder": {
    "title": "Lembrete diário",
    "timesUnit": "vezes",
+    "timesUnitSingular": "vez",
    "pushLabel": "Lembrete Push",
    "ok": "Ok",
    "minus": "Diminuir",
--- a/client/src/i18n/locales/zh-CN.json
+++ b/client/src/i18n/locales/zh-CN.json
@@ -12,7 +12,7 @@
    "progress": "{{current}}/{{total}}",
    "next": "下一步",
    "skip": "跳过",
-    "skipAll": "跳过整个引导",
+    "skipAll": "跳过",
    "q1Title": "你最近的感受更接近哪一种？",
    "q1Desc": "没有对错，你可以跳过，之后也可以慢慢调整。",
    "q2Title": "你更希望获得哪种支持？",
@@ -60,6 +60,7 @@
  "dailyReminder": {
    "title": "每日提醒",
    "timesUnit": "次",
+    "timesUnitSingular": "次",
    "pushLabel": "推送提醒",
    "ok": "确定",
    "minus": "减少次数",
--- a/client/src/i18n/locales/zh-TW.json
+++ b/client/src/i18n/locales/zh-TW.json
@@ -9,7 +9,7 @@
    "progress": "{{current}}/{{total}}",
    "next": "下一步",
    "skip": "跳過",
-    "skipAll": "跳過整個引導",
+    "skipAll": "跳過",
    "q1Title": "你最近的感受更接近哪一種？",
    "q1Desc": "沒有對錯，你可以跳過，之後也能慢慢調整。",
    "q2Title": "你更希望獲得哪種支持？",
@@ -57,6 +57,7 @@
  "dailyReminder": {
    "title": "每日提醒",
    "timesUnit": "次",
+    "timesUnitSingular": "次",
    "pushLabel": "推送提醒",
    "ok": "確定",
    "minus": "減少次數",