אנו מפתחים פריסות אפליקציות מובייל אדפטיביות למכשירים מתקפלים. תארו לעצמכם: משתמש פותח את ה-Samsung Galaxy Z Fold6. האפליקציה חייבת להתארגן מחדש באופן מיידי מממשק אנכי קומפקטי לפריסה רחבה של שני פאנלים. ללא התאמה, האפליקציה מתנהגת כמו "חלון מוגדל"—רצועת תוכן צרה במרכז המסך. זה לא רק מתסכל משתמשים אלא גם מוריד דירוגים בחנויות האפליקציות. עם ניסיון של למעלה מ-5 שנים ו-10+ פרויקטים מוצלחים עבור Samsung Z Fold, Z Flip ו-Google Pixel Fold, אנו מבטיחים חוויית משתמש חלקה בכל פורמט. עלות ההתאמה מתחילה מ-$1,500 עבור אפליקציה עם עיצוב קיים, וחוסכת עד 50% בהשוואה לעיצוב מחדש מלא.
שלושה פורמטים, לא אחד
מכשירים מתקפלים אינם תרחיש יחיד. ישנם לפחות שלושה, וכל אחד דורש פתרון פריסה נפרד:
- מצב מקופל — המכשיר נראה ומתפקד כמו סמארטפון רגיל. Samsung Z Fold6 במצב מקופל: 968×2424 פיקסלים, יחס של ~23:9. גבוה וצר מאוד. תוכן שנראה טוב על 20:9 עשוי להיות לא נוח לניווט ביד אחת על 23:9.
- מצב פתוח — מסך גדול. Z Fold6: 2160×1856 פיקסלים כשהוא פתוח, יחס גובה-רוחב של ~7.6:8 — כמעט מרובע. זהו פורמט שונה מהותית: תוכן אופקי רחב עובד היטב, אנכי צר לא. אפליקציות שפשוט נמתחות למילוי המסך ללא התאמת פריסה נראות כמו אפליקציות טאבלט במצב letterbox.
- מצב Flip (Table Top) — מאפיין את ה-Z Flip. המכשיר מקופל אופקית; החצי העליון הוא המסך, התחתון הוא המקלדת או סגור. נגני מדיה, שיחות וידאו, מצלמה — במצב זה האפליקציה חייבת להתאים את הממשק ל"חצי מסך." גוגל קוראת לזה מצב Table Top.
בנוסף, מכשירים עם מסך חיצוני (Cover Screen). ל-Z Fold6 יש מסך חיצוני של 6.3". זה דורש תרחיש נפרד: מה להציג כשהמכשיר מקופל והמסך החיצוני פעיל. העיצוב האדפטיבי שלנו למכשירים מתקפלים מנצל את WindowSizeClass ו-FoldingFeature כדי להבטיח חוויית משתמש חלקה בכל המצבים.
למה מכשירים מתקפלים דורשים עיצוב ייחודי
התעלמות מאילוצים פיזיים מובילה לחוויית משתמש גרועה. ציר וקמט — במצב פתוח, יש קמט פיזי במרכז המסך. אין למקם תוכן ישירות עליו: אזורי אינטראקציה חשובים, טקסט, תמונות צריכים להיות מוזזים מהמרכז. Jetpack Compose מספק WindowInfoTracker ו-FoldingFeature כדי לקבוע את מיקום הקיפול ומצבו (FLAT / HALF_OPENED). מקור: ויקיפדיה: סמארטפון מתקפל.
Window Size Classes — Material Design 3 מציג שלוש מחלקות: Compact (< 600dp), Medium (600–839dp), Expanded (≥ 840dp). מתקפל במצב פתוח הוא Expanded. העיצוב חייב להתחשב במעברים בין מחלקות: בעת פתיחה, האפליקציה צריכה לארגן מחדש את הפריסה מבלי לטעון מחדש את המסך (רציפות).
איך להבטיח רציפות בעת קיפול/פתיחה
המשתמש מקפל או פותח את המכשיר בזמן השימוש באפליקציה. המצב לא צריך ללכת לאיבוד: אם קראו מאמר, מיקום הגלילה נשמר; אם מילאו טופס, הנתונים שהוזנו לא נמחקים. זו לא רק משימת פיתוח—זו משימת עיצוב: המעצב חייב לראות את שני המצבים כחוויה רציפה אחת.
ריבוי חלונות — מכשירים מתקפלים משמשים לעתים קרובות במצב ריבוי חלונות: שתי אפליקציות זו לצד זו. זה אומר שהאפליקציה חייבת לעבוד כראוי ברוחבים שונים מ-360dp עד 900dp+. רכיבים ברוחב קבוע הם בעייתיים.
תהליך התאמה שלב אחר שלב
- ניתוח העיצוב הנוכחי: קביעה אילו רכיבים דורשים ארגון מחדש כאשר WindowSizeClass משתנה.
- יצירת פריימים לכל המצבים: cover, מקופל, פתוח, table top.
- עיצוב כללי פריסה: עבור כל רכיב, לציין כיצד הוא צריך להתנהג בכל מחלקה.
- תיעוד עקרונות שמירת מצב: מה חייב להישאר בעת מעבר בין מצבים.
- סקירת יישום: אימות התאמה לעיצוב.
איך אנחנו בונים את העיצוב
ב-Figma, אנו יוצרים פריימים לכל המצבים של מכשירים ספציפיים:
| מצב | מכשיר | גודל (dp) |
|---|---|---|
| Cover Screen | Z Fold6 | 968×748 (לאורך) |
| מקופל | Z Fold6 | 968×2424 (לאורך) |
| פתוח | Z Fold6 | 2160×1856 (לרוחב ~) |
| Table Top | Z Flip6 | 2636×1080 חצי |
| פתוח | Z Flip6 | 2636×1080 מלא |
עבור כל מצב, איננו מבצעים עיצוב מחדש מלא אלא התאמת פריסה על גבי רכיבים קיימים. ניווט: בקומפקטי/מקופל — Bottom Navigation; בפתוח/מורחב — NavigationRail או פריסה דו-פאנלית. רשימות: עמודה אחת בקומפקטי, שתיים במורחב. תצוגת פרטים: מודאלית בקומפקטי, פאנל צדדי במורחב. עיצוב אדפטיבי המבוסס על רכיבים קיימים מהיר פי 5 מעיצוב מאפס.
תשומת לב מיוחדת ניתנת לאנימציות מעבר בין מצבים. אנימציית הפתיחה צריכה להיות טבעית: אלמנטים מסודרים מחדש בתנועה, לא בהבהובים. ב-Figma, Smart Animate עוזר להדגים את הקונספט.
מה כלול בעבודה
- פריימים ל-3+ מצבים ב-Figma (cover, מקופל, פתוח, table top);
- תיעוד כללי פריסה המפרט WindowSizeClass ו-FoldingFeature;
- הערות למפתחים (עקרונות שמירת מצב, אנימציות תנועה);
- מפגש הדרכה (שעה) לצוות הפיתוח שלכם;
- שבוע של תמיכה לאחר השקה לכל שאלה הקשורה לעיצוב;
- סקירת יישום לעמידה בעיצוב (אופציונלי).
טעות עיצוב אופיינית
עיצוב רק למצב אחד והנחה שהשני "יסתדר לבד." מתיחת פריסת מובייל ל-Expanded אינה התאמה—זו הגדלה עם שוליים ריקים. או ההפך: עיצוב המצב הפתוח כך שהמצב המקופל בקושי מתפקד.התעלמות מהקמט כאילוץ פיזי. כפתור פעולה צף הממוקם בדיוק על ציר המרכז הופך לכפתור שלא נוח ללחוץ עליו בגלל התבליט הפיזי. אזור החרגת הציר הוא מגבלה אמיתית, לא תיאורטית.
לוחות זמנים ועלות
פיתוח פריסות אדפטיביות למכשירים מתקפלים אורך 2–3 ימי עסקים עבור אפליקציה עם עיצוב מובייל קיים. העלות נקבעת באופן אישי לאחר ניתוח, עם מחיר התחלתי של $1,500. צרו קשר כדי לדון בפרויקט שלכם ולקבל ייעוץ ממהנדס עם שנים של ניסיון בפיתוח מובייל.
השוואת גישות
| גישה | זמן | התאמה | עלות |
|---|---|---|---|
| פריסה סטטית | 1–2 ימים | אין | נמוכה |
| פריסה אדפטיבית עם תמיכה במתקפלים | 2–3 ימים | מלאה | בינונית |
| עיצוב מחדש מאפס | 10+ ימים | מלאה | גבוהה |