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

Организация разработки дизайна в Sketch для iOS

Хочу дополнить обзор работы в Sketch 3. Вы сможете скачать в конце статьи готовый файл, а также самостоятельно пройтись по таким темам:

  • Общие положения
  • Применение UIKit
  • Управление символами
  • Разумный экспорт

Общие положения

Применяйте страницы одного документа

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

Организация разработки в Sketch для iOS

Разница подходов огранизации макета

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

Объединяйте максимум объектов

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

Примечание: маскированный контейнер с картинкой внутри также снижает производительность.

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

Итак, представьте, вам необходимо изменить ширину и длину объекта, который глубоко похоронен под другими. В случае если изображение не объединено (опция Flatten), то вам надо удерживать кнопку ⌘ и выделять картинку, а не контейнер с нужным вам размером.

Организация разработки в Sketch для iOS

Кнопка ⌘ сразу покажет нужные размеры, в случае если изображение объединено (опция Flatten).

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

Отключайте слои размытия

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

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

Иерархия страничек

Она должна быть гибкой и адаптированной под довольно долгий путь разработки программы.

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

Стандартное фрилансерское приложение способно вместиться в несколько страниц.

Навигация по иерархии точно не должна вызывать проблем.

Если два скрина на странице смотрятся не очень удобно, и вы думаете об объединении некоторых страничек… Подумайте о разработчике, которому нужно найти определенный скрин в исходниках. Наиболее очевидный вариант всегда работает лучше всего.

Поэтому я делю приложение на страничке, основываясь на его структуре. Когда есть панель вкладок, то я создаю как минимум пять страниц. А также вспомогательные странички для регистрации/входа и так далее.

Организация разработки в Sketch для iOS

Этому же принципу я бы следовал в случае с Боковым меню. Я всегда объединяю связанные логически странички, однако отражаю это в наименовании страницы.

Рисуйте в @1x

iPhone 6 Plus заставил меня работать так. Мы хотим применять одни и те же значки для всех моделей iPhone, поэтому нужно работать именно таким образом. Производительность Sketch тоже увеличилась.

Для iPhone 6 я выбрал ширину для артбордов в 320pt, а не 375pt. Как минимум до выхода очередной модели iPhone.

Начинаем работу

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

В случае если вам нужно следовать определенным стандартам дизайна Apple iOS, то обязательно учитывайте стандартные размеры. После нескольких приложений вы запомните пропорции часто применяемых элементов, таких как панель вкладок или панель навигации. Поэтому я не думаю, что тут будет полезен UIKit.

Предустановленные пакеты

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

  • Они содержат специальные модальные окна —  поскольку многим приложениям нужен функционал загрузки файлов, демонстрации экрана.
  • Содержат элементы клавиатуры — практически каждая программа запрашивает у пользователя ввод каких-нибудь данных.
  • Не содержат связанных символов и стилей — в случае если вы вставляете из пакета какой-то группы стилей, то они могут заменить ваши собственные. Или же, как минимум, начнется полный беспорядок с названиями.
  • Не содержат артбордов — так как артборды видны на iOS-девайсе через Sketch Mirror, то заниматься копипастом быстро надоедает из-за переключения дисплеев.

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

Символы

Создайте собственную библиотеку символов в момент создания макета, обновляйте ее для соответствия марке в дальнейшем.

Я рекомендую не применять связанные тексты стиля и связанные стили внутри символов.

Работать с проектом станет удобнее, поскольку вы будете видеть, какие именно части меняются при вставке.

Организация разработки в Sketch для iOS

Не забывайте применять слеш (/) в названии при составлении состояний символов.

Символы для контроля состояний

Представьте, что у вас есть поле ввода с тремя состояниями: заполненное, отключенное и нормальное. Как я создаю символы?

  • Сначала я создаю символ с именем «input / normal», в перечне слоев должна быть директория с именем «input».
  • Теперь надо скопировать папку «input» и дублировать символ. Символ назовем тоже «input» из-за названия папки. В дальнейшем имя можно с легкостью расширить до «input / filled» (состояние «заполненного» поля).
  • Сделайте то же для другого состояния.

Использование названия вместо названия с состоянием в перечне слоев позволяет избежать большой путаницы, если есть слой «input / normal», и состояние символа при этом «input / disabled».

Название символов

Для сохранения текстовых данных после изменения состояния, такие символы должны обладать текстовыми слоями с такими же именами.

Организация разработки в Sketch для iOS

Исключите текстовое значение из символа.

Основной текстовый слой полей ввода, панели и выпадающие списки называются «Title».

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

Часто применяемые символы

Панель навигации. Я создаю символ, назначаю ему название в соответствии с действием слева. Состояния — back, base, close (назад, база и закрыть).

Организация разработки в Sketch для iOS

Полоса табуляции (Tab Bar).

В моей реализации — это директория с двумя символами, а также маской между ними. Нижний символ имеет название «tab bar / base» и содержит неактивные состояния. Верхний же символ называется «tab bar / active», он содержит активные состояния. Специальная маска между ними нужна, чтобы включать корректное активное состояние.

Организация разработки в Sketch для iOS

Смена значка отразится на всех скринах.

Экспорт для внешнего применения

Многие особенности экспорта помогают мне ежедневно:

  • Название программы ios/имя артборда — скрины из директории ios-app-name загружаются в онлайн-средства для прототипирования.
  • Preview/название состояния — в любом макете должна быть логика в наименовании частей пользовательского интерфейса. Экспортируется, чтобы показать менеджеру или клиентам, поэтому должно быть очень доступным для понимания.
  • Old/название программы ios/имя артборда — для всех неудачных скринов, которые вы по каким-то причинам не хотите удалять. Я покрываю подобные скрины серым прямоугольником для того, чтобы не вводить своих разработчиков в заблуждение.
  • Backgrounds/название — для фоновых картинок.
  • Assets/название блока/имя значка — для иконок. Параметр название блока, как правило, имеет значение tab bar или nav bar, его можно просто пропустить.

Контейнеры — сетка для значков

Последнее обновление Sketch просто расстроило весь мой рабочий процесс, так как при дублировании группы в конец имени слайса автоматически добавляется число. Я думаю, что разработчики из Bohemian Coding это вскоре исправят.

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

Вначале мы выбираем необходимый размер контейнера, где будет размещен значок. Точные значения здесь зависят от стиля, однако если вы выбрали контейнер с размером 30 X 30 точек для Navigation Bar (Панели навигации), то остальные значки также должны в него нормально вмещаться.

Организация разработки в Sketch для iOS

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

Слайсы для значков

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

Нормальное имя иконки выглядит как «name icon». В случае если она полностью готова для экспорта, то заголовок группы меняется на «name : icon».

Организация разработки в Sketch для iOS

Не забудьте также отметить функцию Export Group Content Only (Экспортировать лишь контент группы).

Размер слайсов постоянный, а прозрачные пиксели не вырезаются.
Папку с названием «share : icon» намного проще понять, нежели «ios-app-name/assets/nav bar/share».
Для того, чтобы создать экспортируемый значок в размере @1x…@5x и изменить имя на понятные для Android (@mdpi, @hdpi, @xdpi, @xxdpi, @xxxdp), необходимо проделать большую работу.

Правда вы можете сделать один слайс с возможными опциями экспорта вместо его копирования, как простого слоя. Измените размер и переименуйте, если надо.
В случае если вы поддерживаете iOS 7+, то вместо png можно экспортировать pdf. Но некоторые программы все еще поддерживают ранние версии ОС iOS.

Экспортируйте разумно

Слой сетки или Grid — это не просто такой контейнер, это отличный способ понять, какие значки уже полностью готовы для экспорта. Я создаю новый связанный стиль «grid : export» для контейнеров в документе. В то время, когда я делаю слайсы, все слои grid включены. Так, я вижу, какие значки уже «нарезаны». После этого я отключаю слои сетки перед экспортом артбордов для средств прототипирования.

Разработчики должны четко понимать, где найти значок и его контейнер.

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

Для программы рисования дизайна следует спрятать слайсы, поскольку кнопка ⌘ вновь выделит фигуру.

Экспорт в символах

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

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

  • Если необходимо экспортировать все скрины для загрузки, либо получения исходников, желательно воспользоваться средством командной строки Sketch. Введите «sketchtool export наименования слайсов-of-file.sketch» и получите все слайсы. Научите данному приему своих разработчиков.
  • В случае если вы желаете экспортировать все артборды на страничке (при заливке нового сценария программы), то можете выделить их через расширение Sketch Mate и нажать клавишу экспорта в инспекторе внизу.
  • Отдельные слайсы также очень легко экспортировать, нажав для этого клавишу внизу инспектора.

Экспорт скриншотов App Store

Желательно применять файл из http://sketchtoappstore.com.

Скачайте, и используйте его как специальный шаблон в функции «File — Save as Template» (Сохранить в качестве шаблона). Не представляю себе, как я справлялся с этим раньше вручную.

Организация разработки в Sketch для iOS

Вывод

Данная статья вовсе не истина в самой последней инстанции, это лишь мои правила, по которым я работаю ежедневно.

Вы можете легко скачать файл превью для того, чтобы потестировать все приемы, которые описаны в этой статье.

Перевод

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