Ведущий Android-дизайнер и дизайн-интегратор
0,0
рейтинг
19 июня 2013 в 12:20

Разработка → Интеграция дизайна мобильных приложений. Часть 1: Android из песочницы



Этот доклад я прочитал на Dribbble Meetup 2013, который прошел в Москве в День космонавтики. В нём описан мой процесс интеграции дизайна — то есть в каком виде передавать приложение от дизайнера к разработчику мобильных приложений. Выбор интсрументов, которые я использую в работе, и сам процесс сформировались опытным путём, методом проб и ошибок. Надеюсь, он поможет сохранить вам немного времени и избавит хотя бы от части рутинной работы. Так как презентация содержит достаточно большое количество слайдов, я решил разбить материал на две части. Первая часть — интеграция дизайна под платформу Android. Вторая — под iOS и Windows Phone, а также упомяну про Samsung Bada. Дальше — много картинок.


Проблематика


А начну я свой рассказ с момента, когда мы уже нарисовали макеты нашего приложения. Всё выглядит идеально, всё выверено до пикселя.

image

Мы отдаем макеты в разработку, а на выходе получаем ЭТО.



Почему?! Ответ очевиден. Виноваты программисты, которые криво всё запрогали… На самом деле, НЕТ! Еще до начала работы программистов, дизайнер должен передать им спецификацию дизайна (ТЗ), которую дизайнер обычно делает спустя рукава, или что еще хуже, вообще не делает. Поэтому программист и вынужден делать всё на своё усмотрение, раз нету четкой инструкции.


Специфкация дизайна (ТЗ)


Итак, под спецификацией дизайна я понимаю набор файлов, которые дизайнер передает программистам. По сути, их создание и есть процесс интеграции дизайна. У Microsoft и Google это называется blue, red, green lines. У меня это три папки: Metrics, Fonts, Res.



Составлению ТЗ надо уделить должное внимание, т.к. именно это видит конечный пользователь вашего продукта, а не макеты дизайнера.


Android


Рассмотрим интеграцию дизайна на примере 4-х основных в России мобильных платформ. И начну я с самого тяжелого для понимания… Android




Краткая теоретическая часть


Немного теории для понимания дальнейшего процесса. Ни для кого не секрет, что экраны телефонов имеют разные разрешения и разные диагонали, то есть экраны характеризуются разной плотностью. Она измеряется в точках на дюйм. Выделяют 4 основных категории плотности экрана для Android-устройств: LDPI, MDPI, HDPI, XHDPI, XXHDPI (пока не берём в расчёт). Поэтому, чтобы элементы интерфейса имели одинаковый физический размер на экранах разных устройств, компания Google ввела абстрактную единицу измерения — DP.



Не будем вдаваться в подробности откуда появляются эти цифры, а для себя запомним, что один dp равен одному физическому пикселю для экранов с плотностью MDPI. Соответственно, для XHDPI-экранов, 1 dp будет равен 2 px (такая плотность, например, у Google Nexus 4).

Практическая реализация


Теперь приступаем к практической реализации. Дальше будет описан мой процесс работы, который сформировался опытным путем. Надеюсь, он будет вам полезен.


Metrics

Итак, папка Metrics должна содержать файлы с размерами элементов, отступами между ними и от края экрана, цвета однотонных элементов — то, что делается программно (например, разделители).

Все размеры для разработчиков должны быть указаны в DP.



Я делаю макеты для XHDPI-экранов (768x1280, Nexus 4). А как мы помним, для XHDPI 1 dp = 2 px. Но так как Photoshop, естественно, не понимает dp, а работает с пикселями, то сначала я делаю так, чтобы 1 dp ровнялся 1 px. Заходим в Image, жмём Image Size, и выставляем значение 50%. Готово, теперь 1 dp = 1 px.



Можно приступить, так сказать, к «образмериванию» макета. Делать это вручную было очень утомительно, и недавно мне попалось на глаза очень полезное раcширение для Photoshop.

PNG EXPRESS — платное расширение, стоит 29 баксов. Но оно реально того стоит. Для Photoshop, начиная с версии CS5. Оно позволяет делать много полезных вещей, но я использую его, именно, для «образмеривания».




Пример
Шаг 1. Допустим, нам надо указать размер между иконкой X (удалить) и текстом Discard.
Шаг 2. Просто выделяем эти два слоя в Photoshop и в PNG EXPRESS жмем Margins.
Шаг 3. Расширение само нарисует размеры. Если размер получился неверным, наш дизайнерский косяк, редактируем его как обычный текстовый слой Photoshop.



Хоть мы получаем не полностью автоматизированный процесс, всё же это расширение экономит кучу времени.


Fonts

Папка Fonts должна содержать файлы со всем, что касается шрифтов: размер, цвет, начертание, Photoshop-стили и т.д. Я вынес ее отдельно от размеров, чтобы программистам было легче разобраться в таком большом обилии выносок, тем самым сократив количество ошибок.



Все размеры шрифтов должны быть указаны в SP

1 SP = 1 DP, если в настройках размер шрифта операционной системы установлен по умолчанию. Если у пользователя проблема со зрением, он может в настройках системы увеличить шрифт. Если вы задали размер шрифта в SP, то ваше приложение подстроится под пользователя и также увеличит шрифт. Если в других единицах, то шрифт останется неизменным.

Пример
Шаг 1. Если нам надо указать шрифт у кнопки Done, то
Шаг 2. Выделяем этот слой в Photoshop и в PNG EXPRESS жмем Spec Font Features.
Шаг 3. Получили полное описание шрифта.



Опять сэкономили кучу времени.


Resources

Папка Res должна содержать ресурсы графики для вашего приложения. Это 4 подпапки для каждой плотности экрана.



Для этого я использую другое расширение.
Cut & Slice me — бесплатное расширение для Photoshop. Только для CS6. Оно позволяет делать всю эту работу в один клик.



Изначально наш PSD-макет должен быть для XHDPI.

Пример
Шаг 1. Нам надо нарезать иконки для нашего приложения.
Шаг 2. Каждую иконку помещаем в папку, в конец названия которой добавляем @. Таким образом, скрипт определяет, что эту папку надо нарезать.
Шаг 3. Переходим во вкладку Android, жмем Cut all assets.
Шаг 4. Расширение автоматом нарезает наши иконки для 4-х нужных плотностей экрана и помещает их в соответствующие папки.



Оставшиеся две кнопки в Cut & Slice me для нарезки из выбранном подпапки и текущего выбранного слоя.

Иногда возникает проблема «мыльных» пикселей, то есть когда иконка не попадает в пиксельную сетку при ресайзе. Поэтому надо пройтись по папкам, просмотреть качество выполненной скриптом работы. Если необходимо, поправить вручную. Опять сэкономили кучу времени.


9.PNG

И еще про графику. Все кнопки и плашки для Android нарезаются не фиксированного размера, а делаются «резиновыми».



Для этого используется формат 9.png. Делаюся такие файлы из обычных png в NinePatchEditor. По сути, к исходной картинке добавляется с каждой стороны еще один пиксель, залитый черным цветом. Черный пиксель слева отвечает за то, как будет «тянуться» ваша картинка по вертикали, сверху — за горизонталь. Пиксель справа и снизу — за размещение контетна внутри кнопки.



Всё!




Продолжение: Интеграция дизайна мобильных приложений. Часть 2: iOS, Windows Phone
@30PP0
карма
21,0
рейтинг 0,0
Ведущий Android-дизайнер и дизайн-интегратор
Реклама помогает поддерживать и развивать наши сервисы

Подробнее
Спецпроект

Самое читаемое Разработка

Комментарии (40)

  • +1
    Если бы такие макеты приходили, я бы перестал матюкаться на редактор для фотографий и требовать перерисовать в Fireworks.

    А для nine-patch Вы тоже нашли какое-то расширение? Какие есть альтернативы вот этой проге http://habrahabr.ru/company/alee/blog/136667/
    • 0
      Нет, работу с nine-patch пока не удалось автоматизировать. Работаю в этом направлении, но пока NinePatchEditor — лучшее решение.
      • +2
        Я один делаю nine-patch в фотошопе и переименовываю потом?
        • 0
          Я делаю также, но ищу альтернативу, в фотошопе уж очень нудно это делать.
      • 0
        png express делает это
        www.youtube.com/watch?v=p8Mp8QCG3nk
    • +1
      Как вариант android-ui-utils.googlecode.com/hg/asset-studio/dist/nine-patches.html
      Не автоматизация, но удобно и наглядно (и там еще всякие разные штуки есть кроме Nine-patch)
  • 0
    Мое мнение, которое естественно может не совпадать с большинством, в том, что не стоит грузить дизайнеров лишними техническими заморочками.
    Хотя полностью согласен, что получать полностью готовый к «верстке» пакет дизайна очень приятно.
    • +2
      Изначально дизайнер — инженерная профессия. В некоторых отраслях это до сих пор так. Например, дизайнер кузовов автомобилей обязан знать аэродинамику, материалы и тех. процессы. Я считаю, что настоящий дизайнер приложениц под андроид обязан знать особенности платформы и уметь создать нужный ему лейаут программно без посторонней помощи. Без этих навыков человек ничего кроме фигни не сделает. Дизайнер — это НЕ художник.
  • +1
    А я думаю наоборот, что в дизайне под Android именно (в iOS вроде не так актуально), дизайнер должен создавать интерфейс именно с учетом специфики платформы.
    Основное — думать в dp, а не px. Надо сразу представлять то, что ты создаешь, как бы в «резиновом» дизайне: оно должно качественно выглядеть на всём многообразии экранов девайсов.
    • +1
      Поэтому я решил вникнуть в технические заморочки. Правда это переросло в то, что я теперь пишу свое приложение :) Надеюсь, осенью-зимой зарелизить в Google Play.
    • 0
      оно должно качественно выглядеть на всём многообразии экранов девайсов
      Несомненно! Цель одна, а пути ее достижения у всех свои.

      За статью спасибо. Интересно было почитать.
  • 0
    Спасибо за отличную статью, давно искал подобную подборку материала для нашего дизайнера. Ждем того же для iOS :)
  • +1
    если данной статьей будут вдохновляться все дизайнеры/проектировщики, которые будут отдавать мне шаблоны приложений, то я стану одним из самых счастливых Андроид девелоперов в мире. Труд о том, как подружиться со своим проджект дизайнером и сэкономить друг другу кучу времени и нервов.
  • 0
    Спасибо за статью, давно ждала видео или расшифровки доклада с meetup. Отдельное спасибо за png express, это невероятно облегчит мне жизнь как дизайнеру, так как писать все эти комментарии вручную был адов труд. Жду статью про iOs.: )
  • 0
    Скажите, для FullHD экранов вы тоже используете xhdpi-изображения?
    • 0
      Начинать пока надо, однозначно, с XHDPI, разрешение непринципиально. Я предпочитаю 768x1280 для Nexus 4, чтобы сразу тестировать дизайн на устройстве. Дизайнить под XXHDPI (1080x1920) сейчас рано, т.к. процент девайсов согласно статистике 1,3%, а время на подготовку ресурсов тратиться будет много, т.к. инструментов для автоматизации процесса нету на данный момент. Если разобрать apk, например, последнего приложения Google Keep, то Google пока не поддерживают xxhdpi устройства, ограничиваясь только иконкой приложения.
  • +3
    При всей моей нелюбви к башоргру
    Ошибка: робот погибает при попадании в него гранаты (именно от попадания, а не от взрыва) Д — дизайнер, П — программист.
    Д: программисты всё сломали! почему так получается?!
    П: естественно так получается! потому, что у гранаты масса 100 кг! зачем вы это сделали?
    Д: да?! а чтобы граната в воде тонула!
    П: а почему она с нормальной массой не тонет?
    Д: а потому что у воды плотность большая! (прим.: больше, чем у ртути)
    П: а почему плотность такая большая?!
    Д: а чтобы ящики деревянные плавали!
    П: а почему они иначе не плавают?!
    Д: а потому что у них масса 50 кг!
    П: а зачем такая масса?!
    Д: а иначе они некрасиво разваливаются!
  • НЛО прилетело и опубликовало эту надпись здесь
    • +1
      дизайнеру про sp тоже надо знать, напишешь случайно в пикселях размер шрифта в комментариях и у разработчиков паника.
  • 0
    Хорошо написано. Правильно. Но, позвольте уж и в огород разработчиков бросить камень- рисуешь отступы, подбираешь размер и цвет шрифтов- обращаешь внимание на это, а на выходе смотришь- шрифт везде один, отступы как бог на душу положит и разработчик делает удивленные глаза- а я думал это не важно. Собственно я кчему- статьи это хорошо, но без качественной, постоянной, двусторонней связи дизайнер-разработчик ничего толкового не получится… Так давайте же выпьем за союз и поддержку дизайнеров и разработчиков. Ой, что это я :)
  • +1
    xxhdpi забыли — 1dp = 3px.

    А вообще, старайтесь меньше рисовать и больше пользоваться векторными drawables — это и вам кучу времени сэкономит (после успешного изучения, конечно же) и приложения будут намного меньше, а пользователи с ограниченным трафиком — счастливее. Большинство современных дизайнерских изысков легко делаются через вектор.
    • 0
      Спасибо за совет, обязательно буду копать в этом направлении.
      • 0
        Я как-то раз делал порт иОС приложения, почти всю графику удалось перенести в вектор — кнопки, заливки для фонов и т.д. Один раз сделал и забыл (:
    • 0
      А векторная прорисовка несильно жрёт ресурсы девайса на отрисовку интерфейса? Просто я слышал, что Windows Phone использует для отрисовки UI системы именно статические картинки, чтобы девайсы не тормозили.
      • 0
        Результат рендеринга кэшируется — это раз, почти все операции аппаратно ускорены с помощью GPU — это два. В самом Android почти вся графика — векторы. Только иконки битмапные, так как набор векторных комманд сильно ограничен.
  • +1
    Скажите, мне одному режет глаза вот это:


    Все размеры нечетные.

    17sp:
    ldpi  — 12.75px
    mdpi  — 17px
    hdpi  — 25.5px
    xhdpi — 34px

    23sp:
    ldpi  — 17.25px
    mdpi  — 23px
    hdpi  — 34.5px
    xhdpi — 46px

    и так далее…

    Мне помогала эта табличка:
    image

    Взята из статьи Everything is a grid.
    • 0
      А в чём недостаток 17sp и 23sp, кроме того что в px значения некрасивые. И в чём практический профит подбирать целые значения?
      • 0
        Кстати, у гугола есть набор рекоммендуемых размеров, величин отступов и т.д. Пользуйтесь ими (:
        • 0
          Это безусловно. Просто современный дизайн приложений становится сильно завязан на типографике вместо скеоморфизма. Поэтому шрифтами приходится играться :)
          • 0
            Посмотрите серию Android Design In Action, там часто рассказывают про типографику, помню даже целый эпизод по вопросу был.
            • +1
              Я там даже в одном из недавних выпусков на слайдах засветился ;)
              • 0
                )
    • 0
      меня скорее смущает использование тут sp в принципе, ведь при увеличении шрифта в настройках (в чём, собственно, и есть весь смысл sp) что верхний, что нижний текст влезать перестанут и будет ужас-ужас
  • 0
    -
  • 0
    Вот еще полезна тулзовина
    github.com/amtvsn/Version-Exporter
  • 0
    1. Спасибо за отличную статью и ее продолжение.
    2. Сколько дополнительно требуется времени на подготовку макетов в таком виде без дополнительных расширений?
  • 0
    По ощущениям, раза в 2 больше времени. Но самое большое преимущество в том, что расширения «убивают» монотонную работу, где мозг не работает. А это именно то, из-за чего дизайнеры и не любят делать ТЗ — это просто очень скучно и занудно.
  • 0
    Я правильно понимаю, что в реальной разработке не используют сложные градиенты (которые нельзя тянуть)?
    Вообще должен ли дизайнер учитывать технические нюансы платформы (опять же вопрос практический)?
    • 0
      можно вроде было потянуть его в двух местах.
    • 0
      Да, я в своих проектах стараюсь их избегать. Градиент можно тянуть с помощью 9.png, но тогда надо задавать область, которую надо тянуть, максимально большой, чтоб градиент не образовывал «лесенку». Либо рисовать градиент программными средствами. Тут всё зависит от реальной задачи.
      Да, технические нюансы дизайнер должен знать, чтоб не создавать проблем для разработчиков своим «полётом дизайнерской фантазии».

Только зарегистрированные пользователи могут оставлять комментарии. Войдите, пожалуйста.