استفاده از انیمیشن در طراحی سایت

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

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

اصول پایه در انیمیشن ها

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

یکی از کلماتی که همیشه مترادف انیمیشن ها می باشد، دیزنی می باشد. در اوایل دهه 1980، دو شرکت برجسته انیمیشن سازی یک کتاب نوشتند که 12 اصول انیمیشن سازی را توضیح می دهد. "رویاهای زندگی: دیزنی انیمیشن" توسطFRANK THOMASوOLLIE JOHNSTON، الگوهایی را برای انیمیشن سازی برای شما مهیا می کنند:

1.پیش طراحی

2.پیش بینی

3.مرحله بندی

4.عملکردهای مستقیم و قدم به قدم

5.پیش فتن و تطابق دادن عملکردها

6.سرعت آرام در حرکات

7.قوس و کمان ها

8.عملکردهای ثانویه

9.زمان دهی

10.اغراق

11.انیمیشن ثابت

12. نمایش

انیماتورهای وب سایت، اغلب موارد زیر را استفاده و ذخیره می کنند:GIF, CSS, SVG, WEBGLیا ویدئوها. این موارد می توانند یک خط زیرین زیر کلمات باشند که زمانی که اشاره گر موس را رویشان به حالت شناور قرار می دهید، نمایان شود، یا ویدئو تمام صفحه و تصویر پس زمینه وب سایت ها باشند. مانند هر تکنیک در طراحی سایت، انیمیشن ها نیز می توانند همیشه در طراحی سایت ها با هدف خاصی، به کار روند.

گرایشات روز در سال 2015

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

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

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

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

زمانی که بحث انیمیشن سازی در وب سایت می شود، به دو گروه قابل درکی تقسیم می شوند: انیمیشن های بزرگ و کوچک.

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

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

چه زمانی باید از انیمیشن ها در طراحی سایت استفاده کرد

مشکل هر گرایشی که در طراحی سایت قرار دارد این است که هرکسی نمی داند که باید در چه مواقعی از آن استفاده کند. انیمیشن ها می تواند در ابزار طراحی سایت تان بسیار عالی عمل کنند، اما برای هر پروژه طراحی وب سایتی مناسب نیستند.

یکی از دلایل استفاده از انیمیشن ها در طراحی سایت، کاربردی بودن آن است. انیمیشن های ساده می توانند بهترین ابزار راهنمایی برای کاربران وب سایت باشند تا متوجه شوند که هر دکمه یا کلیک در طراحی سایت به چه منظور می باشد.

کاربردی بودن انیمیشن ها باید به این صورت باشد:

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

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

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

منابع

آیا آماده استفاده از انیمیشن ها هستید؟ در این جا منابعی وجود دارد تا درباره انیمیشن سازی درطراحی وبسایتها بیشتر آموزش ببینید:

• رویاهای ویدئوهای زندگی، نشان دهنده 12 اصول برای درک بهتر انیمیشن سازی.
• انیمیشن های موجود در وب، منبع عالی برای چگونه عمل کردن انیمیشن ها در طراحی سایت است.
• دستورالعمل هایCSSانیمیشن ها برای مبتدیان، نشان می دهد، چگونه اسنادCSSمربعی شکل را به دایره تغییر دهیم.
• عوامل ارتجاعی انیمیشنیSVG، آموزش هایی در چگونگی ادغام، انیمیشن سازی و اجرایSVGمی باشد.
• 15 ابزار برجستهHTML5برای ساخت انیمیشن های پیشرفته، یک قدم بعدی می باشد و دارای لیستی از ابزارهایی است که شما می توانید توسط آن ها اصول این کار را فرا بگیرید.
• ابزارهای برای اجرای عملکرد های انیماتورها، اصول پایه ای را آموزش می دهد که در تمامی فرم های انیمیشن، عملی می شود.

نتیجه گیری

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

اگر به دنبال الهاماتی می گردید، این مقاله را دوباره خوانده و روی لینک های برای دیدن مثال های بیشتر کلیک کنید، وب سایت هایی که از این انیمیشن ها استفاده کرده اند را بازدید کنید و لذت ببرید.