اصول طراحی موشن: رابط‌ها در ۲۰۲۶ واقعاً چطور باید حرکت کنند
راهنمای یک طراح شاغل برای موشن در رابط کاربری. هفت اصلی که موشن هدفمند را از تزئین جدا میکند، جدول مدت زمان‌ها، و روش تحویل انیمیشن‌هایی که در یک محصول واقعی دوام می‌آورند.
موشن پرسوءاستفاده‌ترین ابزار طراحی رابط کاربری مدرن است. هر تیمی یک ریل انیمیشن تحویل میدهد، تقریباً هیچ‌کس یک سیستم موشن تحویل نمی‌دهد. نتیجه، محصولی است که می‌پرد، می‌لرزد و با پارالکس راهش را وسط راه کاربر باز میکند. موشنی که باید حذف می‌شد.
این مقاله نسخه‌ی یک طراح شاغل است. هفت اصل که تعیین می‌کنند یک موشن جایش را به دست می‌آورد یا نه، یک مرجع مدت زمان و easing که بحث را تمام میکند، و فهرست کوتاهی از الگوهایی که در تست واقعی کاربر دوام می‌آورند. نه لوپ Dribbble، نه فیلم برند، فقط موشن محصولی که به وقت کاربر احترام می‌گذارد.
طراحی موشن واقعاً چیست
طراحی موشن لایهی رفتار یک محصول است. یعنی اینکه عناصر چطور وارد می‌شوند، خارج می‌شوند، واکنش نشان می‌دهند و در طول زمان با هم نسبت پیدا می‌کنند. اگر درست انجام شود، موشن به کاربر می‌گوید کجاست، از کجا آمده و کجا می‌تواند برود، بدون حتی یک کلمه متن اضافه.
اگر بد انجام شود، موشن به کاربر می‌گوید طراح به Framer دسترسی داشته. انیمیشن تزئینی، فنرهای بی‌پایان و ویدیوهای هیرو که با صدا خودکار پخش می‌شوند همگی یک اشتباه‌اند در لباس‌های مختلف. موشن از توجه، پهنای باند و دسترس‌پذیری خرج میکند. باید فاکتورش را توجیه کند.
مقاله‌ی طراحی سلسله‌مراتب بصری توضیح میدهد چشم یک صفحه‌ی ثابت را چطور می‌خواند. موشن لایهی بعدی است. به چشم نمی‌گوید فقط کجا نگاه کند، بلکه می‌گوید کِی.
موشن دو کار دارد و فقط دو کار
هر انیمیشن در یک محصول عرضه‌شده یکی از دو کار را انجام میدهد. اگر هیچ‌کدام را انجام نمی‌دهد، تزئین است، و تزئین اولین چیزی است که در بازبینی عملکرد حذف میشود.
کار اول: انتقال تغییر وضعیت. دکمه‌ای که آزاد بود حالا فشرده شده. مودالی که وجود نداشت حالا باز است. ردیفی که خالی بود حالا داده دارد. موشن با نشان دادن گذار، به‌جای پرش ناگهانی به وضعیت جدید، تغییر را خوانا میکند.
کار دوم: هدایت چشم. یک عنصر جدید از راست وارد میشود چون کاربر دکمه‌ی «بعدی» را زده. کارتی به سمت ناوبری پایین کوچک میشود چون ذخیره شده. موشن مدل فضایی محصول را بدون اینکه کاربر مستندات بخواند به او یاد میدهد.
موشنی که نه وضعیت را منتقل میکند نه چشم را هدایت، مفت از توجه کاربر خرج میکند. حذفش کنید.
هفت اصل موشن محصول
این‌ها اهرم‌ها هستند. ترکیبشان کنید تا موشن آگاهانه به نظر برسد. هیچ‌کدام را نکشید و محصول خشک میشود. زیاد بکشید و محصول اسباب‌بازی میشود.
اصل ۱: هدف قبل از جلا
هر انیمیشن به یک سؤال جواب میدهد: اگر این موشن نبود کاربر چه چیزی از دست می‌داد؟ اگر جواب «هیچ» است، موشن تزئین است. اگر جواب «نمی‌فهمید چه اتفاقی افتاد» است، موشن ساختاری است و می‌ماند.
طراحانی که با «بیایید یک انیمیشن کوچک اینجا بگذاریم» شروع می‌کنند، محصولی پرسروصدا تحویل می‌دهند. طراحانی که با «اگر اینجا ناگهانی عوض شود کاربر چه چیزی را گم میکند» شروع می‌کنند، محصولی زنده تحویل می‌دهند.
اصل ۲: مدت زمان با اثر متناسب است
انیمیشن کوتاه برای رویدادهای کوچک. انیمیشن بلندتر برای رویدادهای بزرگ‌تر.
فشردن دکمه در کمتر از ۱۰۰ میلیثانیه تمام میشود. گذار صفحه تا ۴۰۰ می‌تواند طول بکشد. مودالی که کل ویوپورت را می‌گیرد می‌تواند ۵۰۰ را بپردازد. بیشتر از آن در دهمین تعامل کند حس میشود، حتی اگر در اولین بار سینمایی باشد.
جدول مدت زمان‌ها:
| رویداد | مدت زمان | چرا |
|---|---|---|
| هاور، فوکوس، فشردن دکمه | ۱۰۰ تا ۱۵۰ میلیثانیه | بازخورد باید فوری حس شود |
| تغییر وضعیت کوچک (toggle، input) | ۱۵۰ تا ۲۰۰ میلیثانیه | محسوس اما بدون مزاحمت |
| باز شدن کارت، tooltip، dropdown | ۲۰۰ تا ۳۰۰ میلیثانیه | جای کافی برای طبیعی شدن easing |
| گذار صفحه یا مودال | ۳۰۰ تا ۴۰۰ میلیثانیه | زمینه‌ی فضایی را بدون کش آمدن می‌سازد |
| جابه‌جایی بزرگ چیدمان، نمایش آنبوردینگ | ۴۰۰ تا ۵۰۰ میلیثانیه | فقط وقتی لحظه واقعاً مهم است |
هر چیزی بالای ۵۰۰ میلیثانیه در یک محصول (برخلاف صفحه‌ی بازاریابی) مالیاتی است روی هر کاربر تکراری. بار اول سینمایی است. بار صدم شکنجه.
اصل ۳: easing احساس را حمل میکند
حرکت خطی رباتیک است. دنیای فیزیکی خطی حرکت نمی‌کند و رابط‌هایی که چنین می‌کنند مکانیکی حس می‌شوند. منحنی‌های easing چیزی‌اند که موشن را انسانی میکند.
سه easing ۹۰٪ کار محصول را پوشش می‌دهند.
- Ease-out برای عناصری که وارد صفحه می‌شوند. در شروع سریع، در پایان آهسته. با انتظار کاربر از نشستن یک شیء سر جایش جور است.
- Ease-in برای عناصری که از صفحه خارج می‌شوند. در شروع آهسته، در پایان سریع. کاربر می‌بیند عنصر قبل از رفتن خروجش را تأیید میکند.
- Ease-in-out برای عناصری که از جایی به جای دیگر می‌روند. نرم در هر دو سر. با اینرسی فیزیکی جور است.
منحنی‌های فنری گزینه‌ی چهارم‌اند و باید با احتیاط استفاده شوند. فنر شاد و مناسب اپ‌های مصرفی با صدای دوستانه است. برای نرم‌افزار مالی، سلامت یا هر محصولی که در آن overshoot نشانه‌ی بی‌ثباتی خوانده میشود، غلط است.
اصل ۴: موشن به ترجیحات حرکت احترام می‌گذارد
هر محصولی یک مسیر prefers-reduced-motion عرضه میکند. کاربران دارای اختلال دهلیزی، میگرن یا حساسیت توجه از موشنی که دیگران از آن لذت می‌برند آسیب می‌بینند. نادیده گرفتن این تنظیم انتخاب سبکی نیست، شکست دسترس‌پذیری است.
قاعده این نیست که وقتی تنظیم روشن است موشن را کامل حذف کنید. قاعده این است که موشن مبتنی بر فاصله را با موشن مبتنی بر opacity عوض کنید.
کارتی که ۴۰ پیکسل سر می‌خورد تبدیل میشود به کارتی که fade-in میشود. تغییر وضعیت هنوز منتقل میشود، محرک دهلیزی حذف شده است. مقاله‌ی چک‌لیست دسترس‌پذیری وب توضیح میدهد این در ممیزی کامل دسترس‌پذیری کجا قرار می‌گیرد.
اصل ۵: یکدستی در کل محصول
موشن باید طوری حس شود که یک محصول یک مجموعه تصمیم گرفته است. دو صفحه با دو easing و مدت زمان متفاوت مثل دو محصول دوخته‌شده به هم‌اند. کاربران متوجه می‌شوند، حتی اگر نتوانند بگویند چه چیزی ناجور است.
راه‌حل یک سیستم موشن است. سه تا پنج مدت زمان. سه تا پنج easing.
توکن‌های نامدار مثل motion.short، motion.medium، motion.long، ease.enter، ease.exit و ease.standard. مقاله‌ی راهنمای سیستم‌های طراحی توضیح میدهد این‌ها کنار توکن‌های رنگ و تایپ کجا قرار می‌گیرند.
توکن‌های موشن در ۲۰۲۶ اختیاری نیستند. تنها راه برای جلوگیری از انحراف موشن با بزرگ شدن تیم‌اند. تیمی سه‌نفره که انیمیشن‌ها را دستی می‌سازد سیستمی از سه نظر تولید میکند. استخدام بعدی نظر چهارم را اضافه میکند. تا صفحه‌ی بیستم، محصول هیچ لایهی رفتار منسجمی ندارد.
اصل ۶: موشن از مدل فضایی پیروی میکند
هر محصولی یک نقشه‌ی ضمنی دارد. صفحه‌های جدید سمت راست‌اند. نمای جزئیات از یک کارت زوم میشود. اورلی‌ها از بالا پایین می‌آیند. کشوی ناوبری از لبه‌ای می‌آید که به آن تعلق دارد.
موشن نقشه را تقویت میکند. صفحه‌ی جزئیاتی که از کارتِ لمس‌شده زوم میشود تداوم فضایی را آموزش میدهد. همان صفحه‌ی جزئیات اگر از بالا بیفتد کاربر را گیج میکند چون نقشه‌ی ضمنی را می‌شکند.
وقتی طراحان این را غلط می‌گیرند، تقریباً همیشه به این دلیل است که انیمیشن را جدا از جریان انتخاب کرده‌اند. آزمون: آیا می‌توانید هر گذار را به یک استعاره‌ی فضایی یکدست برگردانید؟ اگر نه، موشن تزئین میکند، آموزش نمی‌دهد.
اصل ۷: موشن بودجه دارد
هر انیمیشن از CPU، باتری و توجه خرج میکند. هر کدام را بودجه‌بندی کنید.
بودجه‌ی CPU و باتری یعنی فقط transform و opacity را انیمیت کنید و از ویژگی‌های محرک layout مثل width، height، top و left دوری کنید. مرورگرهای مدرن transform و opacity را روی GPU اجرا می‌کنند که ارزان است. انیمیت کردن ویژگی‌های layout محاسبات مجدد اجباری میکند که عملکرد را روی اندروید میان‌رده نابود میکند.
بودجه‌ی توجه یعنی محدود کردن انیمیشنهای همزمان. تقریباً همیشه یک چیز در یک زمان حرکت میکند. دو حرکت از قبل زیاد است، سه حرکت حواس‌پرتی است.
صفحه‌ای که هر عنصرش هنگام اسکرول انیمیت میشود صفحه‌ی طراحی‌شده نیست، دریچه‌ی تله برای تمرکز است. واژه‌نامه‌ی core web vitals اعداد عملکردی را توضیح میدهد که انیمیشنهای اسکرول‌محور معمولاً خرابشان می‌کنند.
الگوهایی که جایشان را به دست می‌آورند
از دهها الگوی موشن که در Dribbble می‌چرخد، فهرست کوتاهی واقعاً کار محصول را بهتر میکند. بقیه لباس مبدل‌اند.
میکروتعامل‌ها روی ورودی
دکمه‌ای که هنگام فشردن ۲ پیکسل فشرده میشود، toggle که بین وضعیت‌ها فنر می‌زند، input که هنگام شکست اعتبارسنجی آرام می‌لرزد. این‌ها ارزان‌ترین و اثرگذارترین موشن‌ها در هر محصول‌اند. به سؤال کاربر (سیستم صدایم را شنید؟) در کمتر از ۱۵۰ میلیثانیه و بدون هیچ متنی جواب می‌دهند.
هر کنترل اصلی باید یک میکروتعامل داشته باشد. دکمه‌ها، toggleها، inputها، چک‌باکس‌ها، رادیوها، اسلایدرها. اگر کنترل به لمس کاربر به‌طور مشهود واکنش نشان ندهد، محصول حتی با بک‌اند سریع هم کند حس میشود. واژه‌نامه‌ی focus state قواعد دسترس‌پذیری حاکم بر این تعامل‌ها را پوشش میدهد.
نمایش پله‌ای برای لیست‌ها
لیستی از کارت‌ها که با فاصله‌ی ۵۰ میلیثانیه بین آیتم‌ها fade-in میشود آگاهانه خوانده میشود. همان لیست که یکجا ظاهر شود ناگهانی خوانده میشود. پله‌ای کردن تقریباً همیشه ارزش چند صد میلی‌ثانیه‌ی اضافه در رندر اول را دارد.
سقف چهار آیتم است. بعد از چهار، پله‌ای کردن را زیر خط تاشو ادامه دهید و بگذارید اسکرول کاربر بقیه را راه بیندازد. پله‌ای کردن بیست آیتم پشت هم کند حس میشود و کاربر بیشترشان را هم نمی‌بیند.
گذارهای عنصر مشترک
کارتی که کاربر لمس میکند تبدیل به هدر صفحه‌ی جزئیات میشود. تصویر بندانگشتی که به تصویر کامل باز میشود. این گذارها مدل فضایی را بلند و ارزان آموزش می‌دهند و چشمگیرترین الگوی موشن در کار محصول مدرن‌اند. هزینه‌ی مهندسی هم دارند، به همین دلیل بیشتر تیم‌ها حذفشان می‌کنند. وقتی لحظه مهم است (آنبوردینگ، جریان تبدیل کلیدی، ویژگی امضا)، هزینه را بپردازید.
نشانگرهای پیشرفت که به زمان احترام می‌گذارند
نوار پیشرفتی که روی عملیات طولانی در زمان واقعی حرکت میکند. صفحه‌های اسکلتی روی داده‌ای که بیش از ۳۰۰ میلیثانیه لود میشود. اسپینر فقط برای عملیات زیر ۱ ثانیه که اسکلت در آن چشمک می‌زد. موشن پیشرفت، موشن اعتماد است. به کاربر می‌گوید سیستم کار میکند، که تنها چیزی است که هنگام انتظار برایش مهم است.
حالت‌های لودینگ معنادار
حالت لودینگ غیاب طراحی نیست، خودش یک طراحی است. واژه‌نامه‌ی progressive disclosure توضیح میدهد حالت‌های لودینگ چطور می‌توانند محتوا را مرحله‌به‌مرحله نشان دهند، به‌جای اینکه منتظر کندترین بخش بمانند.
شکست‌های موشن که باید مراقبشان بود
هر بازبینی موشن همان شکست‌ها را می‌گیرد. اگر محصول با هر کدام از این‌ها عرضه شود، سیستم موشن بقیه‌ی طراحی را تضعیف میکند.
ویدیوی خودکار در هیرو. توجه را می‌رباید، عملکرد را خراب میکند و ترجیحات reduced-motion را نقض میکند. با یک تصویر ثابت یا پخش با فرمان کاربر جایگزینش کنید.
پارالکسی که کسی نخواسته بود. پارالکس معادل موشنِ رنگ برند روی متن بدنه است. در اسکرین‌شات لوکس به نظر می‌رسد و روی دستگاه واقعی حالت تهوع حرکت میدهد.
جهش در هر تغییر وضعیت. موشن فنری ادویه است، نه ماده‌ی اصلی. محصولی که هر دکمه‌اش می‌جهد، هر کارتش فنر می‌زند و هر مودالش overshoot دارد محصولی است که نمی‌تواند اولویت‌بندی کند. فنرها را برای لحظه‌هایی نگه دارید که کاربر باید حسشان کند.
گذارهایی که از سرور جلو می‌زنند. گذار صفحه‌ای که ۵۰۰ میلیثانیه طول می‌کشد در حالی که داده در ۲۰۰ می‌رسد، محصول را کندتر از واقعیتش نشان میدهد. موشن باید با عملیات واقعی همزمان یا کمی عقب‌تر باشد، هرگز آن را پُر نکند.
انیمیشن پس‌زمینه‌ی لوپ‌شونده. پس‌زمینه‌ای که برای همیشه حرکت میکند برای همیشه حواس‌پرتی است. هر بار که کاربر نگاهی برمی‌گرداند تمرکزش را از دست میدهد. فقط وقتی لوپ کنید که خود موشن مقصود باشد (یک وضعیت، یک مصورسازی، یک نشانگر ضربان).
موشن در سیستم
موشن کنار رنگ و تایپ در سیستم طراحی جا دارد. اینکه آن را لایهی جلای مرحله‌ی آخر بدانند دلیل عرضه‌ی موشن ناهماهنگ در بیشتر محصولات است. تیمی که صاحب سیستم است صاحب توکن‌های موشن هم هست.
حداقل مجموعهی توکن موشن:
| توکن | بازه‌ی مقدار | کاربرد |
|---|---|---|
| motion.duration.short | ۱۰۰ تا ۱۵۰ میلیثانیه | بازخورد روی ورودی |
| motion.duration.medium | ۲۰۰ تا ۳۰۰ میلیثانیه | تغییر وضعیت، dropdown، tooltip |
| motion.duration.long | ۴۰۰ تا ۵۰۰ میلیثانیه | صفحه، مودال، گذار بزرگ |
| motion.ease.enter | cubic-bezier(0, 0, 0.2, 1) | عناصر واردشونده به صفحه |
| motion.ease.exit | cubic-bezier(0.4, 0, 1, 1) | عناصر خارج‌شونده از صفحه |
| motion.ease.standard | cubic-bezier(0.4, 0, 0.2, 1) | حرکت‌های درون صفحه |
نامشان بگذارید، مستندشان کنید، و بهصورت متغیر در لایهی توکن‌های طراحی عرضه‌شان کنید. هر انیمیشن جدید در محصول از یکی از این توکنها استفاده میکند، یا دلیل مکتوبی دارد که چرا نمی‌کند. همین انضباط است که موشن را در تیمی از پنج طراح و بیست مهندس منسجم نگه می‌دارد.
چطور یک طراحی موشن را بازبینی کنیم
قبل از عرضه، هر انیمیشن را از چهار سؤال بگذرانید.
آیا تغییر وضعیت را منتقل میکند یا چشم را هدایت؟ اگر هیچ‌کدام، حذفش کنید.
آیا در جدول مدت زمان‌ها جا میشود؟ اگر طولانی است، کوتاهش کنید تا تهاجمی حس شود، بعد یک پله عقب بیایید.
آیا از توکن استفاده میکند؟ اگر دست‌ساز است از سیستم منحرف میشود. به توکن refactor کنید یا ردش کنید.
آیا prefers-reduced-motion را رد میکند؟ تنظیم را روشن کنید. اگر موشن هنوز واکنش دهلیزی برمی‌انگیزد، فقط با opacity بازسازی‌اش کنید.
چهار سؤال. پنج دقیقه برای هر انیمیشن. بیشتر محصولات بدون پرسیدن حتی یکی از این‌ها عرضه می‌شوند، و برای همین بیشتر محصولات حس می‌کنند تزئین شده‌اند، نه طراحی.
اگر تیمی می‌خواهید که این بازبینی را هنگام عرضه انجام دهد، نه اینکه در ممیزی پس از لانچ بابت انحراف موشن عذرخواهی کند، Brainy را استخدام کنید. ما برند، وب و UI محصول را با موشن داخل سیستم از همان صفحه‌ی اول می‌سازیم.
موشن در شرایط ۲۰۲۶
سه تغییر اهمیت دارند. موشن باید از همه‌شان جان به در ببرد.
رابط‌های مبتنی بر AI بیشتر از UIهای قدیمی حرکت می‌کنند. پاسخ‌های استریم‌شونده، ردپای استدلال زنده و فراخوانی پویای ابزارها موشن ظریف دائمی می‌سازند. قاعده این است که موشن AI را قابل‌پیش‌بینی و موشن محصول را آرام نگه دارید. اگر همه‌چیز همزمان انیمیت شود، هیچ‌چیز مهم به نظر نمی‌رسد.
انیمیشنهای اسکرول‌محور حالا ویژگی مرورگرند. scroll-timeline در CSS به طراحان اجازه میدهد بدون JavaScript بر اساس موقعیت اسکرول انیمیت کنند. این اهرم تازه‌ای است و بیشتر تیم‌ها با انیمیت کردن عناصر زیاد هنگام اسکرول بدش استفاده می‌کنند. قاعده: یک انیمیشن اسکرول‌محور در هر صفحه، معمولاً هیرو، گاهی CTA.
مقررات دسترس‌پذیری سخت‌تر می‌شوند. European Accessibility Act و قوانین مشابه یعنی reduced-motion دیگر «خوب است داشته باشیم» نیست، قابل‌اجبار است. عرضه‌ی محصول بدون مسیر reduced-motion ریسک انطباق است، نه نظر طراحی. واژه‌نامه‌ی wcag خط‌های پایه‌ی قابل‌اعمال را پوشش میدهد.
سؤالات متداول
مهم‌ترین اصول طراحی موشن کدامند؟
هدف قبل از جلا، مدت زمان متناسب با اثر، easing که احساس را حمل میکند، احترام به ترجیحات حرکت، یکدستی در کل محصول، آگاهی از مدل فضایی، و بودجه‌ی سخت‌گیرانه‌ی عملکرد و توجه. هفت اصل در ترکیب، نه هیچ‌کدام به‌تنهایی، موشنی می‌سازند که جایش را به دست می‌آورد.
یک انیمیشن UI چقدر باید طول بکشد؟
بین ۱۰۰ تا ۵۰۰ میلیثانیه برای تقریباً هر تعامل محصول. انیمیشنهای بازخورد (هاور، فشردن) ۱۰۰ تا ۱۵۰ میلیثانیه. تغییر وضعیتهای کوچک ۱۵۰ تا ۳۰۰. گذار صفحه و مودال ۳۰۰ تا ۵۰۰. هر چیز بلندتر مالیاتی بر کاربران تکراری میشود، حتی اگر در اولین دیدن سینمایی حس شود.
تفاوت طراحی موشن و انیمیشن چیست؟
طراحی موشن لایهی رفتار یک محصول است و انیمیشن تکنیک بصری برای تولید آن. طراحی موشن میپرسد انیمیشن چه تغییر وضعیتی را منتقل میکند و چرا لازم است. انیمیشن میپرسد حرکت چه شکلی دارد. طراحی موشن استراتژی است، انیمیشن صنعت. کار خوب محصول هر دو را میخواهد.
آیا هر تعاملی باید انیمیشن داشته باشد؟
نه. هر کنترل اصلی (دکمه، toggle، input) از یک میکروتعامل سود می‌برد چون کاربر روی لمس بازخورد انتظار دارد. عناصر ثانویه نه. آزمون: انیمیشن را حذف کنید و ببینید کاربر اطلاعاتی را از دست میدهد یا نه. اگر نه، حذف‌شده بماند.
prefers-reduced-motion چیست و چطور مدیریتش کنیم؟
یک تنظیم سیستمعامل است که نشان میدهد کاربر موشن کمتری میخواهد، معمولاً به دلایل دهلیزی یا توجه. مدیریت درست حذف کامل موشن نیست، بلکه جایگزین کردن انیمیشن مبتنی بر فاصله با انیمیشن مبتنی بر opacity است. تغییر وضعیت هنوز منتقل میشود و محرک دهلیزی حذف میشود.
چطور یک سیستم موشن بسازیم؟
با سه مدت زمان و سه easing بهصورت توکن نامدار شروع کنید. مستند کنید هر کدام کجا استفاده میشود. توکنها را در code review اجرا کنید. توکن بیشتر را فقط وقتی اضافه کنید که مجموعهی موجود موشنی واقعاً غلط تولید میکند، هرگز برای تأمین سلیقهی یکبارهی یک طراح. سه تا پنج توکن برای هر محور معمولاً تمام چیزی است که یک محصول نیاز دارد.
موشن یک صنعت است، نه یک فیچر
محصولات با موشن عالی زنده حس می‌شوند. محصولات بدون آن خشک. محصولات با موشن زیاد مثل ریل دمو. فاصله‌ی بین این سه کم است و تنها راه رسیدن به اولی سیستمی است با قوانین سخت و بازبینی‌های صادقانه.
هفت اصل را در ترکیب بکشید. داخل جدول مدت زمان‌ها بنشینید. easingها را آگاهانه انتخاب کنید. یک لایهی توکن موشن را کنار توکن‌های رنگ و تایپ عرضه کنید.
قبل از عرضه، هر انیمیشن را با چهار سؤال بسنجید. محصولی که حاصل میشود به نظر نمی‌رسد تلاش کرده، به نظر می‌رسد فکر کرده.
اگر تیمی می‌خواهید که این انضباط را روی برند، وب و UI محصول به‌عنوان یک پروژه اجرا کند، Brainy را استخدام کنید. موشن به‌عنوان تصمیم درجه‌یک سیستم، هر بار.
مطالعه‌ی بیشتر
Want a product that moves with purpose instead of showing off? Brainy ships brand, web, and UI with motion built into the system, not sprinkled on top.
Get Started
