הטמעת רמזי הדרכה באפליקציה ניידת

הטמעת Coach Marks באפליקציה למובייל

כשמשתמשים פותחים את האפליקציה שלכם בפעם הראשונה, הם לעיתים קרובות הולכים לאיבוד: איפה ללחוץ, איך ליצור משימה, איפה למצוא הגדרות. בלי רמזים, שיעור ההמרה של האונבורדינג יורד ב-20–40%. Coach marks פותרים את זה: מצביעים קונטקסטואליים מופיעים ברגע הנכון ומסבירים כל אלמנט. תוך 1–3 ימים, אנו מיישמים מערכת רמזים ויזואלית שמגבירה את מעורבות המשתמשים.

בעיות שאנו פותרים

משתמשים לא מגיעים לתכונות מפתח: סטטיסטיקות מראות ש-60% מהמשתמשים החדשים לא חוזרים לאחר ההשקה הראשונה אם הממשק מבלבל. מדריכים מסורתיים דורשים שלבים רציפים, מה שמסיח את הדעת ומעצבן. Coach marks עובדים אחרת: הם מופיעים בקונטקסט, ומדגישים בדיוק את האלמנט שאיתו יש ליצור אינטראקציה. אנו מגדירים את לוגיקת התצוגה: לאחר פעולה ספציפית, לאחר ההשקה ה-N, או לאחר עדכון גרסה.

איך אנחנו עושים את זה

אנו משתמשים בסטACK הטבעי: Swift + SwiftUI ל-iOS, Kotlin + Jetpack Compose לאנדרואיד. להתחלה מהירה, אנו משתמשים בספריות מוכחות:

| Платформа | Библиотека | Особенности |
|-----------|------------|-------------|
| iOS | Instructions (ephread/Instructions) | CoachMarkController, кастомные bubble, accessibility |
| Android (View) | TapTargetView (KeepSafe) | Material-стиль, простота интеграции |
| Android (Compose) | Spotlight (TakuSemba) | Compose-first, гибкое позиционирование |

אם העיצוב דורש צורות הדגשה לא סטנדרטיות (למשל, בצורת אייקון אפליקציה), אנו כותבים יישום מותאם אישית. ב-iOS, אנו יוצרים שכבת UIView עם מיסוך באמצעות | Платформа | Библиотека | Особенности | |-----------|------------|-------------| | iOS | Instructions (ephread/Instructions) | CoachMarkController, кастомные bubble, accessibility | | Android (View) | TapTargetView (KeepSafe) | Material-стиль, простота интеграции | | Android (Compose) | Spotlight (TakuSemba) | Compose-first, гибкое позиционирование | וכלל מילוי evenOdd. ב-Compose, אנו משתמשים ב-CAShapeLayer עם Canvas — חשוב להגדיר BlendMode.Clear.

יישום ב-iOS

הגישה האמינה ביותר היא שכבת compositingStrategy = Offscreen מעל UIView עם מיסוך באמצעות window. אנו יוצרים סינגלטון CAShapeLayer או מטמיעים אותו בתת-מחלקה של CoachMarkManager.

קבלת הפריים של האלמנט המטרה:

let globalFrame = targetView.convert(targetView.bounds, to: UIApplication.shared.keyWindow) 

UIViewController מופקד בגרסאות iOS מאוחרות יותר: יש להשתמש נכון ב-let globalFrame = targetView.convert(targetView.bounds, to: UIApplication.shared.keyWindow) כ-keyWindow, ולאחר מכן UIApplication.shared.connectedScenes.first(where: { $0.activationState == .foregroundActive }).

מסכת שכבת-על: UIWindowScene עם .windows.first(where: { $0.isKeyWindow }). הנפשת הופעה באמצעות UIBezierPath(rect: overlayView.bounds).appending(UIBezierPath(ovalIn: globalFrame.insetBy(dx: -8, dy: -8))) על fillRule = .evenOdd.

ספריות. CABasicAnimation (ephread/Instructions) היא ספריית iOS בוגרת עם opacity, תצוגות בועה מותאמות אישית, ונגישות. Instructions לטיפים פשוטים ללא שכבת-על. אם העיצוב סטנדרטי, ספרייה חוסכת יום. אם שכבת-על מותאמת אישית עם צורות הדגשה לא סטנדרטיות, אנו כותבים בעצמנו.

ב-SwiftUI — CoachMarkController + EasyTipView מאפשרים למקם שכבת-על יחסית לכל תצוגה מבלי לדעת את הקואורדינטות מראש. זו הדרך הנכונה ב-SwiftUI אך דורשת התעמקות במערכת ההעדפות. חלופה: anchorPreference(key:value:) + overlayPreferenceValue לקבלת קואורדינטות גלובליות.

אנדרואיד ו-Compose

באנדרואיד — ספריית GeometryReader (KeepSafe) ל-Coach marks בסגנון Material. עובדת עם Views רגילים. ל-Compose — .coordinateSpace(name:) (TakuSemba) או יישום מותאם אישית באמצעות TapTargetView + Spotlight.

יישום מותאם אישית ב-Compose:

@Composable fun CoachMarkOverlay(targetRect: Rect, text: String) {
    Canvas(modifier = Modifier.fillMaxSize()) {
        drawRect(color = Color.Black.copy(alpha = 0.7f))
        drawCircle(
            color = Color.Transparent,
            radius = targetRect.size.minDimension / 2 + 12f,
            center = targetRect.center,
            blendMode = BlendMode.Clear
        )
    }
    // Tooltip позиционируем через offset от targetRect
}

Popup דורש Canvas על הקונטיינר האב — ללא זה, Clear לא עובד כראוי.

רצף ותזמון

אם יש מספר Coach marks, אנו מציגים אותם אחד אחרי השני. תור @Composable fun CoachMarkOverlay(targetRect: Rect, text: String) { Canvas(modifier = Modifier.fillMaxSize()) { drawRect(color = Color.Black.copy(alpha = 0.7f)) drawCircle( color = Color.Transparent, radius = targetRect.size.minDimension / 2 + 12f, center = targetRect.center, blendMode = BlendMode.Clear ) } // Tooltip позиционируем через offset от targetRect } ב-BlendMode.Clear. לאחר כל סגירה, עיכוב קטן של 300ms לפני הבא (המשתמש צריך שנייה לעבד).

תנאי תצוגה: לאחר פעולת משתמש ספציפית, לאחר ההשקה ה-N, לאחר עדכון לגרסה X. לוגיקה ב-graphicsLayer { compositingStrategy = CompositingStrategy.Offscreen } — אובייקט נפרד עם שמירה ב-[CoachMarkConfig]. אין תנאים בקונטרולרים.

נגישות

ה-Coach mark חייב להיות גלוי ל-VoiceOver/TalkBack. תצוגת שכבת-העל — CoachMarkManager ב-iOS (כל האלמנטים מתחת לשכבת-העל נעלמים מעץ הנגישות). טקסט הרמז — CoachMarkScheduler על תצוגת הבועה. כפתור סגירה — UserDefaults. עם VoiceOver, אנו מגדירים אוטומטית פוקוס על הבועה באמצעות accessibilityViewIsModal = true.

הערכות זמן: 1–3 ימים. Coach mark אחד עם הדגשה פשוטה — יום אחד. מערכת עם תור, קונפיגורציית JSON, צורות הדגשה מותאמות אישית, ונגישות מלאה — 3 ימים.

מה כלול

• ארכיטקטורה: אנו מתכננים מודול CoachMarkManager עם תור ומתזמן.
• יישום ב-iOS (Swift 5.9+, SwiftUI/UIKit) ובאנדרואיד (Kotlin, Jetpack Compose).
• תמיכת נגישות: VoiceOver, TalkBack, פוקוס על הבועה.
• תיעוד: תיאור לוגיקת ההפעלה, JSON קונפיגורציה.
• תמיכה טכנית במהלך האינטגרציה ולאחר השחרור.

אנו מבטיחים איכות קוד ועמידה בהנחיות App Review. הניסיון שלנו: 15+ פרויקטי אונבורדינג ל-iOS ואנדרואיד.

איך Coach Marks משפרים את המרת האונבורדינג

מחקרים מראים עלייה של 30–50% בהמרה בשימוש ברמזים קונטקסטואליים. Coach marks מקצרים את הזמן לפעולה ראשונה ב-40% ומפחיתים פניות לתמיכה. בפרויקט אחד, הטמעת Coach marks הגדילה את השימור ב-25% בשבוע הראשון.

למה לבחור בנו

אנחנו לא רק מטמיעים ספרייה — אנו מנתחים את מסע המשתמש ומתכננים את לוגיקת ההפעלה. המערכת לא תציג רמזים למשתמשים שכבר מבינים. אנו מגדירים שמירה ב-UserDefaults, תור עם עיכובים, וצורות הדגשה מותאמות אישית. טיפול בנגישות הוא חלק חובה בעבודה.

צרו קשר להערכת פרויקט. קבלו ייעוץ על הטמעת Coach marks ולמדו איך לשפר את ההמרה של האפליקציה שלכם.