S01–S10 · вход и онбординг · «По любви»
Вход и онбординг по нодам
Десять экранов — от сплэша до пола и роста — собраны из данных нод Figma: переменных, стилей, компонентов и правил авто-лейаута. Ниже 21 кадр рядом с рендерами макета, числа расхождения и разбор того, из чего складывается остаток.
Выберите кадр — он откроется в смотровой слева. Тяните шторку, чтобы совместить макет и приложение. Статус-бар, полоска home и клавиатура iOS в сравнении исключены: их рисует система Android (спека 6.4).
Числа
Все кадры
Первая колонка — доля пикселей с отличием сильнее ΔE 6 вне масок. Вторая — она же с исключёнными текстовыми блоками: разница между ними и есть цена шрифтов и сглаживания глифов.
| Экран | Кадр | Состояние | Расхождение | Без текста | Вердикт |
|---|
Из чего собрано
Атомы кита
Каждый — по своей ноде UI Kit, с параметрами, названными как свойства компонента в Figma. Варианты, ноды которых ещё не читал, помечены в коде и не додуманы.
Кнопка
Набор 656:5869: Big 56 и Small 44 × main / secondary / text × default / disabled / load, иконка слева и компенсатор. На чёрном экране блокировки цвета переопределяются нодой.
Поле в строку
716:11132: подпись внутри пустого поля и всплывающая на границу у заполненного, префикс «+7», курсор 1,5×20, подпись-кэпшн с иконкой под полем.
Ячейки кода
754:10963 — шесть состояний из ноды: default, focus, filled, blocked, error-focused, Error Inactive. Группа из шести ячеек и группа даты рождения 830:7821 из восьми ячеек с точками.
Селекторы
656:5951 picker-single (белый и терракотовый), барабан 888:10028 с семью строками 16/28/36/52/36/28/16 и чекбокс-строка 5879:21203.
Навбар и прогресс
656:6040 с иконкой «назад» и правой текстовой кнопкой, 830:7393 из трёх сегментов с шестью степенями заполнения.
Коллаж приветствия
Формы shape-brand берутся контуром из .fig и режут фотографии; повороты −6,86° и +6,29°, семь бейджей 38 со своими углами — числа из ноды.
Что вскрыла сборка
Находки
Всё это нашлось только потому, что экраны собирали из нод и снимали, а не сверяли на глаз.
22 иконки ломали ресурсы Android
Обведённые контуры из .fig разбирались в тысячи кривых: «Community list» весил 88 КБ при пределе строки aapt 32 767 символов, сборка писала STRING_TOO_LARGE, ресурс молча ломался. Перевёл их из SVG-экспорта Figma — 1–2 КБ, шесть пар просмотрел глазами против рендеров: расхождение 0,4–1,8 %, то есть сглаживание.
Перенос строки из макета Android рисует квадратиком
В трёх нодах перенос задан символом U+2028 — Compose показывает его глифом-заглушкой прямо в тексте. В ресурсах заменил на обычный перенос с комментарием: текст и разбивка те же.
Ссылка в тексте согласия — терракотовая
В ноде 2859:24006 у символов 42…69 своя заливка #C66F53: «политики конфиденциальности» — это ссылка. Собрал текст тремя частями с цветной серединой. Заодно Android съедал ведущий пробел в ресурсе — вернул его кавычками, иначе слова слипались.
Курсор стоит перед подсказкой, а не после
В ноде курсор и подсказка начинаются в одной точке (x=56): в пустом поле курсор впереди, в заполненном — за набранным текстом. У меня он был всегда справа.
Снек — во всю ширину, без скруглений
2760:18984 — 390×56 от края до края с полями 20, а не карточка с отступами, как я собрал сначала.
Два кадра одного экрана разъезжаются на 4 dp
В «Auth 13» блок выбора пола стоит на y=262, в «Auth 14» — на y=266 при одинаковой раскладке выше. Один из кадров сдвинут; вопрос дизайнеру (Р-13).
Остаток
Почему ни один кадр ещё не зелёный
| Причина | Где видно | Класс | Что дальше |
|---|---|---|---|
| Сглаживание и метрика шрифтов | на всех экранах: полная метрика 3–6 %, без текста 0,3–2,6 % | шрифты | решение Р-9 принято; окончательная проверка — на снимке ×3 с эмулятора |
| Фотографии и эмодзи коллажа | 665:6336 — 19,4 %, без текста 18,4 % | фикстура | кадр карточки вырезается из исходника по геометрии ноды; остаток — сжатие JPEG и набор эмодзи (Р-15) |
| Толщина обводок 1,33 dp | поля ввода и ячейки кода: тонкая линия на масштабе ×1,19 «плывёт» на полпикселя | масштаб снимка | уйдёт на снимке ×3 |
| Иконки 16 dp внутри подписей | замок, глаз, карандаш — 20×20 областей в карте расхождения | сглаживание | сверены с рендерами отдельно, форма совпадает |
| Барабан роста | 883:2889, 883:4930 — строки 177…183 см | приближение | в ноде невыбранные строки отрисованы контурами; кегли выведены из высот глифов, точная нода барабана — в фазе кита |
Дальше
Что нужно, чтобы закрыть эти десять экранов
| Шаг | Зачем | Состояние |
|---|---|---|
| Снимки ×3 с эмулятора | Paparazzi ужимает картинку до 1000 px по длинной стороне; критерий геометрии 0,5 dp на ×1,19 не проверить | нужен эмулятор |
| Поведение экранов | маска телефона, отправка кода, таймер, ошибки 101…122, переходы — по поведенческим картам и трассе запросов | после вёрстки |
| Оставшиеся кадры S03–S06 | Auth 3.1, 3.3, 3.4, 4.2, 4.4, 9.0–9.3, второй кадр блокировки, «soft update», «maintenance bs» и «alert» | часть — шторки поверх ленты |
| Остальные варианты атомов | у кнопки 22 варианта, у поля — ошибка и блокировка, у барабана — своя нода | фаза кита |
| Решение по эмодзи | Р-15: оставляем системные или вывозим картинками из макета | за вами |