حرکت - جنبش

حرکت ابزار قدرتمندی است که باید در زمینه رانندگی به مقدار کم از آن استفاده کرد. تنها زمانی مناسب است که بتواند به اطلاع رانندگان بدون منحرف کردن توجه آنها از جاده کمک کند.

راهنمایی در یک نگاه (TL;DR):

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

اصول حرکت

هنگام طراحی motion برای رابط‌های Android for Cars، سه اصل اساسی را در نظر داشته باشید: ایمن، آموزنده و انعطاف‌پذیر باشید.

بی خطر

رانندگی وظیفه اصلی کاربر است - بقیه چیزها فرعی هستند. با توجه کاربر به عنوان یک منبع محدود رفتار کنید و از استفاده از حرکت برای ایجاد حواس پرتی غیر ضروری خودداری کنید.

گیف چشم

آموزنده

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

گیف آموزنده

قابل انعطاف

زبان حرکتی را تعریف کنید که به اندازه کافی مقیاس پذیر و منعطف باشد تا بتواند روی صفحه نمایش در هر اندازه و شکل و همچنین با انواع ورودی های کاربر تنظیم شود.

گیف صفحه فلکس

الگوهای حرکتی

برای پشتیبانی از تجربه کاربری ثابت در همه برنامه‌ها، Android Automotive توصیه‌هایی برای الگوهای حرکتی خاص برای استفاده در شرایط زیر ارائه می‌کند:

  • جابجایی بین نماهای هم سطح
  • حرکت به نمای جزئیات
  • گسترش یک اقدام موجود
  • به حداقل رساندن و گسترش یک عمل
  • برهم زدن یک عمل

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


جابجایی بین نماهای هم سطح

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

مثال انتقال همتایان
یک crossfade سریع کاربر را از یک برنامه ناوبری به یک برنامه رسانه می برد و دوباره در Android Automotive بازمی گردد.

مثال

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

حرکت به نمای جزئیات

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

انتقال والدین به فرزند
از صفحه والد، عنصر فرزند بلند می شود و در جای خود گسترش می یابد

مثال

تغییر به نمای جزئیات
در قالب رسانه سیستم عامل Android Automotive، وقتی کاربر روی یک آلبوم خاص در شبکه‌ای از آلبوم‌ها کلیک می‌کند، فهرست آهنگ آن آلبوم بزرگ می‌شود و بزرگ می‌شود تا جزئیات را در کانون توجه قرار دهد.

گسترش یک اقدام موجود

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

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

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

مثال

نمونه همپوشانی عملکرد سیستم عامل Android Auto
در قالب رسانه سیستم عامل Android Automotive، وقتی کاربر روی دکمه سرریز ضربه می‌زند تا نوار کنترل را باز کند، کنترل‌های اضافی بالا می‌آیند و روی هم‌پوشانی ظاهر می‌شوند.

به حداقل رساندن و گسترش یک عمل

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

هنگام به حداقل رساندن یک عمل در حال انجام، از معکوس این حرکت استفاده کنید. حرکت کمینه‌سازی باید زمان کمتری نسبت به حرکت بسط دهد، زیرا کاربر اساساً این عمل را ترک می‌کند و آماده است تا آن را از سر راه خارج کند.

نماد فراخوانی
مدت زمان
دستورالعمل‌های طراحی متریال در مورد مدت زمان انتقال
گسترش یک صفحه نمایش کوچک شده
کنش کمینه شده با محو شدن در بالای عملکرد فعلی به تمام صفحه گسترش می یابد

مثال

نمونه نوار کنترل سیستم عامل Android Automotive
در قالب رسانه سیستم‌عامل Android Automotive، نوار کنترل کوچک‌شده به نمای پخش کامل گسترش می‌یابد – و سپس با ضربه زدن کاربر روی فلش رو به پایین، به شکل کوچک‌شده خود منقبض می‌شود.

برهم زدن یک عمل

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

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

مثال

مثال دیالوگ
هنگامی که یک اقدام مخرب در وسط قالب رسانه سیستم عامل Android Automotive ظاهر می‌شود، با صدایی کامل محو می‌شود تا توجه کاربر را به طور موقت بر روی عملکرد جدید متمرکز کند - در این مورد، درخواست اجازه برای استفاده از داده‌های مکان