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

animation & transition in web and ui

جزئیات در طراحی رابط کاربری (UI) و تجربه کاربری (UX) بسیار مهم هستند. یکی از جاهایی که این جزئیات نمود و بروز می‌کنند استفاده از افکت‌های انتقالی (Transition) و انیمیشن‌ها است. این افکت‌ها به کمک CSS3 و جی کوئری در یکی دو سال اخیر رشد چشمگیری داشتند. بخصوص در رابط کاربری وب سایت‌ها و همچنین اپلیکیشن‌های موبایل. با بروز شدن و پشتیبانی اکثر مرورگرها از این تکنیک‌ها امروز می‌توانیم به راحتی از آنها در طرح هایمان استفاده کنیم. خوشبختانه در ایران نیز استفاده از مرورگرهای به روز در حال افزایش است و طراحان می‌توانند با خیالی نسبتاً راحت‌تر از تکنیک‌های روز طراحی وب در طرح هایشان بهره برند. گام اول در استفاده از این تکنیک‌ها مشاهده و بررسی نتیجه کار و طرح‌های اجرا شده ای است که به نوعی می‌تواند الهام بخش و کمک کار ما باشد. گام دوم کسب دانش لازم پیرامون نحوه کدنویسی و پیاده سازی این تکنیک هاست. و گام سوم بهره گیری از کتابخانه هایی که برای این منظور نوشته و توسعه یافته اند. در ادامه مطلب مراجع و سایت هایی که در این سه گام برایمان مفید و کاربردی خواهند بود معرفی خواهد شد.

گام اول: الهام گیری

Sixux.com

SIX-UX

این سایت ویترینی است از انیمیشن ها و افکت ها که بصورت ویدئوهای ۶ ثانیه ای تهیه شده است. انیمیشن ها در این سایت با تگ طبقه بندی شده اند. برای چرخیدن راحت در این وب سایت نیاز به رم بالا خواهید داشت چون تمام ویدئوها بصورت پیش فرض در حال نمایش هستند و طراحی سایت تک صفحه می باشد!

Hoverstat.es

Hover-States---An-interaction-design-blog-curated-by-Hover-Studio

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

Ui-animations.tumblr.com

UI-Animations

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

Capptivate.co

CAPPTIVATE

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

Useyourinterface.com

useyourinterface

این سایت تنوع زیادی در جمع آوری انیمیشن ها و افکت های رابط کاربری دارد. خوشبختانه طرح ها اغلب بصورت فایل عکس متحرک GIF هستند و برخی ویدئوها نیز مابین شان وجود دارد. نکته منفی این سایت نداشتن هرگونه دسته بندی است!

CSS Deck

HTML5,-CSS3,-JS-Demos,-Creations-and-Experiments---CSSDeck

شاید بیشتر شما با سایت CSS Deck آشنایی داشته باشید. این سایت منبعی است برای طرح هایی که با CSS کار شده اند. به لطف تگ animation می توان طرح های مرتبط با این موضوع را در این سایت مشاهده کرد. طرح های متنوع و زیبایی در این منبع وجود دارد. نکته مثبت آن دسترسی مستقیم به کدهای CSS و جی کوئری هر طرح است!

Codepen

Pens-tagged-'Animation'-on-CodePen

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

گام دوم: یاد گیری

CSS3 = Awesome

CSS-transitions---CSS-transitions,-CSS-transforms-and-CSS-animation

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

Hongkiat

سایت Hongkiat تگی به نام آموزش CSS3 -HTML5 دارد که بیشتر موارد آموزشی اش مرتبط با انیمیشن ها و و افکت ها است. در این سایت می توانید مثال ها و آموزش ها را مطالعه، دمو طرح ها را دیده و فایل آن را دانلود کنید.

Codrops Playground

Playground---Codrops

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

Css-tricks.com

CSS-Tricks

این سایت هم از مراجع و منابع طراحان وب است. با جستجو در تگ Animation و Transition این سایت مطالب و آموزش های مفید و کاربردی در این زمینه را خواهیم داشت. همچنین بخش Almanac حاوی مطالب موضوعی متنوعی در مورد خواص و سلکتورهای CSS می باشد که دیدن و مطالعه آن خالی از لطف نیست.

Smashingmagazine

راهنمای انیمیشن در CSS: مبانی و مثال ها، مقاله ای از اسمشینگ است که علیرغم گذشت دو سال از انتشار آن هنوز هم حاوی مطالب و نکات اساسی این تکنیک می باشد.

Using CSS animations

مقاله ای از وبلاگ توسعه دهندگان موزیلا که سعی دارد انیمیشن ها در CSS3 را به زبانی ساده همراه با مثال آموزش دهد.

Sitepoint

اگر به ساخت اپلیکیشن ها با انیمیشن های CSS3 علاقمند باشید این مقاله شروعی خوب برای قدم نهادن در این راه است.

Microsoft.com

Animations-and-Transitions

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

Learn.shayhowe.com

درس هشتم از سری درس های راهنمای Html و Css پیشرفته آقای Shay Howe مربوط به انیمیشن ها و افکت های انتقال می باشد. همچنین درس هفتم که مرتبط با Transforms است. در این مقاله اغلب تکنیک های مطرح بحث و همراه با مثال آموزش داده شده اند. پیشنهاد میکنم بقیه مباحث این سایت را هم مطالعه کنید چون پشیمان نخواهید شد.

گام سوم: فریم ورک، کتابخانه و ابزارها

Animate.css

Animate

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

Magic-css3-animations

این فریم ورک از کتابخانه Animate.css الهام گرفته و دارای دسته بندی های متنوعی است. شما می توانید هر کدام از افکت ها را با کلیک کردن بر روی نام آن مشاهده کنید. می توانید پروژه را از Github دریافت کنید. برای اجرای فریم ورک به کتابخانه جی کوئری و یا VanillaJS نیاز خواهید داشت.

ElementTransition.js

dan-silver.github.io-ElementTransitions

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

Effeckt.CSS

این گالری با کنار هم گذاشتن چندین کد از Codrops، CSS Tricks و … ایجاد شده است. در اینجا می توانید افکت هایی برای Modal ها، دکمه ها، لیست های اسکرول شونده و ناوبری ها، پیدا کنید. این کتابخانه در حال گسترش است و علیرغم دمو زمخت و خاکستری آن، شروعی خوب می باشد.

CSS3 Animations Cheat Sheet

css3_animacion_01

این کتابخانه هم بتازگی ساخته شده که دارای افکت های زیبایی است که دموی آن را یک مرد کچل برعهده دارد.  انیمیشن ها با CSS3 ساخته شده اند و نیازی به جی کوئری نیست اما در صورت نیاز می توانید آن را با دستورات جی کوئری ترکیب کنید تا سایتی تعاملی تر داشته باشید.

Animatable

Animatable--One-property,-two-values,-endless-possiblities

این کتابخانه افکت های متنوع و متفاوتی را به نمایش گذاشته است که شاید کاربردهای خاص خود را داشته باشد.

Transit

کتابخانه از انیمیشن های CSS3 که با جی کوئری ترکیب شده. افکت های دو بعدی و سه بعدی و Easing ها در این کتابخانه وجود دارند.

Two.js

API ای برای طراحی دو بعدی تحت مرورگرهای مدرن وب است که افکت های دو بعدی جالبی را می توان با آن ایجاد کرد. برخی از مثال های ایجاد شده را اینجا می توانید ببینید.

Tween.js

یک کتابخانه جی کوئری که با کمک آن می توانید هر افکت و انیمیشن را براحتی تکرار پذیر نمایید.

SUPER SCROLL ORAMA

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

Liffect

liffect---effect-for-lists

افکت های انیمیشنی CSS3 برای لیست ها توسط این ابزار تولید شده و کد آن در اختیار شما قرار خواهد گرفت. می توانید دمو هر افکت را دیده و تنظیمات دلخواه را اعمال کنید و سپس کد مربوطه را دریافت نمایید.

Rekapi

کتابخانه ای است که انیمیشن های <canvas> و DOM ساخته شده توسط جاوااسکریپت را با CSS Keyframe ایجاد می کند.

۳Dtransforms

ابزاری آنلاین برای انیمه کردن المان ها که تنظیمات مختلفی داشته و در نهایت کد را بصورت Cross Browser برایتان آماده میکند.

Createcss3

در این سایت هم کلیه المان های CSS3 لیست شده اند. می توانید با انتخاب هر یک و تغییر مشخصه ها کد مربوطه را دریافت کنید.

 

 inpixelitrustnetnibbl, google

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

پاسخ دهید

نشانی ایمیل شما منتشر نخواهد شد. بخش‌های موردنیاز علامت‌گذاری شده‌اند *