Дизайн мобильных приложений: почему мы работаем в @1x

[romanshamin]

… скрипт Size Marks, который при наших разрешениях даст нужные разработке размеры (но только в px, к сожалению)

Size Marks указывает размеры в пикселях, если разрешение документа равно 72 ppi. При любых других разрешениях размеры будут в поинтах.

[Simach]

Ого! Очень клёво!
Но, боюсь, многие работают именно с 72ppi и для работы в больших разрешениях меняют просто размер изображения.

[nemezis]

Zeplin.io не пользуетесь? 

[Simach]

пока не начинали, но знаем о нём.
Ждём проект, на котором попробуем.

[Louter]

Вместо радиобаттона для разрешений нужен чекбокс ибо где я работаю используются все 3 разрешения. Как? В исходниках так.

[Simach]

если в про iOS и у вас есть отдельные артборды под iPhone 5/6/6+. то вам хватит 1 пункта.

[vovkab]

Делаем в принципе все тоже самое, вот уже пару лет. (андроид)
Работаем со скетч фалом напрямую, оттуда сохраняем svg. Gradle плагин (https://github.com/avianey/androidsvgdrawable-plugin) нам нарезает все нужные размеры. Если у иконки есть ровные линии, то делается отдельный svg файл для hdpi, если сильно заметно.

Мне интересно что вы делаете с редлайнами для текста, например, то что показано на картинке «Пример работы скрипта Size Marks», не будет работать, так как не учитываются падинги для шрифтов. В примерe падинг сверху уже будет не 60, а 54, в добавок судя по картинке оба текстовых поля пересекаются друг с другом. Не знаю как в ios, в андроиде такого быть не должно :)

[Simach]

Если у иконки есть ровные линии, то делается отдельный svg файл для hdpi, если сильно заметно.

Не совсем понял этот момент, если у вас нарезаются из svg все нужные размеры, то зачем отдельный svg для hdpi? Проще же сразу png.
и вы наверное про не ровные линии?

По поводу текста, в спецификациях мы отдаём расстояние до базовой линии, на не лэйбла. Иногда даём картинку с сеткой вроде вот такой:



А картинка взята из примера самого Size Marks. =)

[vovkab]

> Не совсем понял этот момент, если у вас нарезаются из svg все нужные размеры, то зачем отдельный svg для hdpi?

Для того что бы избавиться от блюра. У вас даже пример есть с красным кружочком. С «фигурными» иконками, там особо смысла нет, так как мало что можно сделать, и там не так заметно.

> По поводу текста, в спецификациях мы отдаём расстояние до базовой линии, на не лэйбла. Иногда даём картинку с сеткой вроде вот такой:

Сетка это хорошо, но я не совсем понимаю как она помогает. Программисты сами все равно вычисляют коректный падинг?

[Simach]

Про «блюр» понятно, я скорее о svg, но не суть.

Да, сами. Тут ещё момент есть, что у Ps и Sketch иногда паддинги могу отличаться у одного шрифта. Мы просто иногда даём картинку с линиями, программисты её себе вставляют и расставляют по ней. Не самый удобный вариант, но пока так.

[vovkab]

> я скорее о svg

Тут есть 3 способа:
1. экспортировать как есть, но получим размытые картинки, обычно на hdpi
2. экспортировать все размеры в png и руками подправить иконки для hdpi, tvdpi и тд.
3. создать отдельную копию svg для hdpi, подвинуть ее по сетке что бы избавится от блюра.

Мне больше нравится третий вариант, так как он легче и к тому же у нас уже все нарезается из svg автоматически. В итоге из mdpi svg мы получим png для mdpi(x1), xhdpi(x2), xxhdpi(x3). А из hdpi.svg -> hdpi.png.

[Simach]

ах да, прошу прощения, я что-то не о том подумал.
Вы кладёте в проект 2 svg, а там уже всё самое делается.

я почему-то думал, что проще так:
сделать в mdpi и mdpi.svg -> mdpi/xhdpi/xxhdpi/xxxhdpi.png
а hdpi просто сразу из скетча -> hdpi.png

в общем не так важно, суть ясна)

[iago]

А как вы делаете 1-пиксельные линии? Очень часто не хочется, чтоб они растягивались до 2 пикселей на ретине…

[Simach]

как описано в статье, делаем внутреннюю тень в 0.5px, на ретине она становится 1px.

[Simach]

но если вопрос про иконки, то в таком случае прорабатываем @2x отдельно