עיצוב מובייל המיועד לגודל מסך יחיד — iPhone 15 Pro 393×852pt — הוא רק חצי מהעבודה. במציאות, האפליקציה רצה על iPhone SE עם 375×667pt, על מכשירי אנדרואיד זולים עם 360×640dp, ועל מכשירי דגל עם רוחב 430pt. פריסה שנראית מושלמת על מסגרת העיצוב חותכת כפתורים במסכים קטנים ומשאירה שטחים ריקים במסכים גדולים. אנו נתקלים בכך מדי יום: לקוח שולח קובץ Figma בגודל אחד, והבדיקות מגלות שכפתור ה"קנייה" מחליק מתחת ל-Tab Bar. זה מוביל לדחיות ב-App Store Review ולאובדן המרות.
כיצד מתבצעת התאמת עיצוב למסכים שונים
התאמת עיצוב אפליקציות מובייל מתחילה בביקורת של הפריסות הקיימות. אנו מזהים אזורים בעייתיים: גלישת תוכן, Safe Area שלא נלקח בחשבון, טיפוגרפיה לא קריאה. לאחר מכן אנו יוצרים מסגרות בקרה ל-3–4 גדלים מרכזיים ומתאימים מרווחים, קני מידה של תמונות ומספר עמודות. התוצאה היא קובץ Figma עם Auto Layout מוגדר ומדריך למפתחים.
מה בדיוק אנו מתאימים
נקודות השבירה המרכזיות אינן גדלים אלא פרופורציות. מסך iPhone SE עם 16:9 לעומת iPhone 15 Pro Max עם 19.5:9 — הבדל משמעותי. אלמנטים המעוגנים לתחתית (Tab Bar, כפתורים צפים, פוטר קבוע בטפסים) חייבים לפעול כראוי בשניהם. Safe Area הוא סיפור נפרד. ב-iPhone עם Dynamic Island — 59pt מלמעלה. ב-iPhone ללא חריץ (SE דור 3) — 20pt. באנדרואיד, החריץ משתנה או לא קיים. תוכן ש"נדבק" לשורת הסטטוס מבלי להתחשב ב-Safe Area יידחה בוודאות ב-App Store Review.
טיפוגרפיה במסכים קטנים: טקסט בגודל 16sp קריא במסך 6 אינץ', אך במסך 4.7 אינץ' עם 326 ppi — על הגבול. הגודל המינימלי לטקסט גוף במובייל — 14pt/sp, וזו לא המלצה אלא מינימום מעשי לרוב הפונטים. אנו משתמשים בטיפוגרפיה דינמית: במסכים קטנים, הכותרות קטנות ב-2pt, ובמסכים גדולים — גדלות.
כיצד להתאים ל-iOS ולאנדרואיד בו-זמנית?
הגישות שונות. iOS משתמשת ב-Auto Layout עם יחסים (Aspect Ratio, Multiplier), אנדרואיד משתמשת ב-ConstraintLayout עם percent או Guideline. אנו מעצבים ב-Figma באמצעות Auto Layout ו-Constraints, ולאחר מכן מכינים מדריכים נפרדים לכל פלטפורמה. בפועל, Auto Layout ב-Figma + SwiftUI Layout עדיף על מסגרות עם קבועים קשיחים — הפרש במהירות ההתאמה עד 50%. לאנדרואיד אנו משתמשים ב-Jetpack Compose עם Modifier.fillMaxWidth() ו-Modifier.weight(), אך בדיקות על מכשירים אמיתיים עדיין חובה.
כיצד אנו מעצבים את ההתאמה ב-Figma
אנו יוצרים מסגרות לגדלי בקרה:
| מכשיר | גודל (pt/dp) | מטרה |
|---|---|---|
| iPhone SE דור 3 | 375×667 | מינימום iOS |
| iPhone 15 / 14 | 390×844 | עיקרי iOS |
| iPhone 15 Pro Max | 430×932 | מקסימום iOS |
| אנדרואיד קומפקטי | 360×800 | זול/בינוני |
| אנדרואיד רגיל | 390×844 | מכשיר דגל אנדרואיד |
כל מסך מרכזי נבדק בגדלים הקיצוניים. לא כל 50 המסכים — רק אלה עם גלישת תוכן, Bottom Sheet, טפסים מורכבים, תמונות בגובה קבוע. בנוסף, אנו מכינים פריסות למסכים הרחבים והצרים ביותר כדי שהמפתחים יראו את הגבולות.
השוואת גישות: Auto Layout לעומת פריסות אדפטיביות
| קריטריון | Auto Layout בלבד | פריסות אדפטיביות עם נקודות שבירה |
|---|---|---|
| קני מידה של תמונות | מתיחה/כיווץ | תמונות שונות לכל גודל |
| מספר עמודות | קבוע | משתנה (1, 2, 3 עמודות) |
| טיפוגרפיה | גודל קבוע | דינמית (קטן/גדול יותר) |
| התאמת פרופורציות | לא | כן |
| מאמץ | נמוך | גבוה יותר אך תוצאה טובה יותר |
למה Auto Layout לא מספיק?
Auto Layout לא משנה קני מידה של תמונות, לא משנה מספר עמודות בגריד. ב-iPhone SE, כרטיסי מוצר ב-2 עמודות הופכים לעמודה אחת — יש לקחת זאת בחשבון בעיצוב. אנו משתמשים בפריסה אדפטיבית עם נקודות שבירה: ברוחב עד 375pt — עמודה אחת, עד 430pt — שתיים, מעל — שלוש. זה דורש טיפול נפרד בכל מסך, אך המשתמש לא יראה "חיתוכים".
מה כלול בעבודה
- ביקורת פריסות קיימות לבעיות התאמה (Safe Area, גלישה, טיפוגרפיה).
- יצירת מסגרות בקרה ל-3–4 גדלים (iOS + אנדרואיד).
- התאמת מרווחים, יישור, קני מידה של תמונות.
- הכנת מדריך למפתחים עם אילוצים והערות.
- בדיקות על מכשירים אמיתיים (יש לנו צי של 15+ מכשירים).
- קובץ Figma סופי עם Auto Layout מוגדר ומשתנים.
- ייעוץ עם צוות הפיתוח בנושא פריסה.
אנו עובדים עם עיצוב בכל השלבים: מעיצוב ועד מסירה לפיתוח. 5+ שנות ניסיון, מעל 20 פרויקטים שהושלמו ל-iOS ולאנדרואיד. אנו מבטיחים שאחרי ההתאמה שלנו, לא יהיו דחיות לפי סעיף 4.2 של App Store Review ו-Google Play Console.
תהליך העבודה
- ניתוח: לימוד הפריסות הקיימות וזיהוי אזורים בעייתיים.
- עיצוב: יצירת מסגרות בקרה וגרסאות אדפטיביות.
- יישום: התאמת אלמנטים והכנת מדריך.
- בדיקה: בדיקות על מכשירים אמיתיים וסימולטורים.
- מסירה: העברת קובץ Figma ומדריך למפתחים.
לוחות זמנים משוערים
התאמת עיצוב קיים ל-3–4 גדלי בקרה (מסכים מרכזיים, לא פרויקט מלא) — מיום עסקים אחד עד 3 ימי עסקים. התאמה מלאה של פרויקט שלם (עד 50 מסכים) — מ-5 עד 10 ימי עסקים. העלות מחושבת באופן אישי, תלויה במספר המסכים ובמורכבות. אנו נעריך את הפרויקט שלכם — פשוט צרו קשר.
קבלו ייעוץ על התאמת עיצוב אפליקציית המובייל שלכם. אנו עוזרים להימנע מטעויות נפוצות: חישוב שגוי של Safe Area, התעלמות מפרופורציות מסך, טיפוגרפיה לא קריאה. הזמינו התאמת עיצוב — המוצר שלכם ייראה מושלם בכל מסך.