كيفية إضافة رسوم متحركة إلى الفيديو
كيفية إضافة رسوم متحركة إلى الفيديو لتعزيز الشرح: 8 رسومات ضرورية، قواعد التوقيت، قائمة لقطات لمدة 60 ثانية، و3 طرق لتنفيذها.
Roozbeh Firoozmandقراءة لمدة 11 دقيقة
معظم فيديوهات المنتجات لا تحتاج إلى المزيد من الحركة، بل تحتاج إلى توجيه عين المشاهد إلى المكان الصحيح في اللحظة المناسبة. عند إضافة رسوم متحركة إلى الفيديو، يجب أن تؤدي كل واحدة منها وظيفة من اثنتين: إظهار مكان النظر، أو توضيح معنى شيء ما. أي شيء آخر يعتبر مجرد زينة، وفي تسجيلات الشاشة، تتنافس الزينة مع واجهة المستخدم التي تشرحها.
في الأسفل: 8 رسومات فعالة، قواعد التوقيت لكل منها، قائمة لقطات (قبل/بعد) لجولة تعريفية مدتها 60 ثانية، و3 طرق لتنفيذها.
الاختبار الذي يجب أن تجتازه كل رسومية
شغّل المقطع مع الرسومية وبدونها. هل يجد المشاهد الزر أو الرقم الصحيح بشكل أسرع مع وجودها؟ إذا كانت الإجابة الصادقة هي "تبدو أجمل"، فاحذفها. هناك فحصان إضافيان يكشفان معظم الفوضى:
- رسومية واحدة تتحرك في كل مرة. باعد بين ظهور العناصر بنصف ثانية على الأقل، وإلا فلن يتمكن المشاهد من قراءة أي منها.
- تزامن الرسومية مع التعليق الصوتي. إذا قال المعلق "انقر على تصدير" وظهر التحديد بعد ثانيتين، فسيكون المشاهد قد بدأ بالبحث بالفعل. اجعل الرسومية تظهر مع الكلمة، أو قبلها ببضع إطارات.
8 رسومات تثبت جدارتها في تسجيلات الشاشة
| الرسومية | الوظيفة | القاعدة العامة |
|---|---|---|
| وسيلة إيضاح (نص) | تسمية العنصر على الشاشة | من 2 إلى 6 كلمات، تظهر لمدة تعادل ضعف وقت القراءة على الأقل |
| تكبير + تمييز | إظهار مكان الإجراء | التكبير قبل النقر، والثبات لمدة 1 إلى 2 ثانية بعده |
| عداد الخطوات | إخبار المشاهدين بمكانهم | نفس الزاوية، نفس النمط، في كل خطوة |
| شريط سفلي | تسمية شخص أو قسم | الثلث السفلي، بعيداً عن واجهة المستخدم التي تشرحها |
| بطاقة العنوان | فصل الفصول | من 2 إلى 3 ثوانٍ، سطر نصي واحد |
| سهم متحرك | الإشارة لشيء لا يمكن عزله بالتكبير | يظهر بالرسم، ثم يثبت |
| عداد البيانات | إبراز قيمة رقمية | العد التصاعدي في ثانية واحدة تقريباً، ثم الثبات على القيمة النهائية |
| انتقال | تمييز تغيير المشهد أو الموضوع | نمط واحد لكل فيديو، أقل من نصف ثانية |
وسائل الإيضاح
يجب أن تسمي وسيلة الإيضاح عنصر التحكم أو توضح النتيجة: "إعدادات الفوترة" أو "تم إرسال الفاتورة". التزم بحد أقصى 6 كلمات. توصي إرشادات الترجمة في BBC بـ حد أدنى يبلغ حوالي 0.3 ثانية لكل كلمة للترجمة النصية. في تسجيل الشاشة، يقوم المشاهد أيضاً بمسح الواجهة بصرياً، لذا ضاعف هذه المدة: وسيلة إيضاح من 4 كلمات تحتاج إلى حوالي 2.5 ثانية، وليس 1.2.
التكبير + التمييز
أكثر الرسوم المتحركة فائدة في تسجيل الشاشة، وأكثرها استخداماً بشكل مفرط. قم بالتكبير قبل النقر بـ 0.5 ثانية، واثبت أثناء ظهور النتيجة، ثم صغّر الشاشة ليعرف المشاهد مكانه. التمييز (مربع ناعم أو تعتيم الخلفية) يؤدي نفس الوظيفة دون تحريك الإطار، وهو مناسب للوحات التحكم المزدحمة حيث يخفي التكبير السياق. استخدم أحدهما فقط لكل إجراء.
عدادات الخطوات
"الخطوة 3 من 5" في زاوية ثابتة تخبر المشاهد بما تبقى. حافظ على ثبات الموقع والنمط وقم بتغيير الرقم فقط. إذا كانت الخطوات أقل من 3، فتجاهل العداد.
الأشرطة السفلية
في فيديوهات المنتجات، تسمي الأشرطة السفلية مقدم العرض في فقاعة الكاميرا أو تضع تسمية لقسم معين ("عرض المسؤول"). راقب مكان وضعها: أسفل معظم تطبيقات الويب يحتوي على أشرطة الحفظ وأدوات الدردشة.
بطاقات العنوان
استخدمها بين الفصول، وليس عند كل خطوة. الفيديو الذي مدته 60 ثانية يحتاج إلى واحدة فقط في البداية. بطاقة العنوان التي تتطلب وقتاً طويلاً للقراءة هي مجرد فقرة تتظاهر بأنها رسومية.
الأسهم المتحركة
يتفوق السهم على التكبير عندما يكون هناك ارتباط بين عنصرين على الشاشة، مثل "هذا الزر يغير تلك المعاينة". اجعله يظهر بالرسم في حوالي 0.3 ثانية، ثم يتوقف. السهم الذي يقفز يشتت الانتباه طالما استمر في القفز.
عدادات البيانات
العد التصاعدي حتى "1,240 تذكرة" يضفي وزناً على الإحصائيات في عرض توضيحي أو مقطع إطلاق. نادراً ما يكون مناسباً في فيديوهات "كيفية القيام بـ". اجعل الحركة سريعة واثبت على الرقم النهائي، وإلا ستكون الحركة هي كل ما يتذكره المشاهد.
الانتقالات
استخدم نمطاً واحداً لكل فيديو، فقط عند تغير المشهد أو الموضوع. بين خطوتين على نفس الشاشة، يكون القطع المباشر هو الأفضل عادةً. تجنب تأثيرات الوميض: معيار نجاح WCAG الخاص بـ 3 ومضات أو أقل موجود لأن المحتوى الوامض قد يسبب نوبات صرع وصداع نصفي.
قواعد الحفاظ على اتساق التراكبات المتحركة
تبدو التراكبات المتحركة احترافية عندما تبدو كجزء من نظام متكامل:
1. نمط حركة واحد. نفس التسهيل (easing)، نفس اتجاه الدخول، ونفس المدة لكل وسيلة إيضاح. إذا كانت وسائل الإيضاح تنزلق من اليسار في الخطوة 1، فيجب أن تنزلق من اليسار في الخطوة 5. 2. قوالب العلامة التجارية، تُصمم مرة واحدة. الخطوط، الألوان، ظهور الشعار، وتخطيط بطاقة العنوان يجب أن تكون في قالب محفوظ، لا أن تُعاد صياغتها لكل فيديو. كل أداة أدناه تدعم ذلك بشكل ما. 3. منطقة آمنة. ابعد النص عن حواف الإطار وعن عناصر التحكم التي تعرضها. حدد المنطقة الآمنة في قالبك. 4. الرسومات تتبع النص. اكتب التعليق الصوتي أولاً، ثم حدد الكلمة التي ترتبط بها كل رسومية. لا توجد كلمة، لا توجد رسومية.
قبل وبعد: قائمة لقطات لجولة تعريفية مدتها 60 ثانية
جولة تعريفية مدتها 60 ثانية حول "إرسال فاتورتك الأولى" في تطبيق فوترة نموذجي. "قبل" هو التسجيل الخام مع التعليق الصوتي.
| الوقت | قبل (التسجيل الخام) | بعد (مع الرسوم المتحركة) |
|---|---|---|
| 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 أداة تركيب تعتمد على العقد (node-based) داخل Resolve، وتضم أكثر من 200 أداة. يمكنك بناء العناوين السفلية (lower thirds)، والخلفيات المتحركة، والانتقالات في Fusion، وحفظها كـ "ماكرو" (macros) مع إتاحة عناصر التحكم التي يحتاجها المحرر فقط. تظهر هذه العناصر بعد ذلك في مكتبة تأثيرات صفحة التعديل لأي مشروع. Resolve متاح للتحميل مجاناً؛ بينما يبلغ سعر Resolve Studio 295 دولاراً.
الأفضل لـ: الفرق التي لديها مصمم موشن جرافيك يقوم بإنشاء القوالب مرة واحدة، ومحررين يعيدون استخدامها. المقايضة: عمليات التكبير (zooms) ووسائل التوضيح (callouts) على تسجيل الشاشة يتم ضبط إطاراتها الرئيسية (keyframed) يدوياً في كل مرة.
2. محرر يعتمد على القوالب: Canva أو CapCut
تتيح لك Canva تحريك الصفحات والعناصر والنصوص من زر "تحريك" (Animate)، مع إعدادات مسبقة للسرعة (بطيئة، متوسطة، سريعة) أو تحديد مدة دقيقة للظهور والاختفاء. تتيح لك ميزة "إظهار توقيت العنصر" تحديد وقت ظهور كل عنصر، بينما تتيح لك "إنشاء حركة" سحب العنصر على طول مسار معين. تخزن مجموعات العلامة التجارية الشعارات والألوان والخطوط لضمان بقاء القوالب متوافقة مع هويتك البصرية.
يحتوي CapCut على مكتبة من قوالب النصوص وتحريك النصوص، وعلى نسخة سطح المكتب يمكنك ضبط الإطارات الرئيسية للموضع والحجم والدوران والشفافية. بهذه الطريقة يمكنك بناء تكبير يدوي أو وسيلة توضيح منزلقة.
الأفضل لـ: المسوقين الذين يستخدمون هذه الأدوات بالفعل ويحتاجون إلى نصوص متحركة فوق مقاطع قصيرة. المقايضة: لا يوجد أي منهما مصمم خصيصاً لتسجيلات الشاشة، لذا فإن عمليات التكبير التي تتبع النقرات، وتنظيف المؤشر، وتعتيم الخصوصية هي أعمال يدوية.
3. Clevera: تراكبات على المخطط الزمني، أو موجز مكتوب بكلمات بسيطة
تبدأ Clevera من التسجيل نفسه. بالنسبة لـ فيديوهات الشرح التي تعتمد على التعليق الصوتي بالذكاء الاصطناعي وعروض المنتجات، تقوم الأداة بتنعيم حركة المؤشر، وتسليط الضوء على التفاعلات الرئيسية، وتطبيق تكبير ذكي أثناء كتابة ومزامنة التعليق الصوتي. معظم أعمال التكبير والتمييز في قائمة اللقطات أعلاه تتم قبل أن تفتح المحرر.
في محرر المخطط الزمني، يمكنك إضافة أو تعديل البقية: النصوص، الصور، التعتيم، تراكبات التمييز، بطاقات العنوان، بطاقات المقدمة، كشف الشعار، التكبيرات، والانتقالات مثل التكبير المتقاطع، الدرج، الستائر، التلاشي، المسح الناعم، والانزلاق. يتم حفظ بطاقات العنوان، وكشف الشعار، ونمط الفيديو كقوالب جاهزة أو مخصصة، بحيث يبدو الفيديو الثاني مشابهاً للأول. إذا كنت تريد فقط تصميم تسجيلك الخاص بالتكبيرات والتراكبات وبطاقات العنوان، فإن خيار "مصمم للمشاركة" (styled) لا يستخدم رصيد الذكاء الاصطناعي، لذا فهو غير محدود في جميع الخطط، بما في ذلك الخطة المجانية (في الخطة المجانية تشارك عبر رابط أو تضمين؛ تنزيلات MP4 متاحة في خطتي Starter وPro).
للرسومات خارج تلك القائمة، استخدم "وصف ما تريد" في مولد الموشن جرافيك بالذكاء الاصطناعي. تكتب موجزاً حراً، مثل "أضف عداداً متحركاً من 0 إلى 1,240 عند الدقيقة 0:45 وسهماً من حقل تاريخ الاستحقاق إلى معاينة الشروط"، وستقوم Clevera ببناء رسومات متحركة فوق الفيديو الموجود. قائمة التراكبات في المحرر لا تتضمن سهماً أو عداداً مخصصاً، لذا فهذا هو المسار المناسب لذلك.
التعديلات على النصوص والتمييزات والتعتيم في فيديو Clevera المنشور يتم تحديثها في كل رابط مستضاف أو تضمين، لذا يتم إصلاح تسمية الزر التي تم تغييرها مرة واحدة فقط. واجهة المستخدم الجديدة لا تزال تتطلب لقطات جديدة.
الأفضل لـ: فرق المنتج والدعم والتسويق الذين يصنعون فيديوهات توضيحية كل أسبوع دون الحاجة لمحرر. المقايضة: مسجل الذكاء الاصطناعي يلتقط مواقع https العامة وتطبيقات الويب فقط، لذا فإن لقطات برامج سطح المكتب والشبكات الداخلية تأتي من تطبيق سطح المكتب أو عبر الرفع. وانظر القسم التالي للوظائف التي لا ينبغي أن تقوم بها.
ما أضافته Clevera من تلقاء نفسها، وما لم تضفه
في أكتوبر 2026، قمنا باستخدام مسجل Clevera بالذكاء الاصطناعي لالتقاط مهمة قصيرة في تطبيق مهام تجريبي، 0:58 من اللقطات الخام، وحولناها إلى فيديو تعليمي. بعد حوالي 50 ثانية و9 أرصدة، كان المخطط الزمني يحتوي بالفعل على بطاقة مقدمة، وكشف شعار، وتكبيرات تلقائية بمقدار 1.5x و1.8x، مقصوصة إلى 0:40. هذا هو إنجاز بطاقة العنوان وصفوف التكبير في قائمة اللقطات. وسائل التوضيح، وعداد الخطوات، والأسهم لم تكن موجودة؛ تلك هي مهمتك لإضافتها.
ثم قمنا بتشغيل "مصمم للمشاركة" على نفس التسجيل باستخدام قالب فريقنا بدلاً من القالب الافتراضي المدمج. استغرق الأمر حوالي 25 ثانية و0 أرصدة. بلغت مدة المخرج 1:07، أطول من المصدر بسبب بطاقة المقدمة، مع تكبيرين تلقائيين بمقدار 1.8x والمحرر مفتوح على لوحة "النمط" للخلفية، والحشوة، والزوايا، والمؤشر. الصفحة المسجلة نفسها بدت باهتة ومنخفضة التباين؛ لوحة "النمط" تؤطر اللقطات، لكنها لا تصلحها.
نسخة 1:07 من "مصمم للمشاركة" لنفس التسجيل، بدون تعديل، 0 أرصدة.
بالنسبة لمسار الموجز، قام "موجز مخصص" ببناء إنفوجرافيك متحرك مدته 1:00 مع شريط تعبئة في حوالي 7 إلى 8 دقائق مقابل 86 رصيداً. كانت الأرقام صحيحة، لكنه تجاهل الـ 15 ثانية المكتوبة في الموجز (يتم ضبط الطول في قائمة التنسيق) وظهر سطر المصدر صغيراً جداً بالنسبة للهاتف. تم بناء ذلك المقطع من الصفر. لم نختبر بعد الرسومات المضافة فوق تسجيل موجود.
الإنفوجرافيك المتحرك لمدة 1:00 الذي أعادته Clevera من الموجز، بدون تعديل.
متى يستحق الأمر الدفع لمصمم موشن جرافيك
تغطي محررات الذكاء الاصطناعي والقوالب الرسومات الموجودة في هذا الدليل. لكنها لا تستبدل مصمم الموشن جرافيك في الحالات التالية:
- فيديو إطلاق رئيسي أو فيلم علامة تجارية حيث يتم إخراج كل إطار فنياً وتكون الحركة نفسها هي الرسالة.
- الرسومات المتعقبة على لقطات متحركة، مثل تسمية تتبع هاتفاً في لقطة محمولة باليد.
- الرسوم ثلاثية الأبعاد، تحريك الشخصيات، أو الرسوم التوضيحية المخصصة في الحركة.
- نظام القوالب الخاص بك. أسبوع واحد من وقت المصمم لبناء العناوين السفلية وبطاقات العنوان وكشف الشعار في After Effects أو Fusion يؤتي ثماره في كل فيديو يصنعه فريقك بعد ذلك، في أي أداة تقبل القوالب.
التقسيم المعتاد: مصمم للنظام وإطلاق المنتج الرئيسي، وأداة ذكاء اصطناعي أو محرر قوالب للفيديوهات التوضيحية الأسبوعية.
ابدأ بالتكبير
إذا كنت ستضيف شيئاً واحداً إلى تسجيل شاشتك القادم، فاجعله تكبيراً يهبط قبل النقر بنصف ثانية. إنه يعالج الشكوى الأكثر شيوعاً حول فيديوهات المنتجات، "لم أستطع رؤية ما نقرت عليه"، وكل رسم آخر في هذا الدليل يبني على عادة توجيه عين المشاهد إلى حيث يشير التعليق الصوتي.
