Я проектирую интерфейсы в b2b-компании, разрабатывающей интерактивные видео-сервисы. Особенностью, которую всегда нужно держать в голове, является то, что реальный контент, с которым будет работать наш интерфейс, может быть не таким прекрасным, как хотелось: постеры низкого разрешения, слишком длинные названия, описания телепередач или фильмов на несколько абзацев.
В одном мобильном проекте максимальный размер постера, который отдавал оператор, был 400x600px, т.е. на смартфонах с плотностью пикселей 3x мы рассчитывали максимум на 133x200pt, и вариант с красивым постером на ширину экрана как на Dribbble можно было не рассматривать.
В этом посте я расскажу, как сервисы, представленные на tvOS и AndroidTV, решают проблему длинных названий и описаний. Я рассмотрю приложения Amazon Prime, Amediateka, Apple TV, IVI, Kinopoisk, Megogo, More TV, Netflix, Okko и Start. У меня не было доступа к Netflix на указанных платформах, поэтому я воспользуюсь снимками экрана, которые несколько месяцев назад сделала на Smart TV Samsung (TizenOS).
Я соберу решения и сформирую своё. Условием задачи я также поставлю отсутствие возможности повлиять на внешний вид постера, с чем мне каждый день приходится работать.
Длинные названия тайлов в подборках
Видео-сервисы как правило строятся на подборках — группах тайлов под общим заголовком (напр., «Новинки», «Популярное», «Комедии» и т.п.). Тайл состоит — в разных комбинациях — из постера, названия, дополнительной информации, лейблов, рейтинга и кнопки play.
Распространённое решение популярных сервисов — постер со считываемым названием. Яркие постеры говорят сами за себя, дополнительная информация под постером не нужна. Так делают Netflix, Amazon Prime, Start и Kinopoisk. Netflix, как вы возможно слышали, подключает персонализацию к постерам, т.е. показывает пользователям разные изображения, чтобы те с большей вероятностью на них кликнули.
При этом Netflix, Amazon Prime и Start выносят заголовок, дополнительную информацию и описание (полностью или частично) наверх. Это решает проблему длинного названия.
Загрузка...
