كيف تستخدم Motion Design لجعل تجربة التطبيق ممتعة؟

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

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

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

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

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

لماذا استخدام تصميم الحركة للتطبيقات؟

هناك عدد من الطرق التي جعل بها تصميم التطبيقات المتحركة التفاعلات الشاملة للهاتف المحمول مثيرة للاهتمام تمامًا. هنا ، دعنا نرى كيف.

أصبحت عمليات التحميل البطيئة للتطبيق ممتعة الآن

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

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

تجربة Onboarding للمستخدمين

تظهر إحدى حالات الاستخدام الأكثر شيوعًا لـ Motion Design للتطبيقات في مرحلة إعداد تطبيق الهاتف المحمول من رحلة التطبيق. تُستخدم الرسوم المتحركة لشرح التطبيق وجعله على دراية به ، ويتم دمج الرسوم المتحركة من قبل العلامات التجارية لتسهيل العثور على طريق المستخدمين في الجولات القليلة الأولى.

قم بزخرفة التطبيق في أذهان المستخدمين باستخدام الخريطة الذهنية

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

السماح للمستخدمين بمعرفة ما هو الخطأ وما هو الصواب

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

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

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

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

مبادئ والت ديزني المفصلة التي يجب أن تجسدها في تطبيق الهاتف الخاص بك

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

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

1. مسار حركة الحركة

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

2. توقيت ظهور الحركة

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

لذا ، قبل أن تفرط معهم ، تعرف في أي مرحلة هم مطلوبون بالفعل.

3. التركيز على تركيز الرسوم المتحركة

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

4. سرعة الرسوم المتحركة

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

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

5. اصبح قطعة متحركة على الوجه

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

كيف يتم استخدام الرسوم المتحركة والحركة في تطبيقات الجوال؟

كما قلنا من قبل ، هناك خيط رفيع بين القيام بذلك والإفراط فيه. هناك أماكن تعتقد أنه يمكنك فيها استخدام الرسوم المتحركة ولكن في الواقع ، يمكنك ببساطة تجنبها. هناك عدة طرق يمكنك من خلالها استخدام تصميم الحركة الذي يصنع أفضل تصميم لواجهة المستخدم للتطبيقات. دعونا نلقي نظرة عليهم:

التلعيب

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

تقدم الرسوم المتحركة

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

إخطارات متحركة

عادة ما تكون الإخطارات مملة للغاية ولكن إذا تم استخدام الرسوم المتحركة المناسبة ، فإنها تعمل على تحسين تجربة المستخدم الإجمالية. سيؤدي هذا أيضًا إلى التأكد من أن المستخدمين يتذكرون كل إشعار مهم يتلقونه.

تحميل الرسوم المتحركة

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

الرسوم المتحركة الانتقالية

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

الرسوم المتحركة للتسويق

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

تمرير الرسوم المتحركة

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

جذب الانتباه

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

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