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