Как дизайнеру, для эффективности рабочего процесса вам нужна надежность. Это еще более важно, когда вы начинаете, потому что вы сможете избежать многих неэффективных действий требующих времени. Одной из особенностей, выделяющих Sketch, является огромное количество плагинов. Открытость Sketch-файла, который повсеместно поддерживается и хорошо интегрирован в другие приложения. Сравнение базовых функций Sketch с другими инструментами проектирования – это сравнение характеристик iPhone с другими телефонами. Вы забываете об экосистеме, что и делает Sketch таким особенным.
Abstract, InVision и Framer – это лишь некоторые из широко распространенных сторонних приложений, которые поддерживают Sketch. Подобно экосистеме iPhone, имея доступ к этим невероятным расширениям, вы сделаете свой рабочий процесс в десять раз эффективнее и современнее. Самое главное, это связано с активным сообществом, которое постоянно стремится улучшить свой рабочий процесс. В результате вы постоянно решаете проблемы при помощи новых версий плагинов и совершенствуете свой рабочий процесс с помощью лучших методов.
В этой статье предполагается, что вы уже знакомы со Sketch. Мы сосредоточимся на рабочем процессе. Кроме того, эта статья представляет собой обзор всего рабочего процесса. Если вы хотите узнать больше о любой из этих тем, каждой из них посвящен отдельный раздел.
Рабочий процесс Sketch Runner
Вероятно, самым популярным и эффективным плагином из всех является Sketch Runner. Это первое, что вам нужно скачать. Runner – это важный многоцелевой плагин для добавления элементов интерфейса и установки новых плагинов. Это похоже на Spotlight в Mac или Alfred в Sketch. Для разработчиков это эквивалент пакета в Atom. И он может сделать намного больше:
Установка плагинов
Одна из самых полезных функций Runner заключается в том, что он позволяет устанавливать плагины, не выходя из Sketch.
Чтобы получить доступ к Runner, вам просто нужно нажать (Command + Apostrophe), вы можете перемещаться между вкладками, просто нажав клавишу Tab, и установить любой плагин, который вам нужен.
Поиск действительно эффективный с горячими клавишами для поиска и установки плагинов. Плагины похожи на приложения для iPhone, так как они улучшают ваш опыт использования Sketch и делают его более индивидуальным. Иногда плагин справляется лучше, чем встроенные функции программы. Фактически, некоторые из этих плагинов вдохновили разработчиков на создание собственных функций Sketch. Например, «Ограничения при изменении размеров» и «Менеджер плагинов».
Вставка символов из iOS UI Kit
Поскольку iOS UI Kit теперь является библиотекой, доступ к ней требует нажатия кнопок «Insert» или «Symbols» на панели инструментов. Однако, с Runner, этот опыт значительно лучше из-за поиска. В Runner вы просто дважды нажимаете Tab, чтобы перейти в меню вставки, затем введите, например, iPhone X Status, чтобы получить строку состояния. Это работает и для ваших собственных библиотек или символов.
Генерируемый контент
Когда дело доходит до получения автоматически созданных красивых фотографий из Unsplash, Craft и Runner прикроет вас. Выберите любой шейп и выполните поиск названия команды вашего плагина. В этом примере мы используем команду Unsplash от Craft. Это также работает с Content Generator или любым плагином. Есть замечательные возможности использования: размеры и свойства Measure или обширные команды Craft. Конечно, вы также можете использовать это для активации труднодоступных команд, таких как Collapse All Groups, Uppercase, Align, Arrange и т. д.
Шаблоны и библиотеки 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
Для работы в командной среде требуется иной рабочий процесс, нежели при работе в одиночку. Что происходит, когда больше 3 человек, работают над одним дизайном? Что делать, если у вас есть большое руководство по стилю, состоящее из сотен символов, таких как цвета, кнопки, содержимое, диалоги и меню? С библиотеками (Libraries) (введенными в Sketch 47), вы можете поместить все свои символы в отдельный файл Sketch, который существует в общей папке, например, в Dropbox или Abstract. Libraries можно импортировать в основной Sketch-файл и использовать в качестве локальных символов. Тем не менее, символы внутри библиотек могут быть изменены только из этой папки по отдельности. Всякий раз, когда в файле Sketch происходят изменения, их можно синхронизировать с вашим основным Sketch-файлом.
Например, допустим, у меня есть основной Sketch-файл. У меня также есть файл библиотеки с именем styleguide. С самого начала я импортирую styleguide, чтобы использовать все его символы. Я не могу изменить эти символы из основного файла. Но я могу открыть styleguide и редактировать символы. Когда я сохраняю styleguide, изменения отправляются в основной файл.
Адаптивные макеты
Создание дизайна для нескольких устройств стала необходимостью. Мы больше не проектируем только для одного iPhone. Мы разрабатываем для десятков различных iPhones и iPads, с их собственным разрешением и плотностью пикселей. Мы проектируем для пейзажной ориентации и для Web, который не имеет установленного разрешения. Вы получите картинку. Ваш артборд должен реагировать на изменение размера экрана. Вот где пригодятся ограничения при изменении размера.
Например, установив ограничение по верху, по левому краю, по правому края или по низу, вы получите поле, следующее этим границам. Если ваша ячейка имеет отступ 10 px от левого края, отступ 10 px сохранится, независимо от того, насколько вы измените размер группы или артборда. Кроме того, вы можете установить для своего элемента фиксированную ширину или высоту. Когда контейнер будет изменен, элемент сохранит фиксированный размер.
Продвинутые ограничения с AUTO LAYOUT
Auto Layout действительно закрывает пробел между дизайном и разработкой. Когда вы работаете с таким количеством разрешений (iPhone X, iPhone 8, Android, Web), вы можете сэкономить массу исправлений, установив ограничения, аналогично тому, как вы будете использовать Auto Layout в Xcode. Работа с адаптивными макетами была важна для дизайнеров, и вот решение.
В то время, как Sketch имеет свою собственную функцию ограничений, она по-прежнему довольно проста по сравнению с Auto Layout и Stack Views. Например, вы не можете привязывать реальные значения пикселей к границам. Вы не можете складывать подобные элементы, чтобы они стали динамическими по отношению друг к другу, реагируя на изменение размера таким образом, чтобы был динамический макет. С помощью Auto Layout от Anima вы можете перейти на следующий уровень.
Сглаженные углы
Значок приложения iOS не имеет традиционное закругление угла. Это то, что мы называем «Суперэллипсом». Как правило, дизайнеры должны отредактировать кривую Безье, чтобы получить правильные углы. Но с этой новой функцией вы можете получить точный результат, включив «Сглаженные углы» (Smooth Corners).
Экспорт слоев в нескольких разрешениях
Одна из моих любимых функций – возможность легко экспортировать для нескольких разрешений экрана. Используя функцию Make Exportable в правом нижнем углу экрана, вы можете экспортировать в любом масштабе (1x, 2x, 3x) и 6 форматах файлов (JPG, PNG, SVG, PDF, TIFF и EPS). PDF, в частности, полезен для iOS, а SVG – это фантастический формат для Интернета. Это преимущество Sketch перед другими приложениями.
Нажмите «Сделать экспортируемым» (Make Exportable), чтобы настроить слои для экспорта. По умолчанию устанавливается масштаб в 1x, но нажмите еще раз, и вы быстро получите масштаб 2x, а затем 3x. Вы также можете установить масштаб на ширину (w) или высоту (h). Например, если вы хотите, чтобы ваш слой экспортировался максимум 800 px в ширину, установите 800w.
Плагин Image optim
Изображения, экспортированные из Sketch (или любого другого приложения), недостаточно оптимизированы. Приложения и веб-сайты имеют тенденцию к раздуванию. Вот почему плагины, такие как Image Optim, являются необходимым шагом при каждом экспорте PNG или JPG-файла. По моему опыту, вы можете сократить до 80% от исходного размера файла. Плюс, есть очень небольшой компромисс с точки зрения качества, даже менее очевидный сегодня из-за экранов Retina.
Совет по оптимизации изображений
Вы можете получить дополнительно 50% экономии, включив PNGCrush и JPEGOptim. Сохраняйте качество на уровне 80%. Поскольку вы разрабатываете экраны в масштабе 2x и 3x, потеря качества не будет заметна. Фактически, мой сайт использует агрессивные методы оптимизации. Без этого у меня будет выходить 30 МБ на страницу, а не на текущие 5 МБ. Хотя может показаться, что это много, мы не должны забывать, что у нас есть множество видеороликов и изображений с высоким разрешением.
Оптимизация Sketch-файлов
Иногда вы будете работать с огромными Sketch-файлами размером более 100 МБ. Это может вызвать нагрузку на ваш жесткий диск и производительность. Возможно, вам не всегда нужно полное качество растровых изображений, найденных в вашем документе. В Sketch вы можете использовать встроенную функцию File- Reduce File Size, которая может значительно уменьшить размер. Чтобы получить еще лучший результат, вы можете использовать Reduce. По своему опыту могу сказать, что он еще больше уменьшает размер файла и лучше сохраняет целостность цвета.
Руководство по стилям и передача разработчикам
Документация занимает много времени. Вы должны потратить на нее дни или недели. Когда вам нужно ее обновить, вам нужно сделать это вручную. С каждым обновлением вы должны сообщать о них всей команде. Вы могли бы потратить это время на совершенствование проекта и получение реальных отзывов от пользователей.
Вот где пригодятся InVision Inspect, Zeplin и Sympli. С их Sketch-плагинами вы можете просто экспортировать все свои артборды, а Mac или веб-приложение автоматически подберет все спецификации стиля. Когда ваша команда открывает ваши проекты, они получают последние обновления, находят все размеры, расстояния и свойства шрифта прямо там. Кроме того, разработчики найдут вложенные слои и могут даже комментировать конкретные части ваших проектов.
Сравнение с реализацией
Чтобы сравнить свои Sketch артборды с реализацией в iOS Simulator, я рекомендую использовать Flawless. Вы можете просто перетащить свой Sketch-файл, и он автоматически обнаружит все ваши артборды. Затем он покажет наложение вашего дизайна поверх симулятора. Это также полезно для тестирования сайта на мобильных устройствах, поскольку вы можете использовать Safari в iOS Simulator.
Процесс сбора обратной связи
Когда вы закончите свой дизайн, вы захотите поделиться им со своими коллегами, чтобы получить отзывы. Интегрированный в Sketch Cloud позволяет автоматически загружать все ваши артборды на сервер и делиться своими проектами по ссылке, конфиденциально или публично. Кроме того, люди могут оставлять комментарии. Эта функция хорошо подходит для любого типа пользователей, которые просто хотят быстро поделиться тем, что они сделали.
Если вы работаете в большой команде и вам нужно больше функций, таких как аннотации и совместное использование, вы можете рассмотреть более специализированные сервисы. InVision хорошо интегрирован в Sketch. Вы можете синхронизировать все свои артборды с их системой одним нажатием кнопки. Freehand может сделать этот процесс действительно забавным и коллективным.
Предварительный просмотр на iOS устройствах
Что отлично выглядит на экране вашего компьютера, возможно, будет не пригодно для iPhone. Благодаря Sketch Mirror вы можете предварительно просмотреть свои проекты, просто подключившись через Wi-Fi или IP-адрес. Если вы проводите много времени в дороге, вы можете обнаружить, что установка персональной точки доступа с вашего телефона даст лучшие результаты.
Артборды можно пролистывать влево и вправо на вашем телефоне. Проведите пальцем вверх и вниз, чтобы переключаться между страницами. Дважды нажмите, чтобы увеличить или настроить изображение под размер экрана. Mirror также поддерживает прокрутку во время предварительного просмотра, поэтому вы можете увеличить свой экран так, как захотите.
Предварительный просмотр на Android устройствах
Для Android-пользователей вы можете использовать Crystal. Еще один фантастический кросс-платформенный инструмент – это Skala Preview (требуется плагин под названием Sketch Preview).
Прототипирование в Sketch
В Sketch нет встроенного средства прототипирования. Но с помощью Craft вы можете быстро прототипировать, подключив экраны. Затем вы настроите жесты
Прототипирование анимаций
Прототипирование анимаций может быть трудоемким процессом, особенно с инструментами, которые имеют крутую кривую обучения. Flinto или Principle идеальный вариант для тех, кто просто не хочет изучать код. Они дают максимальные результаты при небольших инвестициях времени и усилий. Оба приложения позволяют импортировать все ваши артборды и делать мощные анимации за считанные минуты.
Прототипирование во Framer
Для тех, кто любит код за его безграничные возможности, вам понравится Framer. Он удобен для дизайнеров, потому что вы можете создавать и редактировать интерфейс, который непосредственно преобразуется в код. Существует целый раздел по Framer.
Проектирование иконок
Часто вам нужно настроить существующие иконки или нарисовать их с нуля. Вам понадобится иметь в своем арсенале хорошую библиотеку векторных иконок. PixelLove и Streamline – хорошее решение для iOS. Sketch полностью основан на векторе, поэтому вы можете легко импортировать SVG-иконки (универсальный векторный формат) и редактировать их по своему усмотрению. Если вам неудобно работать с векторными кривыми, вы можете по крайней мере изменить цвет и размер в соответствии с вашим проектом. Чтобы прочесть введение в работу с векторами в Sketch, я предлагаю перейти в раздел Работа с вектором.
Горячие клавиши в Sketсh
Дизайн легко выучить, но трудно освоить. Хотя это и не так очевидно, но сочетания клавиш – вот что делает Sketch настолько эффективным при разработке интерфейса. Необходимость кликать слишком много раз, это одна из причин, почему я перестал использовать Photoshop.
Полный список горячих клавиш в Sketch
Это список наиболее важных комбинаций клавиш, которые следует знать. Поскольку я совершаю эти действия сотни раз в день, мне важно помнить их наизусть. Обратите внимание, что я не включил в этот список самые популярные сочетания: копировать (Cmd C), вставить (Cmd V), зум (Cmd +/-) и сохранить (Cmd S).
Выбрать любой слой: Cmd Click
Редактировать текст или вектор: Enter
Прямоугольник: R
Овал: O
Текст: T
Показать расстояние: Alt
Сгруппировать слои: Cmd G
Разгруппировать: Cmd Shift G
Показать/Скрыть пиксели: Ctrl P
Цветовая палитра: Ctrl C
Продублировать: Cmd D
Закрыть/Открыть слой: Cmd Shift L
Скрыть/Показать слой: Cmd Shift H
Переключение окон: Cmd ~
Фокус на слое: Cmd 2
Вставить вместо: Cmd Shift V
Ресурсы
Лучший способ изучить Sketch – загрузить чужую работу и проанализировать ее. Сообщество растет быстрыми темпами, и каждый день появляются новые ресурсы. SketchAppSources, Sketch Repo, Sketch App Hub и Sketch for Designers – одни из лучших мест для загрузки файлов Sketch. Вместе они имеют более 5000 представленных пользователями Sketch-дизайнов.
Начальная цветовая палитра
Цветовые палитры совместно используются как файлы, поэтому я создал одну, и вы можете скачать ее здесь. Загрузите плагин Sketch Palettes, чтобы иметь возможность быстро импортировать цветовые палитры. Чтобы установить новый плагин, нажмите кнопку Download ZIP в GitHub, а затем разархивируйте, дважды кликнув файл с расширением .plugin.
Векторные устройства
Наличие сильной презентации вашего приложения в Keynote или на главной странице вашего сайта дает вашему продукту преимущество. Скачайте бесплатный исходник от Angle – массивной библиотеки из более чем 260 макетов. Вы найдете такие устройства как iPhone, iPad, Mac и Apple Watch, полностью созданные в векторе, что означает, что вы можете редактировать сердце вашего контента. Кроме того, вы можете скачать больше устройств и Diverse Device Hands от Facebook.
Градиенты Sketch
Градиенты не легко импортировать, но вы можете добавлять их вручную, как в этом видео. Скачайте файл градиентов Sketch, чтобы попробовать демо.
Наборы интерфейса для Sketch от Invision
InVision создали множество фантастических и бесплатных наборов интерфейсов для Sketch, которые вы можете скачать и начать разбирать.
Вложенные символы и авто-обновление руководств по стилю
Существует действительно исчерпывающий шаблон руководств по стилю для создания веб-сайта. Очень рекомендуется для тех, кто любит иметь полную дизайн-систему. Или вы можете просто скачать его, чтобы изучить хорошо выполненный пример этого рабочего процесса.
Топ коментарі (0)