تنظيم صفحاتك في مجموعات
يمكنك حفظ المحتوى وتصنيفه حسب إعداداتك المفضّلة.
يجب أن تظهر الحركة باعتدال في سياق القيادة للتعبير عن المفاهيم والعلامة التجارية والعلاقات بين العناصر. بل يجب استخدامه فقط للمساعدة في إعلام السائقين بدون تشتيت انتباههم.
نظرة سريعة:
تجنب تشتيت انتباه المستخدمين بالحركة غير الضرورية
استخدام الحركة لزيادة فهم المستخدمين وتحسين كفاءتهم
اجعل لغة حركتك مرنة بما يكفي لجميع الأجهزة ذات الصلة
استخدام نمط الحركة الموصى به لحالتك
أنماط الحركة
لدعم تجربة مستخدم متسقة في جميع التطبيقات، تنطبق أنماط حركة محددة على التفاعلات التالية:
التبديل بين التطبيقات
التبديل بين طرق عرض الزملاء
تمديد إجراء حالي
تصغير الإجراء وتوسيعه
إيقاف إجراء
تعتمد أنماط الحركة هذه على التخفيف العادي، كما هو موضح في Material Design، والذي يركز على نهاية الانتقال من خلال تسريع الانتقال بسرعة، ثم الإبطاء تدريجيًا.
عند التبديل بين التطبيقات، استخدم تأثير تلاشٍ متقاطع يؤدي إلى تلاشي عنصر واحد بينما يتلاشى عنصر آخر. تصور هذا الانتقال مخرجًا من التطبيق الحالي أثناء الانتقال بسرعة إلى آخر.
تعمل حركة التلاشي المتقاطع على تبديل المستخدم بسرعة بين التطبيقات
مثال
تنقلك ميزة التلاشي السريع من مستخدم من تطبيق تنقّل إلى تطبيق وسائط وتعود إليه مجددًا
التبديل بين طرق عرض الزملاء
عند التبديل بين طرق العرض على المستوى نفسه من التدرّج الهرمي في أحد التطبيقات (وتسمى أيضًا طرق العرض المشابهة)، مثل علامات التبويب في شريط التطبيق أو الأغاني في قائمة تشغيل، استخدِم انتقال المحور المشترك. تعكس الحركة الأفقية لهذا الانتقال من جانب إلى جانب حالة البقاء في المستوى نفسه داخل التطبيق.
تنقل تقنية التلاشي السريع للمستخدم من تطبيق تنقّل إلى تطبيق وسائط ثم يعود مجددًا
مثال
إنّ نمط حركة المحور المشترك عند التبديل من أغنية إلى أغنية في تطبيق وسائط يعزز أنّ الأغنيتَين مدرَجة في قائمة التشغيل نفسها
تمديد إجراء حالي
عندما يكون المستخدم في مرحلة عرض أو اتخاذ إجراء ثم يتخذ إجراءً ثانويًا ذا صلة، يجب تقديم هذا الإجراء الثانوي بحركة رأسية (إما لأعلى أو لأسفل). يتم عرض هذا الإجراء الثانوي على سطح بملء الشاشة، مع خلفية حادة، أمام الإجراء الأساسي. يعزز وجود الإجراء الأساسي من خلال scrim أن المستخدم لا يزال في خضم تنفيذ هذا الإجراء.
وبعد ذلك يتم إغلاق الإجراء الثانوي في الاتجاه العكسي للحركة الافتتاحية. يُفترض أن تستغرق هذه الحركة العكسية وقتًا أقل من الحركة الأصلية، نظرًا للانتهاء من الإجراء.
يتم توسيع الإجراء المصغّر إلى وضع ملء الشاشة بينما يتلاشى فوق الإجراء الحالي
مثال
يتوسّع زر الإجراء العائم (FAB) في وضع التشغيل إلى عرض التشغيل الكامل، ثم يتم تصغيره من خلال السهم المتّجه للأسفل.
إيقاف إجراء
عندما يجب أن يظهر إجراء اختياري قصير بشكل مفاجئ أمام إجراء جارٍ، يجب تحريكه (لأعلى أو لأسفل) من حافة الشاشة، مع استخدام حاجب جزئي. بدلاً من ذلك، يجب أن تتلاشى في منتصف الشاشة مع حاجب كامل. ابدأ الحركة من الموقع الأقرب إلى المكان الذي تريد أن يظهر فيه الإجراء الجديد.
عندما يظهر الإجراء المزعج بالقرب من أعلى الشاشة، يمكنك تمريره من الأعلى مع استخدام حاجب جزئي.
مثال
في مثال Android Auto هذا، ينزلق إشعار حول انعطاف قادم من أعلى الشاشة مع تصغير جزء من الشاشة، ويبقى محتوى الوسائط الحالي مرئيًا.
تاريخ التعديل الأخير: 2025-07-25 (حسب التوقيت العالمي المتفَّق عليه)
[null,null,["تاريخ التعديل الأخير: 2025-07-25 (حسب التوقيت العالمي المتفَّق عليه)"],[[["\u003cp\u003eIn driving mode, prioritize motion for essential communication like concepts, branding, and element relationships, ensuring it aids understanding without causing distraction.\u003c/p\u003e\n"],["\u003cp\u003eUtilize predefined motion patterns (crossfade, shared axis, vertical overlay, minimize/expand, and disruptive slide/fade) for consistent user experience across different in-car app interactions.\u003c/p\u003e\n"],["\u003cp\u003eBase motion design on standard easing principles, emphasizing smooth transitions that accelerate quickly and decelerate gradually.\u003c/p\u003e\n"],["\u003cp\u003eTailor motion duration to the specific action, with quicker transitions for closing or minimizing actions compared to opening or expanding them.\u003c/p\u003e\n"],["\u003cp\u003eMaintain a hierarchy of actions, allowing users to understand the relationship between primary and secondary actions through visual cues like scrims and partial visibility.\u003c/p\u003e\n"]]],[],null,["# Motion\n\n\u003cbr /\u003e\n\nMotion should appear sparingly in the driving context to express concepts, branding, and relationships between elements. It should only be used to help inform drivers without distracting their attention.\n\n**At a glance:** \n- Avoid distracting users with unnecessary motion\n- Use motion to increase users' understanding and build their proficiency\n- Make your motion language flexible enough for all relevant hardware\n- Use the recommended motion pattern for your situation\n\n*** ** * ** ***\n\nMotion patterns\n---------------\n\nTo support a consistent user experience across all apps, specific motion patterns apply to the following interactions:\n\n- Switching between apps\n- Switching between peer views\n- Extending an existing action\n- Minimizing and expanding an action\n- Disrupting an action\n\nThese motion patterns are based on [standard easing](https://material.io/design/motion/speed.html#easing), as described in Material Design, which places focus on a transition's ending by speeding the transition up quickly, then slowing gradually. \n[Easing\nMaterial Design guidelines on adjusting an animation's rate of change](https://material.io/design/motion/speed.html#easing)\n\n*** ** * ** ***\n\n### Switching between apps\n\nWhen switching between apps, use a crossfade transition, which fades one element into view while another element fades out. This transition depicts an exit from the current app while moving quickly into another one.\nThe crossfade motion switches the user quickly between apps\n\n#### Example\n\nA swift crossfade takes the user from a navigational app to a media app and back again\n\n*** ** * ** ***\n\n### Switching between peer views\n\nWhen switching between views at the same level of hierarchy in an app (also called peer views), such as tabs in an app bar or songs in a playlist, use a [shared axis](https://material.io/design/motion/the-motion-system.html#shared-axis) transition. This transition's horizontal, side-to-side movement reflects the state of staying at the same level within an app.\nA swift crossfade takes the user from a navigational app to a media app and back again\n\n#### Example\n\nThe shared axis motion pattern when switching from song to song in a media app reinforces that both songs are in the same playlist\n\n*** ** * ** ***\n\n### Extending an existing action\n\nWhen a user is in the process of viewing or taking an action and then takes a secondary, related action, that secondary action should be introduced with a vertical (either up or down) motion. This secondary action is displayed on a full-screen overlay, with a scrim background, in front of the primary action. The presence of the primary action through the scrim reinforces that the user is still in the midst of performing that action.\n\nThe secondary action is then closed in the reverse direction of the opening motion. This reverse motion should take less time than the original motion, since the action is done. \n[Duration\nMaterial Design guidelines on how long transitions should take](https://material.io/design/motion/speed.html#duration) \nHere, the secondary action rises up from the primary action on an overlay, while the primary action remains partially visible behind the scrim\n\n#### Example\n\nSelecting the overflow button on the media control bar causes it to expand vertically on an overlay with a scrim background\n\n*** ** * ** ***\n\n### Minimizing and expanding an action\n\nOngoing actions can be minimized into a smaller format. This smaller format allows the user to multitask while the ongoing action runs in the background.\n\n- **Expanding**: When the user taps on a minimized action, it expands in size and fills the full screen, using a fade-in transition.\n\n- **Minimizing**: When minimizing an ongoing action, use the reverse of this motion. The minimizing motion should take less time than the expanding motion, since the user is leaving this action.\n\n[Duration\nMaterial Design guidelines on how long transitions should take](https://material.io/design/motion/speed.html#duration)\nThe minimized action expands to full screen as it fades in on top of the current action\n\n#### Example\n\nThe playback FAB (floating action button) expands into the full playback view then contracts via the down arrow\n\n*** ** * ** ***\n\n### Disrupting an action\n\nWhen a short, optional action needs to appear suddenly in front of an ongoing action, it should slide (up or down) from the edge of the screen, with a partial scrim. Alternatively, it should fade into the middle of the screen, with a full scrim. Start the motion from the location closest to where you want the new action to appear.\nWhen the disruptive action should appear near the top of the screen, slide it in from the top with a partial scrim\n\n#### Example\n\nIn this Android Auto example, a notification about an upcoming turn slides down from the top of the screen with a partial scrim, so that ongoing media content remains visible"]]
