Ещё раз об android и подготовке передачи приложения разработчику

Я работаю в e-legion и занимаюсь нарезкой графики под приложения. Для того, чтобы в конечном итоге оно выглядело так же, как и в дизайне, необходимо соблюдать правила. Я собрала основные из них в эту статью (android), чтобы поделиться своими знаниями и правилами нарезки ☺

Разрешения

xxxhdpi — максимальное разрешение

Спецификация

При создании спецификации необходимо убедиться, что элементы интерфейса стоят по сетке. Размер сетки для XXH 24 px, для остальных разрешений 12 px. (см. таблицу выше)

Все элементы меню мы не можем редактировать, только задавать цвет (данные для меню есть в material design)

Каждый элемент вписан в сетку.

Google рекомендует набор кеглей в SP (12, 14, 16, 20 и 34). SP — это универсальный размер шрифта, который рассчитывается:

x (pt)*3=n (sp)

Для чего это нужно

В material design размеры в sp и dpi, потому что разрешения (xxxhdpi, xxhdpi, xhdpi и др.) в android отличаются друг от друга, высота и ширина экрана у разных производителей телефонов отличаются, а sp и dpi универсальны, поэтому используем их.

Но рисуем всё равно в максимальном разрешении.

Нарезка

Создается папка «cut» (позже она передается разработчику), в ней папки под необходимые разрешения, например, XXH, XH, H. При подготовке элемента (icon_adress), он помещается в папку с соответствующим разрешением и одинаковым названием.

Размер элементов нарезки должен быть кратен 3 и записываться в dpi.

То есть, если размер иконки 240 px, то записываем размер 80 dpi

Аннотации

В аннотациях подписываем отступы, размеры графических элементов, размеры шрифтов.

*удобная программа для аннотаций specctr pro

Эти цифры — координаты элемента по осям Х и У. Они нужны для разработчика, чтобы вводить координаты элемента и он вставал на своё место. Понимаю, что размеров и линий очень много, можно запутаться. Я предлагаю ввести логику — размеры граф. элементов подписывать одним цветом или другим начертанием.

Пример аннотации шрифтов, цвета и размера разделителей.

Стандартные элементы, такие как bar, alert подписывать не нужно, максимум — цвет, но это всегда лучше уточниять у разработчика.

К стандартным элементам относятся: bar, alert, разделители.

Графические элементы (кнопки)

Всегда нужно учитывать, что у кнопок есть три состояния:

Не забывайте их прорисовать, иначе разработчик сделает это за вас

В android у графического элемента есть свойство тянуться во все стороны, если он состоит из одного цвета:

Пример отображения размера кнопки

Как кнопка выглядит в нарезке

Нарезаем проверяем макеты, граф. элементы, делаем аннотации и передаем разработчикам. Не забывайте делать ревью!

Если остались вопросы/пожелания/замечания, напишите мне le.ktrna@gmail.com

*Материалов на данную тему очень мало, если у вас они есть, то поделитесь, пожалуйста ;)