مقالات طراحی رابط کاربری 06 آذر 1401 27 دقیقه مطالعه مهدیه اسماعیلی

کاربرد ها و نمونه های موشن دیزاین در طراحی UI

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

موشن دیزاین در طراحی رابط کاربری

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

موشن دیزاین‌ها زیبا هستند و جذاب. و به‌خاطر همان زیبایی و جذابیت می‌توانند به هدایت کاربر در سایت و اپ کمک کنند.

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

موشن دیزاین در طراحی UI چه کاربرد هایی دارد؟ (+ نمونه‌)

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

۱. کمک به حفظ تمرکز و توجه کاربر

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

۲. کمک به انتقال کاربر

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

۳. کمک به جذاب‌ترکردن Micro-interactions

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

۴. کمک به ارتقای کاربردپذیری

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

۵. متمایزکردن تجربه‌ی تعامل با سایت یا اپلیکیشن

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

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

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

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

جمع‌بندی و نتیجه‌گیری

۱. موشن دیزاین‌ها درواقع برای واکنشی‌ترکردن سایت یا اپ به آن‌ها اضافه می‌شوند. ۲. موشن دیزاین‌ها سایت یا اپ را زیباتر و جذاب‌تر و سرگرم‌کنند‌ه‌تر می‌کنند.۳. ممکن است علاوه‌بر سرگرم‌کنندگی، انیمیشن‌ها و موشن دیزاین‌ها کاربر را هدایت کنند و پیامی را هم به او منتقل کنند. ۳. همه‌ی المان‌ها و تعاملات را هم نباید متحرک کرد. کاربرد موشن دیزاین باید دلیل داشته، مطالعه‌شده باشد و از نظر فنی هم محدودیت و مشکلی برای محصول ایجاد نکند. ۴. برای اینکه طراح بفهمد از موشن دیزاین در جای مناسب استفاده کرده یا نه اولا باید اصول و مبانی دیزاین و دیزاین بصری را خیلی خوب و عمیق یاد گرفته باشد و دوما پروتوتایپینگ را. به‌‌همین‌دلیل، هر دوی این‌ها از سرفصل‌های اصلی آموزش UI هستند.

برای نوشتن این مطلب از منابع زیر کمک گرفته شده است: ۱. infinum.com ۲. invisionapp.com