طراحی رابط کاربری در سال های اخیر دچار تحولات بنیادینی شده است یکی ازجلوه های مهم این تغییر و تحول امکان حرکت المان ها در صفحه می باشد حتی به کار بردن یک تکنیک برای محو شدن المان یا چرخش آن هنگام عبور موس روی آن می تواند نگاه کاربر را به سایت شما جلب کند البته در این باره هم برخی طراحان که معمولا تازه با این تکنیک ها آشنا شده اند اقدام به استفاده بی رویه و نا به جا از افکت های پویا نمایی در طراحی وب کرده اند که تائثیر مخربی را در تجربه رابط کاربری به جای گذاشته است.
چرا طراحی رابط کاربری (User Interface) مهم است؟
به هنگام ورود کاربران به سایت در اولین نگاه و بدون توجه به محتوا نظرشان به سمت قالب سایت شما جذب خواهد شد و اگر کاربر از همان اولین برخورد مجذوب طراحی رابط کاربری شما شود نا خود آگاه حس اعتمادش به شما و کسب و کارتان بیشتر می شود قطعا برای هر کاربری خرید و یا استفاده از خدماتی سایتی که ظاهر دلنشینی دارد در اولویت می باشد پس به طور جدی به طراحی رابط کاربری سایت خود توجه کنید و با استفاده از اصول و تکنیک های مدرن آن را ارتقا دهید شاید اولین تجربه شما بهترین نباشد اما قطعا با تمرین و آزمون و خطا و الگو گرفتن می توانید یک طراح UI موفق شوید
کتابخانه های آماده پویانمایی (انیمیشن) در طراحی وب
ما 9 تا از بهترین کتابخانه های پویانمایی Jquery و CSS را به شما معرفی میکنیم که با استفاده از آن ها می توانید جلوه جدید به رابط کاربری سایت خود بدهید بعضی از آن ها از Jquery قدرت گرفته اند و بعضی دیگر فقط با استفاده از CSS اما برای استفاده کافی است که کتابخانه مورد نظر را به قالب خود پیوند دهید و سپس از کلاس های آماده برای ایجاد انیمیشن استفاده کنید
1 – کتابخانه Animate.css
کتابخانه Animate.css یکی از سبک ترین و آسان ترین کتاب خانه های پویا نمایی هست که تنها با اضافه کردن یک فایل CSS به قالب آماده استفاده خواهد بود به این صورت که به المان مورد نظر یکی از کلاس های انتخابی را می دهید و کار تمام می شود با توجه به سبک و کوچک بودن برای اجرا روی گوشی های موبایل انتخاب مناسبی است
2 -کتابخانه Bounce.js
Bounce.js یک کتابخانه پویانمایی جاوا اسکریپت هست که کم حجم و سبک می باشد و تمرکز خاصی روی افکت ها ی unique fun, bouncy, “Warner brothers-esque” دارد
3- کتابخانه AnimeJS
AnimeJs یک کتاب خانه فوق العاد جاولا اسکریپت می باشد که از آن در طراحی های بازی های HTML هم استفاده می شود یادگیری آن آسان است و با هر مشخصه CSS مثل انتقال و.. کار میکند همچنین قابلیت کنترل فایل های SVG و اجزای DOM را نیز دارد با استفاده از مستندات این کتابخانه میتوانید اپلیکیشن های جزابی طراحی کنید
4 – کتابخانه Magic Animations
Magic Animations یک کتابخانه شگقت انگیز از افکت های انیمیشن می باشد که بسیار تنوع دارد و افکت های منحصر به فرد هم در آن موجود می باشد استفاده از این کتابخانه آسان است و مثل کتابخانه Animate.css فقط یک فایل CSS دارد که باید به قالب وبسایت پیوند شود
[blockquote style=”3″]از کندی سایت وردپرسی خود خسته شدید؟ چرا موشک به سایتت نمی بندی؟ جزیات بیشتر راکت وردرپرس را اینجا بخوانید [/blockquote]
5-کتابخانه DynCSS
از DynCSS می توانید برای استفاده از افکت های parallax در وبیسایت خود استفاده کنید برای اینکه ایده های کاربردی استفاده از این کتابخانه پویانمایی را پیدا کنید از این پیشنمایش دیدن کنید
6- کتابخانه CSShake
همانطور که از نام این کتابخانه پیداست CSShake مخصوص تکان دادن المان ها در صفحه می باشد که البته افکت های متنوعی نیز دارد شاید یکی بهترین استفاده ها از این کتابخانه زمانی است که کاربر اطلاعات غلط وارد یک فیلد میکند باشد
7-کتابخانه Hover.css
hover.css مناسب ترین کتابخانه برای ساخت پویانمایی های دوبعدی بسیار زیبا برای المان های گسسته در صفحه مثل دکمه ها, تصاویر شاخص و.. می باشد
8-کتابخانه Velocity.js
Velocity.js یک کتابخانه با امکانات کامل قدرت گرفته از جاوا اسکریپت می باشد که با توابع کاربردی مناسب محو سازی و ساخت اسلایدر و اسکرول و حرکت معکوس و… می باشد این کتابخانه استفاده کنندگان مشهوری همچون Tumblr, WhatsApp, MailChimp, Scribd, Gap and HTC دارد !
9- کتابخانه AniJS
AniJS یک کتابخانه هوشمند و کامل انیمیشن می باشد که به شما امکان کنترل افکت ها هنگام وقوع رویداد را میدهد و استفاده از آن با اضافه کردن یک خط به المان مورد نظر امکان پذیر است برای مثال کدبالا بیانگر این است که اگر روی المان کلیک شد به سمت المان هدف با افکت دلخواه حرکت کند
[blockquote style=”3″]با زفایر میتونی هر سایتی طراحی کنی! دیدن پیشنمایش قالب [/blockquote]
از کدام کتابخانه پویا نمایی در طراحی وب استفاده کنیم؟
کتابخانه های بیشماری برای ملحق شدن به صفحه سایت شما موجود می باشد که ما در این مقاله 9 تا از پرکاربردترین و پایدادر ترین آنها را به شما معرفی کردیم قبل از استفاده باید هدف خود را معلوم کنید و بهترین انتخاب را کنید و در این انتخاب حجم هر کتابخانه را نیز مد نظر داشته باشید
اگر به دنبال یک راه حل سریع با استفاده آسان هستید ما به شما کتابخانه Animate.CSS را معرفی میکنیم و اگر دنبال امکانات بیشتر هستید نوراتمز به شما استفاده از کتابخانه های قدرتمند جاوا اسکریپت نظیر VelocityJS و Anime.JS را پیشنهاد میدهد
نکته: در به کار بردن افکت های انیمیشن در طراحی رابط کاربری دقت داشته باشید زیرا همانگونه که باعث پویایی صفحات می شوند این امکان وجود دارد که کاربر را سردر گم کند مخصوصا وقتی کاربر به دفعات با آن مواجه شود