Цветовые палитры для скриншотов App Store
Большинство палитр скриншотов App Store проваливаются одинаково: выглядят великолепно на 27-дюймовом мониторе и превращаются в кашу при том размере, в котором App Store их реально показывает. Карусель отображается в полном разрешении на странице продукта, но в виде миниатюры в результатах поиска и в блоках «Похожие приложения». Если палитра работает только в одном из этих размеров, ты теряешь конверсию на другом.
Три контекста просмотра
Воспринимай их как три отдельных дизайн-ограничения. Палитра, которая побеждает в одном, может проигрывать в другом.
- Полный размер (1290 × 2796 на iPhone). Отображение на странице продукта. Куда попадают пользователи после нажатия. Здесь читаются тонкие переходы градиентов, мелкий текст и сложные многослойные цвета. Большинство дизайнеров тестируют только этот размер.
- Миниатюра в поиске (~300 × 650). Первые три панели карусели рядом с иконками конкурирующих приложений в поиске App Store. Мелкие детали исчезают. Крупные контрастные блоки цвета читаются; тонкие градиенты сливаются.
- Контекст по соседству. В поиске твой скриншот никогда не появляется в одиночестве. Семь других приложений рядом с твоим имеют собственные палитры. Если все приложения в твоей категории тёплые и твоё тоже тёплое — скриншот растворяется в общем фоне.
Правило пяти цветов
Пять цветов — примерный максимум. Один доминирующий фоновый цвет (или градиент из двух), один основной цвет текста, один акцентный для выделения — плюс цвета, которые приходят из реального скриншота приложения. Добавление шестого цвета, как правило, означает не расширение палитры, а потерю одного из существующих цветов.
Дело не в эстетике — миниатюры агрессивно сжимают визуальную информацию, и палитра с лишними цветами превращается в серую кашу. Четыре-пять цветов — тот диапазон, в котором каждый цвет остаётся различимым при 200 пикселях.
Контраст: WCAG AA — не опция
Текст подписи на фоне панели должен соответствовать WCAG AA (4.5:1 для основного текста, 3:1 для крупного текста от 24 pt). Не потому что Apple проверяет — не проверяет, — а потому что при размере миниатюры всё, что не дотягивает до AA, буквально нечитаемо. Проверяй контраст финального цвета подписи на финальном фоне перед экспортом.
Типичная ошибка: тёмно-серый текст на чуть более светлом тёмно-сером градиенте. В Figma выглядит изысканно. При ширине миниатюры исчезает полностью.
Конвенции категории — отправная точка, не правило
Посмотри на 20 ведущих приложений своей категории в App Store. Отметь преобладающие цвета их палитр. Это конвенция категории — та палитра, которую пользователи ассоциируют с «серьёзным приложением в этой нише». Можно ей следовать (меньше риска, меньше дифференциации) или осознанно нарушить (больше риска, больше дифференциации, если сработает).
Нарушение конвенции оправдано, когда есть конкретная причина. Категория Notion (продуктивность) в 2022 году тяготела к ярким пастельным тонам; Notion выбрал почти монохромный стиль с тёплыми оттенками и воспринялся как более серьёзный продукт. Категория Headspace (психическое благополучие) была перегружена мягкой пастелью; глубокий оранжевый градиент Headspace выделялся, не будучи агрессивным. Безопасная последовательность: сначала следуй конвенции, нарушай только после того, как есть данные по установкам для сравнения.
Аудит «соседей в поиске»
Перед публикацией сделай следующее: поищи в App Store два-три ключевых слова, по которым твоё приложение ранжируется (или хочет ранжироваться). Посмотри на строку скриншотов под первым приложением по этим запросам. Твоя палитра будет выделяться среди соседей или сольётся с ними?
Это проверка за полминуты, и большинство команд её пропускают. Палитра, которая казалась уникальной в изоляции, может оказаться тем же сине-фиолетовым градиентом, что у пяти конкурентов выше и ниже тебя в поиске. Как правило, достаточно сменить один акцентный цвет.
Тёмный, светлый или никакой
Выбери чёткую позицию: преимущественно тёмные фоны, преимущественно светлые или единое семейство градиентов на всех панелях. Чередовать тёмные и светлые панели в одной карусели — самая распространённая ошибка: карусель выглядит так, будто у дизайна не было единого направления.
Читай тёмный режим vs светлый режим о том, когда каждый из них выигрывает по категориям. Коротко: тёмный побеждает в играх, музыке, фото/видео, AI-приложениях; светлый — в продуктивности, образовании, велнесе; всё остальное — монетка в воздух, и решает бренд.
Цвет и локализация
Цвета имеют разное значение в разных локалях. Красный — счастье в китайскоязычных рынках (процветание), но несёт скорее негативные коннотации в большей части Европы. Белый — траурный цвет во многих странах Восточной Азии. Ярко-зелёный в одних местах означает «вперёд», в других — «зависть». Для большинства приложений эти различия слишком тонки, чтобы перевешивать единообразие бренда — выбери одну палитру и публикуй глобально. Беспокойся о палитрах на локаль, только если символика цвета — значимая часть твоего позиционирования (люкс, велнес, финансы) и у тебя есть данные, на которые можно опереться.
Что сделать на этой неделе
- Просмотри текущие скриншоты при ширине 200 пикселей. Всё, что нечитаемо при таком размере, нужно изменить.
- Проверь контраст WCAG AA для каждой подписи на фоне её панели.
- Поищи три главных ключевых слова и сделай скриншот окружающего контекста. Выделяется ли твоя палитра?
- Если делаешь новый дизайн, ограничься максимум пятью цветами. Добавление шестого означает удаление одного из существующих.