روز به روز استفاده از انیمیشن ها در فضای وب در حال افزایش است ، چرا که اینگونه کاربر تجربه کاربری بهتر و لذت بخش تری را از گردش در صفحات وب سایت خواهد برد . به هر حال جذابیت انیمیشن ها برای کاربر دلیل نمی شود که هر جای سایت از آن ها استفاده کنیم .
۱٫ انیمیشن های مقیاس بزرگ (Large-Scale) : از این ها به عنوان ابزار تعامل اولیه استفاده می شود که تاثیر زیادی بر کاربران داشته و شامل جلوه هایی چون پیمایش پارالاکس (Parallax Scrolling) و اطلاعیه های پاپ-آپ (Pop-up Notifications) می شود .
۲٫ انیمیشن های مقیاس کوچک (Small-Scale) : این دسته از انیمیشن ها نیز شامل اسپینرها (spinner) ، ابزارهای شناور (hover) و نمادهای بارگذاری (loading bars) می شود که نیاز به دریافت ورودی از کاربر ندارند . افزایش رتبه سایت
در اینجا به هفت مورد از تکنیک های معروف انیمیشن اشاره خواهیم کرد :
انیمیشن های زمان بارگذاری صفحه
این انیمیشن ها برای جلوگیری از خسته شدن وسرگرم کردن کاربر در زمان بارگذاری صفحه است .انیمیشن های هنگام بارگذاری صفحه معمولا در طراحی فلت (Flat Design) و مینیمالیسم ، پورتفولیوها و سایت های تک صفحه ای بیشتر مورد استفاده قرار می گیرد .
سعی کنید آن ها را ساده و بی صدا طراحی کنید . همچنین دقت کنید که رنگ بندی آن ها با رنگ بندی صفحات سایتتان هماهنگ باشد .
نویگیشن و منوها (بی پیمایش)
نویگیشن منوهای مخفی بسیار محبوب شده اند ، به ویژه چون آن ها فضای بیشتری از صفحه برای استفاده را در اختیار شما قرار می دهند . همانطور که در مثال زیر می بینید که با ابزار نمونه سازی مشترک UXPin ساخته شده است ، از این انیمیشن ها برای آشکار سازی منوها برای کاربر زمانی که بر روی دکمه ای در صفحه کلیک می کند استفاده می شود .
انیمیشن های شناور
جلوه های شناور حس خیلی خوبی به کاربر می دهد زمانی که نشانگر موس را بر روی محتوایی در صفحه وب سایت شما می برد و آن بخش یا عبارت در صفحه به رنگ دیگری در می آید که این مسئله تاثیر بصری ویژه ای نیز دارد .
گالری ها و اسلاید شو ها
استفاده از انیمیشن های گالری و اسلاید شو راه موثری برای نمایش جذاب تصاویر سایت به کاربر است . این تکنیک برای سایت های عکاسی په کارر برده می شوند
انیمیشن های متحرک (Motion Animation)
چشمان انسان به طور طبیعی به جنبش ها و تحرکات واکنش نشان می دهد ، بنابراین می توان با قرار دادن یک انیمیشن متحرک در قسمتی از صفحه وب سایت توجه بازدید کننده را جلب کرد . همچنین این تکنیک می تواند به ما کمک کند که یک سلسله مراتب بصری برای نمایش محتوای یک بخش از سایت به کاربر ایجاد کنیم .
پیمایش (Scrolling)
پیمایش روان محتوای صفحات وب سایت به میزان انیمیشنی که به آن ها و سطح کنترلی که به کاربر داده شده است بستگی دارد .
انیمیشن های پس زمینه / ویدئوها
یک بک گراند انیمیشن دار ساده می تواند جلوه بصری جذابی به سایت ببخشد ، به این شرط که به طور متعادل و در جای مناسب به کار گرفته شود . در غیر این صورت ، انیمیشن پس زمینه می تواند برای کاربر گیج کننده و نامطلوب نیز باشد .
چشمان انسان به طور طبیعی به جنبش ها و تحرکات واکنش نشان می دهد ، بنابراین می توان با قرار دادن یک انیمیشن متحرک در قسمتی از صفحه وب سایت توجه بازدید کننده را جلب کرد . همچنین این تکنیک می تواند به ما کمک کند که یک سلسله مراتب بصری برای نمایش محتوای یک بخش از سایت به کاربر ایجاد کنیم .
پیمایش (Scrolling)
پیمایش روان محتوای صفحات وب سایت به میزان انیمیشنی که به آن ها و سطح کنترلی که به کاربر داده شده است بستگی دارد .
انیمیشن های پس زمینه / ویدئوها
یک بک گراند انیمیشن دار ساده می تواند جلوه بصری جذابی به سایت ببخشد ، به این شرط که به طور متعادل و در جای مناسب به کار گرفته شود . در غیر این صورت ، انیمیشن پس زمینه می تواند برای کاربر گیج کننده و نامطلوب نیز باشد .