הפרת הסימטריה מספקת ניגודיות ומושכת את העין בפרויקטים שלכם. מתי ואיך כדאי להשתמש באפשרות הזו בפרויקטים שלכם?
תזמון אסימטרי של אנימציות משפר את חוויית המשתמש, כי הוא מאפשר לכם להביע את האישיות שלכם ובמקביל להגיב במהירות לאינטראקציות של המשתמשים. הוא גם מספק ניגודיות למראה, וכך הממשק נראה אטרקטיבי יותר.
- כדאי להשתמש בתזמון אסימטרי של אנימציות כדי להוסיף אישיות וניגודיות לעבודות שלכם.
- תמיד עדיף להתמקד באינטראקציה של המשתמש. מומלץ להשתמש בפרק זמן קצר יותר בתגובה להקשות או לקליקים, ולהשתמש בפרק זמן ארוך יותר בזמנים שבהם אין אינטראקציה.
כמו רוב 'כללי' האנימציה, כדאי להתנסות כדי לגלות מה מתאים לאפליקציה שלכם, אבל כשמדובר בחוויית המשתמש, המשתמשים ידועים בכך שהם לא סבלניים. הכלל הוא תמיד להגיב במהירות לאינטראקציה של משתמש. עם זאת, ברוב המקרים הפעולה של המשתמש היא אסימטרית, ולכן גם האנימציה יכולה להיות אסימטרית.
לדוגמה, כשמשתמש מקייש כדי להציג ניווט בסרגל הצד, צריך להציג אותו מהר ככל האפשר, למשך כ-100 אלפיות השנייה. עם זאת, כשהמשתמש סוגר את התפריט, אפשר להציג את התצוגה באיטיות קצת יותר, למשל, בסביבות 300 אלפיות השנייה.
לעומת זאת, כשמציגים תצוגה מודאלית, בדרך כלל זה כדי להציג שגיאה או הודעה קריטית אחרת. במקרים כאלה, כדאי להציג את התצוגה קצת לאט יותר, שוב בסביבות 300 אלפיות השנייה, אבל הסגירה, שהמשתמש מפעיל, צריכה להתרחש מהר מאוד.
לכן, כלל האצבע הכללי הוא:
- אנימציות של ממשק משתמש שמופעל על ידי אינטראקציה של משתמש, כמו מעברים בין תצוגות או הצגת רכיב, צריכות לכלול מבוא מהיר (משך קצר) אבל סיום איטי (משך ארוך יותר).
- באנימציות של ממשק המשתמש שמופעל על ידי הקוד שלכם, כמו שגיאות או תצוגות מודולריות, כדאי להשתמש בפתיח איטי יותר (משך ארוך יותר) אבל בקליפ סיום מהיר (משך קצר).