יצירת ממשק משתמש עם קבצים מצורפים של תמונות

סוכן ה-AI מצויד באופן ייחודי כדי לעזור לכם להפוך את החזון שלכם לגבי ממשק המשתמש של אפליקציית Android למציאות, באמצעות Jetpack Compose ובהתאם לשיטות המומלצות של Android. בדף הזה מוסבר איך ליצור ממשק משתמש לאפליקציה ולשפר אותו באמצעות AI.

כדי ליצור ממשק משתמש באמצעות AI, פועלים לפי השלבים הכלליים הבאים:

  1. יוצרים מוקאפ של ממשק המשתמש של האפליקציה הרצויה. אפשר לייצא PNG מכלי עיצוב או אפילו להשתמש בתמונה מצוירת.

    מסגרת חוטים מצוירת ביד של ממשק משתמש של אפליקציה
    איור 1: מסגרת של ממשק משתמש באפליקציה.
  2. כדי לצרף תמונה לשאילתה, לוחצים על הלחצן צירוף קובץ תמונה סמל של קובץ תמונה מצורף. אפשר גם ללחוץ על יצירת קוד מצילום מסך ישירות בחלונית תצוגה מקדימה בקובץ שאין לו תצוגה מקדימה קיימת.

    איור 2: יצירת קוד מצילום מסך בחלונית תצוגה מקדימה ריקה.
  3. בשדה הצ'אט, מבקשים מסוכן ה-AI ליצור את קוד ממשק המשתמש, למשל: "צור קוד Jetpack Compose לתמונה שסיפקת". כששולחים את השאילתה ואת התמונה, סוכן ה-AI מציע קוד ליצירת ממשק המשתמש המוצע. בדרך כלל, סוכן ה-AI מספק גם את הקוד של תצוגה מקדימה של Compose, כך שאפשר לראות במהירות את ממשק המשתמש אחרי שמייבאים אותו לפרויקט. אם הוא לא מספק את הקוד, אפשר לבקש ממנו ליצור את התצוגות המקדימות של Compose.

    ממשק Gemini Chat שבו מוצג קוד Jetpack Compose שנוצר על סמך תמונה.
    איור 2: Gemini יוצר קוד Jetpack Compose מתמונה מצורפת.
  4. אחרי שמייבאים את הקוד ורואים את התצוגה המקדימה של ה-Compose בחלונית התצוגה המקדימה, אפשר לבצע איטרציות בממשק המשתמש. כדי לעשות זאת, לוחצים ישירות על התצוגה המקדימה ומבקשים מ-Gemini לשנות אותה. אם יש לכם תמונה של מה שאתם רוצים, אתם יכולים גם לשפר את ממשק המשתמש על ידי לחיצה ימנית על התצוגה המקדימה ובחירה באפשרות פעולות AI > התאמת ממשק המשתמש לתמונת היעד.

    ‫Android Studio עם תצוגה מקדימה של Compose, רכיב ממשק משתמש שנבחר וצ'אט עם Gemini.
    איור 5: שימוש ב-Gemini כדי לשנות רכיבים בממשק המשתמש ישירות בתצוגה המקדימה של התוכן שנוצר.
    איור 6: דוגמה לשימוש באפשרות 'התאמת ממשק המשתמש לתמונת היעד'

איתור ותיקון של בעיות באיכות ממשק המשתמש

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

איור 7: תיקון בעיות בממשק המשתמש באמצעות AI
איור 8: דוגמה לממשק משתמש אחרי החלת התיקונים