موشن دیزاین چیست و موشن دیزاینر در طراحی محصول چه کار می‌کند؟
موشن دیزاین یعنی طراحی هدفمند حرکت در محصول دیجیتال؛ از بازخورد یک دکمه تا گذار بین صفحه‌ها. ببینید موشن دیزاینر چه می‌کند، با چه ابزارهایی کار می‌کند و از کجا شروع کنید.
موشن دیزاین (Motion Design) در طراحی محصول یعنی طراحی هدفمند حرکت: این‌که هر عنصر رابط کاربری کی، با چه سرعتی، با چه منحنی و به چه دلیلی ظاهر شود، جابه‌جا شود یا تغییر حالت بدهد. موشن دیزاینر کسی است که این حرکت‌ها را برای فهم‌پذیر‌تر کردن رابط طراحی و نمونه‌سازی می‌کند و آن‌قدر دقیق مستند می‌کند که توسعه‌دهنده بتواند بدون حدس زدن پیاده‌اش کند.
در فضای فارسی، کلمه‌ی «موشن» اغلب ما را یاد ویدیوهای تبلیغاتی و تیزرهای انیمیشنی می‌اندازد. آن کار اسم دیگری دارد: موشن گرافیک. موضوع این مقاله حرکت در خود محصول است؛ همان چیزی که وقتی روی یک کارت ضربه می‌زنید، کشوی منو را باز می‌کنید یا منتظر بارگذاری صفحه می‌مانید، تجربه می‌کنید.
موشن دیزاین چیست و دقیقاً چه چیزی را طراحی می‌کند؟
هر رابط کاربری مجموعه‌ای از حالت‌هاست: صفحه‌ی لیست و صفحه‌ی جزئیات، دکمه‌ی عادی و دکمه‌ی فشرده‌شده، فرم خالی و فرم با خطا. موشن دیزاین درباره‌ی فاصله‌ی بین این حالت‌هاست؛ یعنی کاربر چطور از یک حالت به حالت بعدی می‌رسد. اگر این گذار طراحی نشود، رابط «پرش» می‌کند و کاربر باید خودش بفهمد چه چیزی عوض شده است.
کار موشن دیزاینر محصول معمولاً در این پنج دسته قرار می‌گیرد:
- گذار بین صفحه‌ها (Transition): مثلاً کارتی که بزرگ میشود و به صفحه‌ی جزئیات تبدیل میشود، یا صفحه‌ای که از سمت راست وارد میشود چون در اپ فارسی «جلو رفتن» به سمت چپ است.
- تغییر حالت کامپوننت‌ها: باز شدن آکاردئون، روشن شدن سوییچ، تبدیل آیکون منو به ضربدر.
- بازخورد و میکرواینتراکشن: لرزش کوتاه فیلد رمز اشتباه، تیک موفقیت بعد از پرداخت، واکنش دکمه به لمس.
- بارگذاری و پیشرفت: اسکلتون، نوار پیشرفت، اسپینر و هر چیزی که انتظار را قابل‌تحمل‌تر می‌کند.
- لحظه‌های برند: انیمیشن آنبوردینگ، اسپلش‌اسکرین، تصویرسازی‌های متحرک صفحه‌ی خالی.
حرکت در رابط کاربری چه مسئله‌ای را حل می‌کند؟
حرکتی که هیچ مسئله‌ای را حل نکند، فقط زمان کاربر را می‌گیرد. قبل از طراحی هر انیمیشن از خودتان بپرسید کدام‌یک از این چهار کار را انجام می‌دهد.
بازخورد فوری
کاربر باید بداند ورودی‌اش دیده شده است. یاکوب نیلسن در بحث محدوده‌های زمان پاسخ، حدود یک‌دهم ثانیه را مرزی می‌داند که پاسخ سیستم «آنی» حس میشود. پس واکنش بصری دکمه به لمس باید تقریباً بلافاصله شروع شود؛ حتی اگر خود عملیات چند ثانیه طول بکشد، شروع سریع بازخورد به کاربر اطمینان می‌دهد.
جهت‌یابی و پیوستگی
وقتی تصویر محصول در لیست، با یک حرکت پیوسته به تصویر بزرگ صفحه‌ی محصول تبدیل میشود، کاربر بدون فکر کردن می‌فهمد کجاست و با دکمه‌ی بازگشت به کجا برمی‌گردد. به این الگو گذار عنصر مشترک (Shared Element Transition) می‌گویند و یکی از مؤثر‌ترین ابزارهای موشن برای کاهش سردرگمی است.
هدایت توجه
چشم انسان به حرکت حساس است. یک نشان (Badge) که یک بار تکان می‌خورد یا پیام خطایی که با یک لغزش کوتاه وارد میشود، توجه را درست به همان جایی می‌برد که لازم است. همین حساسیت دلیل این است که حرکت باید کم‌یاب بماند؛ اگر همه‌چیز تکان بخورد، هیچ‌چیز دیده نمی‌شود.
شخصیت برند
دو اپ با رنگ و فونت مشابه می‌توانند با حرکت، حس کاملاً متفاوتی داشته باشند. اپ یک بانک معمولاً حرکتهای کوتاه، آرام و بدون جهش می‌خواهد؛ اپ آموزشی کودکان می‌تواند فنری‌تر و بازیگوش‌تر باشد. موشن دیزاینر این شخصیت را به قاعده‌های قابل تکرار تبدیل می‌کند.
موشن دیزاینر محصول در یک روز کاری چه می‌کند؟
تصور رایج این است که موشن دیزاینر فقط انیمیشن می‌سازد. در عمل بخش بزرگی از کارش تحلیل و مستندسازی است. یک چرخه‌ی معمول کار این‌طور است:
- بررسی یوزر فلوها و پیدا کردن لحظه‌هایی که کاربر در آنها گم میشود یا منتظر می‌ماند.
- تعریف اصول حرکتی محصول: مثلاً «حرکت‌ها کوتاه و دقیق‌اند، فقط برای توضیح تغییر استفاده می‌شوند و جهتشان از منطق راست‌به‌چپ پیروی می‌کند».
- نمونه‌سازی سریع چند نسخه از یک گذار و مقایسه‌ی آنها روی گوشی واقعی، نه فقط روی مانیتور.
- ساخت انیمیشنهای تولیدی مثل آیکون‌های متحرک یا تصویرسازی آنبوردینگ با ابزارهایی مثل After Effects یا Rive.
- نوشتن مشخصات فنی هر حرکت و تحویل آن به توسعه‌دهنده.
- بازبینی پیاده‌سازی روی دستگاه‌های ضعیف‌تر و اصلاح حرکت‌هایی که کند یا لرزان اجرا می‌شوند.
یک مشخصات فنی خوب برای یک لیست کارت‌ها می‌تواند این‌قدر ساده و دقیق باشد: «هر کارت با شفافیت ۰ به ۱ و جابه‌جایی عمودی ۸ پیکسل وارد میشود، مدت ۲۵۰ میلیثانیه، منحنی کاهنده (Decelerate)، با ۴۰ میلیثانیه فاصله بین شروع کارت‌ها و حداکثر برای ۶ کارت اول». توسعه‌دهنده با این جمله دیگر چیزی را حدس نمی‌زند.
موشن سیستم؛ حرکت به‌عنوان بخشی از دیزاین سیستم
در محصول‌های بزرگ، حرکت هم مثل رنگ و فاصله‌گذاری به توکن تبدیل میشود. به‌جای این‌که هر طراح برای هر انیمیشن عددی دلخواه انتخاب کند، چند مدت زمان و چند منحنی استاندارد تعریف میشود. اگر با مفهوم توکن آشنا نیستید، راهنمای دیزاین توکن را بخوانید؛ منطق توکن‌های حرکتی دقیقاً همان است.
برای نمونه، Material Design در نسخه‌ی M3 مدت زمان‌ها را به شکل پله‌هایی از ۵۰ تا ۱۰۰۰ میلیثانیه تعریف کرده و منحنیها را به دو خانواده‌ی استاندارد و تأکیدی (Emphasized) تقسیم کرده است. یک موشن سیستم ساده برای محصول متوسط می‌تواند این باشد:
- سریع: ۱۰۰ تا ۱۵۰ میلیثانیه برای تغییرهای کوچک مثل hover، تغییر رنگ و تیک چک‌باکس.
- متوسط: ۲۰۰ تا ۳۰۰ میلیثانیه برای باز و بسته شدن منو، باتم‌شیت و آکاردئون.
- آهسته: ۳۵۰ تا ۵۰۰ میلیثانیه برای گذار تمام‌صفحه و عنصرهایی که مسافت زیادی طی می‌کنند.
- منحنی ورود: کاهنده، یعنی سریع شروع و نرم متوقف شود.
- منحنی خروج: شتاب‌دهنده و کوتاهتر از ورود، چون کاربر دیگر به عنصر خارج‌شونده نیازی ندارد.
- نسخه‌ی کاهش حرکت: برای کاربرانی که در سیستم‌عامل گزینه‌ی کاهش حرکت (Reduce Motion) را روشن کرده‌اند، جابه‌جایی‌ها به محو شدن ساده تبدیل شود.
ابزارهای موشن دیزاین برای طراحی محصول
هیچ ابزاری همه‌ی کارها را انجام نمی‌دهد. انتخاب ابزار به این بستگی دارد که خروجی شما نمونه‌ی اولیه است یا فایلی که مستقیم داخل اپ اجرا میشود.
- Figma: اسمارت انیمیت (Smart Animate) در پروتوتایپ برای گذارهای ساده کافی است. Figma Motion هم که در کنفرانس Config سال ۲۰۲۶ معرفی شد، تایم‌لاین و کی‌فریم را به خود فیگما آورده است؛ در زمان نگارش این مطلب در نسخه‌ی بتاست. مقاله‌ی انیمیشن در فیگما نقطه‌ی شروع خوبی است.
- After Effects: برای انیمیشنهای پیچیده‌ی تصویری و آیکون‌های متحرک که با افزونه‌ی Bodymovin یا LottieFiles به فایل Lottie تبدیل می‌شوند.
- Rive: برای انیمیشنهای تعاملی که به ورودی کاربر واکنش نشان می‌دهند، مثل شخصیتی که با تایپ رمز چشمش را می‌بندد.
- ProtoPie: برای نمونه‌های واقع‌گرایانه با منطق شرطی، ورودی متن و حسگرهای گوشی.
- Jitter: ابزاری مرورگرمحور با پلاگین فیگما که خروجی ویدیو و Lottie می‌دهد.
- کد: CSS Transitions، کتابخانه‌ی Motion در وب، و ابزارهای انیمیشن Jetpack Compose و SwiftUI در اپ‌های بومی.
مهارت‌هایی که یک موشن دیزاینر UI لازم دارد
موشن دیزاین محصول ترکیبی از سه مهارت است: فهم تجربه کاربری، حس زمانبندی و آشنایی با محدودیت‌های فنی. اگر یکی از این سه را نداشته باشید، یا انیمیشن زیبایی می‌سازید که کاربر را کند می‌کند، یا حرکتی درست طراحی می‌کنید که پیاده‌سازی نمی‌شود.
- اصول پایه‌ی رابط و تجربه کاربری: سلسله‌مراتب، یوزر فلو، حالت‌های کامپوننت.
- دوازده اصل انیمیشن که اولی جانستون و فرانک توماس از انیمیتورهای دیزنی در کتاب The Illusion of Life شرح داده‌اند؛ به‌خصوص زمانبندی، شتاب‌گیری و توقف نرم (Ease In و Ease Out)، پیش‌آگاهی (Anticipation) و ادامه‌ی حرکت (Follow Through).
- تسلط بر منحنی‌های حرکت و ویرایشگر منحنی (Graph Editor) در دست‌کم یک ابزار.
- مبانی فنی: این‌که انیمیت کردن transform و opacity در مرورگر معمولاً روان‌تر از انیمیت کردن width یا top است و چرا.
- دسترس‌پذیری: احترام به تنظیم کاهش حرکت، پرهیز از چشمک‌زدن سریع و امکان توقف حرکتهای طولانی.
- مستندسازی و گفت‌وگو با توسعه‌دهنده به زبان عدد و توکن، نه «یه کم نرم‌ترش کن».
اشتباه‌های رایج در موشن رابط کاربری
بیشتر مشکل‌های موشن در محصول‌های ایرانی و خارجی از یک جنس‌اند: حرکت برای خودش طراحی شده، نه برای کاربر. این موارد را در بازبینی طرح‌هایتان چک کنید:
- مدت طولانی برای تعامل‌های پرتکرار: انیمیشنی که بار اول در دموی ۶۰۰ میلی‌ثانیه‌ای جذاب است، بار پنجاهم در روز آزاردهنده میشود.
- منحنی خطی (Linear) برای حرکت مکانی: در دنیای واقعی هیچ جسمی با سرعت ثابت راه نمی‌افتد و ناگهان نمی‌ایستد، برای همین حرکت خطی مکانیکی و ارزان به نظر می‌رسد.
- قفل کردن رابط در طول انیمیشن: کاربر باید بتواند وسط یک گذار دوباره ضربه بزند یا برگردد.
- جهت‌های ناسازگار: اگر صفحه‌ی بعد یک بار از چپ و بار دیگر از پایین بیاید، مدل ذهنی کاربر به هم می‌ریزد. در رابط فارسی، جهت حرکت «رفتن به جلو» را با منطق راست‌به‌چپ هماهنگ کنید.
- حرکت هم‌زمان همه‌چیز: وقتی ده عنصر با هم و با یک سرعت حرکت می‌کنند، چشم نقطه‌ی شروعی پیدا نمی‌کند؛ با تأخیر پله‌ای (Stagger) ترتیب بسازید.
- نادیده گرفتن کاهش حرکت: برای بعضی کاربران، حرکتهای بزرگ و پارالاکس باعث سرگیجه و حالت تهوع میشود.
موشن خوب دیده نمی‌شود، فهمیده میشود؛ اگر کاربر بعد از استفاده فقط یادش بماند که «اپ روان بود»، کارتان را درست انجام داده‌اید.
سوالات متداول
موشن دیزاین با موشن گرافیک چه فرقی دارد؟
موشن گرافیک معمولاً ویدیویی خطی برای روایت یا تبلیغ است که کاربر فقط تماشایش می‌کند. موشن دیزاین در محصول تعاملی است و به کار کاربر واکنش نشان می‌دهد؛ هدفش کمک به فهم رابط است، نه سرگرم کردن.
برای شروع موشن دیزاین UI باید افتر افکت یاد بگیرم؟
نه لزوماً. برای بیشتر گذارها و میکرواینتراکشنها، پروتوتایپ فیگما و فهم درست زمانبندی و منحنیها کافی است. افتر افکت وقتی لازم میشود که بخواهید انیمیشنهای تصویری پیچیده بسازید و آنها را بهصورت Lottie تحویل بدهید.
آیا موشن دیزاینر یک شغل جداگانه است؟
در تیمهای بزرگ و محصولهایی که برند قوی دارند، بله؛ گاهی با عنوان Motion Designer یا UI Motion Designer. در بیشتر تیمهای کوچک، همین مسئولیت بخشی از کار طراح رابط کاربری یا طراح محصول است.
مدت انیمیشنهای رابط کاربری معمولاً چقدر است؟
بیشتر حرکتهای رابط بین ۱۰۰ تا ۵۰۰ میلیثانیهاند. تغییرهای کوچک در بازهی ۱۰۰ تا ۲۰۰ و گذارهای بزرگتر در بازهی ۲۵۰ تا ۴۰۰ میلیثانیه قرار میگیرند؛ روی وب و دسکتاپ معمولاً کمی کوتاهتر از موبایل.
از کجا شروع کنید تا حرکت به مهارت شما تبدیل شود؟
ساده‌ترین تمرین این است: اپی را که هر روز استفاده می‌کنید باز کنید، با ضبط صفحه چند گذار آن را آهسته ببینید و برای هر حرکت بنویسید چه مدت، چه منحنی و چه هدفی دارد. بعد همان گذار را در فیگما بازسازی کنید. همین تمرین چشم شما را برای زمانبندی تربیت می‌کند و به‌مرور به میکرواینتراکشن‌هایی که کاربر را به وجد می‌آورند می‌رسید.
اگر می‌خواهید این مسیر را ساختاریافته و پروژه‌محور طی کنید، دوره‌ی موشن دیزاین آکادمی طراحی دایره از اصول زمانبندی و منحنی شروع می‌کند و تا ساخت و تحویل حرکت برای یک محصول واقعی پیش می‌رود؛ همان کاری که تیم آکادمی در پروژه‌های آژانسی خود هم انجام می‌دهد.
این مسیر را جدی‌تر ادامه بدهید
اگر این مقاله برایتان مفید بود، دوره‌های تخصصی دایره قدم بعدی است.
مشاهده دوره‌ها
