logo_byters

Как передать дизайн android‑разработчику

В мобильной разработке существует несколько типичных ошибок при передаче дизайн-макетов разработчику. Доходит до того, что макеты нередко передаются в устаревшем PSD формате, заставляя разработчика "ползать" с пипеткой. Для оптимизации процесса внедрения нового дизайна был написан гайд для внутреннего использования и в итоге перенесен сюда.

В общем случае дизайн должен лежать в zeplin проекте (или аналогичном онлайн сервисе). Все элементы должны иметь читаемые в веб-интерфейсе отступы (желательно кратные 4). Изображения должны быть доступны для экспорта.

Самый распространенный размер экрана android 360x640 dp (dp это "условные пиксели"). Верстать макеты, в принципе, можно в этих размерах, но надо все равно учитывать резиновую верстку (актуально для новых стандартов 18x9 и экранов с "челкой"), а так же на экране может находиться: статусбар, нижняя навигация (с кнопками назад, дом, меню), раскрытая клавиатура.

В дизайне alpha не должна быть использована для отображения цвета элемента. Например, если вам нужен серый текст, он не должен быть цвета #55000000, а должен быть указан без прозрачности, например #dddddd

Официальные гайды по Material-дизайну

Стили текста

Крайне желательно использовать стили текста из стандартного набора. Все дополнительные стили должны быть описаны отдельным документом. В дизайне все надписи должны принадлежать одному из стилей. Возможно наследование стилей.

Код неразрывного пробела \u00A0

Изображения

начиная с android 5, иконка push notification в status bar должна быть однотонной белой в png формате. форма задается alpha 0.

Предположим, нам надо добавить в приложение изображение. Изображение может быть векторное или растровое.

Векторное

Андроид не поддерживает svg в чистом виде, Необходимо конвертировать во внутренний формат android vector drawable. Есть неофициальный конвертер svg файлов в android vector drawable. Работает лучше официального, но не в 100% случаях, поэтому необходимо тестирование для каждого отдельного случая.

Векторные одноцветные белые иконки могут быть покрашены в необходимый цвет в коде через xml аттрибут tint или colorFilter в коде.

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

Интерфейс библиотеки стандартных векторных изображений в Android Studio

Растровое

Для разных разрешений экрана нужны изображения разного размера. Поэтому в приложении хранятся дубликаты одних и тех же изображений для разных разрешений экрана.

Множители разрешений изображений:

Это значит, что если в исходном дизайне у нас изображение image.png размером 100x100 пикселей, то нам нужны изображения 100x100 для mdpi, 150x150 для hdpi, 200x200 для xhdpi, 300x300 для xxhdpi, 400x400 для xxxhdpi.

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

Передавать эти изображения надо в архиве с следующей структурой:

структура файлов

оригинальное изображение

Все png изображения обязательно прогонять через TinyPng.

DPI калькулятор

Иконка приложения

512x512. Два изображения. Одно на фон, будет обрезаться системой. Другое на передний план

Ссылки

Дата: 2017.07.05