30 מונחי UI שיעזרו לכם לבנות אפליקציה עם AI - חלק 1

בקצרה: כשנותנים ל-AI שם מדויק לרכיב במסך, כמו Bottom Sheet או Tab Bar, ומסבירים מה הוא עושה, מגיעים לתוצאה עם פחות סבבי תיקון. כאן ריכזתי 30 רכיבי ממשק עם הסבר פשוט ומשפט להעתקה ל-Claude Code או ל-Codex.

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

זה חלק 1 בסדרה: 30 שמות של רכיבי ממשק, עם איורים ומשפט שאפשר להעתיק. בחלק 2 נכיר את המערכת שפועלת מאחורי המסכים.

איך משתמשים במדריך

1. מחפשים את הרכיב או המושג שמתאים למה שאתם רוצים לבנות.
2. קוראים את ההסבר ומעתיקים את הפרומפט שמתחתיו.
3. מחליפים את הפרטים בדוגמה בפרטים של המוצר שלכם. את שם המונח אפשר להשאיר באנגלית.

ניווט ומבנה

איך עוברים בין מסכים ואיפה כל דבר נמצא.

1. Tab Bar - סרגל לשוניות תחתון

סרגל קבוע בתחתית האפליקציה שמוביל לאזורים הראשיים שלה. בדרך כלל מציגים בו 3 עד 5 יעדים מרכזיים.

תוסיף Tab Bar תחתון עם 4 לשוניות: בית, חיפוש, הזמנות ופרופיל. תציג בבירור איזו לשונית פעילה.

2. Navigation Bar - סרגל ניווט עליון

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

ב-Navigation Bar תשים את שם המסך באמצע, חץ חזרה ואייקון שיתוף. תתאים את כיוון החץ לממשק בעברית.

3. Side Menu - תפריט צד

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

את ההגדרות, העזרה וההתנתקות תשים ב-Side Menu שנפתח מהצד. תוסיף גם דרך ברורה לסגור אותו.

4. Segmented Control - החלפת תצוגה

שורת אפשרויות צמודות שמחליפה את התוכן בתוך אותו מסך. למשל מעבר בין נתונים יומיים, שבועיים וחודשיים.

מעל הגרף תוסיף Segmented Control עם יומי, שבועי וחודשי. בלחיצה תעדכן את הנתונים בלי לעבור למסך אחר.

5. Onboarding - היכרות ראשונית

רצף קצר שמשתמש חדש רואה כדי להבין מה האפליקציה עושה ואיך מתחילים. הוא צריך לעזור להגיע לפעולה הראשונה.

תבנה Onboarding של 3 מסכים עם כפתור דילוג, שמופיע רק בפתיחה הראשונה. תשמור שהמשתמש כבר ראה אותו.

6. Splash Screen - מסך פתיחה

המסך שמופיע כשהאפליקציה נפתחת ועד שהיא מוכנה לשימוש. בדרך כלל יש בו לוגו ורקע בצבע המותג.

תוסיף Splash Screen עם הלוגו במרכז, על רקע בצבע המותג. אל תוסיף עיכוב מלאכותי אחרי שהאפליקציה מוכנה.

חלונות ושכבות

תוכן שמופיע מעל המסך הנוכחי, בלי לאבד את המקום שבו היינו.

7. Bottom Sheet - פאנל תחתון

פאנל שעולה מתחתית המסך ומציג פרטים או פעולות. נפוץ במובייל, ולעיתים ניתן לסגור אותו בגרירה למטה.

בלחיצה על מוצר תפתח Bottom Sheet עם הפרטים וכפתור הוספה לסל. תאפשר סגירה בגרירה וגם בכפתור ברור.

8. Modal - חלון החלטה

חלון מעל התוכן שמחייב התייחסות לפני שחוזרים למסך. מתאים לאישור פעולה משמעותית כמו מחיקה.

לפני מחיקה תציג Modal אישור עם שני כפתורים: ביטול ומחיקה. תציין מה יימחק ותתמקד תחילה בביטול.

9. Toast - הודעה קצרה

משוב קצר שמופיע ונעלם מעצמו בלי להפריע לעבודה. למשל הודעה שהשמירה הסתיימה. מידע חיוני שדורש פעולה עדיף לא להעלים כך.

אחרי שמירה תציג Toast עם הטקסט "נשמר בהצלחה", שנעלם אחרי 2 שניות. תוודא שקורא מסך מקבל את ההודעה.

10. Tooltip - הסבר ליד רכיב

בועת טקסט קצרה ליד כפתור או שדה. בדסקטופ היא יכולה להופיע בריחוף או במיקוד מקלדת. הסבר שנפתח בלחיצה עשוי להתאים יותר ל-Popover.

ליד שדה הקופון תוסיף אייקון מידע עם הסבר קצר. במחשב תציג Tooltip גם במיקוד מקלדת, ובטלפון תאפשר לפתוח את ההסבר בלחיצה.

11. Dropdown - רשימה נפתחת

רשימת אפשרויות שמתוכה בוחרים ערך. מתאימה כשיש קבוצה מוגדרת של אפשרויות ואין צורך להציג את כולן כל הזמן.

בחירת העיר תהיה Dropdown עם רשימת הערים הנתמכות. תוסיף תווית ברורה ושגיאה אם לא נבחרה עיר.

12. Banner - פס הודעה

הודעה בולטת בתוך המסך, למשל על מבצע, עדכון או תקלה. היא יכולה להישאר עד שהמשתמש סוגר אותה.

בראש מסך הבית תוסיף Banner: "משלוח חינם עד יום חמישי", עם איקס לסגירה. תציג אותו רק כשהמבצע בתוקף.

טפסים וקלט

איך המשתמש מזין מידע ובוחר בין אפשרויות.

13. Text Field - שדה טקסט

שדה שמקלידים בו. Placeholder הוא טקסט העזר שמופיע כשהשדה ריק; הוא לא מחליף תווית קבועה שמסבירה מה מזינים.

תוסיף Text Field למספר טלפון, עם תווית "טלפון" ו-Placeholder של מספר לדוגמה. במובייל תפתח מקלדת מתאימה.

14. Search Bar - שורת חיפוש

שדה שמאפשר למצוא פריטים. אפשר לבקש סינון תוך כדי הקלדה או חיפוש רק אחרי שליחה, לפי הצורך.

בראש הרשימה תוסיף Search Bar שמסנן את התוצאות תוך כדי הקלדה. אם אין התאמות, תציג הודעה וכפתור לניקוי החיפוש.

15. Toggle - מתג

מתג לשני מצבים, כמו פעיל וכבוי. נקרא גם Switch. לרוב שינוי המצב מוחל מיד, בלי כפתור שמירה נוסף.

במסך ההגדרות תוסיף Toggle להפעלה ולכיבוי של התראות. תשמור את ההעדפה ותציג שגיאה אם השמירה נכשלה.

16. Checkbox - תיבת סימון

תיבה לבחירה עצמאית. מתאימה כשמותר לבחור כמה אפשרויות יחד, או להסכים לתנאי מסוים.

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

17. Radio Buttons - בחירה יחידה

קבוצת אפשרויות שמתוכה ניתן לבחור רק אחת. שימושית כשכדאי לראות את כל החלופות מול העיניים.

שיטת המשלוח תהיה Radio Buttons: איסוף עצמי, שליח או דואר. אפשר לבחור רק אפשרות אחת בכל רגע.

18. Slider - בחירה על טווח

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

תוסיף Slider לבחירת מחיר מקסימלי, מ-0 עד 500 שקלים. תציג את המחיר הנבחר ותאפשר שינוי גם במקלדת.

הצגת תוכן

רכיבים שעוזרים לארגן פריטים, מידע ואפשרויות סינון.

19. Card - כרטיס תוכן

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

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

20. Carousel - קרוסלה

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

בראש מסך הבית תוסיף Carousel של המבצעים, עם גלילה אופקית. במחשב תוסיף כפתורי מעבר ובטלפון תאפשר גרירה.

21. Accordion - תוכן נפתח

כותרות שנפתחות בלחיצה ומגלות מידע נוסף. שימושי לשאלות נפוצות ולתוכן שאין צורך להציג כולו בבת אחת.

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

22. Badge - סימון קטן

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

על אייקון העגלה תוסיף Badge עם מספר הפריטים שבפנים. כשהעגלה ריקה אל תציג את התג.

23. Chips - תגיות בחירה

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

מעל הרשימה תוסיף Chips לסינון: הכול, טבעוני, ללא גלוטן. תאפשר בחירה יחידה ותסמן בבירור את הסינון הפעיל.

24. Avatar - תמונת משתמש

ייצוג חזותי של משתמש, לרוב תמונה עגולה. כשאין תמונה אפשר להציג ראשי תיבות או סמל חלופי.

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

טעינה, מצבים ופעולות

מה מציגים כשהתוכן עדיין לא כאן, ואיך עוזרים למשתמש להמשיך.

25. Skeleton Loader - שלד טעינה

צורות שמדמות את התוכן שעומד להיטען. הן עוזרות לשמור על מבנה המסך בזמן ההמתנה.

בזמן טעינה תציג Skeleton Loader בצורת הכרטיסים, במקום Spinner במרכז המסך. אם הטעינה נכשלה תציג אפשרות לנסות שוב.

26. Spinner - חיווי המתנה

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

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

27. Progress Bar - פס התקדמות

חיווי שמראה כמה הושלם מתוך תהליך ידוע. אפשר להציג אחוזים או התקדמות בין שלבים.

בראש טופס ההרשמה תוסיף Progress Bar של 4 שלבים. תציג גם טקסט כמו "שלב 2 מתוך 4".

28. Empty State - מצב ריק

מה שרואים כשעדיין אין תוכן. הסבר קצר ופעולה מתאימה עוזרים למשתמש להבין איך למלא את המסך.

כשאין הזמנות תציג Empty State עם איור, משפט קצר וכפתור "להזמנה ראשונה".

29. Pull to Refresh - משיכה לרענון

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

תוסיף Pull to Refresh לרשימת ההזמנות. בזמן הרענון תשאיר את ההזמנות הקיימות ותעדכן אותן כשהבקשה מסתיימת.

30. FAB - כפתור פעולה צף

קיצור של Floating Action Button. כפתור בולט שמייצג פעולה מרכזית אחת, כמו הוספת משימה.

תוסיף FAB עם פלוס בפינה התחתונה, שפותח את מסך הוספת המשימה. תוודא שהוא לא מכסה תוכן או את סרגל הניווט.

מחברים את המונחים לבקשה אחת

תבנה מסך בית עם Search Bar למעלה, מתחתיו Carousel של מבצעים ואז רשימת מוצרים כ-Cards. בזמן טעינה תציג Skeleton Loader, ובלחיצה על מוצר תפתח Bottom Sheet עם פרטים וכפתור הוספה לסל. למטה תוסיף Tab Bar עם בית, חיפוש, הזמנות ופרופיל. תתאים את הממשק לעברית ולמובייל ותטפל גם במצב ריק ובשגיאה.

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

לדרך העבודה המלאה, מהתכנון ועד הבדיקות והעיצוב, המשיכו לבניית אפליקציה עם AI ב-7 שלבים.

רוצים להעמיק? קלוד קוד למתחילים, מה זה וייב קודינג ובניית אפליקציה עם AI ב-7 שלבים. ואם אתם רוצים לבנות את האפליקציה יחד איתי: פיתוח אפליקציות AI לעסקים.