من التمرير على الشاشة إلى استلام الإشعارات، لا تقتصر دور الرسوم المتحركة على توجيه المستخدمين أثناء تصفحهم للموقع – بل إنها أيضًا أساسية لسرد القصص وخلق سرد للعلامة التجارية. باختصار، توفر الرسوم المتحركة عنصرًا “حيًا” لشيء يكون خلاف ذلك ساكنًا.
إذا كنت مصمم واجهات مستخدم وتسعى لاكتساب المزيد من المهارات، فإليك مقال المدونة الرسمي الذي يعتبر مقدمتك إلى عالم رسوم الواجهة الجذاب والمبتكر. سنرشدك خلال المبادئ الأساسية والأدوات التي يجب أن تكون على رادارك، وكيفية البدء. بنهاية هذا المقال، ستكون على مسار جيد لإنشاء رسوم متحركة رائعة سترفع واجهاتك إلى المستوى التالي.
محتوي المقال
1. ما هي رسوم واجهة المستخدم؟
رسوم واجهة المستخدم هي العملية التي تضيف الحركة إلى عناصر واجهة المستخدم لتعزيز تفاعل المنتج. يستخدم مصممو تجربة المستخدم (UX) وواجهة المستخدم (UI) الرسوم المتحركة لتوجيههم حول الواجهة، وتنبيه المستخدمين بالتغيير، وتأثير قرارات المستخدمين، وتوضيح العلاقة بين العناصر – بين استخدامات أخرى. تقلل رسوم واجهة المستخدم أيضًا من الشعور الميكانيكي في موقع الويب أو التطبيق، مما يخلق تجربة أكثر طبيعية وبديهية بكثير.
في المراحل الأولى من عصر الرقمنة، كان من الشائع على المصممين تحميل واجهاتهم بالهدايا المتحركة والألوان الزاهية والمتلألئة. ولكن مع تعمق فهمنا لعلم النفس وراء تفاعل المستخدمين مع الواجهات الرقمية، أصبح واضحًا أن الاستخدام المفرط للرسوم المتحركة الزخرفية ينحرف عن جودة الموقع – وحتى يؤدي إلى فقدان المستخدمين.
مع مرور الوقت، فتح المصممون عيونهم للفوائد الوظيفية للرسوم المتحركة، مأخذين بها من كونها إضافة زخرفية إلى شيء يمكن أن يعزز تجربة المستخدم. وكانت نقطة تحول في تطور رسوم واجهة المستخدم هي التحول من الحركة الخطية إلى التفاعلات التي تحاكي خصائص العالم الحقيقي، مثل السرعة والجاذبية والوزن. هذا التقدم أدى إلى الرسوم المتحركة الواقعية التي لدينا اليوم.
في تصميم واجهة المستخدم، يمكن أن تكون الرسوم المتحركة وظيفية أو زخرفية. الرسوم المتحركة الوظيفية توجه وتعلم المستخدم في الوقت الحقيقي، في حين أن الرسوم المتحركة الزخرفية هي أداة أساسية لسرد القصص وتعزيز العلامة التجارية.
2. أهمية رسوم واجهة المستخدم
مع زيادة عدد المواقع والتطبيقات بمعدل يزداد بنسبة عشرة مرات كل يوم، أصبح المستخدمون يتوقعون واجهات قوية ووظيفية وفريدة تسهل التنقل. يجب أن تكون المنتجات الرقمية الحالية مركزة حول الإنسان، وبديهية، ومتجاوبة. واحدة من الطرق التي يحقق بها المصممون كل ما سبق (وأكثر) هي باستخدام الرسوم المتحركة.
تضيف الرسوم المتحركة لمسة إنسانية حيوية إلى الواجهات الرقمية عن طريق محاكاة تجربة التفاعل مع جسم مادي في الحياة الواقعية. يجعل هذا التجربة أكثر سهولة وطبيعية للمستخدم، ويقلل من الحمل الذهني. من النقطة A إلى النقطة B، تعمل رسوم واجهة المستخدم كعلامات إشارية – في كثير من الأحيان بشكل متقن بحيث لن تعرف حتى أنها موجودة. كما تقلل الرسوم المتحركة من التوتر من خلال توفير التحديثات والتغذية الراجعة في الوقت الحقيقي، مما يبقي المستخدم مطلعًا في جميع الأوقات.
من وجهة نظر أخرى، يمكن للرسوم المتحركة جعل الواجهة ممتعة وجذابة. يعتبر وجود واجهة بصرية جذابة أمرًا حيويًا، ويمكن أن تجعل الرسوم المتحركة المناسبة فارقًا بالنسبة لك. فكر في الرسوم المتحركة كما لو كانت تشكيلة من التوابل، ومنتجك الرقمي كالطبق. إضافة توابل واحدة فقط قد تجعل الطبق يذوب وغير مجذاب. من ناحية أخرى، إضافة العديد من التوابل المختلفة يمكن أن تعطي الطبق طعمًا مرهقًا ومربكًا. عليك أن تتعلم كيفية إضافة القدر المناسب من التوابل لتحويل الطبق إلى شهي ومغذٍ.
3. أنواع رسوم واجهة المستخدم المختلفة
تحديدًا، يمكن تصنيف أنواع الرسوم المتحركة في واجهات المستخدم إلى أربعة فئات رئيسية:
تفاعلات صغيرة
التفاعلات الصغيرة ربما تكون أكثر أنواع الرسوم المتحركة استخدامًا. تُعلم المستخدمين عند اكتمال إجراء بنجاح، أو عند فشل العملية، مما يساعدهم في تصور نتيجة كل إجراء. فالضغط على زر، أو تحريك التبديل، أو التمرير لأسفل الصفحة، أو الحصول على أيقونة “صامت” عند تحويل هاتفك إلى وضع الصامت – هذه كلها أمثلة على التفاعلات الصغيرة. على الرغم من أن العديد من عناصر واجهة المستخدم الجيدة يتم تجاهلها إلى حد كبير، إلا أن أهميتها تظهر بوضوح عندما يحدث شيء خاطئ.
تحميل وتقدم
تساعد رسوم واجهة المستخدم في التحميل والتقدم في إبقاء المستخدمين مطلعين من خلال عرض عملية إكمال إجراء، أو إعلامهم بمدى الوقت الذي سيستغرق حتى يتم الانتهاء من الإجراء. لا يحب أحد الانتظار دون فهم متى سينتهي، لاسيما بدون فهم مدة الانتظار. تساهم الشريط الزمني، والأشرطة التقدمية، ووظائف “سحب للتحديث” في التخفيف من الضغط وتعزيز الشعور بأن المستخدم يتقدم.
التنقل
توجه رسوم واجهة المستخدم التنقلية المستخدم عبر الواجهة. كلما كان موقع الويب أو التطبيق أكثر تعقيدًا أو شمولًا، كلما كانت رسوم التنقل أكثر أهمية في جعل الموقع مفهومًا.
من خلال تقديم تعليمات مثل السهام، والتحريك عند التحويم، أو عناصر التخطيط التي يمكن سحبها، يصبح التسلسل البصري أوضح، ويمكن للمستخدم أن يشعر بالثقة في أين يذهب بعد ذلك.
السرد والعلامة التجارية
تُستخدم الرسوم المتحركة الزخرفية في الغالب على شاشات الترحيب، وهي وسيلة رائعة لتعزيز هوية العلامة التجارية وسرد قصة في ثوانٍ معدودة.
يمكن استخدام الرسوم المتحركة لجذب المستخدمين إلى عناصر العلامة التجارية المعينة، وعرض المنتج بطريقة ممتعة وجذابة. مثال كلاسيكي على الرسوم المتحركة في السرد والعلامة التجارية هو شعار متحرك يخبر الناس على الفور بنوع العلامة التجارية التي تمتلكها.
4. مبادئ رسوم واجهة المستخدم
في عام 1981، أنتج محركو الرسوم المتحركة في ديزني، أولي جونستون وفرانك توماس، كتابهم “وهم الحياة” الذي يوضح 12 مبدأً أساسيًا للرسوم المتحركة.
على الرغم من أن هذه المبادئ كانت مخصصة للاستخدام في الأفلام والرسوم المتحركة، فقد أصبحت منذ ذلك الحين مصدرًا لا غنى عنه لمصممي تجربة المستخدم وواجهة المستخدم – حيث توفر إطارًا مفيدًا لإدخال رسوم متحركة وظيفية وشاملة في الواجهات الرقمية.
دعونا نتعمق في ما هي تلك المبادئ:
- التمدد والانضغاط
بعض الأشياء، اعتمادًا على تركيبها، يمكن أن تغير شكلها عندما تتفاعل مع الأشياء الأخرى – تتمدد وتنضغط أثناء تفاعلها مع العالم من حولها. - التحضير
يشير التحضير إلى التنبؤ بإجراء مقبل، أو بعبارة أخرى، التفاعلات الصغيرة التي تسبق الإجراءات الكبيرة. - التسليط
كما يمكن أن تتوقع، يشير التسليط إلى تهيئة المسرح لإجراء معين. إنه وسيلة للتأثير على المستخدم ليضغط على زر معين أو ينفذ إجراءً معينًا عن طريق “تدريج” وتنظيم العناصر بطريقة محددة. - التتابع والحركة المتداخلة
فكر في قطة تستعد للقفز على فأر. قبل أن تقفز، قد تبدأ أذناها بالحركة – تليها الأمامية لتعويضها عن الأرض، وأخيرًا الخلفية بمجرد بناء الزخم. - التخفيف
التخفيف، المعروف أيضًا باسم التحرك البطيء داخليًا وخارجيًا، يشير إلى التحرك البطيء والتدريجي لعناصر واجهة المستخدم. - المنحنيات
في الحياة الواقعية، نادرًا ما تتحرك الأشياء في خطوط مستقيمة، بل في منحنيات. - الحركة الثانوية
الحركات الثانوية هي الحركات التي تدعم وتعزز الحركات الأساسية، مثل حركة شرائط الأحذية أثناء سير الشخص في الرسوم المتحركة. - التوقيت
التوقيت يشير إلى ترتيب تحريك عناصر واجهة المستخدم، فضلاً عن السلسلة التي تتبعها. - التبالغ
في واجهة المستخدم، يمكن أن تكون بعض الرسوم المتحركة مبالغ فيها لجذب انتباه المستخدمين وإضافة عنصر مميز للصفحة. - الجاذبية
حتى التحريكات الصغيرة يجب أن تكون جذابة للمستخدم من أجل خدمة غرضها. إضافة سحر إلى الرسوم المتحركة بالألوان هو طريقة مؤكدة لجعل حتى الرسوم المتحركة الأكثر إخفاءً جاذبية.
