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

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

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

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

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

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

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

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

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

تصميم للتنقل بالإيماءات

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

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

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

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

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

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

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

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

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

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

تتأثر أسطح ملء الشاشة بشكل مباشر بالمتغيرين 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.

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

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