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

طراحی وب

اول یه موش یه قایق بادبانی رو میروند. بعد یه شاهزاده با یه سیب مسموم شد. انیمیشن از بچگی بخشی از زندگی روزمره ما بود، از سرگرمی های بچگی­هامون گرفته تا تبلیغاتی که بزرگسالان رو هدف گرفتند.

انیمیشن در طراحی وب

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

1- جلب توجه کنید

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

• هشدار، پیام، بروزرسانی و … جدید
• ویژگی­ها یا صفحات جدید روی وب سایت
• مسیرهای معمول و کارهایی که کاربر میتونه برای اقدام بعدی انجام بده
• بازخوردهایی که از یه کار خاص بوجود میان

انیمیشن میتونه دوشادوش اقدامات هدایت شده بکار بره. میتونید با استفاده از اون به سوالهایی مثل اینکه کجا بریم، چی کار کنیم جواب بدید و نذارید کاربر روی وب سایت سردرگم بمونه.
این سایت 8 انیمیشن رایج CSS3 رو همراه با اسنیپت کدهاشون معرفی کرده. اونجا میتونید انیمیشن های محو شدن، تغییر اندازه، چرخیدن، سایه های سه بعدی، تاب خوردن و … رو ببینید.

2- آموزش بدید

فرض کنید روی یه اپلیکیشن موبایلی، کاربر فهرست رو میبنده و فهرست با یه انیمیشن به سمت چپ صفحه جمع میشه. این نشون میده که کاربر بعدا میتونه دوباره فهرست رو از گوشه سمت چپ بیرون بکشه و اینطوری هر وقت لازمش داشت بازش میکنه.
آموزش از راه تصاویر متحرک خیلی مؤثرتر از کلمات اتفاق میفته. تصاویر متحرک میتونن مستقیم­تر به ارتباط یا یه عملکرد اشاره کنند.
انیمیشن های شناور برای آموزش از همه مناسب­ترند. اگه وقتی ماوس رو روی چیزی حرکت بدید، اون چیز به حرکت دربیاد، نشون میده این عنصر تعاملی است. این حرکت علاوه بر حرکت یا لرزش، میتونه حتی فقط تغییر در رنگ هم باشه.
انقدر انیمیشن های شناور معلمهای مطمئنی هستند که اگه کاربرها از تعاملی بودن چیزی شک داشته باشند ناخودآگاه ماوس رو روش میکشند تا ببینند حرکت میکنه یا نه. این از ویژگی های عصر دیجیتاله که این چیزها رو در مردم درونی کرده. بنابراین سعی کنید این انتظارات رو برآورده کنید.
این مقاله باز 8 کد دیگه برای اثر گذاری ساده آموزش داده.

3- انتقالات نرم

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

4- افکت های موبایل رو افزایش بدید

بعضی وقتها حقیقت به نظر عجیب میاد. حتما دقت کردید که بازی روی گوشی مثل تکون دادن یه سنگ بیروحه. این که فکر میکنیم داریم آیکون ها رو حرکت میدیم و بین پنجره های مختلف میگردیم همش توهمه – توهمی که با کمک انیمیشن بوجود اومده.
انیمیشن حالت های کنترلی ایجاد میکنند مثلا اینکه “شما دارید با چیزهای واقعی تعامل میکنید”. مثل وقتی که روی نمایشگر لمسی ضربه میزنید و با برخورد انگشتتون با صفحه حالت امواج آب بوجود میاد؛ به این ترتیب هم این بازخورد بوجود میاد که عملکرد فعال شده و هم اینکه تصورات ما رو با خودش درگیر میکنه و ما رو به این فکر میبره که این گوشی های هوشمند خیلی فراتر از یه ماشین معمولی هستند.
ساختن این خصوصیاتی که شبیه زندگی واقعی­اند کار ساده ای نیست. اما اگه بدونید به چه چیزهایی باید توجه کنید کارتون آسون­تر میشه. اسنیپت کدهای اصلی برای انیمیشن هایی مثل هشدار سرعت، اثر جاذبه، فشردگی و فعالیتهای ثانویه رو میتونید از این صفحه ببینید.

5- حواس پرتی های هنگام لود

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

6- اسکرول کردن

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

7- سرعت

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

8- لذت

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

 آینده انیمیشن در طراحی وب

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