Во время нарезки графики под приложения часто возникает множество сложностей: от разрешения устройств и проблемы с сетками и рекомендациями Google до непосредственно передачи приложения разработчику. За 2 года я работала над дизайном более 10 приложений, научилась находить решения самых разных проблем и делать так, чтобы в конечном итоге приложение выглядело так же, как и в дизайне.
Об этом и пойдет речь под катом.
![](https://habrastorage.org/r/w1560/files/8fa/e6f/250/8fae6f250b2c4414a23bb0100eefe9ef.png)
![](https://habrastorage.org/r/w1560/files/81f/a6e/5bc/81fa6e5bce9d41cd95760a9fe89312c9.png)
xxxhdpi — максимальное разрешение
Спецификация
При создании спецификации необходимо убедиться, что элементы интерфейса стоят по сетке. Размер сетки для XXH 24 px, для остальных разрешений 12 px. (см. таблицу выше)
![image](https://habrastorage.org/r/w1560/getpro/habr/post_images/b78/62a/53a/b7862a53afa3b757a04ea79372696ae9.png)
Мы не можем редактировать все элементы меню, можем только задавать цвет (данные для меню есть в material design)
Каждый элемент необходимо вписать в сетку. Google рекомендует набор кеглей в SP (12, 14, 16, 20 и 34). SP — это универсальный размер шрифта, который рассчитывается:
x (pt)*3=n (sp)
![image](https://habrastorage.org/r/w1560/getpro/habr/post_images/08d/168/983/08d168983acbdfa553909e76248de247.png)
Для чего это нужно
В Material Design размеры в sp и dp, потому что в Android разрешения, как и высота, и ширина экрана у разных производителей отличаются друг от друга, в том время как sp и dpi универсальны. Но рисуем всё равно в максимальном разрешении, потому что приложение будет тянуться по-разному, в зависимости от устройства.
![](https://habrastorage.org/r/w1560/files/84f/851/0f4/84f8510f4c8b45a7a6335aac173d620f.png)
Нарезка
Создается папка «cut» (позже она передается разработчику), в которой, в свою очередь, создаются папки под необходимые разрешения, например, XXH, XH, H. После создания элемент помещается в папку с соответствующим разрешением и названием.
![](https://habrastorage.org/r/w1560/files/937/f38/c77/937f38c773aa42f2b2f0f51d7f169f4b.png)
Размер элементов нарезки должен быть кратен 3 и записываться в dp. То есть, если размер иконки 240 px, то записываем размер 80 dp.
![](https://habrastorage.org/r/w1560/files/e0a/32d/f84/e0a32df847884f238705755d39c37bd8.png)
В аннотациях подписываем отступы, размеры графических элементов, размеры шрифтов.
Кстати, есть удобная программа для аннотаций specctr pro
![image](https://habrastorage.org/r/w1560/getpro/habr/post_images/b78/62a/53a/b7862a53afa3b757a04ea79372696ae9.png)
Эти цифры являются координатами элемента по осям Х и У. Они нужны для разработчика, чтобы он вводил координаты элемента и элемент вставал на своё место. Понимаю, что размеров и линий очень много и можно запутаться. Я предлагаю ввести логику : размеры графических элементов подписывать одним цветом или начертанием.
Стандартные элементы (bar, alert, разделители) подписывать не нужно, максимум — выделить цветом, но это всегда лучше уточнить у разработчика.
Пример аннотации шрифтов, цвета и размера разделителей:
![](https://habrastorage.org/r/w1560/files/326/0b0/685/3260b0685eb749448c04b443890a5df2.png)
Графические элементы (кнопки)
Всегда нужно учитывать, что у кнопок есть три состояния. Не забывайте их прорисовать, иначе разработчику придется делать это за вас.
![](https://habrastorage.org/r/w1560/files/967/4bf/6c6/9674bf6c6a2144599d8f45bac032b957.png)
В Android у графического элемента есть свойство тянуться во все стороны, если он состоит из одного цвета:
![image](https://habrastorage.org/r/w1560/getpro/habr/post_images/3c3/7a6/9f3/3c37a69f31bfcbc7a9bdb33588c15179.png)
Так кнопка выглядит в нарезке:
![image](https://habrastorage.org/r/w1560/getpro/habr/post_images/5a0/306/c2e/5a0306c2e91f0cec81bc46e508b5defd.png)
Нарезаем, проверяем макеты, графические элементы, делаем аннотации и передаем разработчикам.
И не забывайте делать ревью!
Если остались вопросы/пожелания/замечания, пишите в комментариях.
PS: Материалов на данную тему очень мало, если у вас они есть, то поделитесь, пожалуйста ;)
Об этом и пойдет речь под катом.
![](https://habrastorage.org/files/8fa/e6f/250/8fae6f250b2c4414a23bb0100eefe9ef.png)
Разрешения
![](https://habrastorage.org/files/81f/a6e/5bc/81fa6e5bce9d41cd95760a9fe89312c9.png)
xxxhdpi — максимальное разрешение
Спецификация
При создании спецификации необходимо убедиться, что элементы интерфейса стоят по сетке. Размер сетки для XXH 24 px, для остальных разрешений 12 px. (см. таблицу выше)
![image](https://habrastorage.org/getpro/habr/post_images/b78/62a/53a/b7862a53afa3b757a04ea79372696ae9.png)
Мы не можем редактировать все элементы меню, можем только задавать цвет (данные для меню есть в material design)
Каждый элемент необходимо вписать в сетку. Google рекомендует набор кеглей в SP (12, 14, 16, 20 и 34). SP — это универсальный размер шрифта, который рассчитывается:
x (pt)*3=n (sp)
![image](https://habrastorage.org/getpro/habr/post_images/08d/168/983/08d168983acbdfa553909e76248de247.png)
Для чего это нужно
В Material Design размеры в sp и dp, потому что в Android разрешения, как и высота, и ширина экрана у разных производителей отличаются друг от друга, в том время как sp и dpi универсальны. Но рисуем всё равно в максимальном разрешении, потому что приложение будет тянуться по-разному, в зависимости от устройства.
![](https://habrastorage.org/files/84f/851/0f4/84f8510f4c8b45a7a6335aac173d620f.png)
Нарезка
Создается папка «cut» (позже она передается разработчику), в которой, в свою очередь, создаются папки под необходимые разрешения, например, XXH, XH, H. После создания элемент помещается в папку с соответствующим разрешением и названием.
![](https://habrastorage.org/files/937/f38/c77/937f38c773aa42f2b2f0f51d7f169f4b.png)
Размер элементов нарезки должен быть кратен 3 и записываться в dp. То есть, если размер иконки 240 px, то записываем размер 80 dp.
![](https://habrastorage.org/files/e0a/32d/f84/e0a32df847884f238705755d39c37bd8.png)
Аннотации
В аннотациях подписываем отступы, размеры графических элементов, размеры шрифтов.
Кстати, есть удобная программа для аннотаций specctr pro
![image](https://habrastorage.org/getpro/habr/post_images/b78/62a/53a/b7862a53afa3b757a04ea79372696ae9.png)
Эти цифры являются координатами элемента по осям Х и У. Они нужны для разработчика, чтобы он вводил координаты элемента и элемент вставал на своё место. Понимаю, что размеров и линий очень много и можно запутаться. Я предлагаю ввести логику : размеры графических элементов подписывать одним цветом или начертанием.
Стандартные элементы (bar, alert, разделители) подписывать не нужно, максимум — выделить цветом, но это всегда лучше уточнить у разработчика.
Пример аннотации шрифтов, цвета и размера разделителей:
![](https://habrastorage.org/files/326/0b0/685/3260b0685eb749448c04b443890a5df2.png)
Графические элементы (кнопки)
Всегда нужно учитывать, что у кнопок есть три состояния. Не забывайте их прорисовать, иначе разработчику придется делать это за вас.
![](https://habrastorage.org/files/967/4bf/6c6/9674bf6c6a2144599d8f45bac032b957.png)
В Android у графического элемента есть свойство тянуться во все стороны, если он состоит из одного цвета:
![image](https://habrastorage.org/getpro/habr/post_images/3c3/7a6/9f3/3c37a69f31bfcbc7a9bdb33588c15179.png)
Так кнопка выглядит в нарезке:
![image](https://habrastorage.org/getpro/habr/post_images/5a0/306/c2e/5a0306c2e91f0cec81bc46e508b5defd.png)
Нарезаем, проверяем макеты, графические элементы, делаем аннотации и передаем разработчикам.
И не забывайте делать ревью!
Если остались вопросы/пожелания/замечания, пишите в комментариях.
PS: Материалов на данную тему очень мало, если у вас они есть, то поделитесь, пожалуйста ;)