Мы находимся в интересном периоде дизайна пользовательского интерфейса для большого экрана. С запуском 4-го поколения Apple TV в конце 2015 года, большинство крупных игроков уже выпустили свои первые приложения, задавая тон современному опыту ТВ-просмотра. Это дивный новый мир, который интересно изучать.
В этой статье вы найдете примеры, советы и инструменты для разработки дизайна приложений для Apple TV.
Положение дел
Крупные игроки, такие как Netflix, Youtube, HBO, Hulu и Plex имеют свои приложения для предыдущих версий tvOS в App Store. Таким образом, приложения для tvOS — это странное сочетание унаследованного дизайна от прежних версий, и новых руководящих принципов Apple. Во многих отношениях мы в настоящее время находимся на предварительном этапе, когда каждый пытается выяснить, как делать правильно. Практически делается все то же самое, что на других платформах. Вы можете легко увидеть эту гамму решений на экране телевизора.
Но гораздо большая группа создателей контента сейчас пытается решить, должны ли они связываться с платформой, и если да, то как это сделать. Многие из них рассматривают tvOS как способ экспериментировать с интересными приемами.
______________
Эта статья в первую очередь для тех разработчиков, которые собираются построить что-то для Apple TV. По прогнозам экспертов, это настоящая золотая жила.
______________
Популярностью пользуются не только игры: людей привлекают и другие приложения. Apple TV больше не рассматривается как игровая приставка, а скорее как медиацентр или мини-компьютер.
Начать работу легко
Учитывая множество других устройств и разрешений в мобильном пространстве, проектирование и разработка для Apple TV – легкое дело. Это одно разрешение и одно устройство. Тот факт, что вы разрабатываете для одного разрешения, 1920 х 1080 пикселей, и настройка дизайна под одно устройство – это настоящая роскошь, о которой мы успели позабыть.
Достаточно открыть один холст в Photoshop и экспортировать элементы интерфейса, как есть. На внешнем мониторе можно легко просматривать весь экран на 100%.
Сфокусируйтесь на управлении
Чтобы комфортно проектировать, нужно иметь большой опыт работы на Apple TV. В отличие от работы на компьютере, где вы манипулируете содержанием, нажав на клавишу или прокрутив колесиком, на экране телевизора вы перелистываете контент и управляете с одного объекта — пульта. Главная кнопка на нем – «Выбрать». Пользователю нужно пройти через ряд предопределенных областей, на которых нужно сфокусироваться.
Дразните закадровым содержанием
Строки и столбцы контента, которые выходят за пределы экрана, должны быть выровнены таким образом, чтобы показывать, по крайней мере, 10-20% от закадрового содержания, давая понять пользователю, что есть еще больше выбора для навигации.
Горизонтальное — легко, вертикальное — сложно
Горизонтальная прокрутка более плавная, чем вертикальная, как с точки зрения фактического жеста на самом оборудовании, так и потому, что скольжение контента со стороны, по сравнению с перемещением через весь экран, не такое резкое. Боковое движение легкое для большого пальца. Перемещение пальца вверх и вниз труднее и (потенциально) перемещает все объекты на экране, и поэтому является более трудозатратным мероприятием. Используйте эти знания в свою пользу, и сохраните вертикальную прокрутку для конструктивных вещей, таких как изменение категорий.
Отдельные кнопки и контент
Очень важно, чтобы содержание и элементы управления, к которым вы можете перейти, были обозначены определенным образом. Вы же не хотите, чтобы пользователь был удивлен из-за того, что перешел не туда? Поэтому убедитесь, что кнопки выглядят как кнопки, а содержание выглядит как содержание.
Место управления выбрано осознанно
Размещение органов управления и содержания очень важно для создания комфорта. Длинный блок текста – не самое лучшее решение. Подумайте сами, как бы вас раздражала навигация, если надо было бы прокручивать «много букв», чтобы добраться до кнопки управления. В некотором смысле, на tvOS, пользователь словно Тарзан — качается от дерева к дереву; от одного фокусируемого элемента к другому. Сделайте так, чтобы Тарзан мог ясно увидеть следующее дерево и нужную лиану. Не скрывайте их, иначе он расшибется.
Сделайте ровную сетку. Разрыв и неровные элементы допустимы только по уважительной причине.
Капитан очевидность
Убедитесь в том, что вещи в центре внимания имеют соответствующий вид. Здесь не нужны тонкости. Выбранный элемент должен увеличиваться, подсвечиваться, менять цвет. Увеличение прекрасно работает на большом экране. И не бойтесь увеличить элемент намного больше, чем делаете это обычно на других платформах.
Дизайн для расстояния
Интерфейс, который вы создаете для телевизора, будет использоваться на расстоянии нескольких метров. Это резко контрастирует с мобильным, или компьютерным монитором, где мы практически утыкаемся носом в экран. С проектированием для телевизора все иначе. Мало того, что он дальше от нас физически, но и взаимодействие с ним проводится с помощью пульта дистанционного управления. Поэтому убедитесь, что содержание и элементы управления видны со всех концов комнаты. Нужны большие шрифты и большие кнопки, а также значимые сетки макета и более четкая анимация.
Минимизация текстовых входов
Ввод текста на экране телевизора – это сложно, поэтому постарайтесь сделать так, чтобы пользователю доводилось это делать очень редко. Рассмотрите альтернативы, такие как вход с помощью набора цифр.
Оживите элементы
В настоящее время мы видим много стандартных элементов пользовательского интерфейса в приложениях Apple TV. Но можно сделать много вещей, чтобы «оживить» пользовательский опыт. Анимация и параллакс могут смотреться очень интересно. Прогресс-бары, движущиеся элементы, интересно поданный контент должны иметь успех.
Ресурсы
Для более простого проектирования для Apple TV создан специальный шаблон, доступный по ссылке.
Можете также посмотреть на Apple’s official HIG, тут можно найти конкретные схемы и макеты.
Большинство разработчиков делает первые шаги в изучении того, что может быть сделано на экране телевизора. Для этого необходимо отучиться от привычного мобильного и компьютерного опыта. Нужно экспериментировать. Это очень увлекательно.
0 комментариев