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

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

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

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

إمكانية استخدام وضع توقّع الرجوع

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

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

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

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

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

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

الشكل 1: الإدخالات الداخلية لإيماءات النظام. تجنَّب وضع مساحات اللمس تمامًا ضمن هذه المجالات

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

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

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

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

الفيديو 1. إضافة تمويه خفيف لامتصاص توتر النابض المتراكم أثناء الإيماءات

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

الفيديو 2: مثال على معاينة الخلفية

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

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

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

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

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

الشكل 2: مَعلمات تغيُّر السطح والقياس والهامش للتمرير السريع من الحافة اليسرى"

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

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

3 ضبط حجم السطح على حجم 90%، مع ترك 10% متاح للهوامش (يمكنك الاطّلاع على 1)

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

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

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

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

الشكل 3: مَعلمتان Y shift ومقياس الحجم للتمرير السريع من الحافة اليسرى. يعرض السطح بملء الشاشة معاينة للجهة الخلفية.

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

2 إذا انحرف السطح عن الشاشة، صغِّر حجم السطح بنسبة لا تزيد عن 50%.

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

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

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

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

المَعلمة

القيمة

السياق

Shift X

((عرض الشاشة / 20) - 8) dp

الحد الأقصى لمعدّل نقل البيانات، مع ترك هامش يبلغ 8 وحدات بكسل مستقلة الكثافة

التبديل Y

((ارتفاع الشاشة المتاح / 20) -8) dp

الحد الأقصى لمعدّل نقل البيانات، مع ترك هامش يبلغ 8 وحدات بكسل مستقلة الكثافة

المقياس

90%

الحد الأدنى لحجم النافذة

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

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

الفيديو 3: مثال على رمي الزخم لإنجازها

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

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

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

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

الفيديو 4: مثال على إلغاء إجراء

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