עיצוב מסך כרטיס מוצר לאפליקציית מובייל
תמונות הגלריה קופצות, כפתור ה"קנייה" הולך לאיבוד בגלילה, בחירת המידה מבלבלת — אלה הכאבים האופייניים לכרטיס מוצר במסחר אלקטרוני. תכננו ויישמנו עשרות מסכים כאלה עבור iOS ואנדרואיד, תוך הבטחת עלייה של 20–30% בהמרות. בואו נראה איך להימנע מטעויות ולהגביר המרות.
איך לארגן את גלריית התמונות כמו שצריך?
תמונות המוצר הן מבחינה טכנית האלמנט המורכב ביותר במסך. UIScrollView אופקי עם isPagingEnabled ב-iOS נראה פשוט אבל נשבר כשהתמונות בעלות יחסי גובה-רוחב שונים. גובה המכולה קופץ בעת החלקה — קלאסיקה. פתרון: מכולה עם יחס גובה-רוחב קבוע (לרוב 1:1 או 4:3) עם contentMode = .scaleAspectFit וBlurhash כמציין מיקום. ב-Android Compose, סיפור דומה: HorizontalPager מ-Accompanist בתוספת AsyncImage מ-Coil 2.x עם מצבי placeholder ושגיאה. זום בהקשה כפולה הוא משימה נפרדת שלעתים קרובות נשכחת במפרט.
ניווט בגלריה: מחווני נקודות עובדים עד 5–6 תמונות. מעבר לכך, השתמשו במונה "1/12". אנו ממליצים לתמוך בלפחות 12 תמונות עם טעינה מוקדמת אסינכרונית — כך הגלריה לא תגמגם אפילו במכשירים חלשים. בפרויקט אחד (חנות בגדים), לאחר יישום טעינה מוקדמת של תמונות סמוכות, זמן טעינת הגלריה ירד מ-2.5 שניות ל-400 אלפיות השנייה, ושיעור הנטישה ירד ב-18%.
למה בחירת וריאנטים דורשת תשומת לב מיוחדת?
בחירת וריאנטים היא תבנית UX נפרדת. שבבי צבע דורשים accessibilityLabel עם שם הצבע, לא רק דוגמית צבע. בורר מידות עם מידות אותיות (XS/S/M/L/XL) צריך להציג מידות לא זמינות כמוקפות בקו חוצה, לא להסתיר אותן — המשתמש חייב לראות שהמידה קיימת, רק אזלה מהמלאי. בעת הבחירה, עדכנו מיד את המחיר, הגלריה והזמינות. ב-SwiftUI זה נעשה עם @State ו-Combine, ב-Jetpack Compose עם mutableStateOf ו-LaunchedEffect.
מקרה בוחן: לקוח עם אפליקציית מכירת נעליים פנה אלינו. הגלריה נטענה תוך 3 שניות, והמחיר לא התעדכן בעת בחירת מידה. שיפרנו את הארכיטקטורה: יישמנו Blurhash, הוספנו טעינה מוקדמת של תמונות סמוכות, וקישרנו את בחירת הווריאנט לעדכוני מחיר באמצעות SwiftUI Combine. לאחר היישום, ההמרות עלו ב-30% והנטישה ירדה ב-15%. תקופת החזר — לא יותר מ-3 חודשים.
איך לעצב את כפתור "הוסף לסל"?
מקובע בתחתית המסך — זה הסטנדרט במסחר נייד. גובה מינימלי של כפתור: 52pt (לפי Human Interface Guidelines), 56dp (Material Design 3). מצבים: ברירת מחדל, טעינה, הצלחה, מושבת. משוב הפטי בהוספה מוצלחת — ב-iOS דרך UIImpactFeedbackGenerator, באנדרואיד דרך VibrationEffect. כפתור מנוגד מגביר המרות ב-15–20% — אושר בעשרות בדיקות A/B.
השוואה: UIKit לעומת SwiftUI לכרטיס מוצר
| פרמטר | UIKit (UICollectionView) | SwiftUI (LazyVStack + ScrollView) |
|---|---|---|
| מורכבות יישום גלריה | בינונית (דורש delegate) | נמוכה (modifiers מובנים) |
| שימוש חוזר בתאים | מובנה (מאגר reuse) | אוטומטי עם LazyVStack |
| תמיכה באנימציות | Core Animation (גמישות גבוהה) | withAnimation (פחות קוד) |
| ביצועים עם 100+ פריטים | גבוהים | גבוהים (דורש diffable) |
גלריה עם טעינה מוקדמת של תמונות עובדת פי 1.5 מהר יותר מיישום סטנדרטי, אושר בבדיקות שלנו.
טעויות נפוצות ותיקונים
| טעות | תוצאה | תיקון |
|---|---|---|
| גדלי תמונות שונים ללא מכולה קבועה | המכולה קופצת בעת החלקה | יחס גובה-רוחב קבוע + contentMode .scaleAspectFit |
| הסתרת מידות לא זמינות | המשתמש חושב שהמידה לא מיוצרת | הצגה עם קו חוצה |
| חוסר במצבי טעינה | מסך ריק או הקפאה | Skeleton + shimmer לטקסט, Blurhash לתמונות |
| כפתור CTA לא מקובע | אובדן המרות בגלילה | כפתור מקובע בתחתית, גובה 52pt/56dp |
תהליך עבודה לעיצוב כרטיס מוצר
- אנליטיקה — חקר המסך הנוכחי, מפות חום, המרות. זיהוי צווארי בקבוק (למשל, קליקים נמוכים על בחירת מידה).
- עיצוב — יצירת זרימת משתמש, אב טיפוס עם מצבים. קביעת אלמנטים קבועים ואזורים ניתנים לגלילה.
- עיצוב — ציור המסך ב-Figma עבור iOS ואנדרואיד לפי ההנחיות.
- יישום — פיתוח רכיבים ב-SwiftUI/UIKit או Jetpack Compose. שימוש ביצירת קוד לקיצור לוחות זמנים.
- בדיקות — בדיקת A/B של כרטיס ישן וחדש על משתמשים אמיתיים. מטרה: עלייה של 5%+ בהמרות לסל.
- השקה — הפצה דרך TestFlight / Firebase App Distribution. ניטור מדדים.
מה כלול
- עיצוב כל מצבי המסך (6+ וריאנטים) ב-Figma.
- מפרט רכיבים למפתחים.
- אינטגרציה עם מערכת העיצוב (אם קיימת).
- סקירת קוד של המסך המיושם.
- אנליטיקת המרות סופית שבועיים לאחר ההשקה.
לוחות זמנים משוערים
מ-3 עד 7 ימי עסקים בהתאם לזמינות מערכת העיצוב ומורכבות הגלריה. העלות מחושבת באופן אישי לאחר ניתוח דרישות. הזמינו עיצוב כרטיס מוצר לאפליקציית המובייל שלכם — קבלו ייעוץ ממהנדסים מוסמכים שכבר פתרו משימות דומות. פשוט כתבו לנו — נדון בפרויקט שלכם תוך יום אחד.