اصول انیمیشن برای طراحان UX اصول انیمیشن برای طراحان UX

اصول انیمیشن برای طراحان UX

طراحی سایت زمان مطالعه : ~ 10 دقیقه 17 آذر 1399

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

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

تجربه کاربری انیمیشن

طراحی حرکت چیست؟

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

اصول انیمیشن UX

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

انیمیشن را معنی دار کنید

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

انتقال آهسته حالت 

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

نشانه های بصری

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

بازخورد دیداری (کنش و واکنش)

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

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

حرکت حداقلی اشیا در یک زمان 

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

مدت و سرعت بهینه برای انیمیشن

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

محققان کشف کرده اند که سرعت بهینه برای انیمیشن رابط بین 200 تا 500 میلی ثانیه است. هر انیمیشن کوتاه تر از 100 میلی ثانیه آنی است و به هیچ وجه قابل تشخیص نیست. از طرف دیگر، یک انیمیشن بیشتر از 1 ثانیه احساس تاخیر را منتقل می کند، بنابراین کاربر را منتظر نگه می دارد. در عین حال، وقتی روی انیمیشن تزئینی کار می کنید، به قوانین آن اعتماد نکنید. برای انیمیشن تزئینی می توانید زمان را بر اساس نیاز خود انتخاب کنید.

عناصر انیمیشن در تجربه کاربری

اطمینان حاصل کنید که کاهش انیمیشن UX درست است

همه اجسام زنده ای که در دنیای فیزیکی داریم با کمی شتاب یا کاهش حرکت می کنند. در مورد متحرک سازی اشیا UI ، باید همان قوانین را دنبال کنید. از استفاده ی حرکت خطی (وقتی اجسام با سرعت ثابت حرکت می کنند) خودداری کنید. در غیر این صورت، حرکت مکانیکی به نظر می رسد. انیمیشن خطی فقط برای جلوه های متحرک تزئینی کاربرد دارد زمانی که جسم موقعیت خود را تغییر ندهد.

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

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

طول عمر را در ذهن داشته باشید

هنگام طراحی یک انیمیشن، از خود سوال بپرسید: "آیا انیمیشن در صدمین بازدید آزار دهنده خواهد بود ، یا اینکه کاملاً واضح و قابل درک است؟" در غیر اینصورت حتی اگر بیش از حد از انیمیشن خوب استفاده شود، می تواند آزار دهنده به نظر برسد.

کاربران خود را با انیمیشن خوشحال کنید

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

UI قابل دسترسی را طراحی کنید

تعاملات متحرک برای دسترسی نیاز به تأملات اضافی دارد. این موارد شامل رهنمودهایی در مورد زمان تهیه مکث و کنترل بازی ، محدودیت برای چشمک زدن روی صفحه و مشاوره در مورد زمان ارائه گزینه های حرکت کاهش یافته، می باشد که برای کاربران حساسیت حرکتی ایجاد می نماید.
هم وب و هم سیستم عامل های بومی راهی را برای کاربران فراهم می کنند تا نشان دهند که به جلوه های حرکتی کمتری نیاز دارند و تهیه نسخه کمتری از محتوای کاملاً متحرک در صورت تمایل ، روش خوبی در این خصوص می باشد.

انیمیشن UX خود را نمونه سازی و آزمایش کنید

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

نتیجه

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

صفحات مشابه

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