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