تصميم خلفية تنبؤية

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

توفّر ميزة الرجوع التنبؤي تجربة تنقّل أكثر سلاسة وسهولة أثناء استخدام ميزة التنقّل بالإيماءات. تستفيد من الرسوم المتحركة المضمنة لإعلام المستخدمين بحيث ستتخذهم إجراءاتهم لتقليل النتائج غير المتوقعة.

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

إتاحة ميزة توقّع الرجوع إلى الشاشة السابقة

تتوفّر ميزة "الرجوع إلى الصفحة السابقة" سواء باستخدام طريقة تنقّل تلقائية أو مخصَّصة. إذا كنت تستخدم ميزة التنقل الافتراضي للخلف، يمكنك الاشتراك في الميزة بسهولة. يمكنك الاطّلاع على مزيد من المعلومات حول إتاحة عملية توقّع الكلمات الرئيسية.

بعد الاشتراك، أنشأ تطبيقك رسوم متحركة مثل العودة إلى المنزل والأنشطة المتبادلة والمهام المتعددة.

يمكنك أيضًا ترقية الاعتمادية لمكونات Material إلى 1.10.0-alpha02 أو أعلى من MDC Android لتلقي الرسوم المتحركة لمكونات Material التالية:

• البطاقات السفلية
• الأوراق الجانبية
• البحث

التأكّد من أنّ تطبيقك يحظى بدعم شامل

لمساعدة المستخدمين، يتّبع ميزة "الانتقال التنبؤي بالخلف" عمليات إدخال الإيماءات المحددة في الميزات الشاملة. تجنب إضافة إيماءات اللمس أو اسحب الأهداف تحت مناطق الإيماءات هذه.

مساحات العرض بملء الشاشة

إذا كان تطبيقك ينشئ عمليات انتقال مخصَّصة داخل التطبيق لمساحات العرض بملء الشاشة، اتّبِع إرشادات التصميم هذه.

معاينة الرجوع

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

الاستيفاء

يضمن أداة الاستيفاء المستخدمة الخروج من الشاشة بسرعة. المعلمات هي (.1، .1، 0، 1) لمطابقة أداة الاستيفاء المستخدمة في الرسوم المتحركة في SystemUI

إلغاء الإجراء

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

مواصفات الحركة

المَعلمة	القيمة المبدئية	القيمة المستهدَفة	السياق
الخروج من الميزان	100%	90%
إدخال الميزان	110%	100%
الخروج من التلاشي	100%	%0	التلاشي إلى القيمة المستهدفة عند حد التقدم الذي يبلغ% 35
الدخول إلى التلاشي	%0	100%	عند بدء التلاشي للداخل عند الحدّ الأدنى للتقدم الذي يبلغ 35%

نقل عنصر مشترك (طرق العرض المتقاطعة)

إذا أنشأ تطبيقك انتقالات مخصصة داخل التطبيق لنقل العناصر المشتركة ضمن طرق العرض، يمكنك استخدام إرشادات التصميم التالية.

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

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

معاينة الرجوع

عند عرض صور متحركة تنبؤية للمستخدم، يتم قياس حالة التنفيذ المسبق التي يحتفظ بها تطبيقك عندما يُجري المستخدم إيماءة عكسية من الحافة إلى الحافة ولكنّه لم يلتزم بها عند تركها. يجب توفير معلَمات تنطبق على حالة التنفيذ المسبق هذه.

ويستند مقدار الحركة المعروض إلى أبعد مسافة يمكن للمستخدم الانتقال فيها من الموقع الذي بدأت فيه الإيماءة.

مواصفات الحركة

تتأثر انتقالات العناصر المشتركة بشكل مباشر بالمتغيّرات x وy من بداية الإيماءة. يصف هذا القسم المواصفات والقيم التي تحكم الآليات المستخدمة في الملاحظات التي تظهر على الشاشة.

تعرض الأشكال التالية مواصفات الحركة المقترَحة للصور المتحركة على السطح.

1 الهوامش: %5 من العرض على كلا الجانبين (مع مساحة السطح الموضّحة في 3)

2 التغيير المحسوب في حال تغيير حجم النافذة إلى الوسط. احتساب هامش 8 بكسل مستقل الكثافة المطلوب: ((عرض الشاشة / 20) - 8) وحدة بكسل مستقلة الكثافة

3 يتم تغيير حجم السطح إلى حجم 90%، مع إتاحة% 10 للهوامش (راجع 1)

4 اترك فجوة بمقدار 8 وحدات بكسل مستقلة الكثافة (dp) من حافة الشاشة.

نوصي بالحفاظ على المعلمات المدرجة للحصول على تجربة متسقة، ولكن يمكنك تغيير المواصفات لإنشاء صورة متحركة مخصصة.

في الشكل السابق، يبلغ عرض الشاشة 1280، مما يجعل x-shift 56 وحدة بكسل مستقلة الكثافة. الصيغة لذلك هي:

((1280/20)-8)= 56 وحدة بكسل مستقلة الكثافة x-shift

1 المساحة بين الحافة وهامش الجهاز متاحة لنقل y-shift

2 إذا انتقل السطح إلى خارج الشاشة، عليك تصغيره بنسبة لا تزيد عن %50.

2 يبدأ السطح في التوسيط عموديًا، مع تحديد y-shift على النحو التالي:

• الحدّ من y-shift حتى لا يتخطى السطح هامش الشاشة البالغ 8 وحدات بكسل مستقلة الكثافة (dp)
• لمنع توقف السطح فجأة، استخدِم أداة الاستقبال السريع واربطها بحدّ y-shift.

3 يجب الحفاظ على هامش 8 وحدات بكسل مستقلة الكثافة عندما يكون السطح قصيرًا بدرجة كافية.

بالنسبة إلى الصور المتحركة المخصّصة، يجب تحديد جميع المَعلمات التالية.

المَعلمة	القيمة	السياق
التغيير X	((عرض الشاشة / 20) - 8) dp	الحد الأقصى للتغيير، مع ترك هامش 8dp
التغيير Y	((ارتفاع الشاشة المتوفر / 20) -8) dp	الحد الأقصى للتغيير، مع ترك هامش 8dp
المقياس	90%	الحد الأدنى لحجم النافذة

يستخدم المطورون الذين ينفّذون الرسوم المتحركة المخصصة باستخدام واجهات برمجة التطبيقات التنبؤية بالتقدم الخلفي هذه المعلمات.

مستوى تقدُّم إيماءة الاستيفاء

يمكن استنتاج قيمة التقدم الخطي من إيماءة المستخدم، ولكن لا ينبغي استخدامها بشكل مباشر مع الرسوم المتحركة للمعاينة. بدلاً من ذلك، يجب أن تكون الملاحظات مصممة لما يساعد المستخدم أثناء الإجراء الخلفي. أدخِل قيمة التقدّم باستخدام رمز مميّز للسمة STANDARD_DECELERATE أو PathIntersolator(0f، 0f، 0f، 1f) بحيث تكون الإيماءة أكثر وضوحًا في البداية. تعزز هذه الملاحظات رصد الحركة في بداية الإيماءة وتستخدم التباطؤ للتحكم في الملاحظات بشكل مبهج وواضح بصريًا.

الالتزام باتخاذ إجراء

عندما يشير المستخدم إلى نقطة التنفيذ ويصدر إيماءات، يتم عرض صورة متحركة تؤكد اكتمال الإجراء.

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

تحدد قوة الانتقال مقدار حركة المعاينة التي سيتم عرضها قبل تشغيل التنفيذ المتحرك. يعتمد نوع الصور المتحركة المعروض على المحتوى الذي يتم إغلاقه، كما هو موضح في الفيديو 2.

إلغاء الإجراء

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