описание
Дизайн приложения AppleTV Смотрешка
20 / 06 / 2018 - Sketch, Principle
В качестве тестового задания было предложено проработать два основных пользовательских поведения: "Заппинг" - последовательное переключение каналов без определенной цели и выбор канала из общего списка с возможностью различной фильтрации контента. Требовалось предоставить вайрфреймы обоих вариантов, UI и примерную анимацию состояний экрана.
Общий список каналов
При реализации экранов списка каналов за основу была взята стандартная схема навигации приложений для Apple TV. Такое решение позволяет выстроить дерево навигации неограниченной вложенности, что является весомым преимуществом при дальнейшем росте медиатеки. Таким образом получается три основных блока: навигационное горизонтальное меню, в котором собранны рут-категории вместе с элементами брендинга, боковое меню с подгатегориями и коллекция карточек каналов. Использование бокового меню для подгатегорий допускает использование вложенности, что позволяет добавить неограниченной число элементов в подгатегории, не нагружая при этом экран.
Карточка в фокусе выделяется тенью, увеличивается в размере и на ее месте сразу начинается воспроизведение видеоряда. Такое решение позволяет пользователю сразу узнать о том, что идет на данный момент по выбранному каналу без необходимости открытия полноценного плеера.
Плеер и Заппинг
Так как заппинг это простое перемещение от канала к каналу, самым очевидным способом его реализации послужит скролл. В зависимости от направления движения пальца, пользователь попадет на предыдущий и последующий экран.
Но в таком случае возникает необходимость отделения функционала скрола эфирного тайм-лайна для выбранного канала. Решением будет введение Тапа, при наступлении которого появляются элементы управления плеера.
Тап приводит пользователя к экрану плеера. Это дает доступ к тайм-лайну, перемещение по которому построено на использовании скролла. Если пользователь совершит горизонтальный свайп, то произойдет скачек к предыдущей или последующей передаче в тайм-лайне, в зависимости от направления свайпа. Свайп вверх предоставляет доступ к списку программ текущего канала на выбранный день.
По умолчанию в сетке отображаются передачи на сегодняшний день, но при нажатии на кнопку можно вызвать меню с выбором даты.
Анимация
В ходе работы над проектом был реализован один из сценариев использование плеера. Была разработана анимация появление элементов плеера и их изменение при взаимодействии пользователя с тачпадом пульта.
