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

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

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

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

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

این مقاله در مورد 7 کاربرد عملی انیمشن ها در طراحی سایت های مدرن و همچنین در مورد روش های به.کارگیری و استفاده از آنها و ضمنا تاثیر آن بر سئو و بهنیه سازی سایت بحث خواهد کرد.

سرفصل های اصلی مقاله 

1- جلب توجه انیمیشن در طراحی وب سایت

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

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

  • خبر جدید، پیام جدید ، بروزرسانی
  • ویژگی های تازه یا صفحات جدید
  • ایجاد یک مسیر مشخص برای بردن کاربر به مراحل بعد

انیمیشن ها ابزاری بسیار مناسب برای راهنمایی هستند.از طریق ایمیشن ها می توان به سوالات.کاربر نظیر : “چه بکنم” و ” به کجا بروم” قبل از اینکه اصلا از سوی وی پرسیده شوند پاسخ داد.

جلب توجه انیمیشن در طراحی وب سایت
جلب توجه انیمیشن در طراحی وب سایت

2- آموزش

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

انیمیشن هایی که بصورت هاور(Hover) طراحی می شوند بیشترین استفاده را در طراحی سایت و برای آموزش دارند.انیمیشن هاور به این معنی است که وقتی نشانگر موس خود را روی قسمتی از وب سایت قرار دهید آن قسمت یا شی ء درون سایت تغییر رنگ دهد یا شروع به حرکت نماید.

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

3- انیمیشن در طراحی وب سایت تغییراتی به صورت روان ایجاد می کند

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

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

4- بهبود کاربری در گوشی های موبایل

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

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

5- پرت کردن حواس کاربر با انیمیشن در طراحی وب سایت

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

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

در مدت زمانی که سایت درحال لود شدن است وجود یک انیمیشن جذاب کاربر را سرگرم کرده یا حداقل می تواند حواس وی را پرت نماید به این ترتیب کاربر از اینکه باید مدتی را منتظر بماند احساس نارضایتی کمتری خواهد کرد.

پرت کردن حواس کاربر با انیمیشن
پرت کردن حواس کاربر با انیمیشن

6- اسکرول کردن

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

استفاده از اسکرول کردن (Scrolling) در طراحی وب سایت علاوه بر جلوه مدرن و جذابی که به وب سایت می دهد باعث ایجاد این تصور در کاربر می شود که کل سایت در جایی پشت صفحه نمایش پنهان شده.اسکرولینگ روان که بصورت مناسبی طراحی شده باشد تجربه کاربری و احساس رضایت بیننده را بهبود می بخشد.چرا که این نوع طراحی سایت علاوه بر ظاهر زیبا باعث بهبود کارایی آن نیز میگردد.

حتی می توان با استفاده از انیمیشن های اسکرول فعال شونده (Scroll-Triggered Animations) در طراحی وب سایت یک مرحله نیز پا را فراتر گذاشت و به این طریق کاربران علاوه بر اسکرول کردن می توانند در ظاهر صفحه تغییرات ایجاد کنند و به نوعی خودشان نیز درگیر فرایند اسکرول شوند.از این طریق وب سایت از یک صفحه معمولی تبدیل به یک نوع بازی درگیر کننده و جالب برای کاربر خواهد شد.

7- شوق آفرینی

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

مقالات مرتبط با انیمیشن در طراحی وب سایت

0 0 رای ها
رأی دهی به مقاله
اشتراک در
اطلاع از
guest

0 نظرات
بازخورد (Feedback) های اینلاین
مشاهده همه دیدگاه ها