گفتگو: مقدمه ای بر انیمیشن در طراحی وب

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

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

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

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

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

عملکردهای ارتباطی یا نحوه استفاده از وب سایت
نشون دادن تغییر، مثل پر کردن صحیح یک فرم یا هایلایت کردن عنصر برای اینکه نشون بدیم میشه روش کلیک کرد
ایجاد جریان حرکت در سایت یا هدایت کاربرها به سمت اقدامی خاص
دومین دلیل برای استفاده از انیمیشن میتونه بخاطر مسائل زیبایی شناسی باشه. انیمیشن دکور خوبی محسوب میشه. گاهی اوقات هدف از یه عنصر انیمیشنی فقط ایجاد زیبایی بصریه. این انیمیشن دکوراتیو میتونه داستانی رو روایت کنه یا ارتباط حسی و عاطفی بین رابط کاربری و کاربر ایجاد کنه. هدف انیمیشن میتونه خلق جذابیت بصری و حفظ بیشتر کاربر روی سایت باشه.
وقتی میخواهید فقط از جذابیت بصری انیمیشن بهره ببرید، باید به این هم فکر کنید که این انیمیشن قراره چی کار کنه. به ارتباطی که میخواهید کاربر داشته باشه فکر کنید. قراره جالب باشه یا میخواهید کاربر رو شگفت زده کنید؟ آیا فقط یه محتوای جالبه که برای اشتراک گذاری طراحی شده؟ حتی عناصر زیباسازی هم باید هدفی رو دنبال کنند.
طراحی سایت دارکوب - http://darkoob.co.ir

برنامه نویس...
ما را در سایت برنامه نویس دنبال می کنید

برچسب : گفتگو,مقدمه,انیمیشن,طراحی, نویسنده : محمد رضا جوادیان programers بازدید : 141 تاريخ : يکشنبه 2 مهر 1396 ساعت: 20:51

خبرنامه