شما اینجا هستید: خانه » آموزش ux » اصول موثر در طراحی انیمیشن وب سایت

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

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

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

آگاه سازی از میزان پیشرفت یک فرآیند

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

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

آگاه سازی از میزان پیشرفت یک فرآیند

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

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

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

 

همچنین شما میتوانید از انیمیشن های جذابی برای فرآیندهای چند مرحله ای استفاده نمایید.

wisard form

۲-ساختاربندی نمایش اطلاعات

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

طرح بندی صفحه نمایش

استفاده از بازخوردهای بصری

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

استفاده از بازخوردهای بصری

۱-استفاده از افکت hover در طراحی عناصر تعاملی

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

استفاده از افکت hover در طراحی عناصر تعاملی

۲-جلب کردن توجه کاربران

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

جلب کردن توجه کاربران

ناوبری(Navigation)

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

ناوبری

 

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

ناوبری

 

آگاه ساختن کاربر هنگام تغییر وضعیت

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

 

 

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

لیست طراحان :  مشاهده طراحان

1 دیدگاه

  1. سلام روز بخیر
    قبلا ازتون دعوتتون کرده بودم برای عضویت در گروه جامعه وبمستران
    مهندس چرا نیومدی توی گروه
    خوشحال میشیم تشریف بیارید و دوستان
    دیگه تبادل اطلاعات داشته باشیم
    گروه جامعه وب مستر ها
    https://t.me/joinchat/DBhKUBJE3gUMxzABig66Ig

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

نشانی ایمیل شما منتشر نخواهد شد.