ما هي الرسوم المتحركة لواجهة المستخدم؟ Principles، الأنماط والإنتاج
دليل كامل للرسوم المتحركة لواجهة المستخدم: ما هي، مبادئ الحركة الأساسية الـ 12 للواجهات الرقمية، ومتى وكيف يتم استخدامها للمشاركة وسهولة الاستخدام.
الوجبات الجاهزة الأساسية
الرسوم المتحركة لواجهة المستخدم هي الاستخدام المتعمد للحركة لتوصيل تغييرات الحالة وتوجيه انتباه المستخدم وتقديم التعليقات وإنشاء إحساس بالاستمرارية المادية في واجهات البرامج. على عكس الرسوم المتحركة الزخرفية، تخدم الرسوم المتحركة الفعالة لواجهة المستخدم منطق الواجهة وتحسن الأداء الملموس.
ما هي الرسوم المتحركة لواجهة المستخدم؟
الرسوم المتحركة لواجهة المستخدم هي حركة يتم تطبيقها على عناصر واجهة المستخدم (الأزرار، والبطاقات، والوسائط، وأشرطة التنقل، والأيقونات) للتعبير عن المعنى. إنها ليست زخرفة، بل هي وسيلة اتصال تسد الفجوة بين الدقة الثنائية لحالة البرنامج والمادية المستمرة للإدراك البشري. عند القيام بذلك بشكل صحيح، تقلل الرسوم المتحركة لواجهة المستخدم من الاحتكاك المعرفي وتجعل البرامج تشعر بالثقة والحيوية.
لماذا تعتبر الرسوم المتحركة لواجهة المستخدم مهمة لجودة المنتج
الرسوم المتحركة تنقل: "تم تلقي هذا الإجراء"، "هذا العنصر لديه زخم"، "هذا التحول يربط بين هاتين الحالتين". وبدون ذلك، تبدو البرامج هشة وغير مستجيبة، ويتعين على المستخدمين بذل جهد أكبر لمعرفة ما تغير. الحركة الموضوعة بشكل جيد لا تزين الواجهة؛ فهو يحمل معلومات كان على الواجهة أن تذكرها بالكلمات.
- تعمل التعليقات المرئية الفورية على تقليل معدلات الخطأ من خلال تأكيد استلام الإجراء
- توضح تحولات الدولة ما الذي تغير وأين يجب أن يتحرك الاهتمام
- الرسوم المتحركة الربيعية المبنية على الفيزياء تنقل الجودة والحرفية الهندسية
- الرسوم المتحركة للدخول والخروج تحدد التسلسل الهرمي المكاني ومنطق التنقل
Principles الأساسية للرسوم المتحركة الفعالة لواجهة المستخدم
تتبع الرسوم المتحركة الجيدة لواجهة المستخدم مجموعة من المبادئ المقتبسة من الرسوم المتحركة التقليدية ولكن تم معايرتها لواجهات البرامج والسياقات التفاعلية.
1. فيزياء الربيع على منحنيات المدة
تبدو الرسوم المتحركة المبنية على المدة (سهولة الدخول باستخدام مؤقت ثابت قدره 300 مللي ثانية) ميكانيكية لأنها تتجاهل سرعة إدخال المستخدم. تستجيب الرسوم المتحركة الربيعية لزخم الإيماءة وتصل إلى حالة الراحة عندما تستقر الفيزياء بشكل طبيعي. هذا هو السبب في أن نماذج الرسوم المتحركة لنظامي التشغيل iOS وMaterial Design تأتي في فصل الربيع أولاً.
2. الرد على الإطار الأول
يجب أن يظهر الإطار الأول لأي رسم متحرك يتم تشغيله بواسطة إيماءة المستخدم على الفور. يؤدي البدء المتأخر إلى كسر الشعور بالاتصال الجسدي بين الإدخال والاستجابة، لذا ابدأ الحركة في نفس الإطار مثل الإدخال بدلاً من البدء بعد مؤقت.
3. الاستمرارية المكانية
يجب أن تتحرك العناصر عبر المسارات المكانية المنطقية. الشكل الذي يتم فتحه من زر يجب أن يتوسع من موضع الزر، ولا يظهر من منتصف الشاشة.
4. التسلسل الهرمي
عندما تتحرك عناصر متعددة في وقت واحد، قم بترتيبها بمقدار 40-80 مللي ثانية من الأصل إلى الطفل لتوصيل التسلسل الهرمي الهيكلي.
الرسوم المتحركة لواجهة المستخدم في ExodeUI
تصمم ExodeUI كل تفاعل على أنه مشكلة فيزيائية ربيعية، وليس كمؤقت للمدة. يمكنك تكوين الصلابة بصريًا (مدى سرعة استجابتها)، والتخميد (مدى سرعة استقرارها)، والكتلة (مدى المقاومة التي تتمتع بها). يتم تصدير هذه القيم بنسبة 1:1 إلى خطافات React ومعدلات الرسوم المتحركة SwiftUI.
مقتطف من تنفيذ الإنتاج
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 AnimatedCard({ expanded }) {
return (
<ExodeUICanvas
src="/animated_card.bexode"
inputs={{ expanded }}
onTrigger={(name) => console.log('ExodeUI event:', name)}
/>
);
}