الصفحة الرئيسية » UI / UX » أفضل 20 لعبة مجانية لمصممي Aspiring UX Motion

    أفضل 20 لعبة مجانية لمصممي Aspiring UX Motion

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

    يتعلم معظم مصممي UX استخدام البرنامج لإنشاء هذه الرسوم المتحركة. الخياران الأكثر شيوعًا هما Adobe After Effects and Principle (OS X فقط). يمكنك تصميم نماذج بالحجم الطبيعي في برنامج مثل Photoshop ، ونقل واجهات المستخدم إلى هذه البرامج للرسوم المتحركة.

    إذا كنت مهتمًا بتعلم الرسوم المتحركة لـ UX ، فستكون الهدايا المجانية بمثابة رصيد هائل. يمكنك دراسة عمل الآخرين ، واللعب مع تصاميمهم لمعرفة كيف يعمل كل شيء.

    ستجد أدناه أفضل هدايا مجانية لمستخدمي Principle و AE فقط الدخول في تصميم الحركة UX. بالتأكيد سوف تساعدك على فهم كيف تعمل الرسوم المتحركة UX, وكيفية بناء الخاصة بك.

    1. حذف العمل

    الضرب هو إجراء شائع للغاية في تطبيقات الجوال لأغراض مختلفة. يتم استخدام إجراء انتقاد iOS الافتراضي عرض خيارات بديلة لتحرير / حذف العناصر, وهذا هو بالضبط ما تحصل عليه في هذه الهدية الترويجية التي أنشأتها راميل Derogongun.

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

    2. القطعة انتقد

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

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

    3. Dualshock UI

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

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

    4. همبرغر القائمة الرسوم المتحركة

    لا تزال رموز الهامبرغر في غاية الغضب في واجهات الأجهزة المحمولة. يوضح رمز القائمة الهدية الترويجية هذه كيفية تحريك أيقونة شريط الثلاثة في أيقونة "X".

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

    5. Snapster

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

    إنه ملف PRD ، وللأسف هذا لا يعمل بشكل جيد مع After Effects ، لذلك يمكن لمستخدمي Principle فقط الاستفادة من هذا الملف.

    6. تحميل المغازل

    وهنا AEP After Effects الهدية الترويجية ل المغازل تحميل المحمول. أصبحت هذه الأنواع من صور GIF المتحركة شائعة جدًا عندما دخلت Ajax في تطوير الويب الرئيسي.

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

    7. تشغيل / إيقاف مؤقت الانتقال

    آثار الانتقال غالبًا ما يبدو بسيطًا جدًا ولكنه يتطلب في الواقع قدراً كبيراً من العمل. هذه الرسوم المتحركة للتشغيل / الإيقاف المؤقت التي أنشأها Alex Pronsky هي مثال رائع.

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

    8. iPhone نموذج بالحجم الطبيعي

    في حين أن الهدية الترويجية هذه لا تحتوي مباشرة على الرسوم المتحركة ، فمن المفترض استخدامها للعمل الإنتاج على تطبيقات iPhone. إنه ملف iPhone 5S AEP مجاني للاستخدام في After Effects كقالب iPhone.

    ما عليك سوى استيراد نموذج بالحجم الطبيعي للواجهة وإنشاء الرسوم المتحركة في After Effects. ثم يمكنك توصيله في نموذج بالحجم الطبيعي الخاص بـ iPhone لمشاركته مع فريقك.

    9. قالب فون

    هذا شيء آخر قالب مخصص After Effects مع تصميم اي فون أكثر حداثة. الهدية الترويجية متوفرة من هذه الصفحة في UX in Motion.

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

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

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

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

    11. تطبيق المحفظة

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

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

    12. دائرة الرقابة الداخلية التبديل

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

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

    13. ريتر التطبيق

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

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

    14. دعوة الأصدقاء

    نعلم جميعًا ونحب قائمة نشرة أيقونة plus في Google. حسنًا ، أنشأ Jardson Almeida قائمة دعوة الأصدقاء استنادًا إلى مفهوم تصميم المواد البسيط.

    تم تصميم كل شيء في Sketch ، وتم استيراده إلى Principle للرسوم المتحركة. يمكنك الحصول على كلا الملفين كتحميل مجاني واللعب معه.

    15. بطاقة انتقاد

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

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

    16. الدردشة على الخريطة

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

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

    17. تحميل التطبيق

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

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

    18. بطاقات على متن الطائرة

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

    تم إنشاء هذا بواسطة Austin Baird ، وتم إصداره مجانًا لاستخدامه في أي مشروع UI / UX.

    19. المبدأ التجريبي

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

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

    20. القوائم المنسدلة

    غالبًا ما تستخدم القائمة المنسدلة رسومًا متحركة مجنونة لجذب انتباهنا. هذا After Effects الهدية الترويجية يستخدم المنسدلة الدرج الرسوم المتحركة في القائمة للعناصر الفردية لجعلها تسقط مثل الدرج.

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

    الكلمات الأخيرة

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