Выход смартфонов iPhone 6 и 6+ внесло некоторую дезориентированность в ряды дизайнеров и программистов, ведь раньше можно было просто нарисовать один макет под iPhone 5 и пропорционально уменьшить в 2 раза при разметке под предыдущие устройства. Но теперь ситуация несколько изменилась: первопроходцы-программисты сетуют, что макет, красиво нарисованный и сверстанный под iPhone 6, выглядит абсолютно непривлекательно, нечитаемо и нетапабельно на iPhone 5, ведь его как раньше просто пропорционально уменьшили. IOS HIG по этому поводу конкретных советов не содержит, поэтому для дизайнеров сейчас особо остро стоит вопрос о том, сколько же на самом деле дизайнов интерфейсов нужно рисовать, чтобы охватить всю текущую линейку iPhone-устройств? Давайте разбираться.
Не многие принимают во внимание, но помимо пикселей iOS использует так же универсальные единицы — поинты (pt, point) и макет следует привязывать именно к ним. Раньше за дизайнеров эту задачу решали программисты: брали присланный дизайнером макет .psd под iPhone 5, делили все пиксельные значения на 2 и описывали в коде их теми самыми поинтами (в лучшем случае если не привязывали все жестко к пикселям). Но теперь этот кустарный способ не очень подходит для дизайнеров, ведь рисовать придется графику в максимальном разрешении, а это значит, что каждый экран будет размером по 1500-2000 px, что потребует огромное количество компьютерных ресурсов, особенно если дизайнер держит все экраны в одном исходнике. Поэтому теперь как никогда актуально идти по пути Android в плане единой единицы измерения, а именно пользоваться теми самыми pt.
По сути работу дизайнера можно свести к следующему: мы рисуем экраны в соотношении 1 px = 1 pt (point), т.е. 1 пиксель = 1 поинт. Берем холст размером 320х568 px (что соответствует пропорции iPhone 5 640х1136 px) и рисуем дизайн, обстоятельно следя за совместимостью с iPhone 4 (в нашем варианте его высота равна 480 px). Но как же быть с графикой? Она должна быть большим размером, гораздо больше базового 320x 568 px! Именно! И вот тут нам на помощь приходит Adobe Illustrator. Иллюстратор — это редактор векторной графики, а это означает, что любая графика, нарисованная в нем, может быть адаптирована под любой размер без потери качества. Можно поступать так: рисуем макет в указанном выше разрешении в Adobe Illustrator и при необходимости экспортируем его в .psd от Photoshop в плотности, выше базовой 72, а именно — 216. Все векторные слои будут преобразованы в растровые (никуда не денешься), но этого будет вполне достаточно, чтобы экспортировать графику во все необходимые плотности экрана. А как же заказчику показывать этапы дизайна? Ведь 320х568 px — это слишком малое разрешение, чтобы оценить качество макета! И вот тут на помощь нам снова приходит Adobe Illustrator: мы экспортируем макет для заказчика в… pdf. Зачастую такой файл весит в десятки раз меньше обычных растровых макетов и при этом полностью совместим с устройствами Apple. Все экраны или лишь какие вы захотите попадут в один файл и при первом же требовании клиента вы сможете легко и быстро продемонстрировать ему текущий этап работы.
Можно не усложнять себе работу, не тратить время на лишние действия и рисовать один общий макет дизайна приложения сразу в Adobe Illustrator под самую нижнюю плотность экрана iPhone и размечать для программистов размеры в pt.
А тем, кто еще не пробовал, но заинтересовался работкой дизайнов в Adobe Illustrator, очень советую зайти на эти страницы на Хабре: «UI-Ai: Рисуем интерфейс в Adobe Illustrator» и «Интеграция дизайна мобильных приложений. Часть 2: iOS, Windows Phone».
Автор: appsdesignru
