الـ Prototype: التفاعلات وSmart animate والـ Overlays

النموذج الثابت يُظهر شكل Steady. أما الـ prototype (النموذج التفاعلي) فيُظهر إحساسه: هل يعطي النقر على زر التعليم استجابة مُرضية، وهل تأتي لوحة New habit من حيث يتوقّع الناس، وهل يستطيع أحدهم إيجاد طريق العودة؟ اختبار هذه الأسئلة بـ prototype يكلّف بضع ساعات. واختبارها بعد التطوير يكلّف sprint كاملًا.

التفاعلات: trigger وaction وحركة

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

الـ trigger هو ما يفعله الشخص. وقت كتابة هذا الدرس، تشمل الـ triggers ‏On click/On tap وOn drag وWhile hovering وWhile pressing وKey/Gamepad وMouse enter وMouse leave وMouse down وMouse up وAfter delay. في تطبيق الهاتف تستخدم غالبًا On tap، إضافة إلى On drag لإيماءات السحب.

الـ action هو ما يحدث. أشيعها Navigate to إلى frame آخر، وBack، وChange to إلى variant آخر من component، وOpen overlay، وSwap overlay، وClose overlay، وScroll to. والـ prototypes المتقدّمة يمكنها أيضًا ضبط variables واستخدام الشروط، وهذا يعتمد على الخطة.

الـ animation هي طريقة الحركة: Instant، أو Dissolve، أو Smart animate، أو الحركات الاتّجاهية مثل Move in وPush وSlide in، ولكلٍّ منها easing ومدّة. في Steady، الأقصر والأهدأ هو الأفضل: Smart animate أو Push، مع Ease out، لمدّة بين 250 و300 ms أو نحو ذلك.

هذا مسار تسجيل العادة الذي ستبنيه:

الـ Interactive components: زر التعليم

يمكنك رسم وصلة من كل زر تعليم إلى نسخة من الشاشة يكون فيها ذلك الصف معلَّمًا. مع خمس عادات، هذه 32 تركيبة من الشاشات. بدلًا من ذلك، افتح الـ component set الخاص بـ Check button وأضف التفاعل بين الـ variants الخاصة به: على الـ variant ‏To do، ‏On tap، ثم Change to ‏Done، مع Smart animate لمدّة 200 ms. وأضف العكس على Done.

الآن كل instance من زر التعليم، في كل شاشة، تتبدّل وحدها حين تُنقر في الـ prototype. هذا interactive component، ولهذا تؤتي الـ variants المتقنة من الدرس 3.2 ثمارها مرّتين.

الـ Overlays: لوحة New habit

زر الإضافة يفتح لوحة New habit، التي تنزلق إلى الأعلى فوق Today بدل أن تحلّ محلّها. صِل زر الإضافة بـ frame اللوحة باستخدام Open overlay. في إعدادات الـ overlay، اختر موضعًا أسفل المنتصف، وفعّل الإغلاق عند النقر خارجها، وأضف خلفية خلف الـ overlay (لون داكن بشفافية نحو 40% يعتّم الشاشة). واستخدم حركة Move in من الأسفل.

إعدادات الـ overlay تخصّ frame الـ overlay، لا الوصلة، فتعيد استخدامها كل الأزرار التي تفتح اللوحة. وداخل اللوحة، صِل Save habit وCancel بـ Close overlay.

الـ Smart animate: مطابقة الطبقات

ينظر الـ Smart animate إلى frame-ين، ويجد الطبقات المتطابقة، ويحرّك الاختلافات. تتطابق الطبقة حين يكون لها الاسم نفسه وتقع في الموضع نفسه من شجرة الطبقات في الـ frame-ين. ويمكنه تحريك الموضع والحجم والدوران والشفافية والتعبئة.

لاحتفال الـ streak في Habit detail، كرّر الـ frame (التكرار يُبقي الأسماء متطابقة)، ثم في الـ frame الثاني كبّر رقم الـ streak وأظهر تدريجيًا شارة “New best!”. صِل بينهما بـ Smart animate، مع Ease out، لمدّة 300 ms.

العرض والتمرير

اجعل Today نقطة بداية للمسار (flow starting point) واضغط زر التشغيل لتعرض الـ prototype. في قائمة طويلة، اضبط frame المحتوى على التمرير العمودي وأبقِ شريط التبويبات ثابتًا في مكانه، وكلاهما من تبويب Prototype وقت كتابة هذا الدرس. اختبر على هاتف حقيقي بتطبيق Figma للجوّال؛ فحركة مدّتها 300 ms تبدو بطيئة على الشاشة الكبيرة كثيرًا ما تبدو مناسبة في اليد.

في الدرس التالي تتأكّد من أن الشاشات التي حرّكتها للتوّ تعمل للجميع، بمن فيهم من لا يرون التركوازي، ومن لا يستطيعون النقر على أهداف صغيرة، ومن يستخدمون قارئ الشاشة (screen reader).