Сколько дизайнов интерфейсов на самом деле нужно рисовать для iPhone 4, 5, 6 и 6+?

Выход смартфонов 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. Можно рисовать дизайн в Photoshop, но этот вариант менее адаптивный даже с учетом смарт-объектов. В любом случае, какой бы графический редактор вы не предпочли, вполне достаточно позаботиться о возможности трехкратного масштабирования графики для iPhone 6 Plus (@3x) и разметки макетов в pt.

А тем, кто еще не пробовал, но заинтересовался работкой дизайнов в Adobe Illustrator, очень советую зайти на эти страницы на Хабре: «UI-Ai: Рисуем интерфейс в Adobe Illustrator» и «Интеграция дизайна мобильных приложений. Часть 2: iOS, Windows Phone».

Similar posts

Ads
AdBlock has stolen the banner, but banners are not teeth — they will be back

More

Comments 28

    0
    Нефтапабельные интерфейсы. Хм. Что-то в этом есть.

    По сабжу — статья хорошая, но слишком много фраз вроде «я рекомендую, делай, как я». Очень напрашивается добавление в хаб «Я пиарюсь» =)
      +1
      Пардон, пишу как в блоге. Режет глаз? Сейчас уберу :)
    • UFO just landed and posted this here
        +1
        Не увеличиваются потому я тоже не очень поняла как знакомые программисты надеялись методом уменьшения макета адаптировать с 6 на 5. Стала интересоваться вопросом и оказалось что никто не знает что делать и как верстать-размечать. Пришлось разбираться самой.
        • UFO just landed and posted this here
        +1
        Есть такой редактор, Sketch называется…
          +2
          Третий раз слышу про него за последние два дня, видимо действительно хорошая штука. Буду изучать, спасибо :)
            0
            Скетч — это тот инструмент, с которым о фотошопе и иллюстраторе для мобайл дизайна можно вообще забыть.
              +1
              Неужели он настолько мощный? Ох, заинтересовали, скачаю в отпуске триал!) Меня только очень волнует может ли моим готовым макетом пользоваться программист или он тоже должен будет Скетч купить?
                0
                должен купить Скетч
                  +1
                  Поняла, спасибо!
                    0
                    А вы никогда не задумывались, что программист не должен уметь пользоваться графическим редактором? Мало того: в его работе потребность в графическом редакторе должна возникать как можно реже.
                    Я как программист, который умеет и код писать, и приложения рисовать, очень радуюсь, когда мне дизайнер даёт ресурсы уже нарезанные как надо, плюс руководство со скриншотами. Но таких правильных дизайнеров мало, к сожалению.

                    Скетч позволяет очень быстро и легко нарезать всё что нужно. Его slices, в отличии от slices в фотошопе, по сути есть объекты, как и слои. Это сильно упрощает нарезку и экспорт.

                    Так что программист не должен покупать Скетч.
                      0
                      Кстати с философией что программист не должен уметь пользоваться графредактором я впервые встретилась менее года назад, до этого предложения разметки резко отвергались со словами «Мы сами нарежем, спасибо, Фотошоп у нас есть», а 95% знакомых программистов когда увидели мой размеченный исходник отнеслись к нему как к диковинному чуду. Даже не знаю с чем это связано.
                        +1
                        Так именно то, о чем я написал:
                        Но таких правильных дизайнеров мало, к сожалению.

                        Это не баг, это фича! © =)
              0
              Вы открыли мне глаза, спасибо, как раз нужно было скетчи накидать :)
                0
                Стоит упомянуть, что доступен он только для MacOS.
                0
                все что описано в статье, можно сделать в одном редакторе – Sketch, обязательно обратите внимание. Из основных плюсов – супер удобный экспорт элементов во всех размерах @1x, @2x, @3x буквально в один клик!
                  +1
                  про презентацию пока не будем. это, в общем-то, дело вкуса — в pdf подавать или картинки посылать. я предпочитаю давать, например, «чистые» джпеги + адаптацию на устройство.

                  в остальном я так и не понял зачем использовать иллюстратор. графика сейчас делается средствами векторных шейпов и layer styles в фотошопе, которые спокойно масштабируются. всё это нарезается и размечается потом png express (или аналогами). если нужно использовать какую-то растровую картинку, то её можно положить в отдельный файл, заранее позаботившись о размере\пропорциях, и слинковать с макетом.

                  я делаю макет для iphone 5 (200%), png express сам масштабирует 100% и 300% (HD5.5), измерения все в dp\sp (=pt =px no retina, 2px retina, 3px retina HD). таким образом и показывать мне удобно, и все нужды удовлетворяются. в иллюстраторе, по-моему, даже нет инструментов для обмерки. совершенно не рационально убивать кучу времени на ручную обмерку.

                  я пользователь pc, у меня скетча нет, если что :-)
                    +2
                    Пдф удобнее например тем что заказчик на телефоне не открыват кажду отлельную картинку, а потом масштабирует ее, а отправые пдф уже в лирину размера его устройства и листает его вверх-вниз и видит сразу все экраны. Особенно это актуально если высота экрана получилась больше 1136. Пнг смасштабируется по высоте и станет мелким, а пдф займет ширину 100% и будет представительно выглядеть. В общем-то мой совет основан на восторге последних заказчиков таким методом :)

                    А Иллюстратор удобнее тем что, например, сменить цвет в приложении в любое количество экранов я могу в один клик, причем как в иконках, так и в любой графике и текстах. А у вас сколько времени займет? Сами иконки можно рисовать в пару щелчков мышью, задавать кучи парамеров, еще множество возможностей и плюс копеечный вес. Я 7 лет рисовала интерфейсы в Фотошопе и мне тоже есть с чем сравнивать)

                    А пнг-экспресс я тоже пользуюсь) как раз сейчас макеты размечаем :)
                      0
                      По пэдээфу убедили. Однако не сильно трудозатратно открыть акробат и скомбинировать там картинки в пару кликов :-)

                      Смена цвета в приложении (я так понимаю, речь идёт о шрифтах или иконках, покрашенных в основной цвет) — это задача для меня специфическая. Обычно цвет утверждается заранее, так как логично идти по цепочке «Фирменный стиль → Дизайн интерфейса», а не «Дизайн интерфейса → Фирменный стиль». К чему я это говорю? К тому, что это не будет являться лично для меня аргументом в сторону иллюстратора :-) Не часто мне такое нужно делать.

                      А так вы, конечно, правы — в фотошопе быстро поменять цвет по всей приложухе не получится. Я думаю, адоб ближайшее время переведёт множество характеристик в переменные. Мне кажется, это лишь вопрос времени.

                      Вывод в статье — он не панацея, он не однозначен и не каждому он подойдёт. Он очень смел.
                        +1
                        Дело совсем не в переменных — в иллюстраторе их не больше, чем в фотошопе, а дело в команде «выбрать подобные», которая позволяет, например выбрать все объекты с данной заливкой, обводной, и т. д, и одним махом поменять им что нужно.

                        Вообще иллюстратор с его иерархическими структурами объектов — это эталон графических редакторов имхо.
                      +1
                      Извините, пожалуйста, за ошибки, с телефона не углядела(
                        0
                        Спасибо за наводку на png express. А какие еще хорошие ( а может и бесплатные) аналоги существуют?
                        0
                        Ну это же не андроид, где одни и те же лэйауты принято натягивать на любой размер экрана, от 3,5" до 6".
                        Вёрстка на iPhone 4 и iPhone 6+ отличается не только масштабом элементов, у последнего экран более чем в два раза больше, там можно разместить в два раза больше контролов, грубо говоря.
                          +1
                          Если дизайнеру сложно работать с разрешением в FullHD в век 4к мониторов, то гнать его на повышение квалификации или апгрейд железа!
                            0
                            С статье речь была не «о сложно», а о «не нужно» :) если можно тратить В несколько раз меньше ресурсов и сделать работу быстрее, то почему бы и не делать. А еще есть такие люди как новички, в которых еще нет топовых сборок компьютеров.
                            0
                            А кто нибудь вообще может объяснить, зачем рисовать векторные интерфейсы в фотошопе, когда есть иллюстратор? Всю жизнь в нем рисую макеты.

                            По статье — я думал будет про проектирование и юзабилити применительно к разным габаритам экрана, а оказалось — бла бла бла, рисуйте в иллюстраторе :)
                              0
                              Вопрос в заголовке был задан конкретный. На него был дан конкретный ответ с рекомендациями.

                            Only users with full accounts can post comments. Log in, please.