Product Page Header (шапка страницы продукта) — первое, что видят люди, открыв ваше приложение в App Store. Apple добавила её на WWDC26, и она показывается на iOS 27 и iPadOS 27 и новее. В этой статье — точный размер, безопасная зона, которую нужно учитывать в дизайне, и места, где показывается шапка.
Коротко: Product Page Header — это 3840 × 1646 пикселей (21:9), JPEG или PNG без прозрачности. Всё важное держите внутри безопасной зоны 1646 × 661 в центре. Вместо изображения можно использовать видео того же размера длиной 5–30 секунд.
Что такое Product Page Header #
Это широкое изображение или видео в самом верху страницы продукта, над иконкой, названием приложения и скриншотами. В отличие от скриншотов, оно не обязано показывать само приложение. Apple предлагает использовать его для бренда, сезонного предложения или нового контента, чтобы «задать тон всей остальной странице продукта».
Шапка — один из трёх креативных материалов (creative assets), наряду с материалом для результатов поиска и универсальным материалом, который может заполнить оба места. Как они связаны между собой, объясняет наш обзор изменений WWDC26.
Где она показывается #
- На странице продукта — вверху, на iPhone и iPad, в любой ориентации.
- На индивидуальных страницах продукта. У каждой может быть своя шапка, так что ссылка из рекламы или с вашего сайта ведёт на страницу с подходящим изображением.
- В оптимизации страницы продукта. Разные варианты шапки можно тестировать друг против друга.
- Когда App Store рекомендует ваше приложение. По словам Apple, креативные материалы могут появляться, когда App Store продвигает ваше приложение.
Шапка показывается только на iOS 27 и iPadOS 27 или новее. На более старых версиях люди видят вашу страницу продукта без неё.
Размер Product Page Header #
| Изображение | Видео | |
|---|---|---|
| Размер | 3840 × 1646 пикселей | 3840 × 1646 пикселей |
| Соотношение сторон | 21:9 | 21:9 |
| Формат | .jpeg, .jpg или .png | .mov, .m4v или .mp4 |
| Частота кадров | — | 30 или 60 fps |
| Длина | — | от 5 до 30 секунд |
| Прочие правила | Без альфа-канала и прозрачности | Воспроизводится по кругу; по умолчанию без звука, звук можно включить |
Размер точный, а не диапазон. В слот шапки также можно поставить универсальный материал PNG размером 5244 × 2950; подробнее — в статье об универсальном материале. Размеры взяты из спецификаций креативных материалов Apple и проверены 21 октября 2026 г.
Безопасная зона шапки #
В документации Apple не приводит размеры безопасной зоны. Они есть в её шаблонах шапки для Photoshop и Pixelmator — в виде рамки art safe area. Вот она в масштабе:
Product Page Header 21:9
3840 × 1646 px
Безопасная зона 1646 × 661, 43% × 40% холста
| Пиксели | Доля холста | |
|---|---|---|
| Холст | 3840 × 1646 | 100% |
| Безопасная зона | 1646 × 661 | 43% ширины, 40% высоты |
| Положение безопасной зоны | x 1097, y 493 (левый верхний угол) | По центру в обоих направлениях |
| Поля слева и справа | по 1097 | |
| Поля сверху и снизу | по 493 |
Рамка маленькая. Больше половины ширины и бо́льшая часть высоты могут быть обрезаны, потому что одно и то же изображение должно заполнять и вертикально расположенный телефон, и горизонтально расположенный iPad. Поэтому:
- Текст, логотип и главный объект размещайте внутри рамки. Заголовок, лицо персонажа, изображение продукта.
- Остальное заполните тем, что можно обрезать. Фоном, текстурой, сценой, которая читается, даже когда остаётся только середина.
- Не привязывайте элементы к краям. Логотип в левом верхнем углу оказывается за пределами безопасной зоны и может пропасть.
- Проверьте результат в предпросмотре. Предпросмотр (Preview) в App Store Connect ещё до отправки показывает страницу на iPhone и iPad, в обеих ориентациях и на всех языках.
Советы Apple по дизайну #
Из рекомендаций Apple по материалам:
- Одна ясная идея. Перегруженная, плотная шапка теряется.
- Думайте о человеке, который видит страницу впервые. Покажите то, что сильнее всего зацепит того, кто никогда не слышал о вашем приложении.
- Текст — коротко или вовсе без него. Короткая фраза, которая дополняет изображение, а не описывает его, и переведена на все поддерживаемые языки.
- Никаких цен, скидок, URL и знаков копирайта, никаких других платформ и магазинов и никаких наград Apple вроде Editor's Choice.
- Контент 4+, даже если у вашего приложения возрастной рейтинг выше.
- Для видео: выберите выразительный кадр-постер, начните с самого сильного момента, сделайте плавный цикл и убедитесь, что видео работает без звука.
Как загрузить шапку #
Есть два способа, и оба проходят App Review:
- Вместе с версией приложения. Добавьте шапку на странице версии в App Store Connect, посмотрите её в предпросмотре и отправьте версию.
- Через Asset Library. Загрузите изображение или видео отдельно и отправьте его на проверку без новой версии.
После одобрения материала можно сразу переключить на него шапку и опубликовать изменение. Так сезонная шапка или шапка под кампанию становится быстрой правкой, а не релизом.
Шапка не заменяет скриншоты #
Скриншоты по-прежнему показываются сразу под шапкой, и именно их люди по-прежнему пролистывают, прежде чем принять решение. Планируйте шапку и скриншоты как единый набор — с одними и теми же цветами, шрифтами и посылом — и обновляйте их вместе.