دليل تحريك الشعار: متى تحرّك وكيف تحرّك وماذا تحذف
دليل عملي لتحريك الشعارات. أنماط الحركة الأربعة التي تحتاجها كل علامة، وأنماط التحريك الستة التي تصمد في كل مقاس، والموجز الذي يمنحك شعارًا متحركًا قابلًا للاستخدام في جولتين لا في سبع.
دليل تحريك الشعار: متى تحرّك وكيف تحرّك وماذا تحذف
الشعارات المتحركة بنية تحتية، لا ترفيه
تحريك الشعار هو النسخة المتحركة من العلامة الثابتة، ووظيفته ليست الإبهار بل التعريف والانتقال والتحميل. اللحظة التي تعامله فيها كترفيه تبدأ ببناء شيء ينجح في عرض الأعمال ويفشل في صفحة المنتج.
معظم الشعارات المتحركة اليوم طويلة أكثر من اللازم، سينمائية أكثر من اللازم، ومبنية لسياق لا وجود له في الإنتاج الفعلي. العلامات التي تصيب تُسلّم نظام حركة: مجموعة صغيرة من أنماط التحريك بتوقيت مشترك وتسارع مشترك، وإطار ثابت يمكن لكل نسخة أن تعود إليه حين تكون الحركة غير مسموحة.
أنماط الحركة الأربعة التي تحتاجها كل علامة
المحمّل، والمقدمة، والحلقة، والانتقال. معظم الشعارات المتحركة تنتمي لواحد من هذه الأربعة، والعلامات التي تسلّم نظامًا بدل مقطع بطولي واحد تغطي الأربعة بلغة حركة واحدة.
| النمط | المدة | حالة الاستخدام | حلقة؟ |
|---|---|---|---|
| المحمّل | 1-2 ثانية | حالات التحميل في التطبيقات، ومؤشرات التقدم | نعم |
| المقدمة | 2-4 ثوانٍ | افتتاحيات الفيديو، وتسلسلات إطلاق المنتجات | لا |
| الحلقة | غير محددة | خلفيات الويب، وحضور العلامة الهادئ | نعم |
| الانتقال | 0.5-1.5 ثانية | بين المشاهد، وبين حالات المنتج | حسب الحالة |
لكل نمط ميزانية مدة وبيئة عرض خاصة به. المحمّل داخل تطبيق React يجب أن يكون جاهزًا لـLottie وخفيف الوزن. أما مقدمة فيديو إطلاق منتج فيمكنها أن تسمح لنفسها ببعض الدراما. تحديد هذه الأربعة قبل بدء أي تحريك هو ما يجنّبك مقطعًا سينمائيًا من 12 ثانية لم يطلبه أحد.
المحمّلات هي أحصنة العمل
المحمّل هو التحريك الذي يراه المستخدمون أكثر من غيره، ويجب أن يكون قصيرًا ومتكررًا ورخيص العرض، لأنه يعيش داخل تطبيق لديه مشاكل أكبر من علامتك. علامة Stripe المتحركة هي المرجع الكلاسيكي: هندسة بسيطة، حلقة أقل من ثانيتين، تعمل عند 24px. لا أحد في Stripe يحاول الفوز بجائزة بها. هي فقط تعمل.
المحمّل يحتاج شيئًا واحدًا: أن يُقرأ في المقاسات الصغيرة. إن كان شعارك لا يتبسّط إلى علامة هندسية أو حرف قوي، فالمحمّل هو المكان الذي ستكتشف فيه ذلك. معظم الشعارات التي تفشل في المقاسات الصغيرة بالتحريك تفشل في الطباعة أيضًا، وإصلاح العلامة هو الجواب الحقيقي.
أبقِه أقل من ثانيتين. أبقِ ملف Lottie أقل من 50KB. اختبره عند 24px و48px قبل أن تختبره في أي مقاس أكبر.
المقدمات هي النسخة السينمائية، وتُستخدم باقتصاد
المقدمة هي الافتتاحية ذات الثلاث ثوانٍ التي تضعها في الفيديوهات وإطلاقات المنتجات، وهي المكان الوحيد الذي يُسمح فيه ببعض المسرحية. مقدمة Apple Music مرجع جيد: واثقة، مضبوطة على لحظة صوتية، وتنتهي قبل أن تلاحظ أنها بدأت.
ثلاث ثوانٍ هي السقف. إن تجاوزت مقدمتك ذلك فأنت تحرق صبر المشاهد على العلامة، وهذه صفقة سيئة. المقدمة تكسب وقتها بالهبوط على الإطار الثابت بنظافة، وبمصادفة إيقاع صوتي إن كان لعلامتك واحد، وبألا تطلب من المشاهد فك أي شيفرة.
الحلقات هي العلامة كجو عام
الحلقة تجلس في زاوية صفحة ويب أو في نهاية ريل، ووظيفتها أن تبقى حية دون أن تطلب الانتباه. علامة Linear المتحركة مثال جيد: دوران بسيط بالتسارع الصحيح يبدو حيًا دون أن يبدو مزدحمًا. وارتداد شعار Mailchimp النصي يتكرر بشخصية كافية ليُقرأ كعلامة دون أن يصبح مزعجًا.
نمط الفشل في الحلقات هو أن تكون مثيرة أكثر من اللازم. الحلقة التي تطلب تواصلًا بصريًا في كل دورة هي حلقة تستنفد ترحيبها في عشر ثوانٍ. اختبرها على صفحة مأهولة بمحتوى حقيقي حولها. إن ظلت عينك تعود إلى زاوية الشعار بدل المحتوى، فالحلقة عدوانية أكثر من اللازم.
يجب أن تكون الحلقات سلسة بلا درز. الانتقال من الإطار صفر إلى الإطار الأخير هو المكان الذي تنكسر فيه معظم الحلقات، ويظهر الكسر أكثر في الحلقات الهادئة بطيئة الإيقاع حيث تملك العين وقتًا لملاحظة الدرز.
الانتقالات هي النسيج الرابط
تحريك الانتقال ينقل الشعار بين الحالات أو المشاهد أو المنتجات، وهنا تعيش أقوى أنظمة الحركة. بناء مثلث Vercel ومقدمة Loom قريبان من الانتقال: يربطان لحظة الهوية بلحظة المحتوى دون قطع حاد.
الانتقالات أيضًا أصعب الأنماط تصميمًا لأنها تعتمد على ما تربط بينه. انتقال ينجح بين شاشة منتج داكنة وشاشة افتتاحية بيضاء قد يفشل حين ينعكس التسلسل. صمّم الانتقالات في الاتجاهين وفي وضعي اللون قبل أن تعلن أنها انتهت.
معظم العلامات لا تبني انتقالات أبدًا وتعتمد على القطع الحاد. وهذا مقبول حتى يصبح المنتج معقدًا بما يكفي لتبدو القطعات الحادة غير مكتملة. الانتقالات علامة على نضج نظام الحركة.
أنماط التحريك الستة التي تصمد في كل مقاس
الكشف، والرسم، والقناع، والهيكلة، والجسيمات، والبناء. كل شعار متحرك يُسلَّم اليوم هو مزيج من هذه الستة، ومعظم المشاريع لا تحتاج إلا اثنين أو ثلاثة.
| النمط | الأفضل لـ | يفشل مع | التعقيد |
|---|---|---|---|
| الكشف | أي علامة | لا شيء؛ هو النمط الشامل | منخفض |
| الرسم | هندسة الخطوط، علامات الأيقونات | الشعارات النصية المصمتة | منخفض-متوسط |
| القناع | الشعارات النصية، العلامات المعقدة | الأيقونات البسيطة ذات العنصر الواحد | متوسط |
| الهيكلة | علامات الشخصيات، الشعارات متعددة الأجزاء | العلامات الهندسية المسطحة البسيطة | مرتفع |
| الجسيمات | لحظات العلامة الفاخرة، مقدمات الشاشات الكبيرة | المقاسات الصغيرة، المحمّلات | مرتفع |
| البناء | التركيبات متعددة العناصر، العلامات المتراصة | العلامات ذات العنصر الواحد | متوسط-مرتفع |
اختر نمطك بناءً على هندسة العلامة، لا على ما يبدو مبهرًا في معرض الأعمال. تحريك الرسم على شعار نصي مصمت يبدو كخطأ في العرض. والهيكلة على علامة هندسية مسطحة تكلّف ثلاثة أضعاف ما تعوّضه النتيجة.
تحريكات الكشف تستحق دخولها
الكشف هو أبسط الأنماط: يدخل الشعار ويستقر، والحرفة كلها في منحنى التسارع واللحظة التي يتوقف فيها. كشف Slack مرجع متين. العلامة تتلاشى وتكبر إلى موضعها بمنحنى ease-out يبدو مقصودًا لا افتراضيًا. يعمل في كل مقاس وفي كل سياق ويكاد لا يكلّف شيئًا.
نمط الفشل في الكشف هو استخدام التسارع الخطي أو ease الافتراضي. المنحنيات الافتراضية تبدو آلية. ease-out مخصص مع تجاوز لطيف يبدو حيًا. الفرق نقطتا تحكم في منحنى Bezier، وهو الفرق بين كشف يبدو مصمَّمًا وكشف يبدو مصدَّرًا من قالب.
تحريكات الرسم تُظهر البناء
تحريك الرسم يتتبع خطوط الشعار بالتسلسل، وينجح مع العلامات ذات الهندسة الخطية القوية ويموت فوق الشعارات النصية المصمتة. النمط يُظهر كيف صُنعت العلامة، وهذا لا يصلح إلا حين تكون العلامة مبنية من خطوط تستحق العرض.
الإيقاع أهم في تحريكات الرسم من أي نمط آخر. السريع جدًا يبدو كخلل. البطيء جدًا يبدو كدرس تعليمي. النقطة المثلى هي السرعة التي يبدو فيها الخط هادفًا لا مؤدّى به استعراضًا.
قبل أن تكتب موجزًا لتحريك رسم، تحقق هل علامتك فيها خطوط حية أم مبنية على أشكال مملوءة. الأشكال المملوءة يمكن محاكاتها بطبقة خطوط، لكن النتيجة تبدو عادة مزيفة. إن كانت العلامة كلها تعبئة مصمتة فاستخدم القناع بدلًا من ذلك.
تحريكات القناع هي الخطوة التحريرية
تحريك القناع يكشف الشعار عبر فتحة متحركة، وهو أنظف الأنماط للشعارات النصية التي لا يمكن رسمها. يمكن للفتحة أن تمسح أفقيًا أو تتوسع من المركز أو تنفتح كحدقة، وفي كل حالة يكون الأثر نظيفًا مهما كانت طريقة بناء العلامة الأصلية.
تحريكات القناع لا تعتمد على صيغة. تعمل بالقدر نفسه في Lottie وWebM والفيديو لأن التعقيد يعيش في مسار شكل القناع لا في بنية متجهات العلامة. وهذا يجعلها أكثر الأنماط قابلية للنقل في الإنتاج.
نمط الفشل هو المسح البطيء. قناع يكشف العلامة في أكثر من ثانية يبدو كانتقال شرائح عرض. أبقِ الفتحة سريعة واترك للتسارع معظم ميزانية الشخصية.
الهيكلة والجسيمات والبناء هي الأنماط الثقيلة
الهيكلة والجسيمات والبناء أنماط تحتاج فنانين متخصصين في الحركة، ولا تستحق كلفتها إلا حين تملك العلامة الميزانية والمساحة لاستخدامها. الهيكلة تصلح لعلامات الشخصيات أو العلامات ذات الأجزاء المفصلية المتعددة. الجسيمات تصلح على النطاق الكبير وفي لحظات العلامة الفاخرة. والبناء يصلح للتركيبات متعددة العناصر حيث يحكي تسلسل التجميع قصة العلامة.
لا واحد من هذه الثلاثة مكانه المحمّل. مكانها المقدمات وأفلام العلامة وتسلسلات إطلاق المنتجات. سبب وجود معظم الشعارات المتحركة المبالغ في هندستها أن عميلًا طلب نمطًا ثقيلًا دون حالة استخدام ثقيلة تبرره.
خصّص ميزانية للأنماط الثقيلة فقط بعد أن يعمل المحمّل والكشف. هذان يغطيان 90 بالمئة من الاستخدام الإنتاجي. الأنماط الثقيلة هي الطبقة العليا، لا الأساس.
تريد هوية حركة تُسلَّم كنظام لا كمقطع بطولي واحد؟ وظّف Brainy لتصميم نظام شعار متحرك يعمل بصيغ Lottie وWebM وMP4 مع إطار ثابت مرجعي ودليل إيقاع يستطيع فنانو الحركة اتباعه فعلًا.
الإطار الثابت هو أهم إطار
كل شعار متحرك يجب أن يهبط على إطار يعمل كشعار ثابت، وهذا الإطار هو ما يدخل لقطات الشاشة والصور المصغرة ومعاينات وسائل التواصل. الشعار المتحرك الذي يهبط خطأ على إطاره الثابت نصف شعار، مهما كانت الحركة نظيفة.
الإطار الثابت هو أيضًا الإطار الذي ينجو من فشل الصيغ. حين لا يُحمَّل Lottie، وحين يُحظر التشغيل التلقائي للفيديو، وحين يفشل GIF على اتصال بطيء، فالإطار الثابت هو ما يراه المستخدم. إن بدا مكسورًا في حالة السكون، فكل الحركة قبله ضائعة.
صمّم الإطار الثابت قبل أن تصمم التحريك. يجب أن يصل التحريك إلى ذلك الإطار، لا أن ينتهي عليه مصادفة. كل حلقة يجب أن تبدأ وتنتهي عليه. كل كشف يجب أن يستقر عليه. كل مقدمة يجب أن تُغلق عليه.
الإيقاع والتسارع والمدة هي المقابض الثلاثة
الإيقاع والتسارع والمدة تحدد هل يبدو التحريك كعلامة أم كعرض تجريبي. معظم الشعارات المتحركة السيئة سيئة لأن واحدًا من هذه الثلاثة مضبوط خطأ.
الإيقاع هو سرعة حركة التحريك في أسرع لحظاته. السريع جدًا يبدو متوترًا. البطيء جدًا يبدو متعاليًا. الإيقاع الصحيح يطابق شخصية العلامة، لا ما يبدو مبهرًا على شاشة 27 بوصة.
التسارع هو منحنى التعجيل. ease الافتراضي هو الجواب الكسول. علامة تتحرك بـ ease-out مخصص تبدو مصمَّمة. وعلامة تتحرك بتسارع نابضي تبدو مرحة. طابِق طابع التسارع مع شخصية العلامة بالطريقة نفسها التي تطابق بها الخط مع صوت العلامة.
المدة هي أصعب مقبض في الضبط لأن الجميع يريد وقتًا أطول. المحمّلات: أقل من ثانيتين. الكشف: أقل من 1.5 ثانية. المقدمات: أقل من 3 ثوانٍ. الانتقالات: أقل من ثانية. إن كان التحريك يحتاج وقتًا أكثر من ذلك ليوصل شيئًا، فالعلامة لا تقوم بعمل كافٍ وحدها.
الصيغة والتسليم تحددان أين يمكن النشر
الشعار المتحرك الذي يُسلَّم بصيغة MP4 فقط نصف مبني. المخرجات المهمة هي Lottie وWebM وMP4 والإطار البطولي الثابت كملف PNG شفاف.
| الصيغة | حالة الاستخدام | المزايا | العيوب |
|---|---|---|---|
| Lottie (JSON) | التطبيقات، الويب، التفاعلي | ملف صغير، قابل للتحجيم، قابل للبرمجة | يتطلب خط إنتاج After Effects |
| WebM | فيديو الويب، التشغيل التلقائي في المتصفح | خلفية شفافة، دعم واسع | فجوات في Safari الأقدم |
| MP4 | إنتاج الفيديو، التواصل الاجتماعي | توافق شامل | لا شفافية، ملفات أكبر |
| SVG + CSS | تحريكات الويب البسيطة | كود خالص، بلا أصول ثنائية | محدود بالخصائص القابلة للتحريك في CSS |
| GIF | البريد، Slack، السياقات القديمة | بديل شامل | جودة ضعيفة، ملفات كبيرة، بلا ألفا |
يجب أن يكون الإطار البطولي الثابت ملف PNG بشفافية وبدقة 2x. هو البديل الذي يلجأ إليه كل مهندس حين لا يُحمَّل التحريك، وإن لم يكن في حزمة التسليم، فسيُلتقط من فيديو ويُترك كصورة JPEG مضغوطة. لا تدع ذلك يحدث.
موجز الحركة في صفحة واحدة
سلّم فنان الحركة هذا الموجز وستحصل على تحريك قابل للاستخدام في جولتين بدل سبع. املأ كل حقل قبل المكالمة الأولى.
موجز الحركة: الشعار المتحرك لـ [اسم العلامة]
| الحقل | المدخل |
|---|---|
| اسم العلامة | |
| ملف الشعار الثابت | (رابط المتجه النهائي، كل النسخ) |
| الأنماط المطلوبة | محمّل / مقدمة / حلقة / انتقال |
| النمط المفضل | كشف / رسم / قناع / هيكلة / جسيمات / بناء |
| أقصى مدة: المحمّل | __ ثانية |
| أقصى مدة: المقدمة | __ ثانية |
| أقصى مدة: الحلقة | __ ثانية |
| أقصى مدة: الانتقال | __ ثانية |
| طابع الإيقاع | سريع / متوسط / بطيء + علامة مرجعية |
| طابع التسارع | آلي / سلس / نابضي / مخصص + مقطع مرجعي |
| وصف الإطار الثابت | (كيف يجب أن يبدو الشعار في حالة السكون الكامل) |
| أوضاع اللون المطلوبة | فاتح / داكن / لون واحد / الثلاثة كلها |
| صيغ التسليم المطلوبة | Lottie / WebM / MP4 / GIF / SVG+CSS / PNG ثابت |
| مقاسات اللوحة المطلوبة | (مثلًا 400x400 للمحمّل، 1920x1080 للمقدمة) |
| الاقتران الصوتي | نعم / لا + مقطع مرجعي إن كان نعم |
| تحريكات مرجعية | (اربط 2-3 مقاطع تلتقط الإحساس تمامًا) |
| ما يجب تجنبه | (أنماط أو سرعات أو أحاسيس محددة لا تناسب العلامة) |
| جولات المراجعة المتفق عليها | 2 |
ثلاثة أشياء توفر الجولات: املأ حقل التحريكات المرجعية بأمثلة حقيقية، وحدّد ما يجب تجنبه بالدقة نفسها التي تحدد بها ما تريد، واتفق على وصف الإطار الثابت كتابةً قبل بناء إطار واحد.
الأسئلة الشائعة
كم يجب أن يكون طول تحريك الشعار؟
يعتمد على النمط. يجب أن تتكرر المحمّلات في أقل من ثانيتين. ويجب أن يستقر الكشف في أقل من 1.5 ثانية. يمكن للمقدمات أن تصل إلى 3 ثوانٍ. ويجب أن تكتمل الانتقالات في أقل من ثانية. الخطأ الأشيع هو كتابة موجز بطول واحد لكل الأنماط، فينتهي بك الأمر بمحمّل من 3 ثوانٍ يبدو كإنتاج كامل.
هل أحتاج ملف Lottie أم يكفي MP4؟
تحتاج الاثنين. MP4 للإنتاج المرئي ووسائل التواصل. Lottie للتطبيقات والويب، حيث تحتاج خلفية شفافة وحجم ملف صغيرًا وتحكمًا برمجيًا. إن كان مطورك يبني أي شيء بـ React أو Next.js أو تطبيقات الجوال الأصلية، فهو يحتاج Lottie. التسليم بـ MP4 فقط إشارة إلى أن فنان الحركة لم يسلّم تحريكًا إنتاجيًا من قبل.
هل يمكنني تحريك أي شعار أم أحتاج إلى إعادة تصميمه أولًا؟
بعض الشعارات تتحرك بشكل سيئ لأنها صُممت بشكل سيئ، والتحريك يكشف كل ضعف بنيوي تخفيه النسخة الثابتة. شعار فيه تفاصيل دقيقة أو تدرجات متراكبة أو بلا قراءة هندسية قوية في المقاسات الصغيرة سيقاتلك في كل نمط تحريك. إن كان شعارك يجب أن يعمل عند 24px كمحمّل، فعليه أن يتبسّط أولًا إلى علامة واحدة قوية. وهذه مشكلة نظام شعار متجاوب، وإصلاحها قبل التحريك يوفر عليك إنفاق المال على تحريك النسخة الخطأ.
كم يكلّف الشعار المتحرك الجيد؟
محمّل وكشف بصيغة Lottie مع WebM من مصمم حركة ماهر: من 800 إلى 2,500 دولار حسب التعقيد والجولات. نظام كامل بأربعة أنماط مع كل الصيغ ودليل إيقاع: من 3,000 إلى 8,000 دولار. وأي شيء يتضمن هيكلة أو جسيمات أو اقترانًا صوتيًا يقع فوق ذلك. إن عرض عليك أحدهم 150 دولارًا لتحريك شعار، فهو يبيعك قالبًا وضع فيه ألوانك.
هل يجب أن يتزامن الشعار المتحرك مع لحظة صوتية للعلامة؟
فقط إن كان لديك هوية صوتية. إن كان لديك هوية صوتية للعلامة محددة بصوت أو مقطع قصير، فيجب أن تتزامن معه المقدمة المتحركة. وإن لم تكن لديك هوية صوتية بعد، فحرّك للصمت أولًا. معظم تحريكات العلامات تُشغَّل على أجهزة صامتة أصلًا، والتصميم للصمت أولًا يعني أن التحريك يعمل بمفرده.
كيف أكتب موجزًا لمنحنى التسارع دون معرفة مصطلحات الحركة؟
المقاطع المرجعية أسرع طريق. ابحث عن تحريكين أو ثلاثة تبدو صحيحة واربطها في الموجز. ثم صف ما تتشاركه: "نابضي ومرح قليلًا"، "آلي مع توقف حاد"، "سلس وواثق". مفردات التسارع غير دقيقة؛ أما المقاطع المرجعية فدقيقة. وإن أردت التحديد، استخدم صيغة cubic-bezier واختبرها عند مدة التحريك الفعلية قبل إرسالها إلى الفنان.
ما هو ملف Lottie ولماذا يطلبه مطورّي؟
Lottie صيغة تحريك مفتوحة المصدر تشفّر تحريكات After Effects كـ JSON. الملف صغير (عادة 5-50KB)، ويتحجّم إلى أي دقة دون فقدان للجودة، ويمكن التحكم به برمجيًا: تشغيل وإيقاف وتمرير من الكود. وهو المعيار لتحريكات الشعارات في التطبيقات والويب لأنه الصيغة الوحيدة التي تتعامل مع الشفافية وقابلية التحجيم والتفاعل في حزمة واحدة.
الشعار المتحرك كنظام، لا كأصل
العلامات التي تفوز في الحركة تعامل الشعار المتحرك كنظام له قواعد، لا كملف بطولي واحد. النظام فيه أربعة أنماط، ولغة حركة مشتركة، وإطار ثابت محدد، ومواصفات تسليم تغطي كل بيئة إنتاج. والملف البطولي الواحد مجرد مدخل في عرض أعمال ينجح في سياق واحد ويفشل في عشرة.
إن كانت إرشادات هوية علامتك لا تتضمن قسمًا للحركة، فهذا القسم مفقود. القواعد نفسها التي تحكم لوحة ألوان علامتك وخطها يجب أن تحكم طريقة حركة شعارك: قيم محددة، ومبررات موثقة، ومواصفات يستطيع أي فنان حركة تنفيذها دون مكالمة استكشافية.
ابنِ النظام. سلّم الإطار الثابت. اضبط التسارع. والباقي إنتاج.
تريد هوية حركة تُسلَّم كنظام؟ وظّف Brainy لتصميم نظام شعار متحرك مبني للإنتاج: Lottie وWebM وMP4، وإطار ثابت مرجعي نظيف، ودليل إيقاع يمنح فنانّي الحركة شيئًا يعملون منه فعلًا.
Want a motion ID that ships as a system instead of a single hero clip? Brainy designs animated logo systems that run as Lottie, WebM, and MP4 with a still-frame anchor and a tempo guide motion artists can actually follow.
Get Started
