Жубер Нель
Мы только что запустили новый опыт Netflix для телевизоров и игровых консолей. Новый дизайн основан на нашей предпосылке, что каждое шоу или фильм имеет тон и повествование, которые должны передаваться пользовательским интерфейсом. Чтобы рассказать более насыщенную историю, мы предоставляем соответствующие свидетельства и кинематографическое искусство, которые лучше объясняют, почему мы считаем, что вам следует посмотреть шоу или фильм.
Новый пользовательский интерфейс потребовал от нас подвергнуть сомнению наши парадигмы о том, что может быть показано на телевидении - не только этот пользовательский интерфейс более требователен к игровым консолям, чем любой из наших предыдущих пользовательских интерфейсов, но мы также хотели, чтобы бюджетные устройства обеспечивали более богатый опыт, чем то, что было раньше. возможный. Впервые нам понадобился единый пользовательский интерфейс, который мог бы принимать навигацию с помощью телевизионного пульта или игрового контроллера, а также голосовые команды и пульты, которые направляют курсор мыши на экран. Прежде чем мы перейдем к тому, как мы разрабатывали для повышения производительности и создавали для различных методов ввода, давайте взглянем на наш стек пользовательского интерфейса.
Стек пользовательского интерфейса
Моя команда создает пользовательские интерфейсы Netflix для устройств в вашей гостиной: PlayStation 3, PlayStation 4, Xbox 360, Roku 3 и последних Smart TV и проигрывателей Blu-ray.
Мы развертываем обновления пользовательского интерфейса с новыми A / B-тестами, поддержкой новых языков, таких как Нидерланды, и новыми функциями, такими как Профили. Оставаясь гибкими, мы также хотим использовать как можно больше базового оборудования кроссплатформенным способом.
Итак, несколько лет назад мы разделили код клиента нашего устройства на две части: SDK, работающий на железе, и пользовательский интерфейс, написанный на JavaScript. SDK предоставляет механизм рендеринга, среду выполнения JavaScript, работу в сети, безопасность, воспроизведение видео и другие средства платформы. В зависимости от устройства обновления SDK варьируются от ежеквартального до ежегодного или никогда. Пользовательский интерфейс, напротив, может быть обновлен в любое время и загружается (или извлекается из кеша диска), когда пользователь запускает Netflix.
Клавиша, голос, указатель
Традиционный способ управления нашим пользовательским интерфейсом на игровой консоли или телевизоре - через вход LRUD (влево / вправо / вверх / вниз), такой как пульт дистанционного управления телевизором или игровой контроллер. Кроме того, пользователи Xbox 360 должны иметь возможность перемещаться с помощью голосовых команд, а люди с LG Magic Remote Smart TV должны иметь возможность перемещаться, направляя пульт дистанционного управления на элементы на экране. Наш новый пользовательский интерфейс - это наш первый интерфейс, объединяющий все три метода ввода в единую конструкцию.
Мы хотели построить наши компоненты представления таким образом, чтобы их поведение при взаимодействии было инкапсулировано. Эта близость кода делает код более удобным для обслуживания и многократного использования, а иерархию классов - более устойчивой. Нам нужен был последовательный способ отправки трех типов событий пользовательского ввода в иерархию представлений.
Мы создали новый диспетчер событий JavaScript, который единообразно направляет ключ, указатель и голосовой ввод в представления. Нам требовалось инкрементное решение, которое не требовало рефакторинга всей кодовой базы, поэтому мы разработали его так, чтобы оно сосуществовало с нашей устаревшей обработкой ключей и предоставило путь миграции.
Мы должны создавать сборки JavaScript, которые содержат код только для тех методов, которые поддерживаются целевым устройством, потому что уменьшение размера кода приводит к более быстрому синтаксическому анализу, что, в свою очередь, сокращает время запуска.
Для создания экономичных сборок мы используем текстовый препроцессор, чтобы вырезать код обработки ввода, не имеющий отношения к целевой платформе. Преимущество использования текстового препроцессора вместо, например, использования миксинов для наложения дополнительных представлений и взаимодействий, заключается в том, что мы получаем гораздо более высокие уровни близости и простоты кода.
Представление
Устройства в гостиной используют DirectFB или OpenGL для графики (или что-то вроде OpenGL) и могут использовать аппаратное ускорение для анимации элементов пользовательского интерфейса. Использование графического процессора является ключом к созданию плавного взаимодействия, которое реагирует на ввод пользователя - мы сделали это на WebKit с помощью ускоренного композитинга (см. WebKit в вашей гостиной и Создание пользовательского интерфейса Netflix для Wii U).
Типичная реализация анимации прямоугольника с аппаратным ускорением требует ширины × высоты × байтов на пиксель памяти. В нашем пользовательском интерфейсе мы анимируем целые сцены при переходе между ними; для анимации одной сцены с разрешением 1080p потребуется около 8 МБ памяти (1920 × 1080 × 4), но для 720p требуется 3,5 МБ (1280 × 720 × 4). Мы видим устройства, у которых всего 20 МБ памяти, выделенной для кеш-памяти рендеринга с аппаратным ускорением. Более того, другие системные ресурсы, такие как основная память, дисковый кэш и ЦП, также могут быть сильно ограничены по сравнению с мобильным телефоном, портативным компьютером или игровой консолью.
Как мы можем выжать из бюджетных устройств как можно больше производительности и добавить больше кинематографической анимации на игровые консоли?
Мы думаем, что JavaScript, HTML и CSS - отличные технологии для создания убедительных впечатлений, таких как наш пользовательский интерфейс проигрывателя HTML 5. Но мы хотели более детализированный контроль над графическим слоем и хотели оптимизацию для приложений, которым не требуется перекомпоновка содержимого. Наша команда разработчиков SDK создала новый механизм рендеринга, с помощью которого мы можем доставлять анимацию на устройства с очень ограниченными ресурсами, что позволяет предоставить клиентам лучший пользовательский интерфейс. Мы также можем обогатить опыт с помощью кинематографической анимации и эффектов на игровых консолях.
Вторая стратегия заключается в группировании устройств в классы производительности, которые дают нам точки входа для поворота различных регуляторов, таких как размеры пула, диапазоны предварительной выборки, эффекты, анимация и кеширование, чтобы использовать меньше / больше ресурсов при сохранении целостности дизайна пользовательского интерфейса. & взаимодействие.
Обеспечение отличных впечатлений
В ближайшие недели мы углубимся в более подробную информацию о нашей базе кода JavaScript в этом блоге.
Создание нового опыта Netflix для телевидения было трудоемким делом, но это дало нам шанс стать партнером по запуску PlayStation 4, продемонстрировать наши самые большие успехи в тестах A / B в 2013 году и порадовать десятки миллионов клиентов Netflix.
Если вас это волнует и вы хотите помочь в создании пользовательского интерфейса будущего для открытия и просмотра шоу и фильмов, присоединяйтесь к нашей команде!
Смотрите также:
Первоначально опубликовано на сайте techblog.netflix.com 18 ноября 2013 г.
