انیمیشن باید کاری انجام دهد
قبل از اضافه کردن هر حرکت بپرسید: این حرکت به کاربر چه می‌گوید؟ انیمیشن خوب یکی از این کارها را می‌کند:
- توجه را به مهم‌ترین بخش صفحه می‌برد، مثل تیتر یا دکمه اصلی
- بازخورد می‌دهد؛ مثلاً دکمه‌ای که با کلیک واکنش نشان می‌دهد
- تغییر را قابل‌فهم می‌کند؛ مثل باز شدن منو یا جابه‌جایی بین صفحات
- هویت برند را می‌سازد؛ یک حرکت امضایی که سایت را از بقیه جدا می‌کند
کی انیمیشن مزاحم می‌شود؟
وقتی کاربر را منتظر نگه می‌دارد؛ متنی که باید صبر کنید تا کامل ظاهر شود. وقتی همه‌چیز همزمان حرکت می‌کند و چشم نمی‌داند کجا را ببیند. وقتی روی گوشی ضعیف صفحه را کند می‌کند. و وقتی هر بار با اسکرول تکرار می‌شود تا جایی که دیگر جذاب نیست.
سرعت و مدت
بیشتر حرکت‌های رابط کاربری باید کوتاه باشند؛ آن‌قدر که دیده شوند اما معطل نکنند. حرکت‌های ورودی صفحه می‌توانند کمی آرام‌تر باشند، اما بعد از اولین بار نباید مانع کار کاربر شوند.
عملکرد را فدا نکنید
انیمیشن‌های سنگین روی بوم (canvas) یا با تعداد زیادی ذره، روی لپ‌تاپ قوی روان‌اند اما روی گوشی معمولی کند می‌شوند. راه‌حل، تشخیص توان دستگاه و سبک کردن جلوه‌ها برای دستگاه‌های ضعیف‌تر است؛ همان کاری که در سایت‌های ای‌تک با تقسیم دستگاه‌ها به چند سطح انجام می‌دهیم.
به ترجیح کاربر احترام بگذارید
برخی کاربران در تنظیمات دستگاهشان کاهش حرکت را فعال کرده‌اند. سایت خوب این تنظیم را تشخیص می‌دهد و انیمیشن‌های بزرگ را برای آن‌ها خاموش می‌کند.
انیمیشن در سایت‌های راست‌به‌چپ
جهت حرکت هم معنا دارد. در سایت فارسی و عربی، حرکت‌هایی که «جلو رفتن» را نشان می‌دهند باید از راست به چپ باشند؛ وگرنه حس برعکس بودن می‌دهند.
جمع‌بندی
انیمیشن خوب کم‌تعداد، هدفمند، سریع و سبک است. ای‌تک سایت‌هایی با انیمیشن‌های اختصاصی و روان روی همه دستگاه‌ها می‌سازد؛ برای دیدن نمونه‌ها و مشاوره رایگان در اینستاگرام به ما پیام دهید.
نظرات (0)
هنوز نظری ثبت نشده است. اولین نفر باشید!
ثبت نظر جدید