איך להוסיף גרפיקה בתנועה לסרטון
איך להוסיף גרפיקה בתנועה לסרטון כדי להסביר יותר: 8 אלמנטים גרפיים שמוכיחים את עצמם, חוקי תזמון, רשימת שוטים ל-60 שניות ו-3 דרכים ליצור אותם.
Roozbeh Firoozmand10 דקות קריאה
רוב סרטוני המוצר לא צריכים יותר תנועה. הם צריכים שהעין של הצופה תהיה במקום הנכון בשנייה הנכונה. כשמוסיפים גרפיקה בתנועה לסרטון, כל אלמנט צריך לבצע אחת משתי משימות: להראות לאן להסתכל, או להסביר מה משהו אומר. כל דבר אחר הוא קישוט, ובהקלטת מסך קישוט מתחרה בממשק שאתם מלמדים.
למטה: 8 אלמנטים גרפיים שעושים את העבודה, חוקי תזמון לכל אחד, רשימת שוטים לפני/אחרי למדריך של 60 שניות, ו-3 דרכים ליצור אותם.
המבחן שכל אלמנט גרפי חייב לעבור
הפעילו את הקליפ עם הגרפיקה ובלעדיה. האם הצופה מוצא את הכפתור או המספר הנכון מהר יותר איתה? אם התשובה הכנה היא "זה נראה יפה יותר", ותרו עליה. 2 בדיקות נוספות יתפסו את רוב העומס המיותר:
- אלמנט גרפי אחד בתנועה בכל פעם. השהו את הכניסות בחצי שנייה לפחות, אחרת הצופה לא יקלוט אף אחד מהם.
- הגרפיקה מגיעה עם הקריינות. אם הקריינות אומרת "לחצו על ייצוא" והדגשה מופיעה 2 שניות מאוחר יותר, הצופה כבר מחפש בעצמו. הביאו אותה בדיוק במילה, או כמה פריימים לפני.
8 אלמנטים גרפיים שמוכיחים את עצמם בהקלטת מסך
| גרפיקה | תפקיד | כלל אצבע |
|---|---|---|
| תווית (Callout) | נותנת שם לאלמנט על המסך | 2 עד 6 מילים, על המסך לפחות פי 2 מזמן הקריאה |
| זום + הדגשה | מראה איפה הפעולה מתרחשת | זום לפני הלחיצה, החזקה של 1 עד 2 שניות אחרי שהיא מסתיימת |
| מונה שלבים | אומר לצופים איפה הם נמצאים | אותה פינה, אותו סגנון, בכל שלב |
| כתובית תחתונה (Lower third) | נותנת שם לאדם או לחלק | שליש תחתון, רחוק מהממשק שאתם מדגימים |
| כרטיס כותרת | מפריד בין פרקים | 2 עד 3 שניות, שורת טקסט אחת |
| חץ מונפש | מצביע על משהו שזום לא יכול לבודד | שרטוט ואז עצירה |
| מונה נתונים | גורם למספר לבלוט | ספירה למעלה בשנייה אחת, ואז החזקת הערך הסופי |
| מעבר | מסמן שינוי סצנה או נושא | סגנון אחד לכל סרטון, פחות מחצי שנייה |
תוויות (Callouts)
תווית צריכה לתת שם לפקד או לציין את התוצאה: "הגדרות חיוב" או "חשבונית נשלחה". הגבילו ל-6 מילים. הנחיות הכתוביות של ה-BBC ממליצות על מינימום של כ-0.3 שניות למילה עבור כתוביות. בהקלטת מסך הצופה גם סורק את הממשק, אז תכפילו את זה: תווית של 4 מילים צריכה כ-2.5 שניות, לא 1.2.
זום + הדגשה
הגרפיקה השימושית ביותר בהקלטת מסך, וגם זו שמשתמשים בה יותר מדי. בצעו זום 0.5 שניות לפני הלחיצה, החזיקו בזמן שהתוצאה מופיעה, ואז בצעו זום אאוט כדי שהצופה יראה איפה הוא נמצא. הדגשה (תיבה רכה או עמעום של הרקע) עושה את אותה עבודה בלי להזיז את הפריים, מה שמתאים ללוחות בקרה צפופים שבהם זום מסתיר הקשר. השתמשו באחת מהן לכל פעולה.
מוני שלבים
"שלב 3 מתוך 5" בפינה קבועה אומר לצופה כמה נשאר. שמרו על המיקום והסגנון קבועים ושנו רק את המספר. מתחת ל-3 שלבים, דלגו על זה.
כתוביות תחתונות (Lower thirds)
בסרטון מוצר, כתוביות תחתונות נותנות שם למציג בבועת מצלמה או מתייגות חלק ("תצוגת מנהל"). שימו לב למיקום: החלק התחתון של רוב אפליקציות הווב מכיל סרגלי שמירה ווידג'טים של צ'אט.
כרטיסי כותרת
השתמשו בהם בין פרקים, לא בכל שלב. סרטון של 60 שניות צריך אחד, בהתחלה. כרטיס כותרת שדורש זמן קריאה הוא פסקה שמתחזה לגרפיקה.
חצים מונפשים
חץ מנצח זום כששני דברים על המסך קשורים, כמו "המתג הזה משנה את התצוגה המקדימה ההיא". תנו לו להופיע בערך ב-0.3 שניות, ואז לעצור. חץ מקפץ מושך תשומת לב כל עוד הוא מקפץ.
מוני נתונים
ספירה עד "1,240 כרטיסים" נותנת משקל לנתון בהדגמה או בקליפ השקה. זה כמעט אף פעם לא מתאים למדריך. הנפישו מהר והחזיקו את המספר הסופי, אחרת התנועה היא כל מה שהצופה יזכור.
מעברים
השתמשו בסגנון אחד לכל סרטון, רק כשהסצנה או הנושא משתנים. בין שני שלבים על אותו מסך, חיתוך הוא בדרך כלל הכי טוב. דלגו על אפקטים של הבזק: קריטריון ההצלחה של WCAG על 3 הבזקים ומטה קיים כי תוכן מהבהב עלול לעורר התקפים ומיגרנות.
חוקים ששומרים על עקביות בשכבות מונפשות
שכבות מונפשות נראות מקצועיות כשהן נראות כמו מערכת:
1. סגנון תנועה אחד. אותו easing, אותו כיוון כניסה, אותו משך לכל תווית. אם תוויות מחליקות פנימה משמאל בשלב 1, הן יחליקו פנימה משמאל בשלב 5. 2. תבניות מותג, מוכנות מראש. גופנים, צבעים, חשיפת לוגו ופריסת כרטיס כותרת שייכים לתבנית שמורה, לא לבנייה מחדש בכל סרטון. כל כלי למטה תומך בזה בצורה כלשהי. 3. אזור בטוח. הרחיקו טקסט מקצוות הפריים ומפקדי הממשק שאתם מציגים. סמנו את האזור הבטוח בתבנית שלכם. 4. גרפיקה עוקבת אחרי התסריט. כתבו את הקריינות קודם, ואז סמנו את המילה שעליה נשענת כל גרפיקה. אין מילה, אין גרפיקה.
לפני ואחרי: רשימת שוטים למדריך של 60 שניות
מדריך של 60 שניות על "שלח את החשבונית הראשונה שלך" באפליקציית חיוב SaaS טיפוסית. "לפני" הוא ההקלטה הגולמית עם הקריינות.
| זמן | לפני (הקלטה גולמית) | אחרי (עם גרפיקה בתנועה) |
|---|---|---|
| 0:00–0:03 | לוח בקרה, סמן זז | כרטיס כותרת: "שלח את החשבונית הראשונה שלך" עם חשיפת לוגו, 3 שניות |
| 0:03–0:10 | קריין מסביר את המטרה מעל לוח הבקרה | מונה שלבים מופיע ("שלב 1 מתוך 4"); הדגשה על לשונית חשבוניות כשהקריין מציין אותה |
| 0:10–0:18 | לחיצה על חשבוניות, דף נטען | זום על כפתור חשבונית חדשה 0.5 שניות לפני הלחיצה; תווית "חשבונית חדשה" |
| 0:18–0:32 | הקלדת לקוח, פריטים, סכום | שלב 2 מתוך 4; זום אאוט להצגת הטופס המלא; טשטוש על אימייל הלקוח האמיתי |
| 0:32–0:40 | גלילה לתאריך יעד | שלב 3 מתוך 4; חץ משדה תאריך היעד לתצוגה המקדימה של תנאי התשלום |
| 0:40–0:50 | לחיצה על שלח, הודעת אישור | שלב 4 מתוך 4; זום על ההודעה; תווית "חשבונית נשלחה", מוחזקת 2.5 שניות |
| 0:50–0:57 | קריין מזכיר תזכורות | מעבר החלקה למסך תזכורות; הדגשה על המתג |
| 0:57–1:00 | סרטון מסתיים בלוח הבקרה | כרטיס סיום עם כותרת הסרטון הבא, אותה תבנית כמו בפתיחה |
אלו 16 אירועים גרפיים ב-60 שניות. זה עובד כי הכניסות מדורגות וכל אחת נשענת על מילה בתסריט. הטשטוש הוא לפרטיות, וזו הגרפיקה היחידה שלעולם לא מדלגים עליה בנתוני לקוחות אמיתיים.
3 דרכים להוסיף גרפיקה בתנועה לסרטון
1. עורך מסורתי: Premiere, After Effects או DaVinci Resolve
Adobe Premiere עם After Effects. תבניות גרפיקה בתנועה (קבצי .mogrt) נבנות ב-After Effects ונעשה בהן שימוש חוזר ב-Premiere. לפי דף העזרה של Adobe, גוררים תבנית מחלונית תבניות הגרפיקה אל ערוץ וידאו, ואז משנים אותה בלשונית העריכה של חלונית המאפיינים. תבניות מבוססות נתונים ממלאות תרשימי עמודות וגרפים מנתוני גיליון אלקטרוני, שזו הדרך הנקייה ביותר למוני נתונים ותרשימים מדויקים.
DaVinci Resolve. ה-Fusion page הוא כלי קומפוזיציה מבוסס צמתים (nodes) בתוך Resolve, עם מעל 200 כלים. ניתן לבנות ב-Fusion כתוביות תחתונות (lower thirds), רקעים מונפשים ומעברים, לשמור אותם כמאקרו ולהציג רק את הפקדים שעורך אמור לגעת בהם. לאחר מכן הם יופיעו בספריית האפקטים של דף העריכה בכל פרויקט. Resolve זמין להורדה בחינם; Resolve Studio מתומחר ב-$295.
הכי מתאים ל: צוותים עם מעצב תנועה שבנה תבניות פעם אחת, ועורכים שמשתמשים בהן שוב ושוב. הפשרה: זומים והדגשות (callouts) על הקלטת מסך דורשים יצירת keyframes ידנית, בכל פעם מחדש.
2. עורך מבוסס תבניות: Canva או CapCut
Canva מאפשרת לכם להנפיש דפים, אלמנטים וטקסט מכפתור ה-Animate, עם הגדרות קבועות מראש של איטי, בינוני או מהיר, או משך זמן מדויק לכניסה ויציאה. "Show element timing" מאפשר לקבוע מתי כל אלמנט יופיע, ו-"Create an Animation" מאפשר לגרור אלמנט לאורך מסלול תנועה. Brand Kits שומרים לוגואים, צבעים וגופנים כך שהתבניות יישארו תואמות למותג.
ל-CapCut יש ספרייה של תבניות טקסט והנפשות טקסט, ובגרסת הדסקטופ ניתן להגדיר keyframes למיקום, קנה מידה, סיבוב ושקיפות. כך בונים זום ידני או הדגשה מחליקה.
הכי מתאים ל: משווקים שכבר עובדים בכלים אלו וזקוקים לטקסט מונפש על גבי קטעים קצרים. הפשרה: אף אחד מהם לא בנוי סביב הקלטות מסך, לכן זומים שעוקבים אחרי לחיצות, ניקוי סמן וטשטוש פרטיות הם עבודה ידנית.
3. Clevera: שכבות על ציר זמן, או תיאור במילים פשוטות
Clevera מתחילה מההקלטה. עבור סרטוני הדרכה עם קריינות AI והדגמות מוצר, היא מחליקה את תנועת הסמן, מדגישה אינטראקציות מפתח ומחילה זום חכם בזמן שהיא כותבת ומסנכרנת את הקריינות. רוב עבודת הזום וההדגשה ברשימת הצילומים למעלה מתבצעת לפני שפותחים את העורך.
בעורך ציר הזמן, אתם מוסיפים או מכווננים את השאר: טקסט, תמונה, טשטוש ושכבות הדגשה, כרטיסי כותרת, כרטיסי פתיחה, חשיפת לוגו, זומים ומעברים כמו zoom cross, staircase, blinds, dissolve, soft wipe ו-slide. כרטיסי כותרת, חשיפת לוגו וסגנון וידאו נשמרים כתבניות מוכנות או מותאמות אישית, כך שהסרטון השני ייראה כמו הראשון. אם אתם רוצים רק שההקלטה שלכם תעוצב עם זומים, שכבות וכרטיסי כותרת, האפשרות המעוצבת (לשיתוף) אינה משתמשת בקרדיטים של AI, לכן היא ללא הגבלה בכל תוכנית, כולל Free (ב-Free משתפים באמצעות קישור או הטמעה; הורדות MP4 כלולות ב-Starter ו-Pro).
עבור גרפיקה מחוץ לרשימה זו, השתמשו ב-Describe what you want ב-מחולל גרפיקת התנועה מבוסס ה-AI. אתם כותבים תיאור חופשי, כמו "הוסף מונה מונפש מ-0 ל-1,240 ב-0:45 וחץ משדה תאריך היעד לתצוגה המקדימה של התנאים", ו-Clevera בונה גרפיקה מונפשת על גבי הסרטון הקיים. רשימת השכבות של העורך לא כוללת חץ או מונה ייעודיים, לכן זו הדרך עבורם.
עריכות לטקסט, הדגשות וטשטושים בסרטון Clevera שפורסם מתעדכנות בכל קישור מאוחסן והטמעה, כך שתווית כפתור ששונתה מתוקנת פעם אחת. ממשק משתמש חדש עדיין דורש צילומים חדשים.
הכי מתאים ל: צוותי מוצר, תמיכה ושיווק שמייצרים מדריכים מדי שבוע ללא עורך. הפשרה: ה-מקליט ה-AI לוכד רק אתרי https ציבוריים ואפליקציות ווב, לכן צילומי תוכנות דסקטופ ורשתות פנים-ארגוניות מגיעים מאפליקציית הדסקטופ או מהעלאה. ראו את הסעיף הבא עבור משימות שהוא לא אמור לבצע.
מה Clevera הוסיפה בעצמה, ומה לא
באוקטובר 2026 השתמשנו במקליט ה-AI של Clevera כדי ללכוד משימה קצרה באפליקציית הדגמה, 0:58 של צילום גולמי, והפכנו אותו לסרטון הדרכה. כ-50 שניות ו-9 קרדיטים לאחר מכן, ציר הזמן כבר הכיל כרטיס פתיחה, חשיפת לוגו וזומים אוטומטיים ב-1.5x ו-1.8x, מקוצר ל-0:40. אלו שורות כרטיס הכותרת והזום ברשימת הצילומים. הדגשות, מונה צעדים וחצים לא היו שם; אלו דברים שאתם צריכים להוסיף.
לאחר מכן הרצנו את ה-Styled for sharing על אותה הקלטה עם תבנית הצוות שלנו במקום ברירת המחדל המובנית. זה לקח כ-25 שניות ו-0 קרדיטים. הפלט נמשך 1:07, ארוך יותר מהמקור בגלל כרטיס הפתיחה, עם 2 זומים אוטומטיים ב-1.8x והעורך פתוח על לוח הסגנון עבור רקע, ריווח, פינות וסמן. הדף המוקלט עצמו נראה דהוי ובעל ניגודיות נמוכה; לוח הסגנון ממסגר את הצילומים, הוא לא מתקן אותם.
גרסת ה-1:07 המעוצבת לשיתוף של אותה הקלטה, ללא עריכה, 0 קרדיטים.
עבור מסלול התיאור, תיאור מותאם אישית בנה אינפוגרפיקה מונפשת באורך 1:00 עם סרגל מתמלא תוך כ-7 עד 8 דקות עבור 86 קרדיטים. המספרים היו נכונים, אך הוא התעלם מ-15 השניות שנכתבו בתיאור (אורך נקבע בתפריט הפורמט) ושורת המקור יצאה קטנה מדי עבור טלפון. הקליפ הזה נבנה מאפס. טרם בדקנו גרפיקה בשכבות על גבי הקלטה קיימת.
האינפוגרפיקה המונפשת באורך 1:00 ש-Clevera החזירה מהתיאור, ללא עריכה.
מתי כדאי לשלם למעצב תנועה
עורכי AI ותבניות מכסים את הגרפיקה במדריך זה. הם לא מחליפים מעצב תנועה עבור:
- סרטון השקה או סרט מותג שבו כל פריים מבוים אמנותית והתנועה עצמה היא המסר.
- גרפיקה עוקבת על צילומים בתנועה, כמו תווית שעוקבת אחרי טלפון בצילום ידני.
- תלת-ממד, הנפשת דמויות או איור מותאם אישית בתנועה.
- מערכת התבניות שלכם. שבוע עבודה של מעצב על בניית כתוביות תחתונות, כרטיסי כותרת וחשיפת לוגו ב-After Effects או Fusion משתלם בכל סרטון שהצוות שלכם יכין לאחר מכן, בכל כלי שמקבל תבניות.
החלוקה הרגילה: מעצב למערכת ולהשקה המרכזית, כלי AI או עורך תבניות למדריכים השבועיים.
התחילו עם הזום
אם אתם מוסיפים דבר אחד להקלטת המסך הבאה שלכם, הפכו אותו לזום שנוחת חצי שנייה לפני הלחיצה. זה פותר את התלונה הנפוצה ביותר על סרטוני מוצר, "לא הצלחתי לראות על מה לחצת", וכל גרפיקה אחרת במדריך זה נבנית על ההרגל הזה של הפניית עין הצופה למקום שבו הקריינות מצביעה.
