You are currently viewing كيف يأخذ المطورون التخمين من ترميز الرسوم المتحركة

كيف يأخذ المطورون التخمين من ترميز الرسوم المتحركة

كيف يأخذ المطورون التخمين من ترميز الرسوم المتحركة

للكاتبة ليزي دي كانتور /المصدر انفجن

How developers are taking the guesswork out of animation coding

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

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

هنا في InVision ، قمنا ببناء اتصال رائع لتسليم معلومات البناء المهمة للمطورين ، بما في ذلك مواصفات الحركة.

حركة اليد لمعظمنا:

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

(راجع InVision Cloud لمعرفة المزيد حول تسليم الرسوم المتحركة.)

ينتهي الأمر بمظهر شيء مثل هذا:

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

(اقرأ عن عملية تعاون مصمم المصممين من الجمعية العامة هنا.)

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

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

  1. في Studio ، يمكن للمصممين تقديم النماذج الأولية وإملاء الرسوم المتحركة المتقدمة باستخدام الحركة والجدول الزمني.
  2. عندما يكون النموذج الأولي جاهزًا للعمل ، ينقر المصممون على أيقونة النشر في InVision ، وقم بتسمية النموذج الأولي ، وانقر فوق “نشر” لإرسال الملفات إلى InVision Cloud للتعاون.
من كان يعرف أن “النشر” يمكن أن يكون جميلاً؟

 

3. من حساب InVision Cloud الخاص بك ، يمكن للمطورين الآن عرض النموذج الأولي الجديد في وضع الفحص للحصول على الأصول والتدابير ونوع المعلومات وقيم الألوان وأي مواصفات للحركة.

من اليسار إلى اليمين: وضع التشغيل ووضع التعليق وفحص الوضع

 

4 .تشير أيقونة صاعقة البرق في لوحة الطبقات من النموذج الأولي إلى وجود حركات قابلة للفحص في النموذج الأولي.

هل يمكنك تسليط الضوء على صاعقة البرق؟

 

5 .يمكن للمطورين النقر فوق أي طبقة باستخدام صاعقة البرق لمعاينة الرسوم المتحركة وفحص التفاعل الخاص بمنحنى Bezier و Start Value و End Value و CSS.

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

 

يمكن نسخ كل هذه القيم ولصقها من InVision في ملفات CSS لضمان ترميز الانتقالات والرسوم المتحركة تمامًا كما تتصرف في النماذج الأولية.
(ابدأ في تسليم رسومك المتحركة باستخدام InVision Cloud.)

تبسيط handoff الخاص بك

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

إذا كنت مصممًا ، فامنح إمكانات الرسوم المتحركة المتقدمة في Studio تجربة ومعرفة مدى سهولة التنقل.

إذا كنت مطورًا ، فتحدث مع فريقك حول استخدام InVision للتعاون بشكل أوثق مع المصممين وتبسيط سير العمل.

 

للكاتبة ليزي دي كانتور /المصدر انفجن