زمان بندی انیمیشن نامتقارن

شکستن تقارن، کنتراست و جذابیت را برای پروژه های شما فراهم می کند. بیاموزید که چه زمانی و چگونه این را در پروژه های خود اعمال کنید.

زمان‌بندی نامتقارن انیمیشن، تجربه کاربر را بهبود می‌بخشد و به شما امکان می‌دهد شخصیت خود را ابراز کنید و در عین حال به تعاملات کاربر سریع پاسخ دهید. همچنین کنتراست با احساس را فراهم می کند که رابط را از نظر بصری جذاب تر می کند.

  • از زمان بندی انیمیشن نامتقارن برای افزودن شخصیت و کنتراست به کار خود استفاده کنید.
  • همیشه از تعامل کاربر حمایت کنید. برای پاسخ دادن به ضربه‌ها یا کلیک‌ها از مدت‌زمان کوتاه‌تر استفاده کنید و برای مواقعی که پاسخ نمی‌دهید، مدت زمان بیشتری را رزرو کنید.

مانند اکثر "قوانین" انیمیشن، شما باید آزمایش کنید تا بفهمید چه چیزی برای برنامه شما کار می کند، اما وقتی صحبت از تجربه کاربری به میان می آید، کاربران به شدت بی حوصله هستند. قاعده کلی این است که همیشه به تعامل کاربر سریع پاسخ دهید . گفتنی است، در بیشتر مواقع عملکرد کاربر نامتقارن است و بنابراین انیمیشن نیز می تواند باشد.

به عنوان مثال، هنگامی که کاربر برای نمایش یک پیمایش نوار کناری ضربه می‌زند، باید آن را در سریع‌ترین زمان ممکن با مدت زمان حدود 100 میلی‌ثانیه نمایش دهید. با این حال، وقتی کاربر منو را کنار می‌گذارد، می‌توانید نمای را کمی آهسته‌تر متحرک کنید، مثلاً در حدود علامت 300 میلی‌ثانیه.

در مقابل، وقتی یک نمای مودال را وارد می‌کنید، معمولاً برای نمایش یک خطا یا برخی پیام‌های مهم دیگر است. در چنین مواردی، می‌خواهید که نمای را کمی آهسته‌تر نشان دهید، دوباره در حدود علامت 300 میلی‌ثانیه، اما رد کردن، که کاربر باعث ایجاد آن می‌شود، باید خیلی سریع اتفاق بیفتد.

بنابراین، قاعده کلی به شرح زیر است:

  • برای انیمیشن‌های UI که توسط تعامل کاربر ایجاد می‌شوند، مانند انتقال‌های مشاهده یا نمایش یک عنصر، یک مقدمه سریع (مدت زمان کوتاه)، اما یک outro آهسته (مدت طولانی‌تر) دارند.
  • برای انیمیشن‌های رابط کاربری که توسط کد شما راه‌اندازی می‌شوند، مانند خطاها یا نماهای مدال، مقدمه آهسته‌تر (مدت زمان طولانی‌تر)، اما outro سریع (مدت زمان کوتاه) دارند.