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

گردآوری و تالیف : ارسطو عباسی
تاریخ انتشار : 23 دی 1397
دسته بندی ها : طراحی وب

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

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

انیمیشن‌های پیشرفت

انیمیشن‌های در حال بارگذاری

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

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

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

انیمیشن‌ وب برای طراحان

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

انیمیشن‌های وضعیت پیشرفت

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

انیمیشن وب

اما جدای از آن می‌توانید از این انیمیشن‌ها برای پیشرفت‌های چند مرحله‌ای نیز استفاده کنید. به صورت زیر:

انیمیشن وب

صفحه‌نمایش اسکلتی

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

صفحه‌نمایش اسکلتی

انیمیشن‌های فییدبک بصری

پاسخگویی انیمیشنی به تعاملات کاربری

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

انیمیشن‌های شناور برای دسکتاپ و موبایل

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

انیمیشن‌های شناور برای دسکتاپ و موبایل

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

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

انیمیشن‌های شناور برای دسکتاپ و موبایل

جلب کردن توجه

این موضوع که چشم انسان‌ها به اشیائی که حرکت دارند بیشتر جلب می‌شود. این موضوع باعث می‌شود که برای جلب کردن نظر مخاطب و تقویت نیروی وی برای انجام کنش‌ها در وبسایت، انیمیشن مورد بسیار خوبی باشد.

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

جلب کردن توجه

ناوبری

ارتباطات و گذارها

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

ارتباطات و گذارها

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

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

انیمیشن ناوبری

وضعیت بدون سختی تغییر می‌کند

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

انیمیشن ناوبری

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

همان مثال بالا با یک روش متفاوت :

انیمیشن ناوبری

در این انیمیشن جزئیات را بیشتر می‌بینید و بهتر متوجه تغییرات می‌شوید. 

جلوه‌های خلاقانه

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

داستان‌گویی با اسکرول طولانی

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

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

جلوه‌های خلاقانه

در پایان

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

منبع

مقالات پیشنهادی

چگونه برنده جایزه طراحی وب شویم - برترین جوایز وب برای بهترین طراحان وب

اگر شما یک آژانس طراحی وب راه اندازی کرده اید، برنده شدن در جایزه ای مرتبط با کار شما، راهی مناسب جهت تشویق مشتریان و در نتیجه، دستیابی به مخاطبان بیش...

تکنیک‌های طراحی وب در سال ۲۰۱۸

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

۱۰ مورد از بهترین پلاگین‌های فوتوشاپ برای طراحان وبسایت در سال ۲۰۱۸

در سال ۲۰۱۸ ادوبی فوتوشاپ هنوز یکی از بهترین نرم‌افزارهای طراحی مورد انتخاب طراحان وبسایت است. فوتوشاپ به صورت پیشفرض یک ابزار حرفه‌ای و بسیار منعطف ا...

۳۰ ابزار مفید و ضروری برای طراحان و توسعه‌دهندگان وب - بخش دوم

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