От одного дизайна к множеству экранов: более рациональный процесс работы с ресурсами экрана загрузки

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

Дизайн занимает мало времени; экспорт — это работа

Большинство экранов загрузки делаются намеренно простыми. Обычно там есть однотонный или слегка градиентный фон, логотип или символ приложения, а также, возможно, один вспомогательный визуальный элемент. Выбор такой композиции может занять несколько минут.

Настоящая стоимость проявляется позже, когда один и тот же дизайн должен корректно работать во всех средах. К типичным проблемам относятся:

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

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

Почему экраны загрузки сложнее, чем иконки приложений

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

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

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

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

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

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

Рабочий процесс, к которому стоит стремиться

В упрощенном виде идеальный процесс включает пять шагов:

1. Предоставьте исходное изображение или ресурсы брендинга.
2. Настройте способ их размещения: фон, размер логотипа, отступы.
3. Посмотрите превью результата на разных форматах экранов.
4. Сгенерируйте необходимые ресурсы для запуска приложения.
5. Вернитесь к разработке приложения.

Полные инструменты для дизайна, такие как Figma или Photoshop, конечно же могут справиться со всем этим и остаются лучшим выбором для создания дизайна с самого начала. Однако открывать полноценное приложение для дизайна только ради экспорта нескольких ресурсов — излишне. Для устранения этой проблемы существуют узкоспециализированные инструменты, которые обрабатывают только ту рутинную часть работы, что возникает после принятия решений по дизайну: вы загружаете визуальный материал, и он превращается в ресурсы, которые можно использовать в проекте.

Инструменты, которые не мешают

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

• регистрироваться на сайте
• подтверждать адрес электронной почты
• настраивать рабочее пространство
• давать название проекту
• выбирать план подписки
• проходить многоэтапную процедуру настройки

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

Почему обработка в браузере — это правильный стандарт

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

Обработка на стороне клиента имеет практические преимущества:

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

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

Даже небольшие проблемы требуют хороших инструментов

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

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

• генератор иконок приложений
• генератор экрана загрузки
• генератор скриншотов для App Store и Google Play

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

Основные выводы

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

Обработка изображений в браузере происходит быстрее, требует меньше ресурсов и не вынуждает хранить брендинг до выпуска на серверах сторонних поставщиков.

Связанные статьи

• Планирование обновления Expo SDK 58: iOS 27, React Native 0.88 и новые инструменты — Практический обзор бета-версии Expo SDK 58: какие изменения принесены для iOS 27 и React Native 0.88, какие функции являются экспериментальными и как безопасно протестировать обновление.
• Выбор языка в зависимости от типа задачи: уроки, полученные при портировании TypeScript на Go — Чему учит выбор Go в качестве компилятора для TypeScript относительно подбора инструментов под конкретные задачи, важности скорости работы инструментов и поэтапного портирования крупных кодовых баз.