استخدام مبادئ ديزني الاثني عشر للرسوم المتحركة في مشروعك التالي لتصميم الويب

في اللحظة التي أقوم فيها بكتابة هذا ، يوجد في مكتبي 17 شخصية من ديزني على الجدران والرفوف. سبعة عشر. حتى أنا مندهش. بقدر ما أحب ديزني جميع الأشياء ، فإن السحر الذي تم إنشاؤه من خلال المبادئ الـ 12 للرسوم المتحركة يهرب مني حتى وأنا أشاهد أحد أفلامهم.

وهذا هو بيت القصيد. المبادئ الـ 12 للرسوم المتحركة دقيقة. إنهم يتركون انطباعات على المشاهدين دون أن يدركوا ذلك. إنها تجعلنا نضحك ونبكي ونتعاطف ونحلم أحيانًا في نفس المشهد. ويقومون بإنشاء شخصيات وأشياء تبدو وتتحرك بشكل واقعي بحيث تريد الوصول إليها ولمسها. (هل سبق لك أن رأيت كوكو ؟ أنا أريح حالتي.)

توفر هذه المبادئ الـ 12 للرسوم المتحركة الآن الأساس لجميع الأعمال المتحركة ، ديزني وغيرها. كما أنها ذات صلة بمجالات خارج الرسوم المتحركة ، مثل تصميم الويب.

تاريخ موجز للمبادئ الاثني عشر للرسوم المتحركة

تم تقديم المبادئ الـ 12 للرسوم المتحركة من قبل أولي جونستون وفرانك توماس ، وهما اثنان من رجال ديزني التسعة العجوز ، المجموعة الأساسية من رسامي الرسوم المتحركة الذين انضموا في عشرينيات وثلاثينيات القرن الماضي. كتب جونستون وتوماس كتاب The Illusion of Life: Disney Animation في عام 1981 ، وظل "الكتاب المقدس" للرسوم المتحركة. يلقي الكتاب نظرة فاحصة على مناهج كبار رسامي الرسوم المتحركة في ديزني لاستخراج المبادئ الاثني عشر. في حين أن هذه المبادئ كانت مخصصة في الأصل للرسوم المتحركة المرسومة يدويًا ، فقد نجت من خلال التغييرات التكنولوجية وتستخدم الآن من قبل رسامي الرسوم المتحركة على الكمبيوتر (مثل Pixar) ومصممي الويب.

المبادئ الاثنا عشر للرسوم المتحركة وكيفية توجيهها لتصميم الويب

هناك سبب لكون هذه المبادئ صمدت أمام اختبار الزمن. في بعض الأحيان لا تزال الأساسيات هي الأفضل.

1. الاسكواش والتمدد

المصدر: كريس غانون عبر Giphy

يعتبر "الاسكواش والتمدد" من أهم مبادئ الرسوم المتحركة. يمنح الرسوم المتحركة المرونة والجاذبية والوزن والكتلة. عندما يكون الجسم في حالة حركة ، فإنه لا يظل على نفس الشكل.

يجب أن يظل الحجم ثابتًا ، على الرغم من ذلك. تمتد يتطلب جعل أرق كائن وأطول. السحق يجعلها أقصر وأوسع. إذا قمت بجعله أرق أو أقصر للتو ، فلن يحتفظ بنفس الحجم.

في تصميم الويب ، يتم استخدام "Squash and Stretch" عندما تحتاج الأشياء إلى أن تكون ملفتة للنظر. إذا كان هناك شيء يجب أن يبدو وكأنه يمتلك كتلة مادية ، فإن هذا المبدأ يمكن أن يفي بالغرض.

2. التوقع

المصدر: CentoLodigiani عبر Giphy

يقوم التوقع بإعداد المشاهد لما هو على وشك الحدوث ، ويمكن أن يجعل الإجراء الناتج أكثر واقعية. لن تجلس دون أن تثني ركبتيك أولاً ، أو تلتقط شيئًا دون أن تخرج ذراعك ، أليس كذلك؟ يضع التوقع الشخصية أو الكائن من خلال حركة واقعية أو اثنتين لإعلام المشاهد بما سيحدث.

في تصميم الويب ، يستخدم التوقع في التحولات. على سبيل المثال ، إذا قام زائر بملء مربع معلومات وترك المعلومات المطلوبة ، فقد يرتد الصندوق قليلاً لجذب انتباهه والتواصل ، "مرحبًا ، هناك شيء خاطئ". هناك طريقة أخرى لاستخدام التوقع وهي تقليص العناصر قليلاً ثم تكبيرها عند المرور فوقها.

3. التدريج

يؤدي التدريج إلى أنظار المشاهد بحيث ينظر إلى المكان الذي تريده أن ينظر إليه ("الخطوط الرائدة" في التصوير الفوتوغرافي). قلل من شأن بقية المشهد حتى يركز المشاهد على ما تريده فقط. عنصر آخر في التدريج هو أن كل فعل تقوم به الشخصية له نية ورائه. إذا قمت بعزل كل إطار من الرسوم المتحركة ، فستتمكن من معرفة النية وراء الوضع.

يعد التدريج أحد أسهل المبادئ للتطبيق على تصميم الويب والمرئيات المستخدمة على مواقع الويب. هذا ما يحدث عندما تظهر نافذة منبثقة على صفحة ويب - حركة النافذة المنبثقة تجعلك تركز عليها ، وبقية الصفحة غير واضحة أو باهتة أو مغطاة. أنت تضيء مجازيًا أهم جزء من "المسرح" وتحتفظ بكل شيء آخر في الخلفية. يمكن استخدام الضوء والظل لهذا أيضًا ، أو يمكن لمصممي الويب تطبيق هذا المبدأ ببساطة عن طريق التخلص من التفاصيل غير الضرورية.

4. مستقيم للأمام و Pose to Pose

"مستقيم للأمام" و "بوز تو بوز" هما طريقتان مختلفتان لإنشاء الرسوم المتحركة. باستخدام "مستقيم للأمام" ، يتم إنشاء الإطارات بالترتيب من البداية إلى النهاية. هذا يعطي الرسوم المتحركة حركة ديناميكية وسلسة. باستخدام "وضعية إلى وضعية" ، يتم إنشاء الإطارين الأول والأخير ، ثم تتم إضافة الوضعات البينية الضرورية.

المصدر: Vincenzo Lodigiani ، Motion Artist

اليوم ، تستخدم الرسوم المتحركة للكمبيوتر "وضعية للوضعية" لأن الكمبيوتر يمكنه ملء الإطارات المفقودة تلقائيًا. تحقق من الرسوم المتحركة على Chekhov - يمكنك معرفة أنها ليست سلسة بشكل واقعي (وليس من المفترض أن تكون كذلك). إذا كنت ترغب في إنشاء رسم متحرك "مباشر للأمام" على موقع الويب الخاص بك ، يمكنك استخدام وظيفة التوقيت steps () ، والتي تتيح لك تحديد إطارات متعددة وعرضها في تسلسل.

5. متابعة من خلال وتداخل الإجراءات

ينص مبدأ "المتابعة من خلال الإجراء المتداخل" على أنه عندما تتحرك شخصية أو كائن ثم يتوقف ، فإن أجزاء من الموضوع تتحرك وتتوقف بمعدلات مختلفة. هذا يحاكي قوانين الحياة الواقعية للفيزياء.

• الإجراء المتداخل: تتحرك أجزاء مختلفة من الموضوع بمعدلات مختلفة.
• المتابعة من خلال: تستمر الأجزاء المتصلة بشكل غير محكم من الكائن في التحرك لبضع ثوان بعد توقف الكائن الرئيسي عن الحركة. ستتحرك هذه الأجزاء إلى ما بعد نقطة التوقف ثم تتراجع باتجاه الجسم.

في المثال أدناه ، تتحرك أذرع وأرجل رابونزيل بمعدل مختلف عن رأسها - وهذا عمل متداخل. عندما تتوقف عن الدوران ، يستمر شعرها في التأرجح لثانية - وهذا يتابع.

"السحب" هي تقنية ذات صلة حيث يحدث العكس - تتحرك أجزاء من الكائن ثم يلحق الباقي. تُظهر كل هذه التقنيات حركة واقعية أو يمكنها المبالغة في الحركة للحصول على تأثير كوميدي.

يرتبط "نقل التعليق" بهذا أيضًا. الشخصيات المتبقية لا تزال لديها حركة طفيفة حتى لا تصبح الرسوم المتحركة في حالة ركود.

في تصميم الجوّال وتصميم الويب ، يُظهر "متابعة" و "إجراء متداخل" للمشاهد أن إجراءً ما يتوقف عن قصد . خلاف ذلك ، قد تعتقد أنه ببساطة توقف عن العمل. على سبيل المثال ، انظر كيف يوضح تطبيق Wunderlist على جهاز iPhone أنني أقوم بنقل عنصر قائمة. يصبح العنصر بلون مختلف ويزداد حجمه عندما أقوم بتحريكه ، ثم يعود إلى اللون والحجم الأصليين بمجرد أن أنتهي. هذه هي الطريقة التي أعرف بها أن الإجراء قد اكتمل.

يمكنك أيضًا رؤية هذا المبدأ قيد التنفيذ على جهاز iPhone الخاص بك. أثناء التنقل بين طرق العرض أو نقل الرموز على الشاشة الرئيسية ، تتحرك العناصر بمعدلات مختلفة قليلاً. هذه هي الطريقة التي يتواصل بها جهاز iPhone الخاص بك ، "الأشياء تتغير".

6. بطيئة للداخل وبطيئة للخارج

ينص مبدأ "التباطؤ والتباطؤ" على أن الجسم يبدأ في التحرك ببطء ، ويكتسب زخمًا ويسرع ، ثم يبطئ مرة أخرى عندما يتوقف. في الأساس ، يجب أن تتسارع الحركات وتتباطأ حتى تكون طبيعية. لتحقيق هذا التأثير ، توجد إطارات إضافية في بداية الإجراء ونهايته للتأكيد على الزيادة التدريجية وتقليل الحركة.

المصدر: The Illusion of Life on Tumblr

بالنسبة لتصميم الويب ، فإن CSS لها وظيفتان للتوقيت مرتبطتان بهذا المبدأ: سهولة الدخول والتيسير. يمكنك رؤية مثال إذا كان موجودًا على موقع Your Plan، Your Planet (انقر فوق "لنبدأ" أولاً).

7. قوس

مثل العديد من المبادئ الاثني عشر الأخرى للرسوم المتحركة ، يعتمد "القوس" على الفيزياء. تتبع الأجسام عادةً نوعًا من القوس أثناء تحركها بسبب الجاذبية. إذا ظلوا مستقيمين ، ستكون الحركة ميكانيكية وليست واقعية.

ينطبق هذا أيضًا على جميع أنواع الحركة ، وليس فقط الأقواس المنخفضة إلى العالية إلى المنخفضة:

في تصميم الويب ، يمكن استخدام مبدأ "القوس" عن طريق إنشاء رسوم متحركة تقوس ، بالطبع ، ولكن أيضًا من خلال تدوير عنصر ، مثل أوقات التحميل.

8. عمل ثانوي

يؤكد الإجراء الثانوي على العمل الرئيسي دون تشتيت الانتباه عنه. كما أنه يمنح الشخصيات والأشياء بُعدًا أكبر وينفخ الحياة في المشهد. يلعب مبدأ التدريج دورًا لأن العمل الرئيسي لا يزال يجب أن يكون التركيز.

لا يجب أن يقع الإجراء الثانوي خارج الكائن الرئيسي. يمكن أن تكون شخصية صفير أثناء المشي أو التعبير عن المشاعر برفع حاجبيها.

في تصميم الجوّال وتصميم الويب ، يظهر مبدأ "الإجراء الثانوي" عندما تتحرك العناصر بعيدًا عن الطريق لإفساح المجال لعنصر جديد ، كما هو الحال عند إعادة ترتيب التطبيقات على جهاز iPhone الخاص بك. قد يسير هذا جنبًا إلى جنب مع "المتابعة من خلال الإجراءات المتداخلة" ، والتي تؤكد على تلك الإجراءات.

9. التوقيت

التوقيت واضح ومباشر ويرتبط بـ "البطء والبطء". ينص المبدأ على أن العناصر يجب أن تتحرك باستمرار بطريقة طبيعية ، كما هو الحال في العالم الحقيقي. للتأكيد ، يمكن تسريعها أو إبطائها عن قصد. سيحدد عدد الإطارات المستخدمة التوقيت - المزيد من الإطارات تنشئ حركة أبطأ ، ويؤدي عدد أقل من الإطارات إلى إنشاء إطار أسرع.

في هذا المثال ، الإجراءات الأولى لـ Daffy Duck لها توقيت طبيعي ، ثم الإجراء الأخير ، عندما يقترب من المشاهد ، يكون سريعًا عن قصد للتأكيد.

يساعد التوقيت أيضًا المشاهد على فهم وزن الأشياء بالنسبة لبعضها البعض. في هذا المثال ، ترفع الشخصية الأوزان ببطء وتسقطها بسرعة ، لتظهر أنها ثقيلة بالنسبة له:

المصدر:scottthigpen على Giphy

في تصميم الويب ، يتم استخدام التوقيت لجعل العناصر إما تستمر لفترة أطول قليلاً أو تختفي بسرعة ، خاصة عند الاستجابة لتفاعل المستخدم. على سبيل المثال ، إذا أراد المستخدم رفض قائمة ما ، فيمكنك ضبط التوقيت بحيث يستمر لمدة 300 مللي ثانية. إذا نقروا على عنصر في شريط التنقل ، فستريد أن يحدث الإجراء بسرعة (100 مللي ثانية).

10. المبالغة

على الرغم من أن العديد من المبادئ الاثني عشر للرسوم المتحركة تركز على الواقع ، إلا أن جمال الرسوم المتحركة يكمن في أنها ليست حقيقية. ينص مبدأ "المبالغة" على أن الإفراط في الواقعية يمكن أن ينتقص من أفضل الرسوم المتحركة في: الترفيه. تستخدم المبالغة لجعل الشخصيات والأشياء أكثر إثارة للاهتمام. إنه يأخذ الواقع ويحوله إلى مستوى أعلى ، يكفي فقط بحيث يظل المشهد قابلاً للتصديق. تتطلب المبالغة ضبط النفس حتى لا يصبح المشهد مجردًا أو سرياليًا.

في تصميم الويب ، يتم تكبير الكائنات أو تصغيرها لجذب الانتباه أو تشتيته. عندما يكون المستخدم نشطًا في جزء معين من موقع الويب ، مثل النموذج ، يمكن أن ينمو بينما تتقلص العناصر الأخرى. هذا مشابه لمبدأ "التدريج" ، خاصة عندما تفكر في النماذج المنبثقة.

11. الرسم الصلب

المصدر: The Illusion of Life on Tumblr

على الرغم من أن الرسوم المتحركة ثنائية الأبعاد من الناحية الفنية ، إلا أنها يجب أن تقدم بشكل واقعي ثلاثي الأبعاد. يمكن أيضًا تسمية مبدأ "الرسم الصلب" بـ "المنظور" لأنه يتعلق بالقدرة على الرسم وفهم الأساسيات مثل:

• تشريح
• الرصيد
• تناسق
• ضوء وظل
• الصوت
• وزن

بالنسبة لمصممي الويب ، فإن إضافة العمق إلى عنصر يوضح للمستخدمين أنه يمكنهم التفاعل معه. يمكنك أن ترى هذا في العمل على موقعنا على شبكة الإنترنت. شاهد كيف يتحول زر "الانضمام إلى التنزيل" إلى اللون الوردي أثناء التمرير لأسفل:

12. الاستئناف

من المحتمل أن يكون أصعب مبادئ الرسوم المتحركة الـ 12 التي يجب إتقانها ، يقول "الاستئناف" أن الشخصيات والأشياء وعالمهم يجب أن يجذب الجمهور. يجب أن تكون جذابة وساحرة بطريقة ما ، جسديًا أو غير ذلك. لا توجد وصفة لفهم هذا الأمر بالشكل الصحيح ، ولكن تطوير الشخصية الراسخة ورواية القصص من المكونات الأساسية.

في الرسوم المتحركة ، لن تكون كل شخصية جذابة - الشرير هو حجر الزاوية في أفلام ديزني. ومع ذلك ، يجب أن تظل الطريقة التي يتم تقديمها بها تتمتع بالكاريزما وتثير اهتمام الجمهور.

في تصميم الويب ، تعني كلمة "الاستئناف" أن موقع الويب ككل جذاب وممتع وسهل الاستخدام.

تغليف

يمكن أن تساعد مبادئ ديزني الـ 12 في الرسوم المتحركة المباشرة ، مثل ما إذا كنت تقوم بإنشاء لعبة تفاعلية على موقع الويب الخاص بك ، ولكن يمكنهم أيضًا المساعدة في التصميم لجميع أنواع صفحات الويب. معظم المستهلكين يشبهونني عندما يتعلق الأمر بأفلام ديزني: أعلم أنني أحب شيئًا ما وأن عقلي يعالج الإشارات ، لكن لا يمكنني تحديد سبب تلقي ردود الفعل هذه. تتمثل مهمة مصمم الويب في توقع ما سيفكر فيه الزائر ويفعله ، ثم يوجهه بمهارة لاتخاذ الإجراءات الصحيحة.

هل تبحث عن المزيد من الطرق للتواصل مع جمهورك؟ اقرأ منشور مدونتنا حول استخدام عاطفة اللون.