Рассмотрим примеры организации рабочего процесса разработки мобильного приложения для Android в Sketch 3

Создание дизайна под родные Android-приложения приносит массу удовольствия; временами даже счастья. И весь этот кайф длится ровно до момента, пока вы не возьмете ваше красивое приложение, на шлифовку которого у вас и вашей команды ушло несметное количество часов, и не… экспортируете исходники [и тут звучит драматическая музыка].

Экспорт исходников готового приложения под Android в Sketch – это, наверное, самое монотонное занятие, каким только может заняться дизайнер мобильных приложений. Не один год я искал способы усовершенствовать эту рутину. И до сих пор, похоже, каждый дизайнер сталкивается с той же проблемой, что и я: до сих пор нет идеального решения. Есть только методы немного лучше других.

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

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

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

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

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

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

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

В Remind мы рисуем все в масштабе 200% (xhdpi) и потом уменьшаем. Этот прием отлично работает, но требует большей внимательности и продуманности. Тут каждый выбирает для себя. Я рекомендую рисовать дизайн в 100% (mdpi) и масштабировать для экспорта, если вы новичок в дизайне под мобильные устройства. Вот есть замечательная статья на эту тему. Я расскажу, как экспортировать исходники в обоих случаях.

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

1 CtjPqpAXBdU34vr2PMJz4Q 80x41 - Как улучшить процесс дизайна и разработки под Android в Sketch 3
Поставьте “-” и введите подходящее разрешение dpi, как на изображениях выше.

Экспорт

  1. Создайте новую папку под именем res на своем компьютере.
  2. Вернитесь в Sketch (в котором все еще выделены все слои), придайте исходникам целопиксельный размер , выбрав опцию Layer > Round to Nearest Pixel Edge (округлить до ближайшего пикселя).
  3. Нажмите большую кнопку Export Layers (экспортировать слои) в панели Export и сохраните все слои в папку res.
1 0JxTK4dRRSAAn8RIhZUhvg 80x44 - Как улучшить процесс дизайна и разработки под Android в Sketch 3
После экспорта папка будет выглядеть примерно так.

И обещанный волшебный порошок

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

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

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

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

  1. Просто откройте терминал
  2. Скопируйте текст отсюда
  3. Вставьте его в окно терминала
  4. Нажмите клавишу возврата

Ух, это было грубо, но посмотрите! Настоящая магия! Все ваши файлы теперь аккуратно разложены по своим местам.

1 9YHEp9Rp4 PIzqxbPWEa7w 80x41 - Как улучшить процесс дизайна и разработки под Android в Sketch 3
Результат использования shell-команды.

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

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

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

open -a ImageOptim 

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

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

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

Свежие вакансии
                        GermanLanguage.ph LLC GermanLanguage.ph LLC German Language School – Product Designer (UX/UI) Удаленно Ереван
                        Региональная Академия делового образования Региональная Академия делового образования Технический дизайнер Удаленно Самарская область
                        BR LAb BR LAb UX/ UI web-designer Удаленно Москва 80 000 - 120 000 ₽
                        Rightapplications Rightapplications UX дизайнер Офис Харьков
                        Emlid Emlid UX/UI Designer Офис Санкт-Петербург
Все вакансии

Оригинал: Lindsay Mindler

Если вы нашли ошибку, выделите фрагмент текста и нажмите Ctrl+Enter

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

Добавить комментарий
Похожие записи

100 вещей, которые должен знать UX/UI дизайнер

Майкл Соркин недавно умер от коронавируса, и в знак уважения я составил список из 100 вещей, которые должен знать UX / UI-дизайнер

Основы UX: закон Парето или правило 80/20, которое должен знать каждый дизайнер

Вы когда-нибудь замечали, что используете небольшое количество функций на своем телефоне? У него есть сотни функций, но вы когда-нибудь использовали их все?

7 фундаментальных приемов психологии в дизайне, которые должен знать каждый дизайнер

Для продуктового дизайнера недостаточно быть экспертом в области интерактивного дизайна. И вот почему…