حركة

يجب أن تظهر الحركة باعتدال في سياق القيادة للتعبير عن المفاهيم والعلامة التجارية والعلاقات بين العناصر. بل يجب استخدامه فقط للمساعدة في إعلام السائقين بدون تشتيت انتباههم.

نظرة سريعة:

  • تجنب تشتيت انتباه المستخدمين بالحركة غير الضرورية
  • استخدام الحركة لزيادة فهم المستخدمين وتحسين كفاءتهم
  • اجعل لغة حركتك مرنة بما يكفي لجميع الأجهزة ذات الصلة
  • استخدام نمط الحركة الموصى به لحالتك

أنماط الحركة

لدعم تجربة مستخدم متسقة في جميع التطبيقات، تنطبق أنماط حركة محددة على التفاعلات التالية:

  • التبديل بين التطبيقات
  • التبديل بين طرق عرض الزملاء
  • تمديد إجراء حالي
  • تصغير الإجراء وتوسيعه
  • إيقاف إجراء

تعتمد أنماط الحركة هذه على التخفيف العادي، كما هو موضح في Material Design، والذي يركز على نهاية الانتقال من خلال تسريع الانتقال بسرعة، ثم الإبطاء تدريجيًا.


التبديل بين التطبيقات

عند التبديل بين التطبيقات، استخدم تأثير تلاشٍ متقاطع يؤدي إلى تلاشي عنصر واحد بينما يتلاشى عنصر آخر. تصور هذا الانتقال مخرجًا من التطبيق الحالي أثناء الانتقال بسرعة إلى آخر.

التبديل بين التطبيقات بسرعة
تعمل حركة التلاشي المتقاطع على تبديل المستخدم بسرعة بين التطبيقات

مثال

مثال على التبديل بين التطبيقات
تنقلك ميزة التلاشي السريع من مستخدم من تطبيق تنقّل إلى تطبيق وسائط وتعود إليه مجددًا

التبديل بين طرق عرض الزملاء

عند التبديل بين طرق العرض على المستوى نفسه من التدرّج الهرمي في أحد التطبيقات (وتسمى أيضًا طرق العرض المشابهة)، مثل علامات التبويب في شريط التطبيق أو الأغاني في قائمة تشغيل، استخدِم انتقال المحور المشترك. تعكس الحركة الأفقية لهذا الانتقال من جانب إلى جانب حالة البقاء في المستوى نفسه داخل التطبيق.

مثال على نقل التطبيقات المشابهة
تنقل تقنية التلاشي السريع للمستخدم من تطبيق تنقّل إلى تطبيق وسائط ثم يعود مجددًا

مثال

إنّ نمط حركة المحور المشترك عند التبديل من أغنية إلى أغنية في تطبيق وسائط يعزز أنّ الأغنيتَين مدرَجة في قائمة التشغيل نفسها

تمديد إجراء حالي

عندما يكون المستخدم في مرحلة عرض أو اتخاذ إجراء ثم يتخذ إجراءً ثانويًا ذا صلة، يجب تقديم هذا الإجراء الثانوي بحركة رأسية (إما لأعلى أو لأسفل). يتم عرض هذا الإجراء الثانوي على سطح بملء الشاشة، مع خلفية حادة، أمام الإجراء الأساسي. يعزز وجود الإجراء الأساسي من خلال scrim أن المستخدم لا يزال في خضم تنفيذ هذا الإجراء.

وبعد ذلك يتم إغلاق الإجراء الثانوي في الاتجاه العكسي للحركة الافتتاحية. يُفترض أن تستغرق هذه الحركة العكسية وقتًا أقل من الحركة الأصلية، نظرًا للانتهاء من الإجراء.

تراكب الإجراء الثانوي
هنا، يظهر الإجراء الثانوي من الإجراء الأساسي على سطح إعلان، بينما يظل الإجراء الأساسي مرئيًا جزئيًا خلف حاجب الشاشة.

مثال

مثال على تراكب إجراءات Android Auto
يؤدي النقر على زر القائمة الكاملة على شريط التحكّم في الوسائط إلى توسيعه عموديًا على سطح مركّب مزوّد بخلفية ضيقة.

تصغير الإجراء وتوسيعه

يمكن تصغير حجم الإجراءات الجارية. يتيح هذا التنسيق الأصغر للمستخدم إنجاز مهام متعددة أثناء تشغيل الإجراء الجاري في الخلفية.

  • التوسيع: عندما ينقر المستخدم على إجراء مصغر، يتم توسيعه في الحجم ويملأ الشاشة الكاملة، وذلك باستخدام تأثير تلاشي على الشاشة.

  • التصغير: عند تصغير إجراء جارٍ، استخدِم عكس هذه الحركة. يُفترض أن يستغرق التقليل وقتًا أقل من الحركة الموسّعة، نظرًا لأن المستخدم يترك هذا الإجراء.

توسيع شاشة مصغّرة
يتم توسيع الإجراء المصغّر إلى وضع ملء الشاشة بينما يتلاشى فوق الإجراء الحالي

مثال

مثال على زر الإجراء العائم في Android Auto
يتوسّع زر الإجراء العائم (FAB) في وضع التشغيل إلى عرض التشغيل الكامل، ثم يتم تصغيره من خلال السهم المتّجه للأسفل.

إيقاف إجراء

عندما يجب أن يظهر إجراء اختياري قصير بشكل مفاجئ أمام إجراء جارٍ، يجب تحريكه (لأعلى أو لأسفل) من حافة الشاشة، مع استخدام حاجب جزئي. بدلاً من ذلك، يجب أن تتلاشى في منتصف الشاشة مع حاجب كامل. ابدأ الحركة من الموقع الأقرب إلى المكان الذي تريد أن يظهر فيه الإجراء الجديد.

مثال على إجراء قصير
عندما يظهر الإجراء المزعج بالقرب من أعلى الشاشة، يمكنك تمريره من الأعلى مع استخدام حاجب جزئي.

مثال

مثال على إشعار
في مثال Android Auto هذا، ينزلق إشعار حول انعطاف قادم من أعلى الشاشة مع تصغير جزء من الشاشة، ويبقى محتوى الوسائط الحالي مرئيًا.