Телевизоры становятся умнее, и мы в Purrweb стараемся от них не отставать. Не так давно мы сделали свой первый проект для смарт-ТВ, в котором отвечали за дизайн и разработку. Теперь хотим поделиться опытом: какой интерфейс советуют делать телевизионные гиганты, а о чем не расскажут в гайдлайнах.
1405 просмотров
Летом 2022 года к нам обратились с идеей сделать кроссплатформенный IPTV-кинотеатр для европейской аудитории. Нужно было разработать мобильное приложение, веб-версию, а главное — приложение для смарт-ТВ. Для нас это был первый проект разработки дизайна для телевизионных операционных систем. Расскажем, как это было, что мы читали и о какие подводные камни споткнулись.
Что такое IPTV
Для начала немного контекста. Чтобы понять идею нашего приложения, нужно знать условия, в которых европейцы потребляют ТВ-контент.
Подписки на сервисы в Европе стоят недешево. Европейцы в среднем тратят на них 130€ в месяц. Из этой суммы около 30€ уходят на стриминги. За эти деньги можно оплатить Яндекс Плюс, одну из самым популярных мультимедийных подписок в России, на семь месяцев вперед.
Обзор Платформы Яндекс ТВ с Алисой для Телевизоров на Android Smart TV
Еще в Европе строгие законы о нарушении авторских прав. Там вы не можете просто так посмотреть фильм, не заплатив за него. Например, в Германии за пиратский сериальчик можно получить штраф в 155-1000€. Их выписывают даже несовершеннолетним.
Один из способов сэкономить на контенте, не рискуя поплатиться за пиратство — обратиться к реселлерам IPTV-плейлистов.
IPTV — это разновидность интернет-телевидения. Трансляция происходит в изолированной IP-сети, а чтобы она заработала, пользователь должен загрузить в приложение плейлист со ссылками на контент.
Такие плейлисты распространяют реселлеры. Они продают доступ не к целым сервисам, а к отдельным сериалам, кино, трансляциям или радио.
IPTV-плейлисты — это буквально текстовые файлы со ссылками, и наше приложение должно было упаковать их в формат, похожий на онлайн-кинотеатр. Пользователи покупают плейлист, загружают его прямо в приложении, а вместо хаоса из непонятного текста получают красивый интерфейс и функциональный видеоплеер. Все эти манипуляции можно провести на разных устройствах, в том числе на умном телевизоре.
Что пишут про дизайн ТВ-приложений
В интернете не так много статей и гайдов по приложениям на ТВ-платформы. Когда мы начинали работу над проектом, их было еще меньше.
На помощь пришли официальные руководства от основных производителей умных телевизоров. Ссылки на них мы прикрепили в конце статьи.
Так как у нас в офисе была приставка Apple TV, мы начали разработку под tvOS — нововведения можно было сразу тестировать. Но наше приложение должно было работать на разных телевизионных ОС: Tizen, WebOS, Android TV. Поэтому мы дополнительно изучили гайдлайны от Samsung и LG.
Мы обобщили принципы дизайна интерфейсов, которые изучили для проекта, и дополнили их неочевидными инсайтами из нашей практики. Получился список из 7 пунктов ниже.
Добавляем неподдерживаемые приложения на главный экран Android TV: шаг за шагом
1. Интерфейс должен легко читаться с 3-3,5 метров
Расстояние между человеком и телевизором больше, чем вы думаете. В среднем оно составляет три метра, но обычно мы откидываемся назад на спинку дивана, а иногда можем продолжать просмотр, перемещаясь по комнате. Значит, расстояние увеличивается.
Хотя экраны телевизоров больше мониторов ПК и смартфонов, элементы интерфейса на таком расстоянии могут быть неразборчивыми. От этого чаще всего страдают текст, значки навигации и указатели.
Поэтому все элементы интерфейса должны быть достаточно большими, чтобы пользователь мог разглядеть их издалека. Особенно это важно в случае элементов, с которыми нужно взаимодействовать.
Типичные условия при просмотре телевизора
Чтобы сделать интерфейс ТВ-приложения достаточно крупным, начинайте тестировать дизайн на устройствах как можно раньше.
Когда мы делали макеты на маленьких фреймах в Figma, понять масштабы телевизионной картинки было очень трудно. Наша команда привыкла работать с экранами смартфонов и десктопов, но не с 50-дюймовыми телевизорами.
На этапе первых тестов мы поняли, что шрифты, которые казались нам достаточно большими, плохо считываются на реальном устройстве. Благодаря ранней сборке и тесному сотрудничеству с командой разработки, мы вовремя заметили ошибку и все исправили.
В плейлистах для IPTV нет обложек, трейлеров и описаний. Приложение само находит дополнительную информацию и загружает в карточку. Так пользователю гораздо легче найти себе фильм по душе
2. Используйте выразительное состояние фокуса
Состояние элемента «фокус» указывает текущее местоположение пользователя на экране. Это может быть яркая обводка, свечение, увеличение масштаба объекта, затемнение или блюр остального интерфейса. Хотя фокус часто используется на других устройствах, на экране телевизора он должен быть особенно выразительным из-за больших диагоналей.
Состояние фокуса — важнейшая часть телевизионных интерфейсов. Оно упоминается во всех гайдлайнах без исключения.
Правильный фокус выделяет объект даже на большом расстоянии и помогает пользователю не потеряться
В одном из руководств мы прочитали, что фокус лучше всего делать через увеличение превью и добавление тени. Оказалось, что такой подход не работает с темной темой — тени не видно, свечение почти не заметно, а простого увеличения не хватает для явного выделения контента. Тогда мы добавили обводку контрастного цвета у всех карточек с превью — задача была решена.
Карточка в фокусе — увеличено превью, добавлена контрастная обводка и свечение
3. Проектируйте навигацию под телевизионный пульт
Пульт — основной способ управления устройством, при этом его возможности сильно ограничены. Из этого факта мы должны строить всю логику навигации в ТВ-приложении.
Обычно все перемещения при помощи пульта управляются следующими элементами: вертикальная и горизонтальная навигация, возврат и выход из приложения. Иногда к ним добавляется курсор, тачпад или голосовой ввод, но они есть далеко не на всех устройствах.
Навигация должна быть четкой и предсказуемой, чтобы внутри приложения было легко перемещаться даже с простого пульта. По этой причине весь контент на смарт-ТВ обычно располагают по жесткой прямоугольной сетке.
Стандартный пульт позволяет двигаться только в четырех направлениях, поэтому смещение контента по диагонали может запутать пользователя
Если в вашем приложении все-таки есть функции со сложным управлением, можно схитрить: «вынести» навигацию в смартфон или десктоп.
В нашем случае без помощи сторонних устройств было не обойтись — IPTV-приложения сложнее обычных стримингов. Как мы говорили, чтобы наше приложение заработало, в него нужно загрузить плейлист со ссылками на контент. Сделать это при помощи пульта с пятью кнопками может быть проблематично. Мы решили эту проблему связыванием всех устройств в одну систему. Так, если мы меняем плейлист в своем телефоне, он автоматически менялся и в телевизоре.
4. Упрощайте логику приложения
Человек перед телевизором хочет откинуться назад и расслабиться, а не читать руководство по использованию приложения. Сложные макеты экрана и неочевидные по своим функциям элементы управления заставляют думать, а не расслабляться. Поэтому интерфейс ТВ-приложений должен быть удобным для пользователя, иметь очевидные, легко доступные функции с минимумом переходов на разные уровни.
Простая структура и минимализм: понятный интерфейс нужен на любых устройствах, но на экране телевизора это особенно важно
5. Только темная тема
Темная тема в ТВ-приложениях — это не дополнительная возможность, а необходимость. Фильмы и сериалы зачастую смотрят в темноте, да и сами картины могут быть мрачными. Светлый интерфейс в таких условиях испепелит пользователю глаза — мы проверяли.
Темную тему мы сделали основной, а в качестве акцентного цвета для кнопок и иконок выбрали фиолетовый и коралловый.
6. Добавьте несколько пользовательских ролей с разными доступами
Не нужно забывать, что телевизором обычно пользуются несколько человек. Часто это члены семьи, каждый со своими интересами и пристрастиями. Если в приложении есть личная информация пользователя, она не должна быть видна на начальных экранах.
По этой же причине у пользователей должна быть возможность создавать свои персональные профили и быстро между ними переключаться.
Быстрая смена профиля в приложении Netflix
7. Проверьте дизайн на телевизорах разных годов выпуска, ценовых категорий и диагоналей
В гайдлайнах крупных производителей любят показывать самые современные модели. Но телевизор не принято обновлять каждые 2-3 года, как смартфоны. Некоторые устройства у пользователей вашего приложения можно считать устаревшими.
На старых телевизорах мы заметили такую особенность интерфейса. Цветная обводка в состоянии фокуса хорошо смотрелась на крупных объектах вроде превью фильмов, но на маленьких кнопках и тегах качество графики сильно ухудшалось. В состоянии фокуса такие элементы лучше полностью закрашивать контрастным цветом.
В фокусе кнопка Favourites — выделили ее контрастным красным, чтобы и на старых моделях телевизоров она не терялась
Полезные ссылки
В конце делимся полезными ссылками. К гайдлайнам, о которых мы уже говорили, добавили чек-листы от тех же компаний. В них перечисляется, что обязательно должно быть в приложении для его публикации в магазинах.
Чек-листы хороши тем, что в них есть небольшие, но важные пункты, о которых легко забыть на этапе дизайна. Например, упоминается заглушка для отсутствующего контента. Мы о ней не знали, и во вкладке телевизионных каналов сначала получили черный экран. С такими ошибками в стор не пропустят, поэтому хорошо бы свериться с чек-листом, все ли вы учли в своем приложении.
- Гайдлайн Apple
- Гайдлайн Samsung
- Гайлдайн LG
- Чеклист Samsung
- Чеклист LG
- Что-то вроде чеклиста Apple
Еще одна полезная ссылка — наш телеграм. Там мы публикуем анонсы новых статей и приглашения на стартап-митапы. Присоединяйтесь!
Источник: vc.ru
Про Android TV.
Так получилось, что мы пишем приложение для Android TV.
Вообще, обычно я занимаюсь тем, что в программисткой среде принято называть “суровым энтерпрайзом” — веб-службы, высокая нагрузка и прочие Java EE штуки.
Тем не менее, иногда мы делаем проекты и под мобильные платформы. Как правило это заказная разработка, например мобильные приложения для внутренних нужд компании (приложения для сотрудников организации/диспетчеров/водителей, интерактивные учебные пособия, системы учета/бронирования, системы мониторинга и так далее), которые потом обычно и интегрируют с бэкендом на “суровом энтерпрайзе”. Этими приложениями пользуется персонал компании, а не простые пользователи. В большинстве случаев они даже не публикуются на маркете.
Естественно из этого есть исключения.
Итак. Да, мы пишем под Android TV. Не знаю, много ли существует мобильных разработчиков в России, которые что-то делают под эту платформу. Понятное дело, есть крупные компании, которые занимаются производством и распространением телевизионного и медиа контента и им сам Бог велел заниматься созданием приложений под эту платформу. Когда-то давно, я тоже делал мобильное приложение для одного популярного в определенных кругах телеканала, но сейчас не об этом.
У нас немного другая история. Мы изначально делали обычное приложение (с кнопочкам и картинками), и по началу думали, что оно будет работать на телефонах, планшетах и китайских свистелках-поделках – “тв приставках”. Потом внезапно выяснилось, что платформа Android TV подошла на удивление хорошо для целей проекта.
Про Android TV.
Как обычно, я не буду в своем блоге переписывать/переводить учебник и официальную документацию. Считаю это тяжелой и отчасти неблагодарной работой, поскольку документация обновляется у Google постоянно и во-первых я за ней просто не буду успевать, а во-вторых большинство программистов итак читают документацию у первоисточника.
Поэтому я расскажу про детали, те самые которые затронули и показались лично мне очень важными.
1. Нормального эмулятора нет (как обычно). Мы используем оригинальный, привезенный нам из забугорья Android Nexus Player. Настоящий суровый американский Nexus Player с плоской вилкой на 110 В. Без намёка на РОСТЕСТ. Без такого устройства нормальная разработка под Android TV была бы затруднительна. Как и все Nexus-ы он неплохо подходит для целей отладки и разработки.
Нет проблем с драйверами, подключением по adb и т.д. Это наше основное девелоперское устройство в этом проекте.
2. Конечно мы проводим бета-тесты еще и на телевизоре Sony. Как выяснилось, это вполне такой обычный телевизор, просто на нем установлен Андроид.
Естественно кроме телевизора и Nexus-а, перед тем как выложить приложение, нам приходится тестировать приложение на десятках разных телефонах и планшетах (те кто пишет под Андроид знают, что это не гипербола, а суровые будни андроид программиста).
Так вот, на телевизоре что-либо дебажить очень не удобно, поэтому опять таки основным устройство у нас является Nexus Player.
3. В какой-то момент Nexus Player внезапно обновился на Marshmallow (Android M) (что в прочем для нексусов вполне типично).
В итоге у нас в руках появился очень редкий, можно сказать “краснокнижный” зверь. Устройство под Android TV (которых мало) и с 6-ой версией Android-а (которых еще меньше). Это прямо-таки удивительное и непредсказуемое создание. Часто было не понятно, особенности в его поведении были связанны с тем, что это был шестой андроид или потому, что это Android TV.
Выводы.
Стоит ли писать под Android TV? Думаю решать нужно исходя из целей проекта. Приведу свои, субъективные размышления на эту тему (актуально на момент публикации этой статьи).
1. ТВ стали смотреть меньше. Возможно я ошибаюсь, но это общий тренд. Я не уверен, что в будущем вообще будут много смотреть телевизоры.
2. Играть на Android TV в игры – сомнительное удовольствие. Я конечно не геймер, но мне кажется, что уж лучше подключить XBox.
3. Платформа требует отдельного внимания и тщательного изучения API.
Текстовый ввод не удобен (т.к. пульт). Если у вас много элементов управления (текстовых полей, кнопок) или используется тач, то придётся все эти моменты перерабатывать.
4. Аудитория. Может я не прав, но если сравнивать со всей массой пользователей андроид устройств её почти нет.
Вживую телефон с андроидом я видел у многих. Телевизор с Android TV только один.
5. Как операционная система Android для телевизоров удобней чем Smart TV. Это лично мое мнение, я могу сравнить, т.к. дома у меня телевизор LG с webOS, а на работе тестируем на Sony с Android-ом.
Мое личное мнение, использовать Android TV приложения, только в том случае, если это действительно вам подходит.
Сил и времени потратите уйму. Если делать по-уму, нужно оптимизировать пользовательский интерфейс (иначе приложением нельзя будет пользоваться), обрабатывать нажатие с пульта, менять систему навигации и многое другое.
Стоит ли следить за развитием платформы? Да, однозначно стоит. Бросить всё, уволиться с работы, продать машину и квартиру и начать делать ещё один клон “ангри бёрдс” под Android TV, в надежде что он вас озолотит — на мой взгляд не самая здравомыслящая идея.
Делать прогнозы сложно, но вряд ли эта платформа даст такой же взрывной рост как и обычные мобильные приложения. Android TV — очень специфичный продукт.
В целом, ситуация с ним чем-то напоминает бум умных часов. Было очень много маркетинговой шумихи, а в итоге никакого стремительно роста никто пока не наблюдает. Эти умные часы я тоже купил, вроде как на всякий случай, думал буду что-то писать под них, но пока они просто лежат у меня в ящике рабочего стола.
PS: Хотел уточнить, чтобы не возникло искаженное понимание ситуации, т.к. я с одной стороны критикую платформу, а с другой стороны пишу что мы под нее активно разрабатываем. Да я считаю, что нет особого смысла в обычных приложениях под Android TV. У нас совсем другой случай, мы делаем специализированный продукт для B2B-сектора по заказу. Другими словами, пишем приложение специально предназначенное для работе на телевизоре.
Источник: programador.ru
Введение в Android TV
Хотите лучше понять Android TV? Возможно, вы хотите расширить существующие проекты Android для поддержки этой новой платформы, или у вас есть идея для приложения для Android TV, которое вы хотите разработать.
Какой бы ни была ваша мотивация, эта статья познакомит вас с платформой Android TV, от того, что такое Android TV и характеристиками эффективного телевизионного приложения, вплоть до создания и тестирования вашего собственного образца проекта Android TV.
1. Что такое Android TV?
Android TV, анонсированный на Google IO 2014 , представляет собой новую платформу Smart TV от Google. Пользователи могут либо приобрести телевизор со встроенной новой платформой, либо они могут добавить Android TV к существующему телевизору, купив отдельную приставку, такую как Nexus Player .
По сути, Android TV выводит приложения и функциональные возможности, которыми пользователи уже пользуются на небольших устройствах Android, на большой экран. Пользователи могут загружать приложения для Android TV из знакомого магазина Google Play, а платформа поддерживает Google Cast , поэтому пользователи могут транслировать контент со своего смартфона или планшета на свое устройство Android TV.
2. Разработка для Android TV
Если у вас есть опыт разработки для Android-смартфонов или планшетов, Android TV сразу почувствует себя знакомым, но есть некоторые важные отличия, о которых вам следует знать. В этом разделе рассматриваются лучшие практики, которые являются уникальными для Android TV.
Эффективный опыт на 10 футов
Согласно официальной документации Android TV , средний телезритель находится на расстоянии около 10 футов от экрана, поэтому весь экранный контент должен быть четко виден с расстояния 10 футов.
Один из приемов для обеспечения эффективного «10-футового опыта» заключается в разработке пользовательского интерфейса, который автоматически изменяет размеры в зависимости от размера экрана телевизора. Это означает использование относительного размера макета, такого как fill_parent , а не абсолютного размера, и выбор независимых от плотности единиц пикселей, а не абсолютных пикселей.
Вы также должны сводить текст к минимуму, так как текст становится все труднее читать на расстоянии. Насколько это возможно, вы должны общаться со своими пользователями с помощью других методов, таких как наложение голоса, звуковые эффекты, видео и изображения.
Если вам нужно включить текст, сделайте его проще для чтения:
- избегая легких шрифтов
- избегать шрифтов с очень узкими или очень широкими штрихами
- используя светлый текст на темном фоне
- разбивая текст на маленькие кусочки
Минимизировать и упростить взаимодействие
Подумайте, как вы взаимодействуете со своим телевизором. Обычно вы выполняете несколько простых взаимодействий, чтобы получить нужный контент, будь то смена канала, загрузка DVD-плеера или запуск любимого приложения для потоковой передачи контента.
Вы не ожидаете, что вам придется выполнять сложные взаимодействия, как и пользователи Android TV. Если вы хотите удержать внимание пользователя, ваше приложение должно иметь как можно меньше экранов между точкой входа в приложение и погружением в контент.
Даже когда пользователь погружен в ваше приложение, вы должны сводить взаимодействия к минимуму и избегать любых сложных взаимодействий, поскольку у вашего обычного пользователя телевизора есть ограниченные средства управления – обычно это либо пульт дистанционного управления, игровой контроллер, либо официальное приложение для Android TV установлен на своем смартфоне или планшете.
Простая навигация
Элементы управления телевизором, как правило, ограничены панелью управления и кнопкой выбора, поэтому ваша задача – создать эффективную схему навигации для вашего приложения, используя эти ограниченные элементы управления.
Одна хитрость заключается в том, чтобы использовать группу представлений (такую как представление списка или представление сетки), которая автоматически упорядочивает элементы пользовательского интерфейса вашего приложения в списки или сетки, которые легко перемещаются с помощью навигационной панели и кнопки выбора.
Ваши пользователи также должны иметь возможность сразу определить, какой объект выбран в данный момент. Вы можете выделить текущий выбранный объект, используя визуальные подсказки, такие как размер, тень, яркость, анимация и прозрачность.
Простой и незагроможденный
Android TV может дать вам больше игрового пространства, но не увлекайтесь и старайтесь заполнить каждый дюйм пространства. Простой, незагроможденный пользовательский интерфейс не только визуально привлекательнее, но и удобнее в навигации – что особенно важно, учитывая ограниченные элементы управления, доступные для вашего обычного пользователя Android TV.
Пользовательский интерфейс, содержащий несколько больших, жирных элементов пользовательского интерфейса, также обеспечит лучший «10-футовый опыт», чем экран, заполненный множеством меньших элементов пользовательского интерфейса.
Поддержка ландшафтного режима
Все действия вашего проекта должны поддерживать альбомную ориентацию, иначе ваше приложение не будет отображаться пользователям Android TV в магазине Google Play.
Если вы разрабатываете приложение, которое также может работать на смартфонах и планшетах, имейте в android_screenOrientation=»portrait» что если ваш проект содержит android_screenOrientation=»portrait» то для android.hardware.screen.portrait android_screenOrientation=»portrait» установлено значение true . Вы должны указать, что, хотя ваше приложение поддерживает портретную ориентацию, где оно доступно, оно может работать на устройствах, где портретный режим не поддерживается (например, на Android TV):
Источник: coderlessons.com