תזמון אנימציה אסימטרית

שבירה של סימטריה מספקת ניגודיות ומשיכה לפרויקטים שלכם. מתי ואיך ליישם את ההגדרה הזו על פרויקטים.

פול לואיס

תזמון אנימציה אסימטרית משפר את חוויית המשתמש בכך שהוא מאפשר לבטא את האישיות שלכם ובו-זמנית להגיב במהירות לאינטראקציות של המשתמש. זה גם מספק ניגודיות לעומת התחושה, ולכן הממשק מושך יותר מבחינה חזותית.

  • השתמשו בתזמון אנימציה אסימטרי כדי להוסיף אישיות וניגודיות ליצירה שלכם.
  • עדיף תמיד להעדיף את האינטראקציה של המשתמש. כדאי לבחור משכי זמן קצרים יותר בתגובה להקשות או קליקים, ולשריין משכי זמן ארוכים יותר למקרים שבהם אתם לא מגיבים.

כמו רוב "כללי האנימציה", מומלץ להתנסות כדי לבדוק מה מתאים לאפליקציה שלכם, אך כשמדובר בחוויית המשתמש, ידוע לשמצה של המשתמשים, אין סבלנות רבה. העיקרון המנחה הוא להגיב תמיד במהירות לאינטראקציה של משתמש. עם זאת, ברוב המקרים הפעולה של המשתמש היא אסימטרית, ולכן גם האנימציה יכולה להיות כזו.

לדוגמה, כשמשתמש מקיש כדי להציג סרגל ניווט בסרגל הצד, צריך להציג אותו במהירות האפשרית, למשך של כ-100 אלפיות השנייה. עם זאת, כשהמשתמש סוגר את התפריט, אתה יכול לאפשר הנפשה של התצוגה קצת יותר לאט, למשל, בערך 300 אלפיות השנייה.

לעומת זאת, כשמציגים תצוגת חלון עזר, מצב זה בדרך כלל מציג שגיאה או הודעה קריטית אחרת. במקרים כאלה, תרצו להפעיל את התצוגה לאט יותר, שוב כסימון של 300 אלפיות השנייה, אבל הסגירה, שהמשתמש מפעיל, צריכה להתרחש מהר מאוד.

אם כך, העיקרון המנחה הוא:

  • באנימציות בממשק המשתמש שמופעלות על ידי אינטראקציה של המשתמש, כמו מעברי צפייה או הצגת רכיב, יש הקדמה מהירה (משך זמן קצר), אבל סיום איטי (משך זמן ארוך יותר).
  • באנימציות של ממשק המשתמש שמופעלות על ידי הקוד שלכם, כמו שגיאות או תצוגות מודאליות, יש הקדמה איטית יותר (משך זמן ארוך יותר), אבל סיום מהיר (משך זמן קצר).