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

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

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

اولین بار انیمیشن‌ در حدود سال ۱۹۹۶ به عنوان بخشی از وب‌سایت‌های کاری به کار برده شد. اما سرعت کم اینترنت و همچنین توجه کمتر مخاطب به فضای دیجیتال و طراحی آن باعث شده بود که انیمیشن تنها به عنوان یک بخش سرگرمی‌در وب سایت‌ها دیده شود. به طوری که حضور یا عدم حضور آن چندان مورد توجه نبود و بسیاری از مخاطبان حتی به آن توجه نمی‌کردند.

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

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

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

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

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

شما می‌توانید برای اهداف زیر از انیمیشن استفاده کنید:

۱. جلب توجه مخاطب

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

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

۲. ابزار آموزشی

انیمیشن‌ها به عنوان یک ابزار آموزشی در وب سایت و اپلیکیشن‌های تلفن همراه بسیار کاربردی هستند. تصور کنید؛ وارد صفحه یک وب سایت می‌شوید به محض اینکه موس شما در قسمتی از وب سایت قرار می‌گیرد یک انیمیشن‌ شروع به تغییر رنگ یا حرکت می‌کند. این انیمیشن‌ها‌ هاور (Hover) نامیده می‌شوند.

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

۳. پویا کردن تغییرات وب‌سایت

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

۴. افزایش کارایی اپلیکیشن‌های موبایل

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

صفحه‌های هوشمند تلفن همراه بدون این انیمیشن‌ها خیلی خسته کننده و ناکارآمد به نظر می‌رسند.

۵. جذاب کردن زمان آپلود وب‌سایت

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

۶. اسکرول کردن صفحه وب سایت

یکی از جنبه‌های مدرن و جدید طراحی وب سایت استفاده از اسکرول کردن برای کاربران است. اسکرول کردن نوعی انیمیشن است که یک تغییر حالت بی پایان را در وب سایت شما ایجاد می‌کند. به این ترتیب کاربر از عناصر موجود در سرتاسر وب سایت شما آگاه می‌شود و فراتر از صفحه نمایش وب سایت را رصد می‌کند.  به علاوه قابلیت جدیدی تحت عنوان اسکرول فعال شونده یا scroll-triggered Animation  وجود دارد که از طریق آن  کاربر می‌تواند در ظاهر صفحه نیز تغییرات اینجا کند. به این ترتیب فرایند اسکرول کردن وب سایت از یک کار عادی به یک بازی سرگرم کننده تغییر می‌کند. و این کار در جذابیت وب سایت شما تأثیر فوق‌العاده‌ای خواهد داشت.

۷. افزایش جذابیت وب‌سایت

این کاربرد شاید تنها کاربردی است که افراد غیرحرفه‌ای از انیمیشن‌ها سراغ دارند. ساده‌ترین کاربرد انیمیشن‌ها ایجاد سرگرمی‌ و تغییر فضای خشک و جدی وب‌سایت به فضایی شاد و دوست داشتنی است. استفاده از انیمیشن‌ها در این کاربرد اگرچه اجباری نیست، اما می‌تواند روی تجربه مخاطبان شما تأثیر ویژه‌ای داشته باشد.

8. خوش آمد گویی به مخاطب

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

9. ایجاد صفحات کاملا پویا

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

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

مزایای استفاده از انیمیشن‌ها

مسلما همه ما می‌دانیم که استفاده از انیمیشن چه تاثیر خوبی بر روی جلوه‌های بصری وب سایت دارد انیمیشن‌ها می‌تواند ظاهر بصری وب سایت را کاملاً تغییر دهند.

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

ایجاد ویژگی‌های منحصر به فرد

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

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

بهبود طراحی‌های شما

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

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

بهبود تعامل با کاربر و نرخ تبدیل

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

معایب استفاده از انیمیشن

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

ایجاد حواس پرتی برای مخاطب

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

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

انیمیشن‌ها زمان بارگذاری وب سایت شما را زیاد می‌کند.

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

بنابراین استفاده بی هدف از انیمیشن‌ها و یا کاربرد زیاد آنها می‌تواند موجب شکست شما شود.

کجا باید از انیمیشن استفاده کنیم؟

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

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

  • با چه هدفی از انیمیشن استفاده می‌کنید؟
  • آیا انیمیشن کاربران را در مسیر درستی هدایت می‌کند؟
  • آیا به نفع کاربران است؟
  • آیا انیمیشن آنها را از هدف شما منحرف می‌کند یا به آن آسیب می‌رساند؟
  • چقدر روی سرعت بارگذاری وب سایت شما موثر است؟

برای طراحی چنین انیمیشنی چقدر باید هزینه کنید؟

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

انواع انیمیشن‌های کاربردی برای طراحی وب سایت

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

انیمیشن‌های مربوط به بارگذاری

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

یکی از ایده‌های جذاب برای یک انیمیشن بارگذاری می‌تواند انیمیت کردن لوگو و نام وب سایت شما باشد. به این ترتیب کاربر از همان ابتدا ارتباط قوی تری با کسب و کار شما برقرار می‌کند و بیشتر در ذهن او جا می‌شوید.

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

انیمیشن‌های منوی متحرک

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

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

انیمیشن‌ های‌ هاور

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

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

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

گالری‌ها و نمایش‌های اسلایدی

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

انیمیشن‌های جلب توجه

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

به یاد داشته باشید که این انیمیشن‌ها صرفاً تکمیل‌کننده روش سنتی فعالیت در وب سایت هستند .بنابراین نباید جایگزین روش سنتی باشند.

حرکت صفحه

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

پس زمینه

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

سخن پایانی

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

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

بنیامین خلیلی

بنیامین خلیلی

نویسنده از: 1400/06/30

دیدگاه خود را بنویسید

Retry Layer 1