Overscan у ТВ-приложений

Когда у большинства дома стоят большие плоские телевизоры, сложно представить всё ещё есть проблема с обрезанием полей на картинке. Раньше проблема существовала для любого кинескопного телевизора, но и в наше время проблема остаётся для некоторых современных телевизоров.

В этой статье я провел своё исследование этой проблемы, собрал рекомендации от производителей телевизоров и тв-платформ типа Android TV (Google.tv) и Apple tv. Сделал анализ телеканалов. В общем поговорим про Overscan (Переразвертка) и про рекомендации к SafeZones в TV UI.

Переразвертка выражается в обрезке изображения на экране телевизора. Вот несколько примеров.

  • Настройка на телевизоре увеличивает масштаб содержимого фильма таким образом, что края кадра не видны.
  • Пластиковая рамка экрана телевизора перекрывает края кадра.

Общие рекомендации

Начну с рекомендаций которые нам дают разные производители.

Apple TV GUI
Рекомендация от Apple для разработчиков UI для их ТВ приставок звучит следующим образом:

Держите основной контент подальше от краев экрана. Обратите внимание на область, охватывающую 60 пикселей сверху и снизу экрана и 90 пикселей по бокам. Трудно увидеть содержимое, которое близко к краям, и непреднамеренное обрезание может произойти из-за чрезмерного сканирования на старых телевизорах.

https://developer.apple.com/design/human-interface-guidelines/tvos/visual-design/layout/

Запомнить стандарт от Apple легко: 90-60-90. По моим собственным наблюдениям — этот формат отлично подход для всех новых телевизоров, которые не режут поля, но если попался телевизор с обрезанием, то 90-60-90 спасут только от того, что ваш контент точно попадёт в экран, но будет у самого края и смотрится это не очень.

Android TV UI
Для Google.tv в инструкциях для разработчиков можно найти следующую рекомендацию

Элементы экрана, которые должны быть постоянно видны пользователю, должны быть расположены в пределах безопасной зоны. Добавление 5% поля в 48dp на левом и правом краях и 27dp на верхнем и нижнем краях к макету гарантирует, что элементы экрана в этом макете будут находиться в безопасной области за пределами сканирования.

https://developer.android.com/training/tv/start/layouts#overscan

Телевизоры LG
Рекомендация от LG мне была особенно интересна, т.к. именно на их телевизоре я словил проблему Overscan и убедился в том, что проблема действительно существует. И вот то, что они советуют меня очень удивило:

Безопасная область — это область, где появляются телевизионные изображения. Безопасная область для экрана телевизора на webOS составляет 20 пикселей по краям.

http://webostv.developer.lge.com/design/style/overscan/

Удивило меня здесь то, что они предложили самые маленькие отступы. И если такие выставлять, то как раз на их старых телевизорах спокойно можно словить проблему обрезки по краям.

Для телевизоров Samsung я не смог найти официальных рекомендаций по этой проблеме. Возможно они считают, что на их телевизорах такой проблемы не существует.

Обобщим

Давайте теперь посмотрим на все три рекомендации вместе и сравним их:

Apple TVAndroid TVLG

Из всех трёх вариантов, я меньше всего бы стал доверять рекомендациям от LG. Они ориентированы на свои новые телевизоры и им нет никакого дела до приложений на других устройствах. Про android тоже выглядит странно, указанные ими размерами не вписываются в те, которые они сами же используют в своих приложениях или, которые использует тот же Youtube. Там они явно больше. Ближе всех к истине Apple.

Практика

В моём распоряжении было 6 телевизоров разных производителей, и я решил проверить на них все эти размеры и так ли реально нужно бояться Overscan.

✅ Sony KD-43XE8096 (Android TV)

Обрезаний нет

✅ Sony KD-43XE7096

Обрезаний нет

✅ LG WebOS TV UJ670V

Обрезаний нет

✅ Samsung UE43MU6100

Обрезаний нет

✅ HiSence H32B5600

Обрезаний нет

После проверки 5 телевизоров с годами выпуска после 2018 года может показаться что нет никакой проблемы с overscan. Но потом я нашёл телевизор LG 2014 года выпуска. И вот с ним случился нежданчик. Во всех режимах, кроме режима Кино, этот телевизор обрезал поля.

❌ LG 32LB650V

На этой модели обрезания проявились во всей красе.

Таким образом мы теперь точно знаем, что если копнуть глубже, то в домохозяйствах еще много не таких уж и старых телевизоров, на которых точно будет такая проблема. Мне сложно сказать какой процент таких телевизоров сейчас в стране, но они есть.

Можно, конечно, сказать что их мало, но я бы поспорил. Дальше я решил проверить а как же на этом телевизоре работают наиболее известные тв приложения. Ivi, megogo, wink, МТС, YouTube, Play Movies — тест выдержали и у них нет проблем с обрезаниями. Но нашлись и те, у кого явно с этим проблема. Amediateka, More.tv и другие проверку не прошли.

❌ Амедиатека. Иконки обрезаются.
❌ More.tv иконки режет. Еще чуть-чуть и никто бы и не понял что там есть меню.

Безопасные зоны телеканалов

Телеканалы, в отличии от разработчиков приложений — более ответственно подходят к вопросу размещения логотипов, титров, бегущих строк. Они должны быть уверенны, что на любом телевизоре их лого будет виден.

99 каналов со всего мира и разных тематик

Я решил сделать анализ 99 телеканалов, посмотреть где они выставляют safezone для своих эфиров. Для этого на 99 картинок я наложил красные полупрозрачные линии по крайним точкам. В конечном итоге, там где крайних точек было больше — наложение давало больший окрас.

Во время анализа каналов я заметил закономерность:

  • Каналы ориентированные на HD и 4K формат позволяют себе ставить лого и заголовки близко к краю. Видимо понимают, что такой формат могут смотреть только на новых телевизорах. Но и они все равно вмещаются в формат 90-60-90
  • Крупные федеральные телеканалы (НТВ, Первый) или крупные мировые каналы (BBC, NHK, CNN, TF1) наоборот стараются ставить лого и титры дальше от края. Вероятно это связано с охватом. Их смотрят по всему миру и в т.ч. те, кто не менял телевизор 30 лет.
  • Все остальные телеканалы ориентируются на формат 90-60-90

Красным показаны крайние точки на телеканалах. Серым 90-60-90. Видно, что большинство стараются брать безопасную зону даже больше.

Вывод. Какой размер использовать?

Мои рекомендации будут следующими. Если вы ориентируетесь только под самые новые телевизоры, то можно брать SafeZone равную 40 по правому и левому боку и 25 сверху и снизу. На всех новых телевизорах она точно пройдёт, но и на старых телевизорах можно быть уверенным, что текст или иконки останутся в поле зрения. Минус здесь только в том, что на старых телевизорах это будет смотреться не очень красиво.

Если вы хотите чтобы и на старых смотрелось красиво, то стоит брать размер рекомендуемый Apple TV — 90-60-90. Минус здесь будет только в том, что на новых телевизорах отступы в некоторых местах будут казаться слишком большими.

Лично для себя я стараюсь брать золотую середину. Я знаю что наши приложения будут смотреть в большинстве своём только на новых телевизорах, но я и не хочу навредить тем, у кого сильные обрезания по краям. Поэтому мой выбор это примерно 60-40-60. Но, здесь надо отталкиваться от элементов которые вы хотите показать по краям: логотип, иконки, меню - ориентироваться стоит на них, но именно в этом диапазоне.