Pull to refresh
0
e-legion
Делаем приложения, которыми пользуются миллионы

Как дизайнеру подготовить передачу Android-приложения разработчику

Reading time 2 min
Views 39K
Во время нарезки графики под приложения часто возникает множество сложностей: от разрешения устройств и проблемы с сетками и рекомендациями Google до непосредственно передачи приложения разработчику. За 2 года я работала над дизайном более 10 приложений, научилась находить решения самых разных проблем и делать так, чтобы в конечном итоге приложение выглядело так же, как и в дизайне.
Об этом и пойдет речь под катом.




Разрешения




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

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


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

image

Мы не можем редактировать все элементы меню, можем только задавать цвет (данные для меню есть в material design)
Каждый элемент необходимо вписать в сетку. Google рекомендует набор кеглей в SP (12, 14, 16, 20 и 34). SP  —  это универсальный размер шрифта, который рассчитывается:
x (pt)*3=n (sp)

image

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


В Material Design размеры в sp и dp, потому что в Android разрешения, как и высота, и ширина экрана у разных производителей отличаются друг от друга, в том время как sp и dpi универсальны. Но рисуем всё равно в максимальном разрешении, потому что приложение будет тянуться по-разному, в зависимости от устройства.



Нарезка


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



Размер элементов нарезки должен быть кратен 3 и записываться в dp. То есть, если размер иконки 240 px, то записываем размер 80 dp.



Аннотации


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

Кстати, есть удобная программа для аннотаций specctr pro

image

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

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



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


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



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

image

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

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

И не забывайте делать ревью!

Если остались вопросы/пожелания/замечания, пишите в комментариях.

PS: Материалов на данную тему очень мало, если у вас они есть, то поделитесь, пожалуйста ;)
Tags:
Hubs:
+22
Comments 22
Comments Comments 22

Articles

Information

Website
www.e-legion.ru
Registered
Founded
Employees
101–200 employees
Location
Россия