التفاعلات الدقيقة: 15 مثالاً وكيفية تصميمها
شرح التفاعلات الدقيقة: تعريف، الأجزاء الأربعة لدان سافر، 15 مثالًا حقيقيًا مجمعة حسب النوع، قواعد التصميم وكيفية بنائها في CSS أو Framer Motion أو GSAP أو ExodeUI.
الوجبات الجاهزة الأساسية
التفاعل الجزئي عبارة عن لحظة صغيرة مضمنة في الواجهة تفعل شيئًا واحدًا: الإعجاب بمنشور، أو تبديل الإعداد، أو تأكيد النموذج، أو إكمال الإيماءة. المصطلح وتشريحه يأتي من دان سافر، الذي يحدد أربعة أجزاء. يقوم المشغل بتشغيله، وتقرر القواعد ما يحدث، وتظهر التعليقات النتيجة، وتتحكم الحلقات أو الأوضاع في ما يفعله بمرور الوقت. التفاعلات الدقيقة الجيدة تكون قصيرة، وتستجيب لمدخلات المستخدم الخاصة، وتظل غير قابلة للمقاطعة.
ما هو التفاعل الجزئي؟
التفاعل الجزئي هو أصغر تفاعل كامل في المنتج: مهمة واحدة لها بداية وتغيير ونهاية. إنه ليس تدفقًا كاملاً. إن الإعجاب بالمنشور هو عبارة عن تفاعل صغير؛ كتابة ونشر تعليق هو التدفق. الفكرة وبنيتها مأخوذة من كتاب دان سافر بعنوان Microinteractions، والذي يقسم كل جزء إلى أربعة أجزاء.
الأجزاء الأربعة للتفاعل الجزئي
يقسم إطار عمل دان سافر التفاعل الجزئي إلى أربعة مكونات. إن تسميتها مفيدة لأن معظم الأخطاء والحركة السيئة تعيش في واحد من الأربعة، وليس في الكل.
مشغل
الحدث الذي يبدأ به. يتم بدءه بواسطة المستخدم (نقرة أو تمرير مؤشر الماوس أو الضغط لفترة طويلة أو سحب) أو يتم بدءه بواسطة النظام (انتهاء التنزيل أو وصول خطأ في الشبكة). الائتمان: دان سافر.
قواعد
ماذا يحدث بمجرد أن يبدأ: الحالات الصالحة، والقيود مثل حدود السحب أو القيم الدنيا والقصوى، وتسلسل الأحداث. الائتمان: دان سافر.
تعليق
كيف يخبر المنتج المستخدم بما حدث: استقرار الزنبرك، وتغير اللون، وتحول الأيقونة، وتحديث النص. هذا هو المكان الذي يعيش فيه معظم تصميم الحركة. الائتمان: دان سافر.
الحلقات والأوضاع
ما يفعله التفاعل مع مرور الوقت، وكيف تغيره الأوضاع. يمكن أن يتصرف نفس التبديل بشكل مختلف في الوضع المظلم أو في تخطيط مضغوط دون تغيير منطقه. الائتمان: دان سافر.
لماذا تعتبر التفاعلات الدقيقة مهمة؟
التفاعل الجزئي هو كيف تجيب الواجهة على المستخدم بدون فقرة من النص. فهو يؤكد تلقي إجراء ما، أو يوضح أن شيئًا ما لا يزال يعمل، أو يشرح ما تغير للتو. عندما تكون مفقودة، يبدو المنتج نفسه أثقل: ينقر المستخدمون مرتين لأنه لم يخبرهم أي شيء بوصول النقرة الأولى، أو ينتظرون على شاشة لا تظهر أي علامة على التقدم. يتم الشعور بالأشياء الجيدة أكثر من ملاحظتها، وهذه هي النقطة المهمة.
15 أمثلة للتفاعل الجزئي
يتم تجميعها حسب ما يتواصلون به. عندما يشحن ExodeUI مثالًا مطابقًا، يتم إعطاء الاسم حتى تتمكن من فتحه وتحريره.
الأزرار والتبديل (الضغط والحالة)
1. اضغط على الزر: قم بالقياس إلى حوالي 0.92 عند المؤشر لأسفل ثم قم بالرجوع مرة أخرى عند التحرير (مثال ExodeUI: زر الجيلي). 2. تبديل التبديل: الترجمة المستندة إلى الربيع مع تغيير اللون عند الالتزام (Gooey Toggle). 3. مفتاح الوضع: عنصر تحكم مجزأ يقوم بتحريك المؤشر الخاص به وتحويل الملصق النشط (مفتاح الحركة).
ردود الفعل على النموذج (التحقق والتقديم)
4. اهتزاز الإدخال غير صالح: دفعة أفقية قصيرة تقول "تحقق من هذا الحقل" بدون مربع حوار (إدخال النص المتذبذب). 5. إرسال قيد التقدم: يصبح الزر مؤشر التقدم، بحيث لا يفقد المستخدم مكانه أبدًا (زر إرسال متحرك). 6. تأكيد النجاح: اندفاعة احتفالية صغيرة على الزر عند وصول الإجراء (زر إطلاق الصاروخ).
جاري التحميل والتقدم
7. التقدم الدائري: حلقة تمتلئ بالقيمة الحقيقية وتستقر بزنبرك (Radial Gauge). 8. مقياس المستوى أو النشاط: شريط يتفاعل مباشرة مع البيانات الواردة مثل مستوى الصوت (Sound Wave).
ملاحة
9. تبديل القائمة: رمز يتحول بين حالتين ويكشف عن القائمة في مكانها (Morph Nav). 10. التكبير الإرسائي: العناصر القريبة من المؤشر ترفع وتكبر، ثم تستقر (Magnetic Dock). 11. تحديد علامة التبويب: مؤشر ينزلق بين علامات التبويب بدلاً من الوميض (شريط علامات التبويب السائل).
حالات فارغة ونجاح
12. الحالة الفارغة: رسم توضيحي صغير يتم تحريكه مرة واحدة لتنعيم الشاشة الفارغة. 13. الكشف عن المكافأة: هدية أو شارة تُفتح بترقب عند الوصول إلى أحد الإنجازات (صندوق الهدايا المفاجئة).
السحب للتحديث
14. السحب للتحديث: تمرير زائد مرن يتتبع السحب، ثم يعود للخلف ويستقر عند التحرير. ردود الفعل هي امتداد، وليس الدوار.
ردود فعل على غرار اللمس
15. نبض التأكيد: مقياس موجز وتوهج على العنصر الذي يعكس النقر اللمسي على الهاتف المحمول، بحيث يبدو نفس الإجراء هو نفسه على الجهاز بدون محرك اهتزاز.
قواعد التصميم التي تحافظ عليها جيدة
هناك بعض القواعد التي تفصل بين التفاعل الجزئي الذي يساعد والتفاعل المزعج.
- اجعلها قصيرة: اكتملت في حوالي 200-400 مللي ثانية؛ تبدو الحركة الأطول على عنصر صغير بطيئة
- ابدأ في نفس الإطار مثل الإدخال؛ البداية المتأخرة تكسر الإحساس بالسبب والنتيجة
- اجعل الأمر غير قابل للمقاطعة: إذا قام المستخدم بعكس الإجراء في منتصف الحركة، فأعد التوجيه بسرعة بدلاً من إعادة التشغيل من الصفر
- الاحترام يفضل الحركة المخفضة: يوفر تراجعًا ثابتًا أو متقاطعًا لا يزال ينقل التغيير
- أعطه وظيفة واحدة: إذا كان التفاعل يحتاج إلى أكثر من قرار واحد، فهو تدفق
كيفية بناء التفاعلات الدقيقة
تعتمد الأداة الصحيحة على عدد الأنظمة الأساسية التي يجب تشغيل نفس التفاعل عليها.
CSS فقط
مناسب للحالات البسيطة القائمة بذاتها: عمليات رفع التمرير، وحلقات التركيز، وعمليات التبديل المدفوعة بواسطة: محدد أو تغيير الفئة. تعتبر الانتقالات والإطارات الرئيسية كافية، ولا يوجد ما يمكن شحنه خارج ورقة الأنماط.
Framer Motion أو GSAP (الويب)
يكون هذا جيدًا عندما تحتاج الحركة إلى زنبركات أو إيماءات أو تنسيق ويجب تشغيلها فقط على الويب. كلاهما يمنحك نوابض قابلة للمقاطعة ويمكن قيادتها بواسطة حالة React.
ExodeUI (الويب وiOS وAndroid من ملف واحد)
استخدم هذا عندما يجب أن يتصرف نفس التفاعل بشكل مماثل في تطبيق React وتطبيق SwiftUI وFlutter. يمكنك تأليفه مرة واحدة في ملف .exode ويقوم وقت التشغيل بتشغيله على كل منصة، لذلك لا توجد إعادة كتابة لكل منصة.
مقتطف من تنفيذ الإنتاج
import { ExodeUICanvas } from 'exodeui';
// Springs, states and timing live in the .exode file (designed in the
// editor). Your code passes inputs in and hears events back.
export function SendButton() {
return (
<ExodeUICanvas
src="/send_button.bexode"
onTrigger={(name) => console.log('ExodeUI event:', name)}
/>
);
}مفتاح Principle للتذكر
- التفاعل الجزئي عبارة عن مهمة صغيرة تحتوي على محفز وقواعد وملاحظات وحلقات أو أوضاع، وهي الأجزاء الأربعة التي حددها دان سافر
- تكتمل معظم العناصر الجيدة في حوالي 200-400 مللي ثانية، وتبدأ في نفس إطار الإدخال، وتظل قابلة للمقاطعة
- ردود الفعل هي ما تفعله: فهي تؤكد الإجراء وتشرح ما تغير، غالبًا بدون أي نص
- قم دائمًا بتوفير خيار احتياطي للحركة المنخفضة المفضلة والذي يحمل نفس المعلومات بدون حركة