Директор студии дизайна Это также Молли Лафферти в своем блоге на Medium сказал об основных компонентах пользовательского интерфейса телевизионных приложений, а также визуальном разобранный важные шаги в процессе разработки и прототипирования.
Редакция vc.ru публикует перевод двух частей материала.
Телевидение вновь переживает свое Золотой век .
Это приводит не только к улучшению качества телевидения, но и к разнообразию способов просмотра наших любимых телешоу.
И хотя сегодня мы можем наслаждаться этими программами где угодно и когда угодно со своих компьютеров, смартфонов и планшетов, телевизор по-прежнему занимает особое место в наших квартирах.
Для работы новых телевизоров не требуются антенны или кабельные приставки.
Мы используем интеллектуальные технологии или потоковые приставки (например, Roku или Apple TV), а также игровые консоли, такие как Xbox и PlayStation. Каждое из этих устройств имеет гораздо более продвинутый пользовательский интерфейс, чем старое доброе экранное меню.
Разработка пользовательского интерфейса для телевизоров — все еще относительно новая область (по сравнению с пользовательским интерфейсом для компьютеров и даже мобильных телефонов).
Это не только принципиально другая платформа, но и необходимо учитывать множество особых условий, включая размер и расстояние экрана, технические ограничения и контекст использования.
Перед вами первые две части серии статей, посвященных телевизионным интерфейсам.
Сначала мы рассмотрим геймпад как устройство ввода, а также поговорим об основных принципах использования.
Во второй части мы поговорим о совместном прототипировании контроллеров и пользовательских интерфейсов.
Экран
Чем телевизоры отличаются от компьютеров, телефонов и планшетов?
В первых телевизорах использовались электронно-лучевые трубки — громоздкая технология с адски нечетким изображением.Особенно остро эта проблема стояла по краям экрана, и чтобы избавиться от нее, использовали повторное сканирование .
Изображение немного увеличилось, а края экрана выходили за пределы области просмотра.
Поскольку телевизионщики знали, что часть изображения будет обрезана, они старались не размещать важную информацию по краям экрана.
Постепенно появились понятия Title Safe (область, в которой текст мог отображаться без искажений) и Action Safe (область, где изображение адекватно воспроизводилось).
По какой-то причине неизвестные нам причины Оверсканирование до сих пор используется в HD-телевизорах.
Сегодня рекомендуемые границы безопасной зоны для пользовательского интерфейса составляют не менее 5% размера экрана.
Однако эти цифры могут быть изменены.
Например, в Google безопасная зона несколько уже, и Яблоко - Шире.
Обычно мы устанавливаем границы этой области при построении сетки макета.
Во-первых, давайте ограничим экран стандартными размерами HDTV: 1920x1080 пикселей.
При этом поля сверху и снизу составляют 60 пикселей, а по бокам экрана — 90 пикселей.
Навигация
Влияние направленного ввода на интерфейс телевизора
Тенденции дизайна напрямую зависят от оборудования.Вкладки на мобильных телефонах появились, когда встал вопрос об удобной навигации на узком и длинном вертикальном экране.
Широкоэкранные телевизоры способствовали использованию длинных строк текста.
Этот шаблон, максимизирующий отображаемый контент, стал обычным явлением на большинстве телевизоров с пользовательским интерфейсом.
Еще одна традиция — управление телевизионными интерфейсами с помощью D-pad — четырехкнопочного крестика со стрелками (единственное исключение — невероятно красивый и столь же неудобный LG Бин Птица ).
Установленная на пульте дистанционного управления или джойстике система D-pad ограничивает навигацию в четырех направлениях: вверх, вниз, влево и вправо.
Таким образом, сетка является наиболее естественной структурой для телевизионного интерфейса.
Apple TV (верхнее фото) делает более объемным выделение элемента, на котором находится курсор, а HBO GO (нижнее фото) выделяет его синей рамкой Еще одним важным элементом телевизионного интерфейса является курсор.
Пользователи должны каким-то образом добраться до элемента, который они собираются выбрать.
Курсор перемещается, когда пользователь нажимает кнопки D-pad. Различные приложения используют границы, тени, глубину или их комбинации для обозначения выбора пользователя.
Главное правило: пользователь всегда должен понимать, где именно он находится и куда еще он может переместить курсор.
Давайте воссоздадим типичный макет пользовательского интерфейса телевизора с одной горизонтальной строкой контента.
Поместим курсор на первый элемент. 
Вход
Как пульт помогает людям общаться с телевизором
Слева направо: Logitech Harmony, Samsung Smart TV, Apple TV, Roku, Amazon Fire TV. Большинство телевизоров и других потоковых устройств управляются с помощью пультов.
Некоторые платформы экспериментируют с голосовыми командами, а другие (например, Apple TV) используют сенсорный ввод. Но поскольку большинство стриминговых сервисов имеют собственные игровые приложения, пользователи все чаще используют джойстики для навигации по интерфейсу телевизора.
Как правило, это мощные многофункциональные устройства, поэтому нас заинтересовали особенности работы с этим оборудованием.
Навигация с помощью джойстика удобна по ряду причин.
Например, джойстики имеют не только D-pad, но и кнопки для большого пальца.
С их помощью вы сможете выбирать стандартные направления, а также двигаться по диагонали.
Такие кнопки ускоряют навигацию, особенно для тех, кто привык играть в видеоигры.
Контроллер для Xbox One (слева) и PlayStation 4 (справа) Существует несколько стандартных соглашений, общих для всех платформ.
Например, кнопки «Выбрать» и «Назад» на всех контроллерах расположены в одном и том же месте.
Однако каждая платформа имеет свои стандарты.
Так, на контроллере Xbox срабатывают Page Up и Page Down, а переключение между элементами контента осуществляется с помощью кнопок.
Кроме того, на каждой платформе есть кнопки-модификаторы для опытных пользователей.
Однако, когда вы проектируете интерфейс для телевизора, вы должны понимать, что наряду с опытными геймерами, хорошо разбирающимися в различных устройствах, есть и те, кто никогда не пользовался джойстиком.
Поэтому кнопки, обеспечивающие базовый функционал, лучше размещать стандартным образом.
Следующая часть статьи посвящена разметке контроллера пользовательского интерфейса джойстика с помощью Gamepad API.
Типография
Читать с расстояния 3 метров.
Представьте, что вы сидите на диване и смотрите передачу по телевизору.
Картину видно нормально, но что произойдет, когда начнутся титры или откроется меню? Телевизионные приложения часто называют 10-футовыми приложениями из-за стандартного расстояния между вами и телевизором.
Мы должны учитывать это расстояние при проектировании пользовательского интерфейса; его элементы должны быть достаточно большими, чтобы их было видно с другого конца комнаты.
Если у вас есть сомнения по поводу размера шрифтов, всегда решайте увеличить их.
Мы обнаружили, что наименьший читаемый размер составляет 18 пикселей, и его лучше всего использовать для несущественной информации.
В нашем примере мы выбрали размер 24 пикселя для основного текста и 92 пикселя для заголовков.
Ключ к хорошей типографике — постоянная проверка читаемости текста.
Помните, что мелкий шрифт, который выглядит элегантно и четко на мониторе компьютера, может быть совершенно слепым на экране телевизора.
Цвет
Ограничения экранов телевизоров
Цветовой охват на HD-телевизоре не такой широкий, как на мониторе компьютера.То есть в процессе разработки интерфейса вам будет доступно больше цветов, чем сможет адекватно отобразить ваш телевизор.
Однако яркость и другие настройки изображения сильно зависят от марки и модели телевизора.
При разработке телевизионного интерфейса придерживайтесь двух простых правил:
- Старайтесь избегать чисто белого цвета, так как яркий свет слишком резок для глаз;
- Будьте осторожны с градиентами и глубоким размытием, так как из-за ограниченной цветовой палитры на экране могут появиться полосы.
Будущее 4К
На пути к следующему поколению телевизоров
Большинство пользователей не обновляют свои телевизоры так часто, как смартфоны.Это означает, что, несмотря на то, что по всему миру выпускается все больше и больше телевизоров Ultra HD (4K), мы по-прежнему обслуживаем рынок, который ограничен 1080 пикселями.
Когда-нибудь это изменится, и, как и на рынке мобильных устройств, дизайнеры начнут проектировать телевизоры с 2-кратным увеличением.
Более высокая плотность пикселей означает не только лучшее качество изображения, но также более четкие и разборчивые шрифты пользовательского интерфейса.
Однако, возможно, наиболее многообещающим развитием 4K станет более полная цветовая гамма и глубина изображения.
Современные телевизоры высокой четкости используют цветовой профиль Rec.709, который обеспечивает довольно ограниченный выбор цветов.
Новый профиль Rec.2020 предназначен для телевизоров 4K и предлагает гораздо более широкую палитру.
В этом случае глубина цвета важнее его диапазона.
Самые популярные модели HDTV используют 8-битный цвет. Это означает, что для каждого из трёх цветов RGB имеется 256 оттенков, что в сумме даёт 16,78 миллиона цветов.
Новые телевизоры 4K с разрешением 10 бит или выше могут отображать не менее 1024 оттенков каждого цвета, что дает более 1 миллиарда цветов.
При большей глубине цвета исчезнут проблемы с полосами и размытием изображения, а у разработчиков появится больше возможностей в использовании цвета и обработке фотоисточников.
Ниже приведены некоторые ресурсы, которые помогут вам разработать собственный интерфейс телевизора:
- Шаблон пользовательского интерфейса.
- Руководство Apple по проектированию пользовательского интерфейса.
- Разработка пользовательского интерфейса для Android TV.
- Руководство по пожарной безопасности Амазонки.
Прототипирование
Самая важная часть разработки чего-либо
Теперь, когда у нас есть базовый дизайн, мы можем приступить к самой важной части процесса разработки продукта: прототипированию.
Качество любого продукта проверяется в процессе его использования, поэтому, чем раньше мы приобретем некоторый опыт, тем более совершенный продукт мы сможем создать.
Особенно это касается телевизионных интерфейсов.
Нам нужно протестировать навигацию, убедиться, что все на экране четко видно, проверить движения курсора и убедиться, что пользовательский опыт естественный и отзывчивый.
Итак, далее мы рассмотрим все основные функции нашего прототипа, чтобы вы могли сразу же приступить к тестированию и настройке своего собственного кода.
Мы также обсудим некоторые стратегии и подходы к таким сложным вещам, как поведение курсора и дизайн движения.
Начало работы
Что нам нужно
Разработка нативных приложений для телевизионных устройств требует огромных затрат времени и денег.Поэтому чем быстрее и дешевле прототип, тем лучше.
Если вы ограничитесь несколькими аппаратными средствами и не будете использовать слишком много базовых веб-технологий, вы сможете быстро начать процесс улучшения пользовательского интерфейса.
Выбор браузера Мы использовали Chrome, но Firefox и Edge также подойдут. Выбор контроллера Для этого интерфейса вам понадобится игровой контроллер.
Убедитесь, что он совместим с одним из базовые библиотеки и помните, что для некоторых контроллеров может потребоваться установка драйверов.
Подключение к HDTV Подключите компьютер или ноутбук к телевизору высокой четкости с помощью специального кабеля.
Постарайтесь разместить его на расстоянии около 3 метров от места просмотра (это стандартное расстояние для тестирования пользовательского интерфейса).
Загрузка прототипа Загрузите свой собственная копия каталог проекта.
Открыть файл прототип/index.html в браузере.
Эта папка покажется вам знакомой, если у вас уже есть опыт веб-разработки.
Он содержит ключевые файлы JavaScript:
- js/app.js : логика прототипа;
- js/data.js : данные, включенные в пользовательский интерфейс;
- js/библиотеки/Controller.min.js : наша специальная библиотека API геймпада;
- js/библиотеки/Controller.layouts.min.js : Дополнение для совместимости с другими джойстиками.
js
.Затем подключите контроллер к USB-порту вашего компьютера.
Попробуйте нажимать кнопки и перемещать аналоговые переключатели, чтобы увидеть, как меняются значения на экране.
Если вы не видите никакой информации или цифры не меняются, проверьте совместимость информации на сайте GitHub .
Базовая структура
Организуем все для удобного тестирования и настройки
Наш прототип состоит из нескольких файлов, каждый из которых имеет свое назначение.Мы не создавали больших структур или шаблонов со сложной архитектурой, поэтому наш прототип получился простым, гибким и доступным большинству пользователей.
А поскольку мы сделали это быстро и без лишней суеты, у нас не возникнет особых проблем с его переработкой, когда появятся другие идеи.
приложение.
js Большая часть логики прототипа сосредоточена в приложение.
js .
Самая важная часть этого файла — наш главный объект. Пример , который предоставляет содержимое для различных функций и переменных, необходимых для нашего интерфейса.
Как только мы выберем все ключевые функции внутри этого объекта, мы перейдем к Пример.
load () и приступим к выполнению нашего кода.
данные.
js Хорошей практикой является разделение данных и логики приложения.
Это значительно упрощает тестирование, настройку и калибровку вашего интерфейса.
Мы сохранили метаданные карусели дизайнерского контента в файле.
данные.
js : 
Отображение нажатий кнопок
Собираем все кнопки и события в одном месте
Мы используем средство визуализации навигации для создания четко организованного списка кнопок, которые мы хотим разместить на игровом контроллере.Структура переключения/выбора позволяет быстро обновлять и тестировать различные конфигурации.
Обработчик навигации — это тот самый инструмент, который позволяет нам определить, какая кнопка была нажата, а затем вызвать нужную функцию.
Вы можете сами поэкспериментировать с аналоговыми переключателями.
В отличие от обычных кнопок со стрелками, они имеют большой диапазон перемещения, чувствительны к давлению и поддерживают включение/выключение.
Это обеспечивает богатый пользовательский опыт, поскольку игровые контроллеры, среди прочего, должны поддерживать широкий спектр игровых механик.
В нашем примере мы сделали аналоговые переключатели максимально простыми.
Одна из функций Контроллер.
js позволяет нам считывать события, вызванные аналоговым переключателем, как если бы мы давали эти команды с помощью кнопок со стрелками.
Начальное значение может быть установлено для управления тем, насколько далеко пользователь должен переместить аналоговый переключатель, чтобы произошло целевое событие.
Реализация перемещения курсора
Взаимодействие с кнопками направления
До сих пор мы сопоставляли кнопки интерфейса различным функциям.Теперь нам нужно протестировать функцию, отвечающую за перемещение курсора на нашем экране.
На первый взгляд это довольно просто, но на самом деле есть масса нюансов, на которые стоит обратить внимание.
Чтобы описать каждое событие, которое может произойти, когда пользователь нажимает d-pad, мы будем использовать функцию dpadHandler .
Он должен отслеживать выделенный элемент экрана по индексной переменной, где бы он ни находился — в самом начале сетки, в конце или в любой произвольной ячейке.
Операторы если будет управлять логикой, отвечающей за прокрутку, и функцией изменитьКурсор обеспечит видимое движение курсора.
Функция прокрутка — это одна из важнейших особенностей дизайна, с которой вы можете экспериментировать.
Если вы когда-либо использовали телевизионные приложения, вас, вероятно, раздражала необходимость нажимать кнопки со стрелками каждый раз, когда вы хотите переместить курсор от одного элемента экрана к другому.
Во многих продуктах можно использовать длительное нажатие кнопки направления; для ТВ-интерфейсов это естественное и довольно часто используемое действие (в отличие от мобильных устройств).
Чтобы реализовать длительное нажатие, нам пришлось бы отслеживать момент, когда пользователь нажимал кнопку со стрелкой, а затем регулярно проверять, удерживает ли он эту кнопку достаточно долго, чтобы пройти фиксированный порог.
Для остановки курсора после длительного нажатия фиксируем момент отпускания кнопки в dpadDirectionHold .
Стратегии перемещения курсора
Построение логической системы перемещения курсора
ТВ-интерфейсы имеют уникальную модель взаимодействия с пользователем.В этой модели выбор пользователя ограничен элементами, расположенными на экране телевизора.
Курсор обычно подчеркивает или выделяет выбранный элемент. Реализация функциональности курсора — довольно сложная задача.
Мы представим несколько подходов к ее решению.
Одномерный список В нашем примере используется одномерный макет: мы можем перемещаться только по горизонтали.
Это самый простой вариант прокрутки списка.
Каждый элемент имеет свой собственный индекс, и вы просто отслеживаете текущий индекс и то, увеличивается или уменьшается он при перемещении курсора пользователем.
2D-сетка Если ваш интерфейс включает статическую сетку ячеек одинакового размера, вы можете использовать аналогичный метод, изменив его для отслеживания двух индексов, обозначающих строку и столбец элемента.
Более сложные макеты ТВ-интерфейсы не всегда имеют форму линейного списка или сетки.
Иногда меню может быть радиальным, тем более что такое расположение элементов экрана идеально сочетается с аналоговыми переключателями.
Хорошей стратегией реализации такого типа перемещения курсора является обнаружение столкновений.
Идея проста: если у вас есть интерфейс с несколькими интерактивными элементами на экране, вы можете задать нужное направление движения на пользовательском контроллере и выполнить поиск выбранного элемента интерфейса.
Если вы когда-нибудь играли Астероиды , вы видели этот метод в действии.
Самым надежным методом обнаружения столкновений, который мы использовали в наших проектах, было распределение лучей.
Вы начинаете с текущего положения и двигаетесь прямо в выбранном направлении, пока луч не достигнет нужного элемента интерфейса.
Затем вы перемещаете курсор в эту точку.
Пример от JSFiddle даст вам более детальное понимание этого метода.
Важные вопросы Реализация распределения лучей сама по себе довольно сложна, но есть и другие аспекты поведения курсора, которые необходимо учитывать:
- Когда и как вы будете перемещать курсор по экрану? Будете ли вы удерживать курсор в центре экрана или дождетесь, пока он покинет интерфейс, чтобы добавить контент на экран?
- Что произойдет, если в выбранном пользователем направлении ничего не произойдет? Вернетесь ли вы к началу или перейдете на следующую строку?
- Вам нужны улучшенные кнопки доступа, которые устраняют раздражающие повторные нажатия? Что вы будете использовать в качестве игровых контроллеров: триггеры или бамперы?
Естественное движение
Анимация для интерфейса большого формата
После того, как мы разобрались с логикой движения курсора, можно добавить анимацию — это поможет нам сделать интерфейс более гибким и естественным.Как и многие другие элементы телевизионного интерфейса, анимация имеет свои особенности.
Например, яркие реалистичные изображения, которые отлично смотрятся на смартфоне или ноутбуке, могут раздражать из-за своего огромного размера на большом экране.
И хотя принято думать, что динамичные изображения добавляют индивидуальности и изящества (примером является вдохновляющий параллаксное движение на Apple TV), в этом случае лучше ошибиться в меньшую сторону.
Сдержанная, точно рассчитанная по времени анимация воспринимается гораздо естественнее, чем вычурная, но «надуманная» красота.
Несмотря на то, что курсор может просто перепрыгивать из одной точки в другую, его анимация создает приятное впечатление единого связного движения.
При прототипировании интерфейса необходимо использовать функции, смягчающие движение.
В реальной жизни объекты редко движутся с постоянной скоростью.
В нашем примере мы тестировали движение курсора, используя стандартные кривые Безье .
Мы корректировали эти кривые и длительность анимации, чтобы движения курсора стали быстрыми и плавными.
В общем, ваша анимация пользовательского интерфейса должна занимать от 200 до 500 мс .
Однако даже если продолжительность анимации небольшая, применение неправильной кривой может визуально увеличить продолжительность движения, и у пользователя возникнет ощущение, что контроллер работает медленно и постоянно лагает. Это важно, поскольку поклонники видеоигр обычно ожидают от контроллера быстрого, почти мгновенного ответа.
Правильно организованное движение можно использовать для обозначения границ движения курсора.
Например, в конце нумерованного списка легкое подпрыгивание курсора может намекать на то, что пользователь достиг последнего элемента и больше не может двигаться вправо.
Подробнее о перемещении курсора можно прочитать в Гид пользователя И Google Материалы .
-
Канобувости, 52-Й Выпуск
19 Oct, 24 -
Постиндустриальный Или Продакшн 2.0
19 Oct, 24 -
Лучший Смартфон Выпущенный В 2007 Году
19 Oct, 24 -
Jquery World Conference Приезжает В Россию
19 Oct, 24
