О проекте

Мобильная социальная сеть, в которой под одной крышей собраны несколько форматов контента: короткие вертикальные ролики Clips, длинные видео, новостная лента «Газета» и прямые эфиры. У каждого формата свой режим просмотра, но навигация, профиль и сообщения общие.

Задача

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

Clips — вертикальные ролики

Главный экран открывается в разделе Clips: ролик на весь экран, а сверху вкладки «Clips», «Видео», «Газета», «Прямые», иконка эфиров и поиск. Справа — привычная колонка действий: лайк, комментарии, сохранение, репост и меню, у каждой иконки свой счётчик. Внизу автор с подписью к ролику и иконка звуковой дорожки.

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

Отдельный экран «Ваши видео Clips» показывает ролики одного автора в том же полноэкранном формате. Рядом с именем — кнопка «Подписаться», а под подписью — полоса прогресса воспроизведения. Нижняя панель общая для всего приложения: клипы, каталог, создание публикации, сообщения и профиль.

Видео и «Газета»

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

«Газета» — это лента новостных публикаций. Пост начинается с источника и времени публикации, дальше — видео со встроенным управлением звуком и воспроизведением, текст новости и ряд реакций: лайки, сохранения, комментарии и репосты со счётчиками. Здесь тот же механизм выбора, что и в видео, — публикации можно отметить и добавить.

Результат

Мы спроектировали социальную сеть, в которой короткие ролики, длинные видео и новости доступны из одной верхней панели и сохраняют каждый свой режим просмотра. Реакции, подписки и карточки авторов устроены одинаково во всех форматах, поэтому пользователю не нужно заново привыкать к интерфейсу при переходе между разделами.