الرسوم المتحركة الوظيفية أصبحت أساس التصاميم في واجهة المستخدم. الشاشات الثابتة لم تعد تلفت نظر مستخدميها، كما إنها لا تلبي الغرض المطلوب منها.
سابقاً ارتبطت واجهات المستخدم المتحركة بالنوافذ المنبثقة فقط التي تظهر ضمن المواقع، حالياً تم تطوير هذه الخاصية ليستطيع المستخدم الدخول إلى المحتوى عن طريق هذه النوافذ المنبثقة.
أهمية دمج واجهة المستخدم المتحركة بالتصميم الخاص بالمشروع. ?️
من المعروف بإن العناصر المتحركة قادرة على لفت انتباه العقل البشري أكثر من العناصر الثابتة. خاصة عندما يكون العقل البشري بحالة الشرود أو التركيز العالي، مما يجعل الأوامر ضمن المواقع والتطبيقات صعبة الملاحظة إن لم تكن متحركة، لتكون قادرة على استقطاب اهتمام النظر البشري.
تأتي أهمية وجود عناصر متحركة ضمن واجهة المستخدم لاستقطاب وتوجيه المستخدمين إلى الإجراءات المهمة التي عليهم القيام بها، بالإضافة إلى إثراء تجربة المستخدم ليصبح التصميم واضحاً ومفهوماً.
هيا بنا ضمن هذا المقال لنقدم لك بعض الاقتراحات لتحسين التفاعلات في واجهة المستخدم. ?
من خلال بعض الأمثلة التي سنقدمها لك لتصاميم واجهة المستخدم المتحركة animation UI، سنقوم بالتدّرج بشرح الواجهات الجيدة إلى الأكثرها تميزاً. وبعض النصائح البسيطة التي من شأنها رفع مستوى تصاميمك لتلبية الغرض منها. من خلال دمج الرسوم المتحركة التنظيمية بالأنماط الموجودة ضمن الشاشة الأساسية، هذا الدمج يُظهر استمرارية الحالة والانتقال إلى المحتوى بكل سهولة (بما معناه: من خلال النوافذ المتحركة يمكنك إنشاء دليل استخدام بمنتهى السهولة. مما يجعل تصميمك أكثر متعة ورغبة لاقتنائها من قبل المستخدمين). هذه الحركات التفاعلية ضمن التصميم تشير إلى وجود علاقة مشتركة بين العناصر المراد استقطاب الانتباه لها، من أجل التصرف على أساسها وإرشاد المستخدم إلى الخطوات التالية التي يجب أن يتبعها.
⛷️ قابلية انزلاق المحتوى عند لمسه.
عند استخدام خاصية الانزلاق يرتقي تصميمك من الجيد إلى الممتاز. عوضاً عن النقر لفتح علامة تبويب جديدة يمكنك اعتماد الانزلاق من أجل الاستمرارية في عملية الانتقال من صفحة إلى أُخرى بمنتهى السهولة كما يعطي شعوراً جيداً للمستخدم بإن عملية التصفح مستمرة ولم تتوقف عند نقطة معينة.
من خلال هذا المثال يمكنك رؤية عملية كتم الصوت عن طريق السحب أو الانزلاق دون الحاجة لفتح صفحة أو علامة تبويب جديدة لإعطاء أمر الكتم.
عند القيام بتصميم نوافذ منبثقة مثل هذه، حاول قدر الإمكان وضع المحتوى بشكل صحيح وفقاً للإجراء الذي يقوم به. بهذه الطريقة يمكنك رؤية المحتوى والنقطة الأساسية التي كنت متواجد فيها سابقاً. كما يمكنك وضع تفاعلات صغيرة من شأنها نقلك من المحتوى إلى الأجزاء الأخرى المرتبطة به.
? توصيل العناصر المشتركة ضمن البطاقة بعضها ببعض.
تعمل الرسوم المتحركة الوظيفية الجيدة على الانتقال عن طريق الدفع من جهة لأخرى لعرض المحتوى على الشاشة الرئيسية، بينما الرائعة تعمل بشكل متصل بين حالة وأخرى من خلال تحريك المحتوى ليظهر للمستخدم بإنه متتابع.
للحصول على توصيل ممتاز للعناصر مشتركة مع بعضها، خاصة عند الانتقال من حالة لحالة. يمكننا التحقق من وجود العناصر المشتركة ونقوم بتوصيلها مع بعضها باستخدام Invision Studio. حيث تعتبر أداة ممتازة لتصميم واجهة المستخدم بطريقة متزامنة، من خلالها يتم الربط بين المكونات التي تتكرر بين نافذتين تلقائياً أثناء انتقال الحركة. هذا ما يجعل النماذج الأولية للرسوم المتحركة الوظيفية غاية في السهولة.
يمكنك اختيار أنواع رسوم وظيفية تبعاً لبيان الحركة الموجود لديك وبالتالي بالإمكان تطبيقه، كالمثال اعلاه الذي يحتوي على مجموعة من عمليات السحب والتلاشي والتضمين والانسحاب.
? استخدام التأثير المتتالي في المحتوى الخاص بالتصميم.
يختلف الرسم المتحرك الوظيفي الجيد عن الممتاز في هذه النقطة، بأن الجيد يغير العناصر على الشاشة ودرجة شفافيتها عند الدخول عليها. أما الرسم المتحرك الوظيفي الممتاز يعرض العناصر أو المجموعة بشكل سريع.
يمكنك الحصول على هذا التأثير المتتالي من خلال تأخير كل عنصر بشكل بسيط عن العنصر الذي سبقه مع الحفاظ على نفس المدة الزمنية الفارقة بين كل عنصر وآخر حتى تحصل على الشكل والثبات المطلوبَين. احرص على تحريك المجموعات مع بعضها ولا تركز على كل عنصر صغير في المجموعة. أوصت Google بأن يكون الفاصل الزمني بين كل عنصر لا يزيد عن 20 مللي ثانية. يمكنك استخدام مبدأ الكوريغرافيا choreography داخل نظام حركة ماتيريال Material Motion لفهم الحالة أكثر. ولكن يمكننا القول بأنها خطوات الرقص الثنائية المتزامنة مع ايقاع بطيء بشكل نسبي، ومن هنا تم استيحاء هذه التسمية داخل التصاميم.
?️ استخدام طريقة دفع العناصر للعناصر الأخرى.
تتحرك الرسوم الوظيفية الجيدة لتعرض العناصر ضمن الحالة، لكن تصميم الرسم الوظيفي الرائع يؤثر على محيطه أثناء تغيره.
جعل العناصر الموجودة داخل المحتوى مدركة لمحيطها، أي جعل المحتوى يقوم بجذب أو إبعاد العناصر من حوله. يمكنك التحقق من مبدأ الحركة الواعية Aware motion في التصاميم متعددة الأبعاد.
? إظهار العناصر في القائمة ضمن السياق.
تَعرٍض قوائم الرسوم المتحركة الوظيفية الجيدة المحتوى من جهة الزر الذي قام بفتحها، بينما الممتازة تزداد حجماً من نقطة اللمس وكأنها تنمو تدريجياً.
? استخدام الأزرار لإظهار الحالات المختلفة.
تعرض الرسوم المتحركة الوظيفية الجيدة ما يحدث بجانب الأزرار، ولكن الرسوم الممتازة تستخدم الزر نفسه لإظهار الحالات المختلفة. كمثال على ذلك:
عند الضغط على زر التنزيل يضع لك جاري التنزيل بجانب الزر الرئيسي. ولكن للحصول على تصميم متحرك متميز عند الضغط على زر تنزيل يحول الزر إلى شريط يوضح حالة التنزيل.
عند استخدام مكان الزر نفسه لإيضاح الحالة بشكل بصري، ومعرفة التقدم الذي حققه الإجراء الذي قام به المستخدم. الفكرة من هذه العملية استخدام المساحة التي يتفاعل معها المستخدم. لكن الإبداع يكمن باستخدام نفس الزر ولونه لتأكيد نجاح الإجراء المُتخذ من قبل المستخدم.
? لفت الانتباه إلى عنصر مهم.
يمكننا لفت الانتباه بالتصاميم الجيدة من خلال الألوان والأحجام وطريقة العرض لتسليط الضوء على الأجزاء المهمة المراد اتخاذ إجراء تجاهها، أما التصاميم الممتازة والرائعة تستخدم الرسوم المتحركة الوظيفية للفت الانتباه للقيام بهذا الإجراء مع الحرص على الابتعاد عن تشتيت المستخدم.
ابدأ برسم بسيط وقم بزيادة كثافته تدريجياً (نقصد بذلك تغيير حجم ولون وسرعة العنصر المراد التركيز عليه). ولكن كل شيء زاد عن حده ينعكس تأثيره بشكل سلبي. أي كلما زاد استخدامك لهذه الخاصية، قل تأثيره على المستخدم.
? في الختام…
يمكننا القول بأن بعض اللمسات البسيطة يمكنها إحداث فارق كبير بتصاميمك، مما يؤدي لزيادة تفاعل ورغبة المستخدمين بالاستمرار ضمن صفحاتك التي أنشأتها بطريقة صحيحة.
وبذلك نكون قد أعطيناك بعض الأمثلة لتقرر الأنسب والأفضل لتصاميمك، مع التأكيد على استخدام واجهة المستخدم المتحركة، لنبدأ بعد فترة من الزمن برؤية نهضة إبداعية في هذا المجال. ما عليك سوى استخدام هذه الميزة من أجل التميز مستقبلاً. ومن هذا المنطلق ندعم رغبتك بالإبداع ونرسم خطواتك في هذا المجال من خلال دوراتنا لتكون قادراً على مواجهة السوق بكامل قوتك ومعلوماتك.
المراجع: ترجمة_وبتصرّف_للمقال
Good to great UI animation tips