> ## Documentation Index > Fetch the complete documentation index at: https://docs.base44.com/llms.txt > Use this file to discover all available pages before exploring further. # יסודות עיצוב ופריסה > שמור על אפליקציית Base44 שלך עקבית ומאורגנת: מערכות עיצוב, תמונות ונכסים ויזואליים, פריסה רספונסיבית, סוגי דפים, התאמה אישית מתקדמת ונגישות. אחרי שאתה יודע איך [להתאים אישית את עיצוב האפליקציה שלך](/Building-your-app/Design), היסודות האלה עוזרים לך לשמור עליה עקבית, מאורגנת ונגישה ככל שהיא גדלה. דף זה מכסה בניית עיצוב עקבי, עבודה עם תמונות ונכסים ויזואליים, פריסה רספונסיבית וסוגי דפים, התאמה אישית מתקדמת ונגישות. *** ## שמירה על עיצוב עקבי הקטעים האלה מסבירים איך לבסס דפוסי עיצוב עקביים לכל האפליקציה בעזרת צ'אט ה-AI, כך שהצבעים, הטיפוגרפיה, הריווח והרכיבים ירגישו אחידים בכל האפליקציה שלך. ### מערכת צבעים צבע הוא אחד הכלים החזקים ביותר שלך לקביעת אווירה ולהכוונת תשומת לב. התחל בהגדרת תפקידים במקום קודי hex אקראיים. שאף ל: * צבע מותג ראשי אחד * צבע משני אחד * צבע הדגשה אחד להבלטות * 3 עד 5 גווני אפור ניטרליים לרקעים, משטחים וגבולות * צבעים ברורים למצבי הצלחה, אזהרה ושגיאה תוכל לבקש מ-AI להציע וליישם מערכת מלאה מאפס: ```text theme={null} צור מערכת צבעים לאפליקציה הזו: - צבע מותג ראשי אחד - צבע משני אחד - צבע הדגשה אחד להבלטות - 4 גווני אפור ניטרליים לרקעים, משטחים וגבולות מפה צבעים לתפקידים כמו primary, surface, border, success, warning, error. ודא שטקסט על רקעים עומד ברמות ניגודיות של נגישות. החל את המערכת הזו על כל האפליקציה והחלף צבעים חד-פעמיים. ``` שמור על משמעות צבע עקבית. לדוגמה, השתמש בצבע ההצלחה שלך רק למצבים חיוביים ובצבע השגיאה רק לבעיות, לא לקישוט. אם כבר יש לך קודי hex ממדריך מותג או מכלי חיצוני, הדבק אותם ותן ל-AI למפות אותם לתפקידים: ```text theme={null} השתמש בפלטה הזו והקצה לכל hex תפקיד: - #1D4ED8 - #6366F1 - #10B981 - #F3F4F6 - #111827 הגדר אילו מהם משמשים בתפקידים ראשי, משני, הדגשה וניטרלי. החלף צבעים קשיחים בקוד ב-tokens או במחלקות Tailwind שעוקבות אחרי התפקידים האלה. ``` תוכל להעלות צילום מסך או תמונה של פלטת הצבעים שלך ישירות לצ'אט ה-AI ולבקש ממנו להחיל את הצבעים על האפליקציה שלך: ```text theme={null} החל את הצבעים מהתמונה הזו על האפליקציה שלי. מפה כל צבע לתפקיד כמו primary, background, foreground ו-accent. החלף את הצבעים הקיימים בכל האפליקציה כך שיתאימו. ``` שינוי פלטת הצבעים של אפליקציית Base44 *** ### מערכת טיפוגרפיה טיפוגרפיה קובעת עד כמה האפליקציה שלך מרגישה קריאה וקלה לסריקה. עדיף שיהיו לך כמה סגנונות טקסט ברורים מאשר הרבה סגנונות דומים. הגדר תפקידים כמו: * כותרת דף * כותרת מקטע * טקסט גוף * מטא-נתונים קטנים כמו תוויות וחותמות זמן תוכל לבקש מה-AI להגדיר זאת ולהחיל בכל מקום: ```text theme={null} הגדר מערכת טיפוגרפיה: - כותרות דף: הגודל הגדול ביותר, מודגש, sans serif מודרני - כותרות מקטע: גודל בינוני, semibold - טקסט גוף: גודל סטנדרטי, משקל רגיל - מטא-נתונים: קטן, באותיות רישיות, עם ריווח אותיות נוסף החל את התפקידים האלה באופן עקבי על כל הדפים והסר גודלי גופן אקראיים. ``` תוכל גם לכוון גדלים באופן ישיר יותר: ```text theme={null} הפוך את הטיפוגרפיה לקריאה יותר: - הגדל מעט את גודל טקסט הגוף הבסיסי - הגדל את גובה השורה בפסקאות - ודא שכותרות גדולות לפחות פי 1.4 מטקסט הגוף שמור על אותן משפחות גופנים. ``` תוכל להשתמש בגופנים מותאמים אישית ולהחיל אותם דרך קובץ הפריסה שלך. 1. קבל את קטע ההטמעה (לדוגמה מ-Google Fonts בכתובת [https://fonts.google.com](https://fonts.google.com)). 2. בקש מ-AI להוסיף אותו ל-`Layout.js` ולחבר אותו למערכת הטיפוגרפיה שלך. פרומפט לדוגמה: ```text theme={null} ייבא את הגופן "Raleway" מ-Google Fonts. השתמש בו לכותרות דף ולכותרות מקטע. שמור על גופן הגוף הנוכחי לפסקאות. עדכן סגנונות בכל האפליקציה לפי הכלל הזה. ``` שימוש בגופן מותאם אישית בקובץ הפריסה של Base44 נסה להגביל את עצמך למשפחת גופנים אחת או שתיים. יותר מדי גופנים גורמים לממשק להרגיש לא מאורגן וקשה יותר לתחזוקה. *** ### ריווח וצפיפות ריווח וצפיפות קובעים עד כמה נוח להשתמש באפליקציה שלך. סולם ריווח פשוט מונע רווחים אקראיים ומקטעים צפופים. תוכל להגדיר סולם כמו 4, 8, 12, 16, 24 ולבקש מ-AI להחיל אותו: ```text theme={null} נרמל את הריווח לפי הסולם הזה: 4, 8, 12, 16, 24. - השתמש בערכים גדולים יותר בין מקטעים עיקריים - השתמש בערכים בינוניים בתוך כרטיסים ופאנלים - השתמש בערכים קטנים בין תוויות לשדות קלט צמצם אזורים שמרגישים צפופים והימנע מערכי ריווח אקראיים. ``` אם דף מרגיש עמוס או ריק מדי, תוכל לתת לצ'אט ה-AI לאבחן ולתקן: ```text theme={null} הסתכל על הדף הזה והתאם את הריווח: - הוסף ריפוד עליון ותחתון סביב כל מקטע - הגדל את הרווח בין שורות של כרטיסים - ודא שלפסקאות ארוכות יש אורך שורה נוח שמור על הצבעים והתוכן הקיימים. ``` *** ### אלמנטים ומצבים מרכזיים אחרי שצבע, טיפוגרפיה וריווח במקום, תקנן את אבני הבניין שבהן אתה משתמש בכל מקום. התמקד ב: * כפתורים (ראשי, משני וטקסט בלבד) * כרטיסים ופאנלים * סרגלי ניווט וסרגלים צדדיים * שדות טופס (ברירת מחדל, פוקוס, שגיאה, מושבת) * צ'יפים, תגיות ותגים אם אתה משתמש בהם תוכל לבקש מ-AI לזהות ולאחד דפוסים: ```text theme={null} תקנן אלמנטים מרכזיים: - כפתורים: הגדר סגנונות ראשי, משני וטקסט בלבד - כרטיסים: הגדר רדיוס פינות, ריפוד, צל ופריסת כותרת/גוף - ניווט: הגדר מצבי active, hover ו-disabled - שדות טופס: הגדר מצבי ברירת מחדל, פוקוס, שגיאה ומושבת החל את הדפוסים האלה על כל האפליקציה והחלף סגנונות לא תואמים. ``` זה נותן לך שפה לשימוש חוזר, כך שדפים חדשים נראים כאילו הם שייכים לאותו מוצר. *** ## תמונות ונכסים ויזואליים נכסים ויזואליים כמו תמונות, אייקונים וסרטונים מעצבים את התחושה של האפליקציה שלך. AI יכול לעזור לך ליצור, למקם ולעצב אותם, ולחבר אותם לנתונים ולקוד שלך. העלה תמונות או סרטונים לצ'אט ה-AI כדי לתת לו הקשר ויזואלי לסגנון, לפריסה או לתוכן של האפליקציה שלך. תוכל לבקש מצ'אט ה-AI להוסיף תמונות hero ישירות לדפים שלך: ```text theme={null} הוסף לדף הבית תמונת hero ברוחב מלא שמתאימה לפלטת הצבעים הנוכחית. השתמש בתמונת placeholder שמרמזת על דאשבורד אנליטיקס מודרני. ``` דוגמה לתמונת hero באפליקציית Base44 כדי להחליף תמונת placeholder: 1. פתח את קובץ הדף הרלוונטי, כמו `Store.js`, בתצוגת קוד. 2. מצא את תגית ה-``. 3. עדכן את מאפיין ה-`src` בכתובת URL של תמונה משלך. תוכל גם להעלות תמונות לישויות במקטע **Data** ולקשר אותן לרכיבים, כך שכרטיסים ורשימות יציגו את התמונות הנכונות אוטומטית. ניהול תמונות ישויות במקטע Data של Base44 בקש מצ'אט ה-AI ליצור סרטונים קצרים למקטעים ויזואליים כמו hero, תצוגות מקדימות של מוצר, מדריכים או מסכי היכרות. פרומפט לדוגמה: ```text theme={null} צור סרטון היכרות קצר לאפליקציית הכושר שלי שמציג שגרת אימון בוקר פשוטה. הוסף אותו למסך הפתיחה מעל כפתור Get Started. ``` יצירת סרטונים מצ'אט ה-AI דורשת [תוכנית Starter](/Account-and-billing/Billing-and-plans) ומעלה. כל סרטון שנוצר משתמש בקרדיטים של הודעת הפרומפט ועוד קרדיט הודעה נוסף אחד. תוכל גם לאפשר לאנשים ליצור סרטונים באפליקציה החיה שלך. למד עוד על [יצירת סרטונים](/Integrations/built-in-integrations#generating-videos). תמונות ייחוס עוזרות לך לכוון את העיצוב ויזואלית, על ידי הצגת סגנון, פריסה, פלטת צבעים או כיוון ויזואלי רצוי לצ'אט ה-AI. העלאת תמונת ייחוס כהשראה לעיצוב האפליקציה 1. לחץ על **Upload icon (+)** בצ'אט ה-AI. 2. העלה תמונת השראה או צילום מסך. 3. אמור ל-AI בדיוק מה אתה רוצה לאמץ וממה להתעלם. רעיונות לפרומפטים: ```text theme={null} השתמש בייחוס הזה כהשראה. שמור על הפריסה והתוכן שלי, אבל: - התאם את צורות הכפתורים והצללים - התאם את רדיוס הפינות וסגנון הגבול של הכרטיסים - החל גרדיאנט רך דומה רק על הכותרת העליונה אל תעתיק את הצבעים המדויקים, רק את המבנה והתחושה. ``` ```text theme={null} מצילום המסך הזה, חלץ כללי עיצוב עבור: - תפקידי צבע - גודלי גופן ומשקלים - רדיוס פינות וצללים - ריווח בין מקטעים וכרטיסים הסבר את הכללים, ואז החל סגנון דומה עם צבעי המותג הנוכחיים שלי. ``` תוכל להעתיק סגנונות ויזואליים ישירות מכלי עיצוב כמו Figma ולבקש מ-Base44 להחיל אותם, במקום לנסות לתאר כל פרט במילים. **כדי להעתיק מ-Figma:** 1. ב-Figma, בחר את האלמנט שאת הסגנון שלו אתה רוצה להעתיק. 2. עבור ל-**Dev mode** וצפה בפאנל **Code**. 3. העתק את שורת ה-CSS הרלוונטית, לדוגמה רקע גרדיאנט: `background: linear-gradient(180deg, #C2C9B5 -1.25%, #EBEBEB 68.58%, #E6FC88 104.25%);` 4. ב-Base44, לחץ על האלמנט המתאים בתצוגה המקדימה כדי לפתוח את מצב **Edit**. 5. הדבק את הסגנון בפרומפט AI ואמור ל-Base44 בדיוק מה לשנות, לדוגמה: ```text theme={null} שנה את סגנון הרקע של האלמנט הזה ל: background: linear-gradient(180deg, #C2C9B5 -1.25%, #EBEBEB 68.58%, #E6FC88 104.25%); שמור על כל שאר הסגנונות ללא שינוי. ``` כך תוכל להתאים גרדיאנטים, צללים, גבולות וסגנונות אחרים מקובץ העיצוב שלך בדיוק רב. אייקונים צריכים לתמוך במשמעות, לא רק לקשט. עקביות היא המפתח. משימות נפוצות: * החלף אייקונים גנריים באייקונים משמעותיים יותר. * יישר גודלי אייקונים ועובי קווים. * צמד אייקונים לתוויות טקסט במקומות שבהם הבהירות חשובה. תוכל להשתמש בספריות אייקונים כמו Lucide ולבקש מצ'אט ה-AI לחבר אותן: ```text theme={null} החלף אייקונים גנריים באייקונים משמעותיים יותר: - השתמש באייקונים שמתאימים בבירור לכל פריט ניווט ולכל פעולה עיקרית - שמור על גודל אייקון ועובי קו עקביים - יישר אייקונים בצורה מסודרת עם תוויות בניווט, ברשימות ובכפתורים ``` ```text theme={null} עדכן את כל כפתורי הקריאה לפעולה הראשיים: - השתמש באייקון "sparkles" משמאל לתווית - שמור על גודל אייקון קטן וריפוד אחיד - אל תוסיף אייקונים לכפתורים משניים או הרסניים ``` *** ## פריסה ורספונסיביות פריסה קובעת איך מידע מקובץ ונסרק. רספונסיביות מבטיחה שהפריסה עובדת בכל מכשיר. חשוב במונחים של סוגי דפים במקום מסכים חד-פעמיים: * דפי נחיתה ושיווק * דאשבורדים * רשימות וטבלאות * דפי פירוט * טפסים ואשפים * דפי הגדרות ופרופיל תוכל לבקש מצ'אט ה-AI לזהות ולתקנן דפוסים: ```text theme={null} זהה את סוגי הדפים העיקריים באפליקציה הזו (נחיתה, דאשבורד, רשימה, פירוט, טופס, הגדרות). עבור כל סוג: - הצע מבנה פריסה עקבי - הצע באילו רכיבים קיימים אפשר להשתמש שוב החל את הפריסות האלה על כל הדפים מאותו סוג, בלי לשנות תוכן. ``` היררכיה ושטח לבן עוזרים לאנשים לראות במבט אחד מה חשוב. רעיונות שתוכל לבקש מ-AI להחיל: ```text theme={null} שפר את ההיררכיה הוויזואלית והשטח הלבן בדף הזה: - גרום לכותרת הדף לבלוט בבירור מעל שאר הטקסט - השתמש בכותרות מקטע עקביות לקיבוץ תוכן - הוסף ריפוד עליון ותחתון סביב כל מקטע - הגדל את הרווח בין שורות של כרטיסים הימנע מהוספת צבעים או גופנים חדשים. ``` שטח לבן חשוב במיוחד לתוכן צפוף כמו דאשבורדים וטבלאות, אז תן לאלמנטים מרכזיים מקום לנשום. האפליקציה שלך צריכה להרגיש טבעית בטלפונים, בטאבלטים ובמחשבים. תוכל לקודד כללי רספונסיביות בפרומפט אחד: ```text theme={null} הפוך את הפריסה הזו לרספונסיבית: - בטלפונים, השתמש בעמודה אנכית אחת וערום מקטעים - בטאבלטים, השתמש בשתי עמודות לכרטיסים היכן שיש מקום - במחשבים, השתמש בשלוש או ארבע עמודות לכרטיסים שמור על תמונות ביחס גובה-רוחב של 4:3. כווץ את הסרגל הצדדי לתפריט עליון במסכים קטנים. הימנע מגלילה אופקית בכל נקודות השבירה. ``` השתמש בתצוגת המכשירים המקדימה בעורך של Base44 כדי לבדוק איך הכללים האלה מתנהגים בגדלי מסך שונים, ואז חדד אותם עם פרומפטים נוספים. ### התאמת האפליקציה שלך למובייל אפליקציית Base44 שלך מתאימה את הפריסה שלה אוטומטית לכל מכשיר, אבל תוכל להשתמש בתצוגת המובייל המקדימה ובכלי ההתאמה של העורך כדי לכוונן איך האפליקציה שלך נראית ועובדת במובייל. כך תוכל ליצור חוויה נוחה וחלקה למשתמשי מובייל. צפייה בגרסת המובייל של האפליקציה שלך בעורך האפליקציות של Base44 **כדי להתאים את האפליקציה שלך למובייל:** 1. עבור לעורך האפליקציה שלך. 2. לחץ על סמל **Screen** למעלה ובחר **Mobile**. 3. עבור על הפריסה, הניווט והתוכן שלך. 4. בצע שינויים לפי הצורך באחת מהדרכים: * בקש מצ'אט ה-AI לבצע שינויים למובייל. * השתמש במצב **Edit** בצ'אט ה-AI כדי לשנות את העיצוב או הפריסה של אלמנטים ספציפיים. **טיפים כדי שהאפליקציה שלך תיראה טוב במובייל:** * ודא שהטקסט קריא * שנה גודל אלמנטים כך שיתאימו למסך המובייל * הסתר או הצג אלמנטים לפי הצורך * ודא שקל להקיש על כפתורים וכפתורי אייקון * בדוק שהתמונות נראות טוב *** ## סוגי דפים סוגי דפים שונים דורשים החלטות עיצוב שונות. תוכל להשתמש בדפוסים האלה כנקודות התחלה ולהתאים אותם עם AI. התמקד בהבטחה ברורה, בקריאה לפעולה עיקרית אחת ובהיררכיה ויזואלית חזקה. טיפים לעיצוב: * השתמש בכותרת עליונה פשוטה עם ניווט מינימלי. * הפוך את מקטע ה-hero לברור וממוקד, עם כותרת קצרה וכפתור ראשי אחד. * השתמש במקטעים תומכים ליתרונות, לתכונות ולהוכחה חברתית. * שמור על טפסים קצרים ומעל קו הגלילה כשאפשר. פרומפט לדוגמה: ```text theme={null} עצב את דף הבית כדף נחיתה ממוקד: - מקטע hero נקי עם כותרת קצרה, משפט תומך אחד וקריאה לפעולה ראשית אחת - אחריו שלושה יתרונות מרכזיים בכרטיסים - הוסף מקטע הוכחה חברתית פשוט עם לוגואים - שמור על ניווט מינימלי השתמש במערכת הצבעים והטיפוגרפיה הקיימת שלי. ``` דאשבורדים צריכים לענות במבט אחד על השאלה "איך אני מתקדם?". טיפים לעיצוב: * מקם את המדד או הסטטוס החשוב ביותר קרוב לפינה השמאלית העליונה. * קבץ מדדים קשורים בכרטיסים עם כותרות ברורות ותיאורים קצרים. * הימנע מיותר מדי סוגי תרשימים על מסך אחד, השתמש שוב בכמה סוגים סטנדרטיים. * שמור על מסננים וטווחי זמן גלויים ועקביים. פרומפט לדוגמה: ```text theme={null} בנה מחדש את הדאשבורד הזה: - מקם את ה-KPI העיקרי בפינה השמאלית העליונה בכרטיס בולט - קבץ מדדים קשורים לרשת 2x2 של כרטיסים - העבר מסננים ובקרות טווח תאריכים לסרגל עליון נקי - הפחת רעש ויזואלי בתרשימים באמצעות צבעים וסגנונות עקביים ``` רשימות וטבלאות מאפשרות לאנשים לסרוק פריטים רבים ולפעול עליהם. טיפים לעיצוב: * השתמש בכותרות עמודות ברורות עם מספיק ריווח. * שמור על גובה שורה נוח, לא צפוף מדי. * השתמש בפסי זברה או במפרידי שורות עדינים לטבלאות גדולות. * שמור על פעולות בסוף השורה או בתפריט עקבי. * הוסף מצבי ריק, טעינה ושגיאה. פרומפט לדוגמה: ```text theme={null} נקה את תצוגת הטבלה הזו: - הגדל מעט את גובה השורות - השתמש במפרידי שורות עדינים או בפסי זברה - יישר פעולות בעמודה עקבית בסוף - הוסף מצב ריק ברור עם הודעה קצרה ופעולה ראשית ``` דפי פירוט צריכים להפוך את האובייקט העיקרי ואת הפעולות המרכזיות שלו לברורים. טיפים לעיצוב: * מקם את כותרת האובייקט והפעולות הראשיות קרוב לחלק העליון. * השתמש בפריסה ברורה עם עמודת תוכן ראשית אחת ופאנל צדדי אופציונלי. * קבץ מידע קשור עם כותרות או לשוניות. * שמור על פעולות הרסניות מובחנות ויזואלית וממוקמות בזהירות. פרומפט לדוגמה: ```text theme={null} שפר את דף הפירוט הזה: - העבר את הכותרת הראשית והפעולות הראשיות לראש הדף - השתמש בפריסת שתי עמודות עם תוכן ראשי משמאל ומידע משני מימין - קבץ שדות קשורים תחת כותרות קטנות - ודא שפעולות הרסניות מסומנות בבירור ומובחנות ויזואלית ``` טפסים הם המקום שבו מתרחשים תהליכים מרכזיים רבים. הם צריכים להרגיש פשוטים וסלחניים. טיפים לעיצוב: * קבץ שדות קשורים תחת כותרות. * השתמש בפריסת עמודה אחת ברוב הטפסים. * הצג התקדמות בתהליכים ארוכים מרובי שלבים. * מקם הודעות שגיאה ליד השדות והפוך אותן לברורות. * השתמש בתוויות ברורות ובטקסט עזר. פרומפט לדוגמה: ```text theme={null} עצב מחדש את הטופס הזה לבהירות: - השתמש בפריסת עמודה אחת - קבץ שדות קשורים תחת כותרות קצרות - הוסף תוויות ברורות וטקסט עזר היכן שצריך - הצג הודעות שגיאה בשורה מתחת לכל שדה כשהאימות נכשל השתמש במערכת הטיפוגרפיה והריווח הקיימת שלי. ``` *** ## התאמה אישית מתקדמת כשאתה רוצה ללכת מעבר למה ש-AI ומצב **Edit** נותנים לך מהקופסה, תוכל להביא קוד משלך וחבילות npm. AI עדיין יכול לעזור לך לחבר וליישר הכל. תוכל להשתמש ב[חבילות npm](/Building-your-app/NPM-packages) כדי להביא לאפליקציית Base44 שלך תנועה עשירה יותר, אפקטים ויזואליים ורכיבים אינטראקטיביים, בלי לבנות הכל מאפס. חבילות מגיעות מרישום ה-npm הציבורי ומותקנות דרך צ'אט ה-AI בעורך האפליקציה שלך, כך שאתה נשאר באותו זרם עבודה. **דוגמאות ממוקדות עיצוב כוללות:** * ספריות אנימציה (לדוגמה anime.js) להוספת מעברים, אפקטי hover ומיקרו-אינטראקציות. * ספריות רכיבי UI או תנועה לטיפול במודאלים, tooltips, קרוסלות או תהליכי שלבים עם דפוסי אינטראקציה מובנים. * כלי תרשימים וגרפים להמחשת נתונים עם צבעים, טיפוגרפיה וריווח מותאמים שמתאימים לאפליקציה שלך. * ספריות גרירה ושחרור או מחוות, כדי שהפריסות ירגישו מוחשיות ואינטראקטיביות יותר. * כלי עזר לתאריך ושעה לעיצוב חותמות זמן ולוחות זמנים בצורה שמתאימה לממשק שלך. **אחרי שחבילה מותקנת, תוכל להשתמש בצ'אט ה-AI כדי:** * לייבא את הפונקציות או הרכיבים הנכונים מהחבילה. * לחבר אותם לפריסה ולאסימוני העיצוב הקיימים שלך (צבעים, טיפוגרפיה, ריווח, רדיוס). * להתאים props, וריאנטים ותנועה כך שירגישו עקביים עם שאר האפליקציה. * לבדוק פרטי נגישות כמו מצבי פוקוס, ניווט מקלדת והעדפות תנועה מופחתת. **פרומפט לדוגמה** ```text theme={null} הוספתי את חבילת ה-npm בשם framer-motion. שכתב את רשת הכרטיסים הקיימת כך שכל כרטיס יונפש במעבר עכבר באמצעות framer-motion: - שמור על הפריסה והטקסט הנוכחיים - השתמש באסימוני הצבע, רדיוס הגבול והטיפוגרפיה הקיימים - כבד prefers-reduced-motion ושמור על קווי מתאר ברורים לפוקוס מקלדת ``` כל חבילות ה-npm הן קוד של צד שלישי. Base44 לא יכולה להבטיח את האיכות או האבטחה שלהן, לכן הקפד לעיין ב-README של החבילה, לבדוק אותה באפליקציה שלך ולוודא שהיא עומדת בדרישות העיצוב והביצועים של הפרויקט שלך. אפליקציות Base44 משתמשות לעתים קרובות בכלי העזר של Tailwind CSS. AI יכול לעזור לך לשכתב סגנונות מבולגנים למשהו שיטתי יותר. משימות שתוכל לבקש מ-AI לבצע: * החלפת סגנונות inline בכלי עזר של Tailwind. * חילוץ דפוסים חוזרים לרכיבים לשימוש חוזר. * מיפוי ערכי צבע לאסימוני עיצוב ולתצורת Tailwind. דוגמה: ```text theme={null} שכתב את הרכיבים האלה לשימוש במחלקות Tailwind עקביות: - החלף מאפייני style בשורה בכלי עזר של Tailwind - השתמש באסימוני העיצוב לצבעים, ריווח וטיפוגרפיה - תעד את שילובי המחלקות העיקריים לניווט, כרטיסים וכפתורים ``` לפעמים אתה רוצה שליטה מדויקת בפריסה, באנימציה או במבנה רכיבים. תוכל [לפתוח קובצי קוד](/documentation/building-your-app/editing-code) ישירות ולערוך אותם בעצמך או לבקש מ-AI לעשות זאת. עריכות עיצוב נפוצות: * עדכון `Layout.js` לשינוי עטיפות גלובליות, כותרות עליונות או תחתונות. * התאמת theme providers או context. * שינוי אופן הרכבת הרכיבים ואילו props הם מקבלים. כדי לערוך את הקוד: 1. פתח את הקובץ הרלוונטי. 2. הדבק קטע קוד בצ'אט ה-AI. 3. בקש שינוי, ואז עבור על ה-diff או על התצוגה המקדימה. דוגמה: ```text theme={null} הנה רכיב ה-Layout.js שלי. התאם אותו כך: - הכותרת העליונה תישאר דביקה בגלילה - לתוכן הראשי יהיה רוחב מרבי והוא ימורכז במסכים גדולים - צבע הרקע ישתמש באסימון ה-surface ממערכת העיצוב שלי הסבר בהערות מה שינית. ``` בחירות עיצוב משפיעות על [ביצועים](/Performance-and-SEO/App-performance), במיוחד כשאתה מוסיף חבילות וויזואליה כבדה. זכור: * השתמש בגודלי תמונה מותאמים במקום בנכסי רקע ענקיים. * הימנע מטעינת אנימציות כבדות רבות או ספריות גדולות בטעינה הראשונית. * טען באיחור מקטעים בשימוש נדיר, כמו דוחות עמוקים או מסננים מתקדמים. * השתמש שוב ברכיבים משותפים במקום בהרבה עותקים כמעט זהים. תוכל לבקש מ-AI סקירה ממוקדת ביצועים: ```text theme={null} סקור את עיצוב האפליקציה הזו מנקודת מבט של ביצועים: - זהה אלמנטים ויזואליים או קוד כבדים שעלולים להאט את הטעינה - הצע חלופות קלות יותר ששומרות על אותו מראה כללי - הצע מקומות ספציפיים שבהם טעינה באיחור או פיצול קוד יעזרו ``` *** ## נגישות נגישות היא חלק מעיצוב טוב. היא עוזרת ליותר אנשים להשתמש באפליקציה שלך בנוחות ויכולה לשפר את הבהירות לכולם. לבחירות צבע יש השפעה ישירה על הקריאות. שיטות מומלצות: * השתמש בניגודיות חזקה בין טקסט לרקע. * הימנע משימוש בצבע בלבד להעברת משמעות. * שמור על אלמנטים אינטראקטיביים כמו כפתורים וקישורים גלויים בבירור בכל המצבים. * בדוק גם מצב בהיר וגם מצב כהה אם אתה תומך בערכות נושא. פרומפט לדוגמה: ```text theme={null} בדוק את האפליקציה הזו מבחינת ניגודיות צבעים: - זהה טקסט או אייקונים עם ניגודיות נמוכה מול הרקע שלהם - חזק את הניגודיות תוך שמירה על אותה פלטה כללית - ודא שכפתורים ראשיים וקישורים ניתנים להבחנה בבירור תאר את התיקונים העיקריים שהחלת. ``` טקסט קריא הוא יותר מבחירת גופן. שיטות מומלצות: * השתמש בגודלי גופן נוחים בכל המכשירים. * השתמש בגובה שורה מספיק בפסקאות. * הימנע מגופנים במשקל קל מאוד על רקעים בהירים. * שמור על אורך שורה סביר, במיוחד במסכים רחבים. פרומפט לדוגמה: ```text theme={null} שפר את קריאות הטקסט: - הגדל מעט את גודל גופן הגוף הבסיסי - הגדל את גובה השורה בפסקאות - ודא שכותרות גדולות בבירור מטקסט הגוף - צמצם אורכי שורה ארוכים מאוד במסכים רחבים ``` אנשים צריכים להיות מסוגלים להשתמש באפליקציה שלך עם מקלדת ולראות איפה הם נמצאים. שיטות מומלצות: * ודא ש-Tab עובר בין אלמנטים אינטראקטיביים בסדר הגיוני. * ודא שסגנונות פוקוס גלויים ומובחנים. * הימנע ממלכודות מקלדת שבהן הפוקוס לא יכול לזוז הלאה. פרומפט לדוגמה: ```text theme={null} שפר את נגישות המקלדת והפוקוס: - ודא שאפשר להגיע לכל האלמנטים האינטראקטיביים עם Tab - הוסף סגנונות פוקוס גלויים לכפתורים, קישורים ושדות טופס - תקן בעיות בסדר הפוקוס בדף הזה תאר שינויים משמעותיים שביצעת. ``` תנועה יכולה לעזור או להזיק. יש אנשים שמעדיפים פחות ממנה. שיטות מומלצות: * כבד העדפות תנועה מופחתת. * הימנע מהבהובים מהירים או מריצוד חזק. * השתמש באנימציות עדינות ומכוונות במקום בתנועה מתמדת. פרומפט לדוגמה: ```text theme={null} התאם אנימציות לנגישות: - כבד את העדפת התנועה המופחתת של המשתמש - הסר או פשט אנימציות רציפות גדולות - השאר רק תנועה קצרה ועדינה שעוזרת להבנה ``` שפה ברורה ותיאורים ברורים עוזרים לכולם, כולל אנשים שמשתמשים בטכנולוגיה מסייעת. שיטות מומלצות: * השתמש בתוויות ברורות ומתארות לכפתורים ולקישורים. * ספק טקסט חלופי משמעותי לתמונות חשובות. * השתמש בכותרות למבנה התוכן. * הימנע מטקסט קישור מעורפל כמו "לחץ כאן". פרומפט לדוגמה: ```text theme={null} שפר את נגישות התוויות והטקסט החלופי: - הפוך תוויות כפתורים וקישורים למתארות יותר היכן שצריך - הוסף או שפר טקסט חלופי לתמונות חשובות - ודא שהכותרות עוקבות אחרי מבנה ברור שמור על אותו טון וקול מותג. ``` *** ## שאלות נפוצות לחץ על שאלה למטה כדי ללמוד עוד על יסודות עיצוב ופריסה. עצב למובייל, לטאבלט ולמחשב בנפרד, ואז בדוק איך הפריסות שלך מסתגלות. השתמש בהנחיות האלה כשאתה מעצב ב-Base44: * מובייל: השתמש בעמודה אנכית אחת, שמור על פעולה ראשית ברורה אחת בכל מסך והפוך אזורי הקשה לגדולים עם מספיק ריווח. שמור על טקסט קצר כדי שאנשים לא יצטרכו להגדיל את התצוגה. * טאבלט: התייחס לטאבלט כאל מכשיר היברידי. תוכל להשתמש בתפריטי צד או בפריסות מפוצלות, אבל שמור על כפתורים ידידותיים למגע והימנע מטבלאות קטנות מאוד או מבקרות צפופות. * מחשב: נצל את הרוחב הנוסף לפריסות מרובות עמודות ולסרגלים צדדיים. תוכל להוסיף אפקטי מעבר עכבר, אבל כל פעולה חשובה חייבת לעבוד גם בלחיצה או בהקשה. * כל המכשירים: השתמש בגודלי גופן קריאים, הימנע מגלילה אופקית ותן לאלמנטים להיערם במקום לחפוף כשהמקום צפוף. הימנע מגבהים קבועים שחותכים תוכן. תוכל גם לבקש מ-AI להחיל כללי רספונסיביות, לדוגמה: ```text theme={null} הפוך את הפריסה הזו לרספונסיבית למובייל, טאבלט ומחשב. הימנע מגלילה אופקית ושמור על פעולות ראשיות גלויות בלי גלילה מוגזמת. ``` לבחירות עיצוב יש השפעה ישירה על מהירות הטעינה והתחושה של האפליקציה שלך. כשאתה מעצב ב-Base44, זכור את ההנחיות האלה: * השתמש בגודלי תמונה מותאמים כדי שנכסים גדולים לא יאטו את הטעינה הראשונית. העדף פורמטים דחוסים והימנע מהעלאת תמונות גדולות בהרבה מהגודל שבו הן מוצגות על המסך. * הגבל אנימציות כבדות ואפקטים מורכבים, במיוחד באפליקציות עתירות מובייל. מעברים קצרים ופשוטים בסדר, אבל הימנע מתנועה מתמדת או מרקעים מונפשים גדולים. * שמור על פריסות נקיות וממוקדות. פחות שכבות, שכבות-על ורכיבים מקוננים משמעם בדרך כלל רינדור מהיר יותר, במיוחד במכשירים חלשים. * השתמש שוב ברכיבים במקום ליצור גרסאות רבות שונות מעט. רכיבים משותפים קלים יותר לשמירה במטמון ולתחזוקה. * הימנע מטעינת הכל בבת אחת. היכן שאפשר, טען תוכן לא קריטי מאוחר יותר, לדוגמה מקטעים משניים, רשימות ארוכות או פאנלים בשימוש נדיר. * היזהר עם הטמעות של צד שלישי כמו מפות, נגני וידאו ווידג'טים. כלול אותן רק במקומות שבהם הן מוסיפות ערך אמיתי, והימנע מערימת הטמעות רבות על מסך אחד. דף זה תורגם באמצעות AI. למידע המדויק והעדכני ביותר, עיין ב[גרסה האנגלית](/).