کاربرد انیمیشن در طراحی UX یا تجربه کاربری

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

پنج فرمول در مدت زمان و سرعت انیمیشن:

هنگامی که عناصر، حالت یا موقعیت خود را تغییر می‌دهند، مدت زمان انیمیشن باید به اندازه‌ی کافی آهسته باشد تا کاربران بتوانند تغییرات را متوجه شوند، اما در عین حال به‌اندازه‌ای سریع باشد که باعث ایجاد انتظار در مخاطب نشود.  
از مدت زمان مناسب در انیمیشن خود استفاده کنید. آن را خیلی سریع نکنید که کاربر جیغ  بزند.

تعدادی از تحقیقات نشان دادند که سرعت مطلوب برای انیمیشن رابط، بین 200 تا 500 میلی‌ثانیه است. این ارقام براساس ویژگی‌های خاص مغز انسان محاسبه شده است. هر انیمیشنی که کمتر از 100 میلی‌ثانیه باشد، لحظه‌ای است و هیچکدام از آنها تشخیص داده نخواهند شد. در حالی‌که انیمیشنِ طولانی‌تر از 1 ثانیه، یک احساس تأخیر را منتقل می کند و بنابراین برای کاربر خسته‌کننده می‌شود.
بهتر است مدت زمان انیمیشن بهتری را در رابط‌هایتان داشته باشید.

در دستگاه‌های تلفن همراه، دستورالعمل‌های راهنمای طراحی، پیشنهاد می‌دهند که مدت زمان انیمیشن به 200-300 میلی‌ثانیه محدود شود. همانطور که برای تبلت‌ها، مدت زمان باید 30٪ طولانی‌تر باشد یعنی حدود 400-450 میلی ثانیه، دلیل آن ساده است: اندازه صفحه‌ی نمایش بزرگتر است، بنابراین هنگامی‌که مکان را تغییر می‌دهند، اشیاء به مسیر طولانی‌تری باید برسند. در دستگاه‌های قابل کوچکتر، طول مدت باید 30٪ کوتاه‌تر باشد؛ در حدود 150-200 میلی‌ثانیه، زیرا در صفحه‌ی کوچکتر، طی کردن فاصله، کوتاه‌تر است.
از این نکته نیز نباید غافل بود که اندازه دستگاه‌های تلفن همراه بر روی مدت زمان انیمیشن اثر می‌گذارد. 

انیمیشن تحت وب با شیوه‌ی متفاوتی ایجاد می‌شود. از آنجایی که ما به مرور سریع صفحات وب در یک مرورگر عادت داریم، انتظار داریم که به‌سرعت بین حالت‌های آنها گذر کنیم. بنابراین، مدت زمان گذارهای وب باید حدود 2 برابر کوتاه‌تر از دستگاه‌های تلفن همراه باشد؛ بین 150 الی200 میلی ثانیه. در موارد دیگر، کاربر به طور اجتناب ناپذیری  فکر می‌کند که رایانه یخ زده‌است یا با اتصال به اینترنت مشکل دارد.
اما اگر شما یک انیمیشن تزئینی در وب سایت خود ایجاد کردید یا تلاش می‌کنید که توجه کاربر را به عناصر خاصی جلب کنید، قوانین بالا را فراموش کنید. دراین موارد، انیمیشن می‌تواند طولانی‌تر باشد.
پس نکته زیر را به عنوان فرمول اول در ذهن داشته باشید:

صفحه‌ی نمایش کامپیوتر بزرگ = انیمیشن آهسته به هیچ وجه!

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

مدت زمان انیمیشن بستگی به اندازه شی و مسافت طی شده دارد.

هنگامی‌که اشیاء در حال برخورد هستند، با توجه به قوانین فیزیکی انرژی برخورد باید به صورت مساوی بین آنها توزیع شود. بنابراین بهتر است که اثر باونس را حذف کنید. آن را فقط در موارد استثنایی استفاده کنید که حساس باشد.
فرمول سوم در سرعت و زمان انیمیشن:

از افکت‌های باونس خودداری کنید، زیر توجه را منحرف می‌کند.

حرکت اشیا باید واضح و تیز باشد، بنابراین از تاری  حرکت استفاده نکنید؛ این امر حتی در دستگاه های تلفن همراه امروزی نیز به دشواری دیده می‌شود و در انیمیشن متحرک به‌هیچ وجه استفاده نمی شود.
بنابراین در فرمول چهام باید به خاطر داشته باشید که:

از اثر تاری در انیمیشن خود استفاده نکنید.

اجزای فهرست (کارت های خبری، لیست های ایمیل، و غیره) باید تأخیری بسیار کوتاه در بین ظهور خود داشته باشد. هر رخداد یک عنصر جدید باید بین 20 تا 25 میلی ثانیه باشد. ظهور کندتر عناصر ممکن است کاربر را آزار دهد.
فرمول پنجم:

انیمیشن اجزای لیست باید 20 تا 25 میلی ثانیه باشد.

حرکت نرم اجزا 

نرم‌کنندگی کمک می‌کند تا حرکت طبیعی‌تری ایجاد شود. این یکی از اصول اساسی انیمیشن است که در کتاب «توهم جان‌بخشی، انیمیشن دیزنی» کاملاً شرح داده شده است و توسط دو انیماتور اصلی دیزنی یعنی اولی جانستون و فرانک توماس، نوشته شده ‌است.
برای اینکه انیمیشن، مکانیکی و مصنوعی به نظر نرسد، جسم باید با مقداری شتاب یا کاهش سرعت حرکت کند؛ همانند تمام اجسام زنده در جهان فیزیکی.
انیمیشن با نرم‌کنندگی در مقایسه با خطی، طبیعی تر به نظر می‌رسد.

حرکت خطی

اشیایی که توسط نیروی فیزیکی تحت تأثیر قرار نمی‌گیرند، بطور خطی یا به عبارت دیگر با سرعت ثابت حرکت می‌کنند و فقط به خاطر این واقعیت، آنها بسیار غیر طبیعی و مصنوعی برای چشم انسان به نظر می‌رسند.
تمام برنامه های کاربردی برای انیمیشن، از منحنی‌های انیمیشن استفاده می‌کنند. من سعی خواهم کرد تا توضیح دهم که چگونه آنها را بخوانیم و آنها چه معنی می‌دهند. منحنی نشان می‌دهد چگونه موقعیت جسم محور y در طی همان فاصله‌های زمانی محور x تغییر می‌کند. فعلاً حرکت به صورت خطی است، بنابراین جسم مسافت یکسانی را در همان زمان طی می‌کند.

منحنی حرکت خطی

برای مثال، حرکت خطی می‌تواند تنها زمانی استفاده شود که رنگ یا شفافیت شیء تغییر کند. اگر بخواهم راحت تر توضیح دهم، می‌توانیم از آن هنگامی استفاده کنیم که یک شیء موقعیت خود را تغییر نمیدهد .

منحنی نرمی به داخل یا شتاب مثبت

ما می‌توانیم بر روی منحنی ببینیم که درابتدا مکان شی‌ء به آرامی تغییر می‌کند و سرعت آن به تدریج افزایش می‌یابد. به این معنی است که جسم با یک شتاب مشخص حرکت می‌کند.

این منحنی باید زمانی استفاده شود که اشیاء با سرعت کامل از صفحه خارج شوند. آنها می‌توانند اعلان‌های سیستم یا فقط کارت‌های رابط باشند. اما به خاطر داشته باشید که این نوع منحنی فقط باید زمانی استفاده شود که اجسام، صفحه‌ی نمایش را برای همیشه ترک می‌کنند و ما نمی‌توانیم آنها را دوباره فراخوانی کنیم یا آنها را بازگردانیم.

منحنی انیمیشن کمک می‌کند تا حالت به خوبی بیان شود. در مثال زیر، ما می‌بینیم که مدت زمان حرکت و فاصله برای همه اشیاء یکسان است، اما حتی تغییرات کوچک در منحنی به شما امکان می‌دهد تا بر حالت انیمیشن تأثیرگذار باشید.
و البته، با تغییر منحنی‌ها، شما می‌توانید این شیء را در صورت امکان، شبیه دنیای واقعی حرکت دهید. 

منحنی نرمی به خارج یا شتاب منفی

این منحنی در مقابل «منحنی ورود سهولت» است، بنابراین، اجسام به سرعت فاصله های طولانی را پوشش می دهند و سپس به آرامی سرعت را کاهش می‌دهد تا در نهایت متوقف شود.

این نوع منحنی باید زمانی استفاده شود که عنصر بر روی صفحه‌ی نمایش ظاهر می‌شود؛ آن را با سرعت کامل روی صفحه‌ی نمایش نشان می‌دهد، به تدریج آهسته می‌شود تا زمانی که به طور کامل متوقف می‌شود. این نیز می‌تواند بر روی کارت های مختلف یا اشیائی که از خارج در صفحه‌ی نمایش ظاهر می‌شود اعمال گردد.

منحنی سهولت به داخل/ خارج یا استاندارد

این منحنی باعث می شود که اشیاء در ابتدا سرعت بیشتری داشته باشند و سپس به آرامی آن را به صفر برسانند. این نوع حرکت اغلب در انیمیشن رابط، به‌طور مکرر استفاده می‌شود. هر وقت که تردید کردید که کدام نوع حرکت برای استفاده در انیمیشن شما مناسب است، از منحنی استاندارد استفاده کنید.

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

نرمی به داخل - خارج، هنگامی استفاده می‌شود که اشیاء از یک قسمت از صفحه‌ی نمایش به قسمت دیگر منتقل می‌شوند. در این صورت، انیمیشن از اثر خیرگی و چشمگیراجتناب می‌کند. 

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

از این مثال ها، یک قاعده‌ی اساسی مطرح می‌شود که بسیاری از مبتدیان آن را نادیده می گیرند؛ انیمیشن ابتدایی با انیمیشن پایان، یکسان نیستند، همچنان که در مورد کشوی ناوبری که با منحنی کاهش سرعت ظاهر و با منحنی استاندارد ناپدید می شوند اینگونه است. علاوه بر این، با توجه به طرح Google Material، زمان ظهور شیء باید طولانی‌تر باشد تا توجه بیشتری به خود جلب کند. 

تابع cubic-bezier () برای توصیف منحنی‌ها استفاده می‌شود. این مکعب نامیده می شود، زیرا بر اساس چهار نقطه است. نقطه اول با مختصات (0،0) (پایین سمت چپ)، و آخرین با مختصات (1،1) (بالا سمت چپ) در حال حاضر در نمودار تعریف شده است.
بر این اساس، ما باید فقط دو نقطه در نمودار را توصیف کنیم، که توسط چهار آرگومان از تابع cubic-bezier ()  داده می‌شود: دوتای اول، مختصات x و y از نقطه‌ی اول است، دوتای دوم، مختصات x وy ی نقطه‌ی دوم ‌است.
برای ساده کردن کار با منحنی من پیشنهاد می کنم از سایت های easings.net و cubic-bezier.com استفاده کنید. اولین قسمت شامل لیستی از منحنی‌هایی است که اغلب استفاده می‌شود، پارامترهایی که شما می‌توانید به ابزار نمونه‌ی اولیه خود کپی کنید. منبع دوم به شما امکان می‌دهد تا با پارامترهای مختلف منحنی بازی کنید و فوراً ببینید که چگونه اجسام حرکت می‌کنند.

رقص  در انیمیشن های رابط

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

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

تعامل وابسته 

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

با توجه به طراحی مواد، زمانی که اشیاء متحرک، اندازه‌ی خود را به طور نامنظم تغییر می‌دهند، آنها باید در امتداد قوس به جای یک خط مستقیم حرکت کنند. این کمک می‌کند که حرکت، طبیعی‌تر شود. منظورم از "غیرمستقیم " این است که تغییر ارتفاع و عرض جسم با افزایش / کاهش، به صورت نامتقارن انجام شود، یعنی با سرعت‌های مختلف؛ مثلاً یک کارت مربع تبدیل به یک مستطیل می شود. 

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

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

اگر مسیر حرکت اجسام یکدیگر را قطع  کند، نمی توانند از یکدیگر عبور کنند. اشیاء باید از طریق آهسته کردن یا شتاب دادن سرعت خود فضای کافی برای جابجایی شیء دیگر باقی بگذارند. یک گزینه‌ی دیگر، آنها اشیای دیگر را فقط به جلو و عقب حرکت دهند؛ چرا؟ زیرا فرض می‌کنیم که تمام اشیاء در رابط، در یک صفحه قرار دارند.

در مورد دیگری، شیء متحرک می تواند بالاتر از سایر اشیا باشد. اما دوباره هیچ حلقه یا حرکتی از طریق اشیای دیگر نباشد. چرا؟ زیرا ما اعتقاد داریم که عناصر رابط، مطابق با قوانین فیزیک رفتار می‌کنند و هیچ جسم جامدی در دنیای واقعی قادر به انجام آن نیست.

نتیجه گیری

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