التنقّل على التلفزيون

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

المبادئ

الهدف هو أن يبدو التنقل طبيعيًا ومألوفًا دون السيطرة على واجهة المستخدم أو صرف الانتباه عن المحتوى. تساعد المبادئ التالية في وضع أساس لتجربة مستخدم متسقة وسهلة عبر تطبيقات التلفزيون.

فعّالة

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

التوقّعات

اتّبِع أفضل الممارسات والاقتراحات لإتاحة إمكانية توقُّع عملية التنقّل للمستخدمين. تجنَّب إعادة ابتكار أنماط التنقّل بدون داعٍ، لأنّ ذلك يؤدي إلى حدوث التباس وعدم القدرة على توقُّع الأخطاء.

سهلة الاستخدام

اجعل عملية التنقّل بسيطة بما يكفي للتوافق بسلاسة مع سلوكيات المستخدمين الشائعة. لا تعقيد أكثر من خلال إضافة طبقات تنقل غير ضرورية.

وحدات التحكّم

تتوفر أنواع مختلفة من وحدات التحكم، بدءًا من الحد الأدنى للتحكم عن بُعد وصولاً إلى أجهزة التحكم المعقّدة في الألعاب. تتضمن جميع وحدات التحكم لوحة اتجاهات (D-pad) بالإضافة إلى أزرار تحديد والصفحة الرئيسية والرجوع. تختلف الأزرار الأخرى حسب الطراز.

نموذج عن بُعد
الشكل 1. مثال على جهاز التحكّم بالتلفزيون عن بُعد

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

زر الاختيار
لاختيار العنصر الذي يظهر على الشاشة مع التركيز عليه

زر الشاشة الرئيسية
نقل المستخدم إلى الشاشة الرئيسية للنظام.

زر الرجوع
يمنح المستخدمين طريقة للعودة إلى العرض السابق.

زر الميكروفون
يستدعي إما "مساعد Google" أو الإدخال الصوتي.

التنقّل باستخدام لوحة التحكّم

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

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

يمكنك اتّباع الإرشادات التالية لاختبار عمل نظام التنقّل في تطبيقك بشكل جيد مع لوحة التحكّم على جهاز التلفزيون:

  • تأكد من أن المستخدم الذي لديه وحدة تحكم لوحة التحكم يمكنه الانتقال إلى جميع عناصر التحكم المرئية على الشاشة.
  • بالنسبة إلى التمرير في القوائم مع التركيز، تأكد من أن زرَّي D-pad لأعلى ولأسفل يؤدي إلى تمرير القائمة وأن زر التحديد يحدد عنصرًا في القائمة. تحقق من أن المستخدمين يمكنهم تحديد عنصر في القائمة وأن القائمة لا تزال قابلة للتمرير عند تحديد أحد العناصر.
  • تأكد من أن التبديل بين عناصر التحكم أمر مباشر ويمكن التنبؤ به.

تعديل اتجاهات التنقل

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

يوضح نموذج الرمز البرمجي التالي كيفية تحديد عنصر التحكّم التالي الذي يجب التركيز عليه لكائن تنسيق TextView:

<TextView android:id="@+id/Category1" android:nextFocusDown="@+id/Category2" />

يسرد الجدول التالي جميع سمات التنقّل المتاحة لأدوات واجهة مستخدم Android:

السمة الوظيفة
nextFocusDown تحدّد العرض التالي لتلقّي التركيز عندما ينتقل المستخدم إلى الأسفل.
nextFocusLeft تُحدِّد العرض التالي لتلقّي التركيز عندما ينتقل المستخدم إلى اليسار.
nextFocusRight تحدّد العرض التالي لتلقّي التركيز عندما ينتقل المستخدم إلى اليمين.
nextFocusUp تحدّد العرض التالي لتلقّي التركيز عندما ينتقل المستخدم للأعلى.

لاستخدام إحدى سمات التنقّل الفاضحة هذه، اضبط القيمة على android:id في تطبيق مصغّر آخر في التنسيق. تأكد من إعداد ترتيب التنقل كتكرار، بحيث يعيد عنصر التحكم الأخير التركيز إلى الأول.

تقديم التركيز والاختيار الواضحين

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

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

يوفّر Android موارد قائمة الحالات القابلة للرسم لتنفيذ عمليات التمييز لعناصر التحكّم المركّزة والمختارة. يوضح مثال التعليمة البرمجية التالي كيفية تمكين السلوك المرئي لزر للإشارة إلى أن المستخدم قد انتقل إلى عنصر التحكم ثم حدده:

<!-- res/drawable/button.xml -->
<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
    <item android:state_pressed="true"
          android:drawable="@drawable/button_pressed" /> <!-- pressed -->
    <item android:state_focused="true"
          android:drawable="@drawable/button_focused" /> <!-- focused -->
    <item android:state_hovered="true"
          android:drawable="@drawable/button_focused" /> <!-- hovered -->
    <item android:drawable="@drawable/button_normal" /> <!-- default -->
</selector>

يطبّق رمز XML التالي للتنسيق قائمة الحالات السابقة القابلة للرسم على Button:

<Button
    android:layout_height="wrap_content"
    android:layout_width="wrap_content"
    android:background="@drawable/button" />

احرص على توفير مساحة متروكة كافية ضمن عناصر التحكّم القابلة للتركيز والقابلة للاختيار بحيث تكون النقاط البارزة حولها مرئية بوضوح.

التنقّل باستخدام زر الرجوع

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

استخدام السلوك الذي يمكن التنبؤ به لزر الرجوع

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

صورة تصف تدفق التنقل عند استخدام التنقل العلوي
الشكل 2. انسياب باستخدام شريط التنقُّل العلوي.
صورة تصف تدفق التنقّل عند استخدام ميزة التنقّل الجانبي
الشكل 3. الانتقال باستخدام شريط التنقّل الجانبي

إذا انتقل المستخدم من عنصر قائمة إلى بطاقة في منتصف الصفحة ثم ضغط على زر الرجوع، فإن النتيجة تعتمد على ما إذا كان التطبيق يستخدم التنقل العلوي أو التنقل الأيسر:

  • يستخدم التطبيق التنقل العلوي: يعيد المستخدم إلى أعلى الصفحة من خلال التمرير بسرعة وتفعيل التركيز على القائمة.
  • يستخدم التطبيق شريط التنقّل الأيمن: فعِّل القائمة الجانبية اليمنى وركِّز على عنصر القائمة النشط حاليًا.

تأكد من أن زر الرجوع ليس محصورًا بشاشات التأكيد أو بجزء من حلقة لانهائية.

لقطة شاشة تعرض مربّع حوار يسأل المستخدمين ما إذا كانوا يريدون الخروج من التطبيق
الشكل 4. الخروج من الحظر

ما ننصحك بتجنّبه:
تجنَّب إغلاق بوابة الخروج. السماح للمستخدمين بالخروج من التطبيق بدون تأكيد.


لقطة شاشة تعرِض حلقة التنقّل
الشكل 5. حلقة التنقّل

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

عدم عرض زر للأعلى أو الرجوع

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

لقطة شاشة تعرض زر الرجوع بشكل بسيط على الشاشة
الشكل 6. زر الرجوع الخفيف

ما ننصحك بتجنّبه:

عرض زر الإلغاء إذا لزم الأمر

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

لقطة شاشة تعرض زر الإلغاء بشكل مبدئي على الشاشة
الشكل 7. زر الإلغاء الأوّلي

الإجراءات المناسبة

تنفيذ التنقل الخلفي

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

تتيح لك ComponentActivity، الفئة الأساسية لـ FragmentActivity وAppCompatActivity، التحكّم في سلوك زر الرجوع من خلال استخدام OnBackPressedDispatcher، والذي يمكنك استرداده من خلال استدعاء getOnBackPressedDispatcher().

لمزيد من المعلومات، راجِع توفير شريط رجوع مخصّص.

عناصر التحكّم في التشغيل على التلفزيون

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

التنقّل بين علامة التبويب "البث المباشر"

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

تشغيل سلس

ينطبق التشغيل السلس على السلوك داخل التطبيق بعد أي رابط لصفحة في التطبيق على مستوى قنوات البث المباشر أو الخطي من Google TV وAndroid TV.

عندما ينقر المستخدمون على رابط لصفحة معيّنة في التطبيق من Google TV وAndroid TV، يجب توجيههم مباشرةً إلى تشغيل القناة، بدون أي حظر أو تأخير،

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

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

إذا سجّل المستخدم الخروج أو لم يكن مشتركًا في القناة، يمكنك حظر تشغيل المحتوى في قناة مدفوعة لإكمال عملية تسجيل الدخول أو الاشتراك.

رجوع مباشر

عندما يشغّل المستخدمون تطبيقًا من رابط لصفحة في التطبيق ضمن علامة التبويب "البثّ المباشر" ثم يضغطون على زر الرجوع، يجب إعادتهم إلى علامة التبويب "البثّ المباشر" بضغطة واحدة على الرجوع، بغض النظر عن مقدار الوقت المنقضي. إنّ سلوك الرجوع المباشر هذا مطلوب لكل الروابط لصفحات معيّنة في علامة التبويب "البثّ المباشر" على Google TV وAndroid TV.

يتم تمييز الروابط لصفحات في التطبيق ضمن علامة التبويب "البث المباشر" بمَعلمة رابط تؤدي إلى صفحة في التطبيق: ?exit_on_back=[true|false] يجب أن تحلِّل التطبيقات هذه المَعلمة لتحديد ما إذا كان قد تم تشغيل التطبيق من علامة التبويب "البثّ المباشر" أم لا إذا كانت قيمة exit_on_back هي true، يجب أن تنفِّذ التطبيقات سلوك الرجوع المباشر.

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

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

يجب أن يؤدي الضغطات المتكررة على زر الرجوع إلى توجيه المستخدم إلى جذر التطبيق ثم الرجوع إلى Google TV أو Android TV بدون أي تكرار لا نهائي. للحصول على مزيد من المعلومات، يمكنك الاطّلاع على قسم سلوك زر الرجوع المتوقع.

وجهة البدء الثابتة

أول شاشة تظهر للمستخدم عند تشغيل التطبيق من مشغّل التطبيقات هي أيضًا آخر شاشة تظهر للمستخدم عند العودة إلى المشغّل بعد الضغط على زر الرجوع.

يحاكي الربط بصفحة في التطبيق التنقّل اليدوي.

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

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

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

محو المسار المؤدي إلى كل العناصر التي يمكن التركيز عليها

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

مثال يمكن التركيز عليه أثناء التنقل
الشكل 9. التحكّم في إمكانية التركيز

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

مثال يمكن التركيز عليه أثناء التنقل
الشكل 10. التحكّم في إمكانية التركيز

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

المحوران في الرسم البياني

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

مثال على محاور التنقل
الشكل 11. الاجتياز.

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

مثال على محاور التنقل
الشكل 12. الاجتياز.

ما ننصحك بتجنّبه:
تجنَّب استخدام تدرّجات التصميم الهرمية المعقّدة والمدمجة.