Руководство разработчика по Internet Explorer для Xbox 360

В этом разделе представлены рекомендации для веб-разработчиков, желающих оптимизировать свои сайты для Internet Explorer для Microsoft Xbox. В разделе содержатся рекомендации по проектированию, а также описаны некоторые различия между Windows Internet Explorer 9 и Internet Explorer для Xbox.

Данный раздел состоит из следующих подразделов.

Обзор

Internet Explorer для Xbox 360 — это браузер, который дает возможность пользоваться Интернетом с помощью телевизора на расстоянии до трех метров от экрана. Он создан на базе платформы Internet Explorer 9 и включает многие компоненты Internet Explorer 9 для Windows.

Многие веб-сайты, хорошо работающие в Internet Explorer 9 для Windows, без всяких изменений хорошо работают в Internet Explorer для Xbox. Компоненты HTML5, появившиеся в Internet Explorer 9, такие как audio и video, CSS2.1 и SVG, полностью поддерживаются в Internet Explorer для Xbox.

Этот документ предназначен для разработчиков, которые хотят оптимизировать сайты для Internet Explorer для Xbox. Здесь содержатся рекомендации по проектированию, а также описаны некоторые технические различия между Internet Explorer 9 и Internet Explorer для Xbox.

Веб-концентратор

Когда пользователи запускают Internet Explorer для Xbox, автоматически загружается веб-концентратор. Веб-концентратор является центральной областью, из которой осуществляется навигация по веб-сайтам. Пользователи могут выбрать сайт из избранного, посетить недавно просмотренные сайты или ввести адрес в адресную строку. Чтобы запустить веб-концентратор, достаточно нажать Y на устройстве управления или произнести "Xbox Web Hub", если подключен Kinect для Xbox 360.

Снимок экрана веб-концентратора

Методы ввода

Свободный курсор

В Internet Explorer для Xbox используется модель свободно перемещаемого курсора (показана на следующем изображении). Курсор обеспечивает простое и единообразное взаимодействие пользователя с любой частью браузера: пользователь может наводить курсор или щелкать ссылки на веб-странице, адресную строку, веб-концентратор, параметры или информационные сообщения. При перемещении курсора к краю экрана веб-страница автоматически прокручивается или сдвигается, поэтому по веб-странице можно легко перемещаться, пользуясь лишь левым джойстиком и кнопкой A.

Снимок экрана свободного курсора

Экранная клавиатура

При отсутствии устройства Xbox SmartGlass, клавиатуры или Xbox 360 Chatpad для ввода текста используется экранная клавиатура.

Снимок экрана экранной клавиатуры

Устройство управления и Xbox 360

Устройство управления Xbox можно использовать для управления всеми компонентами браузера.

Схема кнопок Xbox, используемых для управления компонентами браузераСхема кнопок Xbox, используемых для управления дополнительными компонентами браузера

Xbox SmartGlass

Xbox SmartGlass — это программное обеспечение, которое можно запустить на смартфоне или планшете (Windows Phone, Windows 8, iOS, Android) для подключения к Xbox. С помощью Internet Explorer 9 Xbox SmartGlass можно использовать в качестве второго экрана и устройства управления. Сенсорные устройства можно использовать в качестве трекпада для перемещения курсора. Кроме того, можно печатать с помощью сенсорной клавиатуры такого устройства.

Речь

Kinect Sensor дает пользователям возможность легко перемещаться по любимым веб-сайтам и часто используемым функциям. Хотя речь нельзя использовать для перехода по конкретным ссылкам на веб-странице, существует поддержка стандартных команд, таких как Назад/вперед для перемещения между страницами и Воспроизведение/пауза для видео HTML5.

Ниже перечислены поддерживаемые голосовые команды.

Веб-концентратор

"Назад"

Переходит к следующему элементу в соответствующем стеке

"Вперед"

Переходит к следующему элементу в соответствующем стеке

"Скрыть веб-концентратор"

Скрывает веб-концентратор

"Показать клавиатуру"

Выводит виртуальную клавиатуру

"Скрыть клавиатуру"

Скрывает виртуальную клавиатуру

"Добавить в избранное"

Добавляет веб-страницу в избранное

"Удалить из избранного"

Удаляет веб-страницу из избранного

"Параметры"

Веб-концентратор

"Избранное"

Открывает список избранного

"Недавние сайты"

Открывает список недавно просмотренных сайтов

"Подборка"

Открывает список подборки

"Элемент..."

Открывает сайт (из списка недавно просмотренных сайтов)

"Имя сайта" (динамическое)

Открывает сайт (из списка подборки)

"Имя сайта" (динамическое или настраиваемое пользователем)

Открывает сайт (из списка избранного)

 

Уровень веб-страницы

"Назад"

Переходит к следующему элементу в соответствующем стеке

"Вперед"

Переходит к следующему элементу в соответствующем стеке

"Веб-концентратор"

Открывает веб-концентратор в последнем состоянии просмотра

"Избранное"

Открывает веб-концентратор со списком избранного

"Добавление в избранное"

Добавляет веб-страницу в избранное

"Удалить из избранного"

Удаляет веб-страницу из избранного

"Предыдущее избранное"

Переходит к предыдущему элементу в списке избранного

"Следующее избранное"

Переходит к следующему элементу в списке избранного

"Параметры"

Веб-концентратор

"Воспроизвести"

Воспроизводит видео на экране

"Пауза"

Приостанавливает видео на экране

"Во весь экран"

Открывает видео в полноэкранном режиме

 

Проектирование для просмотра с большого расстояния

Расстояние от экрана

Проектирование для просмотра с большого расстояния предназначено для взаимодействия, оптимизированного для гостиной. Большинство пользователей подключают Xbox к телевизору и садятся примерно в трех метрах от экрана. Такое расстояние создает некоторые трудности при выполнении стандартных задач на традиционной веб-странице. Например, мелкие шрифты будет трудно читать, а всплывающие меню и мелкие ссылки — сложно использовать.

При разработке веб-страницы для телевизора на просматриваемой области нужно отображать меньше информации, а отображаемая информация должна быть сфокусирована вокруг определенного набора задач (стоит подумать даже об автоматическом выполнении нужных задач или выборе задачи по умолчанию). Старайтесь разместить все содержимое на одном экране, исключая необходимость прокрутки.

  • Шрифты и графика на сайте должны быть крупнее, учитывая расстояние от экрана. Люди обычно сидят пропорционально дальше от телевизора, чем от монитора компьютера того же размера.
  • Чтобы избежать ощущения загроможденного экрана, сделайте пробелы между элементами на странице больше. Этот принцип обычно называется разделением (или заполнением) и является фундаментальным для создания четкого веб-содержимого с простой навигацией.
  • Широкоформатные экраны предлагают большую горизонтальную полезную площадь, чем настольные мониторы, поэтому панель навигации лучше расположить сбоку, экономя ценное вертикальное пространство для содержимого, или в виде перекрывающего элемента.

Содержимое и функции

Хорошее веб-взаимодействие для большого расстояния оптимизировано для потребления содержимого (в отличие от сценариев, где важен процесс создания и производительность). Например, созданный пользователем веб-сайт с видео может поддерживать возможности просмотра видео, воспроизведения, отправки, редактирования и присвоения отметок. Версия для большого расстояния может быть оптимизирована для просмотра и воспроизведения, не предоставляя при этом возможностей редактирования. Удалите ссылки и функции, которые не имеют смысла при просмотре сайта на телевизоре, например функции скачивания и отправки.

Размещайте боковую панель навигации на одном экране. Для этого может потребоваться сократить количество элементов навигации. Если вы оптимизируете сайт с помощью CSS, то можете разместить категории в элементах div и скрыть удаленные категории с помощью display:none.

Обеспечьте простое взаимодействие

Пользователи могут взаимодействовать с Internet Explorer с помощью различных устройств ввода, включая устройство управления, Xbox SmartGlass, Xbox 360 Chatpad и речь. Помните, что некоторые взаимодействия, хорошо работающие с мышью и клавиатурой, сложнее выполнить с помощью касания или устройства управления. Избегайте перетаскивания, наведения и синхронизированных взаимодействий.

Навигация и ссылки

Если сравнить просмотр сайтов на мониторе компьютера и на экране телевизора, очевидны два основных отличия: пользователь находится дальше от экрана и устройство управления или палец представляют собой менее точные устройства ввода, чем мышь. Кроме увеличения размера целевых объектов, нужно удалить ссылки, которые не подходят для телевизора или редко используются, чтобы разместить элементы навигации на одном экране.

При проектировании интерфейса навигации упростите выбор ссылок и других целевых объектов, выделив интерактивные элементы и увеличив их размер.

  • Добавьте ссылкам и кнопкам состояние наведения, чтобы выделить их, когда указатель находится на целевом объекте.
  • Сделайте каждый целевой объект щелчка (ссылку, кнопку и т. п.) крупным и обеспечьте достаточное заполнение развернутой целевой области.
  • Такие элементы, как кнопка закрытия в углу всплывающего уведомления, выглядят маленькими и ненавязчивыми на мониторе компьютера, но их либо невозможно рассмотреть, либо трудно нажать, находясь в трех метрах от экрана.
  • Избегайте использования всплывающих элементов. Они отвлекают пользователя, и их трудно закрыть.

На следующих изображениях представлены два примера вертикальной панели навигации. Первый пример создан для взаимодействия с помощью мыши. Интервал между ссылками слишком мал для пользователей сенсорных устройств и устройства управления.

Диаграмма, иллюстрирующая страницу для взаимодействия с помощью мыши

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

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

Диаграмма панели навигации с разделителями и ссылками, расположенными далеко друг от друга

Макет

Размер

Internet Explorer для Xbox использует сочетание обычного и визуального масштабирования для обеспечения оптимизированного для ТВ представления сайтов. Веб-сайты автоматически масштабируются в соответствии с шириной экрана, чтобы текст был крупнее и лучше читался с большого расстояния. Существует несколько факторов, определяющих этот автоматический масштаб, включая пропорции телевизора (16:9 или 4:3), разрешение (480p, 720, 1080) и размер "защитной области", которая является буфером вокруг края экрана телевизора.

Так как Internet Explorer для Xbox автоматически оптимизирует масштаб для различного оборудования, существует несколько факторов, которые нужно принять во внимание.

  • Веб-сайты, созданные для ширины экрана 1024px обычно выглядят отлично. Internet Explorer автоматически подгонит веб-сайт по ширине с помощью масштабирования макета.
  • Многие телевизоры являются широкоэкранными (16:9). Лучше создать макет, который использует преимущества широкого экрана, чем тот, для которого требуется прокрутка.
  • Internet Explorer для Xbox не поддерживает одновременную работу нескольких окон, поэтому избегайте всплывающих окон.

Элементы с фиксированной позицией

Элементы с фиксированной позицией (CSS position: fixed) могут мешать плавной прокрутке или сдвигу. Не размещайте элементы таким образом.

Соображения по поводу текста

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

  • Не используйте шрифт мельче 12pt.
  • Яркость многих телевизоров больше, чем у мониторов. Светлый текст на темном фоне может уменьшить напряжение зрения.

Рекомендации по цвету

  • Не стоит использовать чистый белый цвет (rgb(255, 255, 255)) в качестве фона. Вместо этого используйте rgb(200, 200, 200)
  • Internet Explorer окрасит "защитную область" вдоль края экрана в цвет фона элемента body.
  • Протестируйте веб-сайт как на старых телевизорах низкого качества, так и на более новых ТВВЧ (телевизорах высокой четкости).

Подход для 4 экранов: телевизор, компьютер, планшет, мобильное устройство

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

Несколько веб-страниц для разных устройств

На некоторых веб-сайтах есть несколько вариантов взаимодействия для разных устройств (например, мобильный сайт). В некоторых случаях это может быть разумно. Например, если вы проектируете отдельное взаимодействие для Xbox, которое отличается от взаимодействия для мобильного устройства или настольного компьютера, скорее всего, имеет смысл создать отдельное автономное взаимодействие. Однако поддержка нескольких независимых версий сайта может стоить дорого.

Стандартный способ решения этой проблемы — распознать строку агента пользователя (либо на клиенте, либо на сервере) и перенаправить пользователя на соответствующий устройству веб-сайт. Чтобы распознать Xbox, ищите лексему "Xbox" в строке агента пользователя.

Единая веб-страница

Учитывая постоянное увеличение разнообразия устройств и методов ввода для просмотра Интернета, мы рекомендуем использовать единую веб-страницу, которая хорошо работает на различных устройствах. При создании единой страницы, работающей на различных устройствах, учитывайте следующее.

  • Проектируйте для мыши, клавиатуры, сенсорного ввода и устройства управления
  • Проектируйте для ширины 1024px
  • Используйте адаптивный дизайн. Для изменения макета страницы в зависимости от свойств устройства, на котором загружается страница, можно использовать запросы CSS носителя или JavaScript.
    • Для мобильных устройств стоит снизить качество изображения, чтобы сэкономить полосу пропускания и увеличить производительность
    • Сведите к минимуму горизонтальную прокрутку на узких устройствах, чтобы улучшить читаемость
  • Избегайте использования подключаемых модулей. Используйте аудио и видео HTML5 (H.264/AAC/MP3)
  • Не используйте всплывающие окна

Связанные разделы

Технические соображения по Internet Explorer для Xbox

 

 

Показ:
© 2015 Microsoft