Дизайн стриминг-приложения: редизайн тёмного главного экрана, до и после
Тёмный главный экран стриминг-приложения: шесть фактов в одной строке 9 px, три кнопки одинакового веса и красный, подмешанный в бирюзовый бренд. И тот же экран после исправления. Каждое изменение рядом, причина каждого и бесплатный файл Figma.
Человек открывает стриминг-приложение, чтобы нажать «смотреть». В первом черновике ниже есть хороший сериал на продажу, но единственную важную кнопку окружает всё подряд: шапка из четырёх иконок, строка из шести фактов шрифтом 9 px, три кнопки одинакового веса и красные бейджи в бирюзовом приложении. Исправление оставляет тот же сериал и те же ряды, но делает порядок на экране таким же, как порядок действий зрителя.
Весь экран, до и после
Черновик джуниора
Исправлено
Слева первое, что есть в герое, это название заглавными буквами и строка, которую невозможно прочитать. Справа у героя есть имя, одна строка и одна кнопка.
| Черновик джуниора | Исправлено | |
|---|---|---|
| Шапка | Логотип, 4 иконки | Логотип, 2 кнопки по 40 px |
| Факты героя | 6 в одной строке 9 px | Одна короткая строка |
| Кнопки героя | 3 заглавными, одного веса | 1 большая Play, 1 кнопка плюс |
| Ряд продолжения | 3 высоких постера, подписи 10 px | 2 широкие карточки с оставшимся временем |
| Верхний ряд | 4 постера, на каждом одна и та же плашка TOP 10 | 4 постера с номерами от 1 до 4 |
| Используемые цвета | Бирюзовый, плюс красные бейджи и красные полоски | Один бирюзовый для прогресса и ссылок |
| Фон | Чисто чёрный #000000 | Плавно от янтарного #3A2510 к #0E0E12 |
| Вкладки | 5 | 4 |
| Боковые поля | 14 px слева, 12 px справа | 20 px, 16 px между секциями |
| Размеры текста | от 7 до 30 px | от 11 до 28 pt |
Правка 1: шапка, которая делает две работы
До
После
Четыре мелкие иконки против двух круглых кнопок.
В шапке черновика поиск, трансляция, колокольчик с красной точкой и аватар зрителя, каждый шириной около 20 px. Строка перегружена, а аватар дублирует вкладку «Профиль» внизу.
Исправление оставляет поиск и уведомления в виде двух круглых кнопок по 40 px, а иконку трансляции и аватар убирает. Точка на колокольчике бирюзовая. У профиля уже есть своя вкладка, так что шапке не нужно её повторять.
Правило на будущее: каждый элемент управления должен жить в одном месте. Если в панели вкладок есть «Профиль», в шапке не нужна фотография профиля.
Правка 2: одна кнопка Play
До
После
Название, крошечная строка фактов и три кнопки против названия, одной строки и одной кнопки.
Герой это самое ценное место на экране, и черновик его забивает. Название набрано заглавными буквами в нижней середине постера, под красной плашкой «NEW EPISODES». Ниже строка 9 px с шестью фактами: «2025 • TV-MA • 2 Seasons • Sci-Fi, Action, Drama • ★ 8.3». Затем три кнопки, PLAY, MY LIST и INFO, все заглавными и почти одного веса, так что зрителю приходится выбирать, прежде чем нажать.
Исправление переносит название в левый нижний угол изображения, подкладывает под него тёмный градиент, чтобы оно читалось, и добавляет под названием одну короткую строку: «Sci-fi · Season 2 · 2025». Плашка говорит «New season» фирменным бирюзовым.
Под изображением одна широкая белая кнопка «Play» занимает почти всю ширину, а рядом круглый «+» для списка. INFO на экране нет.
Правило на будущее: герою нужно одно действие. Дайте ему самую большую кнопку на экране, а всё остальное сделайте меньше.
Правка 3: широкие карточки, которые говорят, сколько осталось
До
После
Три высоких постера с тонкой красной полоской против двух широких карточек с оставшимся временем.
Ряд «Continue Watching for Alex» в черновике показывает три высоких постера. Под каждым красная полоска прогресса в 3 px и подпись вроде «S2:E5» шрифтом 10 px. Постер говорит, что это за сериал. Он не говорит, где зритель остановился, а красная полоска это второй цвет в бирюзовом приложении.
Исправление использует две широкие карточки с бирюзовой полосой прогресса внутри изображения и названием под каждой. Строка под названием гласит «S2 E5 · 12 min left», что отвечает на вопрос, который задаёт человек, возвращаясь к просмотру: хватит ли мне на это времени?
Правило на будущее: ряд продолжения нужен для места зрителя. Показывайте оставшееся время, а не только код эпизода.
Правка 4: номера, которые можно прочитать
До
После
Четыре постера с одной и той же плашкой против четырёх постеров с их местами.
В ряду «TRENDING NOW» в черновике четыре постера, и на каждом одна и та же красная плашка «TOP 10». Плашка говорит, что каждый из них в десятке лучших, но не говорит, на каком месте. Зритель не отличит первого от четвёртого.
Исправление переименовывает ряд в «Top 10 today» и ставит рядом с каждым постером крупный контурный номер: 1, 2, 3, 4. Теперь у ряда есть порядок чтения слева направо. Ссылка «See all» использует фирменный бирюзовый, тот же, что и полоски прогресса.
Правило на будущее: рейтинг должен показывать место. Бейдж, одинаковый у всех элементов, это украшение.
Мелкие правки
- Один фирменный цвет. В исправлении бирюзовый #22D3EE используется для логотипа, прогресса и ссылок. Красные бейджи и красные полоски прогресса исчезли.
- Фон, совпадающий с героем. Исправление плавно переходит от янтарного героя #3A2510 к #0E0E12, так что первый экран ощущается единым изображением. Черновик лежит на чисто чёрном #000000.
- Одна левая кромка. Поля в черновике были 14 px слева и 12 px справа. В исправлении 20 px с обеих сторон и 16 px между секциями.
- Настоящая шкала шрифтов. Текст из диапазона от 7 до 30 px перешёл на размеры iOS от 11 до 28 pt.
- Четыре вкладки, а не пять. Home, Search, Coming Soon, Downloads и More превратились в Home, Search, Downloads и Profile.
Проведите аудит своего стриминг-экрана
| Вопрос | Почему это важно |
|---|---|
| Есть ли у героя одна кнопка, которая больше всех остальных? | Герою нужно одно действие |
| Говорит ли ряд продолжения, сколько осталось? | Он отвечает, хватит ли времени |
| Показывает ли рейтинговый ряд место? | Повторяющаяся плашка ничего не говорит |
| Использует ли экран больше одного акцентного цвета? | Второй акцент конкурирует с первым |
FAQ
Что должен показывать главный экран стриминг-приложения в первую очередь?
Героя с названием сериала, одной короткой строкой фактов и одной большой кнопкой Play. Место самого зрителя, ряд «Продолжить просмотр», идёт сразу за ним.
Сколько кнопок должно быть в баннере героя?
Одна главная кнопка и максимум одна маленькая второстепенная, например плюс для списка. Три кнопки одинакового веса заставляют зрителя выбирать, прежде чем нажать play.
Как спроектировать ряд «Продолжить просмотр»?
Используйте широкие карточки с полоской прогресса, названием и оставшимся временем, например «12 min left». Высокий постер показывает, что это за сериал, а широкая карточка показывает, где зритель остановился.
Как спроектировать ряд Top 10?
Поставьте рядом с каждым постером крупный номер места, чтобы у ряда был порядок. Бейдж «Top 10» на каждом постере не говорит, какое место занимает сериал.
Какие цвета подходят для тёмного стриминг-приложения?
Один акцентный цвет для прогресса и ссылок на тёмном фоне. В исправленном экране бирюзовый #22D3EE на фоне, плавно уходящем от янтарного цвета героя к #0E0E12.
Какой размер шрифта использовать в стриминг-приложении?
Текстовую шкалу платформы. В исправленном экране размеры iOS от 11 до 28 pt, так что в герое нет ничего мельче 11.
Источники
- Оба экрана наши собственные, спроектированы и измерены в Figma. Зритель, сериалы и приложение Streamix выдуманы, а каждый постер это плоский цвет с названием, набранным шрифтом.
- Фото аватара с Pexels, автор Amir SeilSepour.
- Apple Human Interface Guidelines: Typography, для размеров текста iOS, использованных в исправленном экране.
- Apple Human Interface Guidelines: Dark Mode, для проектирования интерфейса, который работает на тёмном фоне.
- Впервые опубликовано как карусель в App Brainy.
Want this for your own app? Our team redesigns streaming and media apps like this one, from the first audit to the finished components.
Get Started
