لقد بدأ كل شئ مع تحدى (دان بيتيز للتصميم) فى فبراير 2018. ففى الوقت الذى كنت اعمل به كمصمم رقمى حيث ركزت معظم الأعمال اليومية في عملي على حل مشكلات تجربة المستخدم المعقدة أثناء العمل مع معايير العلامة التجارية الحالية.
عندما اعلن دان عن تحديه الذى تمثل فى انشاء تطبيق للسفر عبر الفضاء, ارتطمت عضلاتى الابداعية. لذلك تعمقت فى الاستكشافات وبدأت فى انشاء المفهوم تلو الاخر. ثم قام شخص ما بتنشيط دخولهم ومشاركتهم عبر موقع تويتر وفكرت انه حان الوقت لتنشيط التصميم الخاص بى ايضا. حيث انتقلت الى ما بعد التأثيرات وبدأت في تحريك التصاميم التي قمت بإنشائها في برنامج (ادوب اكس دى).
وبعد مشاركة استكشافاتى كان هناك نشاطا غير عاديا حيث اعجب الكثير بالاستكشافات التى قمت بمشاركتها عبر الانترنت. وكنت لا اعلم كيف ستسير الامور عندما بدأت. لا اعلم اذا كان سينتهى الامر بأحراج نفسي بعد مشاركة عملى علنا, خاصة عندما يكون معروضا امام مصممين من جميع انحاء العالم.
وقد كانت التجربة باكملها لا تصدق حيث قدمتنى لمجتمع اوسع فى مجال التصميم.
عملية التعليم
استوديو انفجن
لم يفز تقديري في المسابقة ، ولكن ما تم تنفيذه كان عبارة عن استكشاف عميق لتحريك واجهات المستخدم. وفى النهاية كانهذا الاستكشاف هو ما جذبني الى استوديو انفجن. وكنت ارغب فى الاستمرار فى تصميم المشاريع الجانبية خارج مجال عملى. حيث اردت التحسن فى مجال الرسوم المتحركة ولكن لم يعجبنى كم الوقت الذى تستغرقه جزئية ما بعد التأثيرات. ثم رأيت شيئا جذبنى, انفجن, الذي كنت قد استخدمته من قبل لنماذج أولية ، يخطط لإصدار أداة تصميم جديدة تتضمن رسومًا متحركة.
حيث وضعت بشغف اسمى بقائمة ستوديو انفجن للدخول المبكر, وانتظرت. وفى اللحظة التى استلمت فيها الرسالة التى اخبرتنى انه بأمكانى تنزيل البرنامج الجديد, فرحت قليلا فى الواقع. ولكن الجزء الطائش داخلى لم ينتظر لمحاولة الكثير من الرسوم المتحركة فى برنامج خصص للرسوم المتحركة فى واجهة المستخدم وذلك بدلا من استخدام برنامج ادوب لما بعد التأثيرات كما فعلت لدخول التحدى الخاص ب(سبيسد).
تحدي الرسوم المتحركة الأسبوعي في واجهة المستخدم
حيث بدأت فى وضع مفاهيم بسيطة للتصميم واستمريت فى مشاركتهم على مواقع دريبل, وبيهانس, وتويتر لمعرفة كيف يفكر الناس ولأتعلم كيف احسن من ادائى. ولقد حصلت على ردود افعال بشأن جعل الرسوم المتحركة اسرع او ابطأ. حيث يخبرنى الناس عندما يكون الرسم المتحرك منقلبا او بسيطا. لذلك تعلمت الكثير من وضع عملى امام الناس.
على الاعتراف انه عندما بدأت فى استخدام ستوديو انفجن شعرت كأننى لم اقم بأى تصميم للرسوم المتحركة من قبل. وتذكرت رؤية مصممين آخرين على تويتر يكملون هذه التحديات اليومية أو الأسبوعية التي دفعوا أنفسهم فيها لتحسين مهارات معينة لديهم. وكانت فكرة الدخول فى تحدي آخر هي الدافع المثالي بالنسبة لي ، لذلك بدأت تحدي واجهة المستخدم الرسومية الأسبوعي.
اول تحدى اسبوعى لتصميم واجهة المستخدم الخاص بى
حيث كانت اول رسوماتى المتحركة عبارة عن تفاعل بسيط يتم تمريره فى معرض الصور. حيث اعجبتنى القدرة على التفاعل مع الرسوم المتحركة الخاصة بي بدلا من مجرد مشاهدتها فى شكل فيديو.
ومع استمرار التحدى, تعلمت الكثير عن التحولات وكيفية توصيل الطبقات من لوحة فنية إلى أخرى.
هذه الصورة تعبر عن تجربتى الثانية, حيث اصبحت رسومى المتحركة اكثر سرعة, جنبا الى جنب مع كيفية تحريكها عندما قمت بتصميمها للمرة الاولى مقارنة بالتحسينات التى اضفتها على تصاميمي.
وكانت الرسوم المتحركة التى قمت بتصميمها اسرع فى الحركة. اسرع كثيرا. ولكن في ذلك الوقت لم أتمكن من رؤيتها بشكل كامل ، واستغرق الأمر بعض الوقت لتحديد مدة انتقالي داخل الاستوديو.
ولقد قمت بمشاركة استكشافاتى على مواقع دريبل,بيهانس وتويتر, حتى اطرح عملى امام الجميع واحصل على ردود افعال من المجتمع. حيث اتذكر تعليقات احد الاشخاص بشأن ضرورة ابطاء سرعة الرسم المتحرك على الشاشة. شكرتهم ، ثم اعترفت بأنني كنت أحاول معرفة السرعة الصحيحة وأنني كنت آمل أن أتمكن من الحصول عليها بشكل صحيح.
لقد تعلمت قيمة هذه التحديات الموجهة ذاتيًا لأنها ولدت الاتساق ، وزودتنى بالممارسة ، اعطتنى وسيلة لجمع ردود الافعال.
واستمريت فى ذلك, بحيث لاحظ موقع انفجن جهودى. ، حيث كنت أستمر في استكشاف الرسوم المتحركة لواجهة المستخدم وعمل المنتج. وتعلمت ،أكثر من ذلك ،أن مشاركة تصميماتك يمكن أن يكون لها تأثير كبير ويمكن أن تساعد في تحسين مهاراتك. لقد واصلت التعلم قدر استطاعتي أثناء قيامى بإنشاء رسومى المتحركة.
كما يبرز احدث استكشافاتى ما تعلمته من التيسير العضوى وإظهار التسلسل الهرمي ، وتبسيط الحركة.
ومن كل هذه الاستكشافات تعلمت ثلاثة اشياء اساسية بشأن الرسوم المتحركة الخاصة بواجهة المستخدم, وكيفية تعزيز تجربة المستخدم باستخدام الحركة.
الاساسيات الثلاثة للرسوم المتحركة
1-انشاء حركة طبيعية والتيسير العضوى
حيث يؤدي استخدام التأخير الطفيف في حركة العناصر المتحركة إلى تيسير طبيعي بشكل يجعل الواجهة تبدو أكثر طبيعية.
لا يمكن المبالغة في أهمية التخفيف.
2-اظهار التسلسل الهرمى لتسهيل عملية استيعاب المستخدم
ان اضافة حركة لعنصر معين يساعد على تنبيه المستخدم حتى يتخذ اجراءا بشأن ذلك فى البداية. حيث يفيد ذلك في واجهة قد تحتوي على محتوى منافس ، مثل الصور الملونة أو مجموعات نصية.
الحركة الطبيعية هي مفتاح العناصر المتحركة الرائعة المظهر.
3-تسهيل الحركة
قد يكون من المثير توصيل أكبر عدد ممكن من العناصر من شاشة إلى أخرى ، ولكن القيام بذلك ، قد يؤدي إلى زيادة تحميل المستخدم.
إظهار التسلسل الهرمي للعناصر عن طريق إضافة الحركة.
يمكن أن تؤدي الكثير من القطع المتحركة في آن واحد إلى إلحاق الضرر بتدفق الانتقال ، وبدلاً من مساعدة المستخدمين على فهم كيفية اتصال الشاشتين ، فقد يؤدي ذلك إلى حدوث ارتباك.
ابقى متصلا مع الاساسيات
لازلت أحاول إعادة نفسي إلى هذه الأساسيات عندما اقوم بإنشاء رسوم متحركة ، ومثل معظم الأشياء ، إنها عملية مستمرة لتعلم المزيد في كل مرة أصنع فيها شيئًا جديدًا.
للكاتبة مارثا بيرجمان
جميع الصور بتصرف من المصدر
ترجمة : آية رضوان
الكاتب: Martha Bergmann
المصدر: https://www.invisionapp.com/inside-design/fundamentals-of-motion-design/
