توقيت الصور المتحركة غير المتماثل

يمنح كسر التناظر تباينًا وجاذبيتك لمشاريعك. تعرَّف على الحالات التي تتطلّب تطبيق ذلك على مشاريعك وكيفية تطبيقه.

يُحسِّن توقيت الرسوم المتحركة غير المتماثل تجربة المستخدم من خلال السماح لك بالتعبير عن شخصيتك وفي الوقت نفسه الاستجابة بسرعة لتفاعلات المستخدم. ويمنح أيضًا تباينًا للشعور، ما يجعل الواجهة أكثر جاذبية بصريًا.

  • استخدِم توقيتًا غير متماثل للتأثيرات المتحركة لإضافة لمسة شخصية وتباين إلى عملك.
  • يجب دائمًا إعطاء الأولوية لتفاعل المستخدم، واستخدام مدد أقصر عند الاستجابة للنقرات، والاحتفاظ بمُدد أطول للحالات التي لا تكون فيها نشطًا.

مثل معظم "قواعد" الرسوم المتحركة، عليك إجراء تجارب لمعرفة ما يناسب تطبيقك، ولكن عندما يتعلق الأمر بتجربة المستخدم، يُعرف عن المستخدمين أنّهم لا يتسامحون مع أي تأخير. القاعدة العامة هي الاستجابة بسرعة دائمًا لتفاعل المستخدم. ومع ذلك، يكون الإجراء الذي يتّخذه المستخدم غير متماثل في معظم الأحيان، وبالتالي يمكن أن يكون المؤثر المرئي كذلك.

على سبيل المثال، عندما ينقر المستخدم لعرض شريط تنقّل على الجانب، يجب عرضه في أسرع وقت ممكن، بمدة تبلغ 100 ملي ثانية تقريبًا. عندما يغلق المستخدم القائمة، يمكنك عرض الرسوم المتحركة بشكل أبطأ قليلاً، مثلاً خلال 300 ملي ثانية.

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

وبالتالي، فإنّ القاعدة العامة هي كما يلي:

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