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

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

اصول انیمیشن

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

• فشردگی و کشیدگی
• پیش بینی
• نمایشی
• حرکتهای رو به جلو و تکه تکه
• حرکتهای هم­پوشان و دنباله دار
• کم کردن سرعت بین فریم ها
• حرکت در یک مسیر
• حرکتهای ثانویه
• زمانبندی
• اغراق
• طراحی سالید
• جذابیت

انیمیشن های وب معمولا با فرمتهای GIF ، CSS ، SVG ، WebGL یا به صورت ویدئو وجود دارند. اگه با حرکت ماوس روی یه کلمه، زیر کلمه خط کشیده بشه، همین میتونه انیمیشن محسوب بشه. این کلمه ممکنه روی تصویر پس زمینه یا روی یه ویدئوی تمام صفحه نوشته شده باشه. انیمیشن هم مثل سایر تکنیک­های طراحی، هم میتونه در حاشیه باشه و هم میتونه جزء اصل ماجرا باشه طوری که نشه ازش چشم پوشی کرد.

پیدایش مُدی به اسم انیمیشن

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

انیمیشن های بزرگ در برابر انیمیشن های کوچک

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

چه وقت از انیمیشن استفاده کنیم

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

• عملکردهای ارتباطی یا نحوه استفاده از وب سایت
• نشون دادن تغییر، مثل پر کردن صحیح یک فرم یا هایلایت کردن عنصر برای اینکه نشون بدیم میشه روش کلیک کرد
• ایجاد جریان حرکت در سایت یا هدایت کاربرها به سمت اقدامی خاص

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

منابع

برای کسب اطلاعات بیشتر در مورد انیمیشن و استفاده از اون در طراحی وب سایت میتونید از مقاله های زیر استفاده کنید:

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

نتیجه

قانون استفاده از انیمیشن اینه:
انیمیشن خوب تجربه بهتری به کاربر ارائه میده.
انیمیشن یه تکنیک جالبه که استفاده ازش در خیلی از اپلیکیشن ها داره عادی میشه. برای گرفتن ایده میتونید به وب سایتهای زیر مراجعه کنید:
www.yourbrainonpoker.com
http://gara.com.ua/en
species-in-pieces.com
http://henrybrown.me /
www.studiometa.fr/rose-caramelle /
http://i.ngen.io /
http://www.djeco.com/en
http://kurokawawonderland.jp /
http://bubblejumpapp.com /
https://www.psd2html.com/10-years-in-review /

http://delaneau.com