logo_byters

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

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

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

В дизайне 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 калькулятор

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

достаточно png файла 192x192. Android studio может нарезать во все необходимые размеры. Необходимо учитывать, что начиная с android 7, иконки должны быть в том числе круглые.

Ссылки

Дата: 2017.07.05