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

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

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

 

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

در دهه های گذشته استفاده از انیمیشن در طراحی وب‌سایت تنها محدود به استفاده از تصاویر متحرک و جلوه‌های گرافیکی می‌شد که هدفی جز سرگرم کردن کاربر به دنبال نداشتند؛ اما این روزها استفاده از انیمیشن در طراحی وب‌سایت بسیار هدفمندتر از قبل صورت می‌گیرد و تاثیر بسیار زیادی بر تجربه کاربری (UX) می‌گذارد و لذت گشت‌وگذار در سایت را افزایش می‌دهد و در نهایت باعث جذب مخاطب می‌شود. در این مقاله ابتدا به سراغ بررسی اهمیت استفاده از انیمیشن در طراحی وب‌سایت می‌رویم و در ادامه به معرفی تکنیک‌های استفاده از انیمیشن در طراحی وب‌سایت می‌پردازیم.

 

 

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

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

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

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

 

 

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

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

 

 

• لود شدن وب‌‌سایت

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

• استفاده از انیمیشن Hover یا شناور

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

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

انیمیشن‌های Hover ساختار بسیار ساده ای دارند و گاهی تنها شامل تغییر رنگ بخشی از سایت می‌شوند. به عنوان مثال اگر بر روی اینجا کلیک کنید به بخش مقالات وب‌سایت خواهید رفت و با قرار دادن موس روی هر مقاله شاهد تغییر رنگ آن خواهید بود.

• صفحات اسکلتی (Skeleton screens)

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

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

• گالری تصاویر و اسلایدشوها

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

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

• منو داینامیک

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

 

 

در نهایت باید گفت که طراحی وب‌سایت این روزها در حال تغییر است و وب‌سایت‌ها دیگر مثل گذشته ساده نیستند و بسیار خلاقانه‌تر شده اند. استفاده از انیمیشن در طراحی وب‌سایت باعث جلب توجه مخاطب و افزایش تجربه کاربری (UX) می‌شود. اگر به دنبال طراحی وب‌سایت برای کسب‌وکار خود هستید،‌ حتما به این نکته توجه داشته باشید که استفاده از انیمیشن در طراحی تاثیر بسیار زیادی در جذب مخاطب شما خواهد داشت.