Типографика мобильного аудиоплеера: главы, таймкод и текст

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

На экране плеера обычно соседствуют метаданные записи, информация о позиции и команды. Название и автор помогают узнать материал; таймкод и глава отвечают за ориентацию; подписи и статус объясняют, что доступно сейчас. Если всё оформить одинаково, взгляд не поймёт, куда смотреть. Если спрятать важное в маленький бледный текст, пользователь будет вынужден угадывать.

Разделите текст по вопросу, на который он отвечает:

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

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

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

Не уменьшайте кегль заголовка до нечитаемого размера только ради того, чтобы показать все метаданные одновременно. Лучше выделить две строки под заголовок и ограничить его предсказуемым числом строк. Если используете многоточие, убедитесь, что начало названия остаётся узнаваемым и доступен способ увидеть полную версию. В некоторых сценариях уместно раскрытие по нажатию; в других — отдельный экран «О записи». Не заставляйте человека угадывать, обрезана ли строка.

Показывайте прошедшее и оставшееся либо общее время в одном порядке на всём продукте. Например: «12:48 / 38:10» явно связывает позицию с длительностью. Если рядом есть ползунок перемотки, цифры должны относиться именно к нему. Не ставьте один таймкод над шкалой, а второй в другом углу без визуальной связи.

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

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

Название главы полезно только тогда, когда оно уточняет, что находится в этой части записи. «Часть 2» и «Дальше» мало помогают. Краткие формулировки вроде «Подготовка теста» или «Вопросы слушателей» дают опору, а номер главы может оставаться рядом как дополнительный ориентир.

В полном плеере текущую главу можно показать заметнее, а следующую — спокойнее в списке. Не оформляйте все строки как одинаково активные элементы: иначе выбранная глава теряется среди соседних. Длинные названия проверяйте на переносы. Если название занимает три строки, а остальные — одну, список становится рваным; можно заранее договориться о кратком редакторском формате, например «основная тема: уточнение».

Список глав должен сохранять смысловую связь с записью. Покажите, какая глава играет, и дайте выбрать другую. После выбора обозначьте результат понятным текстовым статусом или изменением выделения, а не только цветом. Если глава недоступна или ещё загружается, объясните это рядом. Касание строки главы и касание команды воспроизведения — разные действия, поэтому их подписи и зоны взаимодействия не должны сливаться в один неясный пункт.

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

Для записанного аудио и видеоматериалов требования к текстовой альтернативе зависят от типа материала. В WCAG есть отдельные критерии для аудио без видео и для субтитров заранее записанной синхронизированной медиазаписи. Перед внедрением проверьте применимую версию стандарта и контекст продукта в первоисточнике: WCAG 2.2. Apple также рекомендует предоставлять текстовые способы воспринимать важную аудиоинформацию и учитывать, что текстом могут пользоваться в шумном или общественном месте: HIG: Accessibility.

Визуально выделяйте текущий фрагмент так, чтобы оставались читаемыми предыдущая и следующая реплики. Не заставляйте текст прыгать и автоматически прокручиваться без понятной причины. Если пользователь вручную прокрутил расшифровку назад, удерживайте его позицию; предложите отдельное действие «Вернуться к текущему фрагменту». Это сохраняет контекст, когда человек перечитывает термин или проверяет цитату.

Пауза, воспроизведение, буферизация, ошибка и завершение — разные ситуации. Сама кнопка может менять символ, но рядом полезно иметь однозначное доступное имя действия: «Пауза» или «Воспроизвести». Сервисный статус не должен звучать как действие: «Загрузка» сообщает состояние, а не предлагает нажать на него.

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

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

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

При переходе в развёрнутый режим не меняйте внезапно порядок названия, автора и времени. Человек должен узнавать ту же запись и понимать, где он оказался. Сохраняйте терминологию: если в компактной панели написано «Эпизод», экран деталей не должен без причины переименовать его в «Материал».

Проверьте переключение между приложением, экраном блокировки, панелью управления и наушниками. Системные поверхности имеют собственные правила и доступное пространство. Apple указывает, что слушатели могут управлять воспроизведением извне приложения — например, через Control Center или наушники: HIG: Playing audio. Поэтому названия источника и записи должны быть достаточно короткими и различимыми, даже если приложение не контролирует внешний вид системной панели.

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

Проверьте каждый набор в нескольких состояниях:

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

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

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

В компактном виде обычно достаточно текущей главы. В развёрнутом плеере можно дать список для навигации, если он действительно помогает возвращаться к частям записи.

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

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

Предусмотрите понятный перенос или обрезку и дайте способ открыть полный текст. Не уменьшайте шрифт всего списка ради одного длинного названия; исправьте данные редакторски, если они регулярно перегружают строку.

Хорошая типографика аудиоплеера помогает узнать запись, найти фрагмент и понять состояние без лишнего поиска. Постройте ясную иерархию, проверьте настоящие названия и сохраните контроль над расшифровкой. Если вы создаёте собственный рукописный шрифт для приложения, протестируйте его на названиях выпусков, главах и коротких таймкодах в Fontgenerator.