Обучение ui/ux дизайну

Как улучшить процесс разработки дизайна под Android в Sketch 3

Разработка дизайна под Android-программы приносит массу удовольствия, а временами даже счастья. Но весь данный кайф продолжается ровно до того времени, пока вы не возьмете ваше новое красивое приложение, на полноценную шлифовку которого у вас ушло множество часов, и не экспортируете исходники.

Экспорт исходников готовой программы под Android — это, наверное, наиболее монотонное занятие, каким лишь может заняться дизайнер современных мобильных приложений.

Я не один год искал методы усовершенствовать данную рутину. И, похоже, до сих пор каждый дизайнер сталкивается с аналогичной проблемой: даже сегодня нет идеального решения. Существуют лишь методы чуть лучше прочих.

Мой метод, как уже говорилось, немногим лучше. Это наиболее быстрый способ, который мне пока что удалось найти для Android в Sketch, правда и он не без недостатков.

Настройте файл Sketch

Год назад я всю свою мобильную работу над Remind перенес в Sketch по различным причинам. В случае если вы пока не испытали данный продукт, я очень рекомендую вам его скачать и поскорее попробовать.

Для меня лучше всего работает создание отдельной странички в конце или в начале моего проекта в Sketch именно для исходников, которые нужно экспортировать.

Копируйте в данную страницу все исходники для будущего экспорта. Так, у вас будет очень удобный набор всех картинок для будущего приложения.

Кроме того, вы сможете оперативно выделить сразу все исходники, чтобы указать необходимые настройки для экспорта.

Как улучшить процесс разработки и дизайна под Android в Sketch 3

Видите, я тоже разделяю исходники при помощи артбордов для того, чтобы упорядочить материалы по разделам приложения, либо даже релизам.

Настройки для экспорта

В Remind мы все рисуем в масштабе 200% (xhdpi) и затем уменьшаем. Данный прием работает превосходно, однако требует большой продуманности и внимательности.

Здесь каждый выбирает для себя. Я же рекомендую рисовать весь дизайн в 100% (mdpi), а потом масштабировать для экспорта, если вы еще новичок в дизайне приложений под мобильные девайсы.

Когда все необходимые исходники размещены на странице, выделите их все сразу и затем укажите настройки экспорта, как это показано на изображениях ниже, в зависимости от выбранного dpi.

Как улучшить процесс разработки и дизайна под Android в Sketch 3

Поставьте “-” и затем введите подходящее разрешение dpi, как на картинках выше.

Экспорт

Создайте на своем компьютере новую папку с названием res.
Вернитесь в Sketch (где все еще выделены все слои) и придайте всем исходникам целопиксельный размер, выбрав для этого функцию Layer > Round to Nearest Pixel Edge.

Нажмите в панели Export кнопку Export Layers и сохраните все слои в новую папку res.

Как улучшить процесс разработки и дизайна под Android в Sketch 3

После экспорта папка станет выглядеть приблизительно так.

Обещанный магический порошок

Маленький спойлер: под магическим порошком имелась в виду специальная shell-команда. Чтоб вы меня не поняли неправильно.

Это довольно маленькая, но очень классная shell-команда, которую мне помог написать Эрик Холмс, пройдется по всей вашей папке res, создав все нужные для экспорта папки, а также разместит картинки по соответствующим папкам. Вдобавок, все изображения будут верно переименованы.

Когда надо вручную экспортировать каждый отдельный файл, правильно его называть, указывать разрешение DPI в соответствующую папку, то создается большое пространство для различных ошибок. А мой способ данный вездесущий человеческий фактор исключает.

Не так уж много дизайнеров на сегодняшний день применяет shell-команды для экономии времени. Я гарантирую вам, что они не такие уж страшные, какими кажутся.

  • Откройте терминал.
  • Скопируйте необходимый текст отсюда.
  • Вставьте его в окошко терминала.
  • Нажмите кнопку возврата.

Это было довольно грубо, однако посмотрите! Это настоящая магия! Теперь все ваши файлы разложены по своим местам.

Как улучшить процесс разработки и дизайна под Android в Sketch 3

Результат применения shell-команды.

Приятный бонус: сжатие

Всегда сжимайте файлы прежде чем отдавать их разработчикам. Для очень быстрой компрессии лучше выбрать ImageOptim.

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

При помощи ImageOptim можно перетащить папку res в окно, и программа сама все сделает. В случае же если вы предпочитаете использовать shell-команды, то вставьте эту команду в окошке терминала и затем нажмите return: open -a ImageOptim

Итак, теперь у вас сжатые, идеально организованные и адаптированные для разработчиков полноценные исходники Android в Sketch.

Если есть что-либо лучше

Метод, здесь описанный, действительно хорошо подходит нашей команде, тем не менее, вся суть в том, чтобы найти такой метод, который будет подходить именно вам и вашей команде.

Перевод

Понравилось? Расскажите друзьям: