Для кого: дизайнеры интерфейсов и фронтенд-инженеры, которые отдают в сборку Android .9.png — плашки HUD, кнопки, рамки инвентаря и другой переиспользуемый хром. Задача не «красиво в Figma», а бинарный контракт: однопиксельная управляющая кайма, целочисленные плотности и предсказуемый цвет на бюджетных экранах.
Ниже — разбор спецификации, сводная таблица по кайме, прозрачным рёбрам, масштабу и sRGB, затем рабочий процесс пакетного экспорта, FAQ по оттенку и «лесенке», и параметры ночных прогонов на удалённом Mac mini M4. Углубить цвет — в чеклисте sRGB и Display P3; выровнять сетку статики — в руководстве по пиксельному выравниванию PNG из Figma; автоматизировать гейты — в материале про пакетную QA PNG на удалённом Mac.
На этой странице
Разбор спецификации
Большинство срывов в продакшене — это геометрия и метаданные, а не «вкус арт-дирекции». Тонкая полоска растяжения на макете превращается в один зашумлённый пиксель на устройстве, если вы потеряли выравнивание по сетке. Путаница между отступами в Figma (safe zone) и чёрными метками padding на нижнем и правом краю даёт обрезанный текст у скруглений. Полупрозрачный серый на внешнем ряду вместо жёсткой прозрачности сдвигает padding примерно на один dp. Нетегированный или P3-случайный экспорт выглядит нейтрально на студийном мониторе, но уходит в «грязь» или неон на телефонах, где доминирует sRGB.
Внешняя однопиксельная кайма — это не декор, а слой метаданных. Чёрный на верхнем и левом краю задаёт растягиваемые столбцы и строки. Чёрный на нижнем и правом краю описывает коробку отступов для дочерних представлений. На кольце допустимы только непрозрачный чёрный и полная прозрачность. Углы остаются прозрачными, чтобы декодер независимо прочитал горизонталь и вертикаль. Антиалиасное «тело» арта держите минимум на один пиксель внутри кольца, чтобы ресемплер не задевал кайму.
Ниже — контракт «дизайн → сборка». Базовая логика именования папок — классические корзины mdpi–xxhdpi, если ваша студия явно не закрепила другой стандарт.
| Тема | Правило каймы 1 px | Прозрачный край | Масштаб (@1x / @2x / @3x) | Экспорт sRGB |
|---|---|---|---|---|
| Метки растяжения (верх + лево) | Сплошной чёрный; на нативном экспорте ≥ 2 px ширины по каждой оси | Вне меток — полная прозрачность | Масштаб от базы 1,0 / 1,5 / 2,0 / 3,0; избегайте двойного округления | Встраивать sRGB IEC61966-2.1; P3 только по подписанному исключению |
| Метки padding (низ + право) | Совпадение с зафиксированными insets в тикете; симметрия, если асимметрия не оговорена | Прозрачные углы, чтобы декодировать обе оси | После экспорта перепроверьте dp в Layout Inspector | Тот же ICC, что и у растяжения; одна цепочка инструментов на дроп |
| Внутренний арт | Живые пиксели ≥ 1 px внутри кольца | Перо и размытие — внутри, не под «юбкой» | Растер под целевую плотность; документируйте даунскейл и шарпен | sRGB, затем lossless-рекомпрессия; ICC в манифесте |
Пакетный экспорт и рабочий процесс
Упорядоченные шаги делают ночную QA детерминированной и задают общее определение «готово» для продюсеров и разработки.
- Заморозка логики: ширина в dp, радиусы скруглений и какие рёбра растягиваются; по одному мастеру на корзину плотности, чтобы арифметика padding оставалась прослеживаемой.
- Метки в конце: растяжение и padding рисуйте в векторном оверлее, привязанном к пиксельной сетке, затем сливайте слои — диффы оверлеев проще автоматизировать.
- Имена каталогов: единообразные
drawable-*dpiили flavor-пути, чтобы CI применял разные потолки байт и размеров по корзинам. - Одна цепочка инструментов: весь спринт на macOS через
sipsили ImageMagick снижает сюрпризы ICC, когда вперемешку идут экспорты с Windows и Mac. - Скриптовые гейты: обязателен альфа-канал; RGB на кольце со значениями строго между 1 и 254 — отклонение; нечётные размеры — флаг, если пайплайн их запрещает.
- Манифест: рядом с PNG —
sha256,px_w,px_h,density,iccи версия пресета экспорта.
Если команда мигрирует на Compose или вектор, nine-patch остаётся отдельным эпиком: WebP не является прямой заменой классического NinePatchDrawable без изменений кода и превью на целевых API.
FAQ: цветовые сдвиги и пилообразные края
Почему нейтрали «уезжают в оттенок» после растяжения?
Края с premultiplied-альфой и неверная гамма искажают серые. Держите straight alpha там, где его ждёт пайплайн, встраивайте sRGB, смотрите превью на типичном sRGB-телефоне, а не только на P3-мониторе студии — см. также чеклист по цветовому менеджменту PNG.
Тонкие швы на повторе паттерна?
Зона растяжения слишком узкая или через неё проходит градиент. Расширьте сплошные полосы растяжения; перенесите градиенты в фиксированные области вне отмеченных линий.
Можно ли ослабить требования к кольцу ради «мягкого» превью в редакторе?
Нет: декодер ожидает дискретные маркеры. Любая «пыль» альфы 1–254 у внутреннего края кольца — повод для провала автоматической приёмки, как в практиках из пакетной QA PNG.
Параметры пакетной приёмки на удалённом Mac M4
Удалённый Mac mini M4 удобен для ночных прогонов: ноутбук остаётся свободен для компоновки, а унифицированная память Apple Silicon держит в резидентности множество средних PNG, пока ImageMagick или аналог собирает статистику по альфе. Начните с консервативных порогов и ужесточайте их, когда доля ложных срабатываний близка к нулю.
- Параллелизм: воркеры ImageMagick ≤ физических ядер минус один.
- Дебаунс: 20–40 с тишины после последней записи перед QA, чтобы не ловить полузаписанные файлы.
- Альфа-пыль: провал, если альфа 1–254 в пределах 2 px от кольца, без явного waiver в тикете.
- Байты: типичные HUD-плашки < 180 КБ на xhdpi; тяжёлый хром без анимации — разумный потолок ≤ 400 КБ (уточняйте под SKU).
- ICC: требуйте встроенный sRGB или документированный отказ от профиля рядом с манифестом сборки.
Итог и следующий шаг
Nine-patch — это API вёрстки в растровой форме. Соблюдение контракта одного пикселя плюс скриптовые гейты убирают класс «почти правильно» на бюджетных Android. Удалённый Mac M4 совмещает среду экспорта арт-дирекции с воспроизводимыми ночными прогонами и освобождает локальные машины.
На MacPng можно открыть тарифы и узлы без обязательного входа в аккаунт (в рамках текущей политики сайта), сравнить планы и перейти к гайду по доступу, чтобы закрепить QA на Apple Silicon.
Пакетная приёмка 9-patch PNG на удалённом Mac
Вынесите ночные прогоны скриптовых гейтов на стабильный узел M4, зафиксируйте версии CLI и промоутьте только ассеты с подписанным манифестом — для игрового UI и классического Android-хрома без ping-pong между Figma и Gradle.