Активное освоение новых приемов работы - очень важная часть развития навыков, так как постоянно появляются новые инструменты. Пока я продолжаю экспериментировать, думаю, будет очень полезно поделиться моим текущим процессом форматирования и передачи исходников дизайна интерфейса под iOS. Я пришел к этому процессу через 4 приложения (1 2 3 4), в которых работаю последние 8 месяцев.
Sketch
Вы знаете Sketch, вы любите его или ненавидите. И в зависимости от момента, в который вы спросите меня, я соглашусь на разные чувства к этой программе. Страницы используются в Sketch для набросков по микро-проектам в рамках одного приложения: это могут быть отдельные сценарии поведения пользователя или наборы функционала. Для каждой страницы (Page) мы делаем артборд, которые содержит всю отрисованную графику касательно этой части приложения (более детально об этом позже). Мы создаем все в разрешении 1x в Sketch за исключением скриншотов для App Store. Я много экспериментировал с плотностями экрана, и уверен, что дизайн в 1х для нас - лучший выбор. Мы создаем дизайны в 1х в Sketch, и в бесконечной плотности в PaintCode. Мы храним файлы Sketch и все другие исходники (шрифты, SVG-файлы, материалы источников графики и т.д.) в директории inVision, синхронизированной с DropBox.
Sketch Measure
PaintCode
Еще не знакомы с ним?
PaintCode использует ваши SVG-линии и данные по цветам для генерации классов Swift или ObjC. С PaintCode вы можете использовать выражения, переменные и т.д. для создания пассивных/активных состояний кнопок, динамического текста, анимаций с помощью переменных и т.д. Благодаря возможности использовать символы повсеместно, мы существенно упрощаем набор исходников, и каждый раз получаем корректное отображение дизайна.
Что входит в PaintCode, и чего там нет?
Application Colors— лучшая функция в PaintCode - это, наверное, как раз организация / название цветов в вашей интерактивной модели. Это очень помогло нашим разработчикам, и я сам гораздо быстрее могу создавать различные части дизайнов в полном соответствии с руководством по стилям без постоянной необходимости уточнять цвета, состояние и т.д. Все брендовые цвета мы храним в PaintCode и динамически “разукрашиваем” все элементы в соответствии с нашими правилами взаимодействия. В случае с FaceParty мы очень активно используем синий. Для замены синего на красный везде в приложении нужно всего одно маленькое действие при использовании PaintCode. Это очень ценная возможность, если вы создаете продукт с нуля и экспериментируете над брендированием/цветами/графикой в процессе работы. Цвета в PaintCode можно использовать в других частях приложения, что дает возможность очень быстро изменять каждую сущность. Assets— Мы используем PaintCode для каждого создаваемого изображения: никакого растра. Я слышал, что это может вызвать проблемы в работе, но такой подход в нашем случае более оправданный. Помните тот артборд со всей кастомной графикой?
- Экспортируйте артборд в SVG из Sketch
- Импортируйте в произвольный файл PaintCode
- Идентифицируйте любые добавленные цвета или те, что были заменены PaintCode
- Скопируйте графику в ваш мастер-файл
- Перекрасьте в соответствующие цвета, хранимые в палитре
- Начните настраивать каждый элемент графики на его собственном канвасе - больше деталей здесь.
Передача
Когда дело доходит до передачи, мы линкуем Swift-файл PaintCode из Dropbox в Xcode. Ре-экспорт в случае изменений очень прост.
Макет и разные устройства
PaintCode позволяет использовать объекты с динамическим размером, так что вы можете легко масштабировать их под различные размеры экрана, поддерживаемые приложением. Разработчики могут характеризовать объекты PaintCode в виде подклассов стандартных объектов iOS, а затем настраивать их фреймы, как они бы это делали для любого UIButton, UILabel и т.д., в зависимости от доступного размера экрана. Пример Swift:
class PaintCodeButton: UIButton {
override func drawRect(rect: CGRect) {
PaintCodeStyleKit.drawPaintCodeButton()
}
}
let myButton = PaintCodeButton()
myButton.frame = CGRect(x: 0, y: 0, width: 100, height: 50)
Отлично.
Хоть мой способ и далек от идеала, на данный момент мне нравится работать именно так, и нашим разработчикам тоже. Мы сократили количество графики и совокупный размер приложения, отлично сгладив рабочий процесс между дизайном и разработкой. Сейчас мне кажется, что в плане передачи iOS-дизайна в разработку не существует однозначно “правильного” метода. Делитесь своими приемами и предложениями на эту тему - обсудить такое всегда интересно.
Перевод статьи Jon Dobrowolski
Найстарші коментарі (0)