Дизайн приложения для подкастов: редизайн главного экрана, до и после

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

Весь экран, до и после

Черновик джуниора

Исправлено

Слева эпизод человека оказывается одной из трёх одинаковых обложек с 2 px прогресса под ней, а каждая строка чарта заканчивается тремя иконками. Справа у эпизода на паузе своя карточка с полосой прогресса 6 px и тремя большими кнопками, а строки списка заканчиваются одной кнопкой.

Исправление 1: одна большая карточка для эпизода, который вы бросили

До

После

Три обложки с волоском прогресса против одной карточки с оставшимся временем и кнопками управления.

«Продолжить прослушивание» в черновике это полка. Три обложки одного размера стоят рядом, у каждой линия прогресса в 2 px, название обрезано на «Ep. 142: Why Great Apps Feel Calm (And...», а «осталось 23 мин» набрано мелким серым шрифтом. Чтобы продолжить нужный эпизод, слушатель открывает его, ждёт плеер и нажимает play.

Исправление даёт эпизоду на паузе карточку. Сверху обложка, фиолетовая подпись «Продолжить прослушивание · осталось 23 мин», полное название «Why great apps feel calm» и шоу «Studio Hour · Эпизод 142». Ниже полоса прогресса 6 px рядом с тремя кнопками: назад 30, play и вперёд 30. Две другие обложки из этого раздела ушли.

Кнопки «назад 30» и «вперёд 30» это круговая стрелка с цифрой 30 внутри, область нажатия 44 px, как в Audible. Прерванный слушатель может отмотать на полминуты, не покидая главного экрана.

Правило на будущее: то, что человек делал только что, и есть самое вероятное следующее действие, так что дайте этому карточку и кнопки управления.

Исправление 2: заголовки в две строки и одна кнопка play

До

После

Обрезанные названия, номера мест и три иконки против целых названий и одной кнопки play.

В черновике каждая строка чарта заканчивается стрелкой загрузки, меню из трёх точек и треугольником play, поэтому названию достаётся то, что осталось, и этого не хватает: «The Week in Tech, in 20 Minutes: Al...», «How to Learn Anything in 30 Days...», «Live from Brooklyn Part 2 (Uncut Ex...». Место обозначено крупным фиолетовым числом, а под каждым названием строка с шоу, категорией и длительностью.

Исправление позволяет названию переноситься на две строки: «The week in tech, in 20 minutes». Под ним одна строка: день и длительность, «Сегодня · 21 мин». Справа одна круглая кнопка play, единственное действие, которое нужно строке, и попасть по ней легко. Загрузки и меню в строке нет, а куда они переехали, этот редизайн не рисует.

Этот редизайн изменил не только вид списка, но и его задачу. Пять строк «Top Charts» с местами превратились в три строки «Далее», так что в настоящем приложении чарту всё равно нужно найти место.

Правило на будущее: пусть название переносится, ведь обрезанное название не прочитать, и давайте каждой строке одно действие.

Исправление 3: жанры в одном стиле

До

После

Шесть сплошных цветов в два ряда против одного ряда плашек с одной заполненной.

Теги жанров в черновике розовые, синие, красные, зелёные, оранжевые и бирюзовые, каждый с белым текстом. Они занимают два ряда.

Исправление это один ряд плашек в одном стиле. «All» залит фирменным фиолетовым #8B5CF6, остальные белые. В конце стоит «More» для жанров, которые не поместились. Заполненная плашка единственная, у которой есть смысл: «вот на что вы сейчас смотрите».

Правило на будущее: цвет должен говорить, какой вариант выбран. Он не должен говорить, какой вариант какой.

Исправление 4: мини-плеер с кнопками, которыми пользуются

До

После

Предыдущий, пауза и следующий против «назад 30», паузы и «вперёд 30».

У мини-плеера меньше всего места на экране, поэтому каждая кнопка в нём должна заслужить своё место. В черновике три кнопки: предыдущий, пауза и следующий. Предыдущий и следующий перескакивают на другой эпизод.

Исправление использует «назад 30», паузу и «вперёд 30». Обложка и название «Why great apps feel...» остаются слева, под ними шоу. Линия прогресса идёт по верхнему краю плеера, так что показывает, как далеко продвинулся эпизод, и не отнимает отдельную строку.

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

Мелкие исправления

• Один левый край. В черновике отступы были 14 px слева и 12 px справа. В исправлении 20 px с обеих сторон и 16 px между карточками.
• Один фирменный фиолетовый. Исправление использует #8B5CF6 для заливок и кнопок play и более тёмный #7C3AED для мелкого фиолетового текста, которому нужно больше контраста.
• Настоящая типографская шкала. Текст из размеров от 8 до 20 px стал размерами iOS от 11 до 28 pt.
• Больше заголовок, меньше шапка. В шапке черновика были иконка поиска, колокольчик и аватар. Исправление оставляет аватар и большой заголовок «Подкасты».
• Четыре вкладки, а не пять. Home, Browse, Library, Search и Profile стали «Слушать», «Обзор», «Медиатека» и «Поиск». Профиль это аватар в шапке.

Проведите аудит своего приложения для подкастов

Получите файл Figma

В бесплатном файле оба экрана как компоненты, каждое исправление в виде пары «до и после», переменные цвета и текстовые стили iOS.

Бесплатный файл Figma

Главный экран подкастов, до и после

Оба экрана и каждая исправленная часть как компоненты Figma. Бесплатно, только просмотр, продублируйте в свои черновики.

Открыть в Figma

FAQ

Что должен показывать главный экран приложения для подкастов в первую очередь?

Эпизод, который слушатель слушал наполовину, на одной большой карточке с оставшимся временем, play и перемоткой назад и вперёд на 30 секунд. Чарты, жанры и новые шоу идут после него.

Какие кнопки должны быть в мини-плеере подкастов?

Назад 30, пауза и вперёд 30. Предыдущий и следующий эпизод перескакивают на другой эпизод, так что оставьте их для полного плеера.

Как оформить раздел «Продолжить прослушивание»?

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

Как в приложении для подкастов показывать список эпизодов?

Позвольте названию переноситься на две строки, поставьте день и длительность в одну серую строку и завершите строку одной кнопкой play. Загрузку и меню перенесите на страницу эпизода.

Как оформить фильтры жанров в приложении для подкастов?

Один ряд плашек в одном стиле, выбранная залита фирменным цветом, а More стоит в конце. Шесть цветов на шести тегах лишают цвет смысла.

Какой размер шрифта использовать в приложении для подкастов?

Текстовую шкалу платформы. Исправленный экран использует размеры iOS от 11 до 28 pt и большой заголовок.

Источники

• Оба экрана наши собственные, спроектированы и измерены в Figma. Названия шоу, эпизоды и люди вымышлены, обложки это фотографии с названием шоу поверх.
• Фото с Pexels: Jace Oner, Somogro Bangladesh, Sound On, Brett Sayles, Ali Dashti, frank minjarez и pessoas uem.
• Apple Human Interface Guidelines: Typography, для размеров текста iOS на исправленном экране.
• Apple Human Interface Guidelines: Accessibility, для размера области касания 44 pt.
• Впервые опубликовано как карусель в App Brainy.