Проверка цвета и HiDPI на удалённом Mac

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

Разделите три уровня переменных

Любая визуальная проверка через удалённое подключение включает как минимум три уровня:

1. Пиксели, фактически сформированные облачным Mac, включая окна приложений, снимки симулятора и экспортированные файлы.
2. Масштабирование, преобразование глубины цвета и сжатие, применяемые средством удалённого подключения.
3. Масштабирование экрана, цветовой профиль и размер окна клиента на локальном устройстве.

Если сохранять только снимок удалённого экрана, в него одновременно попадут второй и третий уровни, поэтому впоследствии будет невозможно установить источник проблемы. Для каждой проверки рекомендуется создавать отдельный каталог и сохранять в нём сведения о системе, исходные снимки с облачного Mac и заметки о локальном просмотре.

mkdir -p "$HOME/visual-baseline"/{system,source,notes}
system_profiler SPDisplaysDataType \
  > "$HOME/visual-baseline/system/displays.txt"
system_profiler SPColorSyncDataType \
  > "$HOME/visual-baseline/system/colorsync.txt"
sw_vers > "$HOME/visual-baseline/system/macos.txt"

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

Удалённый рабочий стол удобен для работы и быстрой проверки, однако субъективное восприятие удалённого изображения не заменяет анализ исходных файлов, созданных на облачном Mac.

Зафиксируйте разрешение и масштабирование

Чаще всего размытость связана не с недостаточным разрешением ресурсов, а с тем, что логический размер, физические пиксели и окно клиента масштабируются не в целочисленном соотношении. Сначала выберите фиксированный режим в настройках дисплея, запишите логический размер из параметра «Выглядит как», а затем по системному отчёту проверьте фактическое выходное разрешение. Во время проверки не переключайте разрешение без необходимости.

На стороне клиента по возможности используйте отображение 1:1. Если изображение не помещается в окне, для работы его можно временно уменьшить, но перед фиксацией результатов следует восстановить исходный масштаб. Если клиент предлагает режимы «Вписать в окно» и «Растянуть», учитывайте разницу между ними: первый обычно сохраняет соотношение сторон, а второй может искажать окружности, шрифты и пиксельную сетку.

Подготовьте воспроизводимый тестовый экран

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

Если проверяется интерфейс iOS, предпочтительно экспортировать исходный снимок непосредственно из запущенного симулятора:

mkdir -p "$HOME/visual-baseline/source"
xcrun simctl io booted screenshot \
  "$HOME/visual-baseline/source/simulator.png"
sips -g pixelWidth -g pixelHeight -g profile \
  "$HOME/visual-baseline/source/simulator.png"
shasum -a 256 "$HOME/visual-baseline/source/simulator.png"

Хеш позволяет убедиться, что участники команды получили один и тот же файл. Однако визуально одинаковые изображения не обязательно должны иметь одинаковый хеш: повторное сохранение может изменить метаданные или способ кодирования.

Определите уровень проблемы по исходному снимку

Сначала загрузите созданный на облачном Mac файл simulator.png на локальное устройство, не открывая его через предварительный просмотр в мессенджере и не подвергая повторному кодированию. Просмотрите края текста, тонкие линии и градиенты в программе, способной отображать изображение пиксель в пиксель.

Если исходный файл чёткий, а изображение в удалённом рабочем столе размыто, изменять приложение не требуется: проблема находится на уровне передачи или клиентского масштабирования. Если исходный файл тоже размыт, проверьте коэффициент масштаба графических ресурсов, привязку макета к целым пикселям, способ растеризации текста и устройство, выбранное для создания снимка. Если цвет искажён только на одном локальном мониторе, сопоставьте цветовой профиль файла с локальными настройками дисплея, а не меняйте сразу значения цветов в макете.

Материалы можно сохранять в следующем порядке:

01-source.png        Исходное изображение, созданное непосредственно инструментом на облачном Mac
02-remote-view.png   Изображение, отображаемое удалённым клиентом
03-local-view.txt    Локальный экран, масштабирование и настройки клиента
04-system.txt        Параметры дисплея и цветовой среды облачного Mac

При сравнении изменяйте только одну переменную за раз. Например, сначала оставьте разрешение облачного Mac неизменным и переключайте только масштабирование клиента. Зафиксировав результат, переходите к другой глубине цвета или степени сжатия. Одновременное изменение нескольких параметров делает выводы невоспроизводимыми.

Устраните сдвиг цвета, не нарушая системную базовую конфигурацию

При проблемах с цветом сначала проверьте, содержит ли файл сведения о цветовом профиле. Команда sips -g profile позволяет быстро определить связанный с изображением профиль, но не доказывает корректность всей цепочки передачи. Если средство экспорта позволяет указывать выходное цветовое пространство, закрепите выбранный вариант в требованиях проекта и используйте одинаковые правила для автоматизированного и ручного экспорта.

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

Для полупрозрачных теней и тёмных градиентов также следует учитывать появление полос из-за удалённого сжатия. Увеличьте исходное изображение и проверьте переходы: если в оригинале они плавные, а полосы появляются только в удалённом сеансе, изменять градиент в приложении не нужно. Если заметные ступени присутствуют уже в оригинале, следует проверить разрядность ресурсов, параметры экспорта и процесс рендеринга.

Добавьте процедуру проверки в список передачи проекта

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

Перед передачей проекта как минимум убедитесь, что:

• Версия облачной системы и отчёт о дисплее сохранены.
• Для удалённого рабочего стола задано фиксированное разрешение, а клиент не использует непропорциональное растяжение.
• Симулятор или приложение создали исходный снимок напрямую.
• Размер изображения в пикселях, цветовой профиль и хеш зафиксированы.
• Перед выводом о размытости или сдвиге цвета отдельно проверены исходный рендеринг, передаваемое изображение и локальный дисплей.
• В описании дефекта указаны версия коммита, целевое устройство, настройки клиента и минимальные шаги воспроизведения.
• Все временные тестовые файлы перемещены из каталога результатов проекта и не попадут в официальный архив.

При выполнении этой процедуры на удалённом Mac от VMOak также разделяйте качество подключения и проверку результатов. В первом случае оценивается удобство работы, во втором — соответствие созданных на облачном Mac файлов установленным требованиям. Если проверка всегда начинается с исходных результатов, удалённое сжатие, масштабирование HiDPI и реальные дефекты рендеринга не будут ошибочно восприниматься как одна проблема.

Часто задаваемые вопросы