ناوبری تلویزیون

دستگاه‌های تلویزیون مجموعه محدودی از کنترل‌های ناوبری را برای برنامه‌ها ارائه می‌دهند. ایجاد یک طرح ناوبری مؤثر برای برنامه تلویزیونی شما به درک این کنترل‌های محدود و همچنین محدودیت‌های کاربران هنگام کار با برنامه شما بستگی دارد. هنگام ساخت برنامه اندروید خود برای تلویزیون، به نحوه پیمایش کاربر هنگام استفاده از دکمه‌های کنترل از راه دور به جای صفحه لمسی توجه ویژه‌ای داشته باشید.

اصول

هدف این است که ناوبری، طبیعی و آشنا به نظر برسد، بدون اینکه رابط کاربری را تحت الشعاع قرار دهد یا توجه را از محتوا منحرف کند. اصول زیر به تعیین یک پایه برای یک تجربه کاربری سازگار و شهودی در برنامه‌های تلویزیونی کمک می‌کند.

کارآمد

دسترسی به محتوا را سریع و آسان کنید. کاربران می‌خواهند با حداقل تعداد کلیک، به سرعت به محتوا دسترسی پیدا کنند. اطلاعات خود را به گونه‌ای سازماندهی کنید که به کمترین تعداد صفحه نمایش نیاز داشته باشد.

قابل پیش‌بینی

از بهترین شیوه‌ها و توصیه‌ها پیروی کنید تا ناوبری برای کاربران قابل پیش‌بینی باشد. الگوهای ناوبری را بی‌جهت از نو طراحی نکنید، زیرا این امر منجر به سردرگمی و غیرقابل پیش‌بینی بودن می‌شود.

شهودی

ناوبری را به اندازه کافی ساده کنید تا به طور یکپارچه از رفتارهای رایج کاربران پشتیبانی کند. با اضافه کردن لایه‌های غیرضروری ناوبری، آن را بیش از حد پیچیده نکنید.

کنترل‌کننده‌ها

دسته‌های بازی در سبک‌های متنوعی عرضه می‌شوند، از یک کنترل از راه دور مینیمالیستی گرفته تا دسته‌های بازی پیچیده. همه دسته‌ها شامل یک پد جهت‌دار (D-pad) به علاوه دکمه‌های انتخاب، خانه و بازگشت هستند. دکمه‌های دیگر بسته به مدل متفاوت هستند.

نمونه ریموت
شکل ۱. نمونه‌ای از کنترل تلویزیون.

پد D
روش اصلی ناوبری در تلویزیون از طریق D-pad است که شامل دکمه‌های سخت‌افزاری جهت بالا، پایین، چپ و راست می‌شود. D-pad فوکوس را از یک شیء به نزدیکترین شیء در جهت دکمه فشرده شده منتقل می‌کند.

دکمه انتخاب
مورد روی صفحه را با فوکوس انتخاب می‌کند.

دکمه خانه
کاربر را به صفحه اصلی سیستم هدایت می‌کند.

دکمه برگشت
به کاربران راهی برای بازگشت به نمای قبلی می‌دهد.

دکمه میکروفون
دستیار گوگل یا ورودی صوتی را فراخوانی می‌کند.

ناوبری با D-pad

در یک دستگاه تلویزیون، کاربران با استفاده از D-pad یا کلیدهای جهت‌نما حرکت می‌کنند. این نوع کنترل، حرکت را به بالا، پایین، چپ و راست محدود می‌کند. برای ساخت یک برنامه عالی بهینه شده برای تلویزیون، باید یک طرح ناوبری ارائه دهید که در آن کاربر بتواند به سرعت یاد بگیرد که چگونه با استفاده از این کنترل‌های محدود، در برنامه شما حرکت کند.

چارچوب اندروید به طور خودکار ناوبری جهت‌دار بین عناصر طرح‌بندی را مدیریت می‌کند، بنابراین معمولاً نیازی به انجام کار اضافی برای برنامه خود ندارید. با این حال، باید ناوبری را با یک کنترلر D-pad به طور کامل آزمایش کنید تا هرگونه مشکل ناوبری را کشف کنید.

برای بررسی اینکه سیستم ناوبری برنامه شما با D-pad روی دستگاه تلویزیون به خوبی کار می‌کند، این دستورالعمل‌ها را دنبال کنید:

  • مطمئن شوید که کاربری که از کنترلر D-pad استفاده می‌کند، می‌تواند به تمام کنترل‌های قابل مشاهده روی صفحه دسترسی پیدا کند.
  • برای پیمایش لیست‌های دارای فوکوس، مطمئن شوید که دکمه‌های بالا و پایین D-pad لیست را پیمایش می‌کنند و دکمه انتخاب، یک مورد را در لیست انتخاب می‌کند. تأیید کنید که کاربران می‌توانند یک عنصر را در لیست انتخاب کنند و وقتی یک عنصر انتخاب می‌شود، لیست همچنان پیمایش می‌شود.
  • مطمئن شوید که جابجایی بین کنترل‌ها ساده و قابل پیش‌بینی است.

تغییر جهت ناوبری

چارچوب اندروید به طور خودکار یک طرح ناوبری جهت‌دار را بر اساس موقعیت نسبی عناصر قابل فوکوس در طرح‌بندی‌های شما اعمال می‌کند. طرح ناوبری تولید شده را در برنامه خود با استفاده از یک کنترلر D-pad آزمایش کنید. پس از آزمایش، اگر تصمیم بگیرید که می‌خواهید کاربران به روش خاصی در طرح‌بندی‌های شما حرکت کنند، می‌توانید ناوبری جهت‌دار صریح را برای کنترل‌های خود تنظیم کنید.

نمونه کد زیر نحوه تعریف کنترل بعدی برای دریافت فوکوس برای یک شیء طرح‌بندی TextView را نشان می‌دهد:

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

جدول زیر تمام ویژگی‌های ناوبری موجود برای ویجت‌های رابط کاربری اندروید را فهرست می‌کند:

ویژگی عملکرد
nextFocusDown نمای بعدی را که هنگام حرکت کاربر به پایین، فوکوس را دریافت می‌کند، تعریف می‌کند.
nextFocusLeft نمای بعدی را که هنگام حرکت کاربر به سمت چپ، فوکوس را دریافت می‌کند، تعریف می‌کند.
nextFocusRight نمای بعدی را که هنگام حرکت کاربر به راست، فوکوس را دریافت می‌کند، تعریف می‌کند.
nextFocusUp نمای بعدی را که هنگام پیمایش کاربر به بالا، فوکوس را دریافت می‌کند، تعریف می‌کند.

برای استفاده از یکی از این ویژگی‌های ناوبری صریح، مقدار را برابر با android:id ویجت دیگری در طرح‌بندی قرار دهید. حتماً ترتیب ناوبری را به صورت حلقه‌ای تنظیم کنید، به طوری که آخرین کنترل، فوکوس را به کنترل اول بازگرداند.

تمرکز و انتخاب واضحی ارائه دهید

موفقیت طرح ناوبری یک برنامه در دستگاه‌های تلویزیون به این بستگی دارد که کاربر چقدر راحت می‌تواند تشخیص دهد کدام عنصر رابط کاربری در کانون توجه است. اگر نشانه‌ی واضحی از مورد مورد توجه و در نتیجه موردی که کاربر می‌تواند روی آن اقدام کند، ارائه ندهید، ممکن است به سرعت ناامید شده و از برنامه شما خارج شود. به همین دلیل، مهم است که همیشه یک مورد در کانون توجه داشته باشید که کاربر بتواند بلافاصله پس از شروع برنامه یا هر زمان که برنامه غیرفعال است، روی آن اقدام کند.

در طرح‌بندی و پیاده‌سازی برنامه خود، از رنگ، اندازه، انیمیشن یا ترکیبی از این ویژگی‌ها استفاده کنید تا به کاربران کمک کنید به راحتی تصمیم بگیرند که در مرحله بعد چه کاری می‌توانند انجام دهند. از یک طرح یکسان برای نشان دادن تمرکز در سراسر برنامه خود استفاده کنید.

اندروید منابع لیست وضعیت Drawable را برای پیاده‌سازی هایلایت‌ها برای کنترل‌های متمرکز و انتخاب‌شده ارائه می‌دهد. مثال کد زیر نحوه فعال کردن رفتار بصری برای یک دکمه را نشان می‌دهد تا نشان دهد که کاربر به کنترل مورد نظر رفته و سپس آن را انتخاب کرده است:

<!-- res/drawable/button.xml -->
<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" />

مطمئن شوید که فاصله‌ی کافی بین کنترل‌های قابل فوکوس و قابل انتخاب وجود دارد تا هایلایت‌های اطراف آنها به وضوح قابل مشاهده باشند.

ناوبری دکمه برگشت

برای هماهنگی بین برنامه‌های روی پلتفرم، مطمئن شوید که عملکرد دکمه بازگشت از این دستورالعمل‌ها پیروی می‌کند.

از رفتار دکمه بازگشت قابل پیش‌بینی استفاده کنید

برای ایجاد یک تجربه ناوبری آسان و قابل پیش‌بینی، وقتی کاربر دکمه بازگشت ریموت را فشار می‌دهد، او را به مقصد قبلی ببرید.

تصویری که جریان ناوبری را هنگام استفاده از ناوبری بالا توصیف می‌کند
شکل ۲. جریان با استفاده از ناوبری بالا.
تصویری که جریان ناوبری را هنگام استفاده از ناوبری جانبی توصیف می‌کند
شکل ۳. جریان با استفاده از ناوبری جانبی

اگر کاربر از یک آیتم منو به یک کارت در وسط صفحه برود و سپس دکمه بازگشت را فشار دهد، نتیجه به این بستگی دارد که آیا برنامه از ناوبری بالا یا ناوبری سمت چپ استفاده می‌کند:

  • اپلیکیشن از ناوبری بالا استفاده می‌کند: با اسکرول سریع و فعال کردن فوکوس روی منو، کاربر را به بالای صفحه برگردانید.
  • برنامه از ناوبری سمت چپ استفاده می‌کند: منوی سمت چپ را فعال کنید و روی مورد فعال فعلی منو تمرکز کنید.

مطمئن شوید که دکمه بازگشت توسط صفحات تأیید یا بخشی از یک حلقه بی‌نهایت مسدود نشده باشد.

تصویر صفحه‌ای که از کاربران می‌پرسد آیا می‌خواهند خارج شوند یا خیر
شکل ۴. دریچه خروج

نکن. (یا: نکن.)
از ایجاد دروازه خروج خودداری کنید. به کاربران اجازه دهید بدون تأیید از برنامه خارج شوند.


تصویر صفحه نمایش حلقه ناوبری
شکل ۵. حلقه ناوبری

نکن. (یا: نکن.)
هرگز وارد حلقه بی‌پایان بستن و باز کردن منو نشوید. در حالت ایده‌آل، فشردن دکمه بازگشت به منزله خروج از برنامه است. دکمه خروج را در منو نمایش ندهید، مگر اینکه مورد خاصی باشد، مانند پروفایل کودکان.

دکمه بالا یا عقب را نمایش ندهید

برخلاف دستگاه‌های دستی، دکمه‌ی بازگشت روی ریموت برای حرکت به عقب در تلویزیون استفاده می‌شود. نمایش دکمه‌ی بازگشت مجازی روی صفحه ضروری نیست:

اسکرین شاتی که دکمه بازگشت نرم افزاری را روی صفحه نمایش نشان می‌دهد
شکل ۶. دکمه برگشت نرم

نکن. (یا: نکن.)

در صورت لزوم دکمه لغو را نمایش دهید

اگر تنها اقدامات قابل مشاهده، اقدامات تأیید، مخرب یا خرید هستند، بهتر است یک دکمه لغو داشته باشید که به مقصد قبلی برگردد:

تصویری که دکمه لغو نرم افزاری را روی صفحه نمایش نشان می‌دهد
شکل ۷. دکمه لغو نرم افزاری.

انجام دهید.

ناوبری برگشتی را پیاده‌سازی کنید

چارچوب اندروید معمولاً ناوبری به عقب را به خوبی مدیریت می‌کند، همانطور که برای D-pad نیز همینطور است. اگر از کامپوننت Navigation استفاده کنید، می‌توانید از انواع نمودارهای ناوبری پشتیبانی کنید. گاهی اوقات، ممکن است نیاز به پیاده‌سازی برخی رفتارهای سفارشی داشته باشید، مانند اینکه دکمه بازگشت، فوکوس را به ابتدای یک لیست طولانی بازگرداند.

ComponentActivity ، کلاس پایه برای FragmentActivity و AppCompatActivity ، به شما امکان می‌دهد رفتار دکمه برگشت را با استفاده از OnBackPressedDispatcher آن کنترل کنید، که می‌توانید با فراخوانی getOnBackPressedDispatcher() آن را بازیابی کنید.

برای اطلاعات بیشتر، به ارائه ناوبری برگشت سفارشی مراجعه کنید.

کنترل‌های پخش روی تلویزیون

پخش ویدیو یکی از مهمترین ویژگی‌های تلویزیون است. مهم است که پخش‌کننده‌های ویدیو در برنامه‌ها در سراسر تلویزیون اندروید رفتار یکسانی داشته باشند. به دستورالعمل‌های کنترل‌های پخش برای تلویزیون مراجعه کنید.

پیمایش زنده تب‌ها

علاوه بر رعایت الزامات کیفیت برنامه تلویزیونی ، برنامه‌هایی که دارای فید زنده تلویزیونی در برگه Live هستند، باید الزامات پخش بدون مشکل و پخش مستقیم را نیز، همانطور که در بخش‌های بعدی توضیح داده شده است، برآورده کنند.

پخش بدون اصطکاک

پخش بدون اصطکاک برای رفتار درون برنامه‌ای پس از هرگونه پیوند عمیق کانال زنده/خطی از Google TV و Android TV اعمال می‌شود.

کاربرانی که روی یک لینک عمیق کانال زنده/خطی از گوگل تی‌وی و اندروید تی‌وی کلیک می‌کنند، باید مستقیماً به پخش کانال هدایت شوند، بدون هیچ گونه مسدود کردن یا تأخیر در صفحه نمایش از برنامه هدف. جریان‌های ورود به سیستم، جریان‌های ثبت نام، ویدیوهای برندسازی و سایر تأخیرها مجاز نیستند .

با این حال، اگر لینک عمیق، بارگذاری برنامه هدف را از یک بوت سرد آغاز کند، این تأخیر بوت شدن قبل از پخش مجاز است . یک ویدیو یا انیمیشن تبلیغاتی بوت شدن برنامه نیز در این مورد مجاز است. چنین تجربه بوت سردی بعید است که بیش از یک بار در هر جلسه رخ دهد.

همچنین، اگر اتصال به کانال عمیقاً لینک‌شده چند ثانیه طول بکشد، نمایش برند کانال و/یا سرویس مجاز است . با این حال، مدت زمان آن باید فقط به اندازه بارگذاری کانال باشد (و مشابه میانگین زمان بارگذاری کانال در داخل برنامه).

اگر کاربر از سیستم خارج شده یا مشترک نشده باشد، می‌توانید پخش را برای یک کانال پولی مسدود کنید تا مراحل ورود یا ثبت‌نام تکمیل شود.

بازگشت مستقیم

وقتی کاربران برنامه‌ای را از طریق یک لینک عمیق در تب Live اجرا می‌کنند و سپس دکمه بازگشت را فشار می‌دهند، باید با یک بار فشردن دکمه بازگشت، صرف نظر از مدت زمان سپری شده، به تب Live بازگردند. این رفتار بازگشت مستقیم برای همه لینک‌های عمیق تب Live در Google TV و Android TV الزامی است.

پیوندهای عمیق تب زنده با یک پارامتر پیوند عمیق ضمیمه شده متمایز می‌شوند: ?exit_on_back=[true|false] . برنامه‌ها باید این پارامتر را تجزیه کنند تا مشخص شود که آیا برنامه از تب زنده اجرا شده است یا خیر. اگر exit_on_back true باشد، برنامه‌ها باید رفتار بازگشت مستقیم را پیاده‌سازی کنند.

توجه داشته باشید که اگر کاربر هر دکمه‌ای غیر از دکمه‌ی برگشت را به عنوان اولین دکمه‌ای که پس از لینک عمیق فشار می‌دهد، فشار دهد، الزام بازگشت مستقیم اعمال نمی‌شود و فقط رفتار استاندارد دکمه‌ی برگشت لازم است.

برای مثال، فرض کنید پس از دنبال کردن یک لینک عمیق، کاربر دکمه انتخاب D-pad را فشار می‌دهد که یک پوشش کنترلی را نمایش می‌دهد. کاربر منتظر می‌ماند تا پوشش ناپدید شود و سپس دکمه برگشت را فشار می‌دهد. از آنجایی که اولین دکمه‌ای که پس از دنبال کردن لینک عمیق فشرده شده، دکمه انتخاب D-pad بوده است، الزام بازگشت مستقیم اعمال نمی‌شود. در عوض، منطق پشته برگشتی عادی برنامه اعمال می‌شود.

فشار دادن مکرر دکمه برگشت باید کاربر را به روت برنامه و سپس به Google TV یا Android TV، بدون هیچ حلقه بی‌نهایت، هدایت کند. برای اطلاعات بیشتر، به بخش رفتار قابل پیش‌بینی دکمه برگشت مراجعه کنید.

مقصد شروع ثابت

اولین صفحه‌ای که کاربر هنگام اجرای برنامه از لانچر می‌بیند، آخرین صفحه‌ای است که پس از فشردن دکمه بازگشت به لانچر مشاهده می‌کند.

لینک‌دهی عمیق، ناوبری دستی را شبیه‌سازی می‌کند

چه در حال لینک‌دهی عمیق باشید و چه بخواهید به صورت دستی به یک مقصد خاص بروید، کاربران می‌توانند از دکمه بازگشت برای پیمایش بین مقاصد و رسیدن به مقصد اولیه استفاده کنند.

تصاویری که پیوند عمیق به صفحه جزئیات درون یک برنامه را نشان می‌دهند. با فشار دادن دکمه بازگشت به صفحه اصلی آن برنامه می‌روید و با فشار دادن مجدد دکمه بازگشت به صفحه اصلی برمی‌گردید.
شکل ۸. لینک‌دهی عمیق به صفحه جزئیات.

لینک‌دهی عمیق به یک برنامه از برنامه دیگر، ناوبری دستی را شبیه‌سازی می‌کند. برای مثال، اگر کاربر مستقیماً به صفحه جزئیات برنامه Moviestar از Google TV برود و سپس دکمه بازگشت را فشار دهد، به صفحه اصلی برنامه Moviestar منتقل می‌شود.

مسیر را برای همه عناصر قابل فوکوس پاک کنید

به کاربران اجازه دهید رابط کاربری شما را با جهت مشخص هدایت کنند. اگر مسیر مستقیمی برای رسیدن به یک کنترل وجود ندارد، جابجایی آن را در نظر بگیرید.

مثال قابل فوکوس در ناوبری
شکل ۹. کنترل قابلیت تمرکز.

انجام دهید.
کنترل‌ها را، مانند عملکرد جستجو که در اینجا نشان داده شده است، در مکان‌هایی قرار دهید که با سایر عناصر قابل کلیک همپوشانی نداشته باشند.

مثال قابل فوکوس در ناوبری
شکل ۱۰. کنترل قابلیت تمرکز.

نکن. (یا: نکن.)
از طرح‌بندی‌هایی که شامل کنترل‌هایی در مکان‌های صعب‌العبور هستند، خودداری کنید. دسترسی به عملکرد جستجو که در اینجا نشان داده شده است، با استفاده از D-pad آسان نیست.

محورها

طرح‌بندی خود را طوری طراحی کنید که از هر دو محور افقی و عمودی بهره ببرد. به هر جهت یک عملکرد خاص اختصاص دهید، که پیمایش سریع در سلسله مراتب بزرگ را ممکن می‌سازد.

مثال محورهای ناوبری
شکل ۱۱. پیمایش.

انجام دهید.
دسته‌ها را می‌توان روی محور عمودی پیمایش کرد و موارد درون هر دسته را می‌توان روی محور افقی مرور کرد.

مثال محورهای ناوبری
شکل ۱۲. پیمایش.

نکن. (یا: نکن.)
از سلسله مراتب طرح بندی پیچیده و تو در تو خودداری کنید.