Как настраивать свои горячие клавиши в Скетче и не забывать их

В продолжение поста «Стратегический дизайн интерфейсов» я написал руководство для тех, кто хочет применять его на практике. Всё начинается с такой базовой и банальной вещи как настройка горячих клавиш. Знаю, что это не самое весёлое, что есть в нашей работе, но без этого не достичь профессионализма в Скетче.

medium.com/sketchdesigner/custom-shortcuts-dfd6e4d255fb

В этом посте я отвечаю на вопросы:
- Как настроить кастомные клавиши через System Preferences
- Как расшифровываются значки ⌘ ⇧ ⌥ ⌃ ⎋
- Примеры паттернов горячих клавиш
- Как работает Раннер
- Почему так важно работать с символами с клавиатуры
- Как легко запоминать клавиши и подсматривать их в меню через поиск

Следующим шагом поговорим про систему названий символов и их расположение на холсте.

#горячие_клавиши #идеология_символов

Пока писал большой пост, из него родилась тема, которая в него не вписывалась:

Как настроить фокус на любые объекты интерфейса в Mac OS
Интерфейс Скетча написан на стандартных библиотеках Mac OS и состоит из кнопок, на которые можно фокусироваться с клавиатуры. Для этого нужно включить специальный режим в System Preferences. Иногда это удобнее, чем работать мышью.

medium.com/sketchdesigner/tab-focus-dbba0e723dd7

#горячие_клавиши

Копируем стили #GIF

Шейпы и текстовые слои имеют набор настроек, который формирует их внешний вид (layer style). Он состоит из свойств: заливка, обводка, радиус скругления и других. Шейпы и текстовые слои могут иметь общий стиль (shared, шерд). Общие стили позволяют синхронизировать внешний вид разных объектов.

Скетч позволяет копировать весь этот набор настроек на другие объекты. Шерд-стиль тоже копируется.

Пример: Объект А имеет некий набор свойств и к нему привязан шерд-стиль style-A. Копируем его стиль и применяем к объекту Б. Теперь Б тоже имеет шерд-стиль sytle-A.

Теперь он применён к обоим объектам и его можно изменять сразу для всех, нажимая кнопку Sync Shared Style напротив его названия.

Стандартные клавиши Alt + Cmd + C и Alt + Cmd + V для копирования стиля я считаю неудачными, потому что они выглядят как тогл-панели. Поэтому предлагаю свой вариант.

Назначь:
Shift + Cmd + C на Copy Layer Style
Shift + Cmd + V на Paste Layer Style

Освободившуюся Alt + Cmd + C я назначил на показ и скрытие панели Craft (команда Plugins → Toggle Craft).

#горячие_клавиши

Бонус-трек: в текстовом редакторе Pages тоже есть функция копирования стиля у выделенного текста (Format → Copy Style). Её можно назначить на те же самые кнопки, что и в Скетче.

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

Всё, что нужно знать об Invision Studio

И почему к нему стоит относиться настороженно. Каждый телеграм-канал или чат о дизайне бросился постить красивый ролик про Инвижн Студио. Это аналог Скетча, который выйдет в январе 2018:

youtu.be/YXNk4gQCPSY

Комментаторы воодушевлены: «Вау, красота какая! Конкуренция растёт».

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

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

Я плотно работаю с Инвижном почти год и давно ищу ему замену, но пока не нахожу. Весь мой опыт работы с ним — это баги в веб-интерфейсе, разъехавшаяся вёрстка, ожидание загрузки (Loading your Experience), кровь и слёзы.

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

Давайте я покажу, как прямо сейчас в Инвижне выглядят кнопки:

Никаких эмоций, я лишь расскажу о своём опыте с Инвижном.

История 1. Library
Craft Library — инструмент синхронизации символов от Инвижн. Был первой серьёзной разработкой на рынке, которая позволяла синхронизировать символы между скетч-файлами. Я развернул на нём большую библиотеку иконок и UI-элементов. Когда в ней были любовно отсортированы и правильно названы около 800 символов, Крафт стал вешать Скетч. Каждое действие обновлялось на экране спустя 5-10 секунд задержки. Инвижн ничего по этому поводу не смог предпринять. Это, мол, вопрос производительности, и мы не можем его быстро решить. В итоге, я махнул рукой, перевёл библиотеку на сервис Lingo, стало лучше.

История 2. Prototype
Инвижн купил перспективный проект Silver Flows, который позволял делать кликабельные прототипы прямо в Скетче. В итоге он был выпущен под названием «Craft Prototype». Я всегда люто ненавидел делать прямоугольники-хотспоты в веб-интерфейсе и моему счастью не было предела, когда за пару кликов я стал делать кликабельными объекты в макете. Для меня это была маленькая революция.

Но теперь Prototype работает нестабильно. Загружаешь макет, а хотспотов нет, кликать некуда. Ставишь хотспоты заново, а они не загружаются. Открываешь новый файл и создаёшь новый тестовый проект — загружаются. Техподдержка мне снова помочь не смогла. Тикет закрывают как решённый. Стиснул зубы и расставляю хотспоты по старинке, в веб-интерфейсе. Так надёжнее.

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

#прототипы #инвижн

Моя новая серия постов про анализ анимации этой гифки. Планируется 8 частей, это вводная. Разделю её на микровзаимодействия и прокомментирую каждое с примерами на Фреймере.

Первое чему следует научиться, когда хочешь заняться UI-анимацией — научиться замечать, из чего она состоит. Это возможно только когда учишься фокусировать внимание на определённых деталях и используешь удобный инструмент. Нашим микроскопом будет служить приложение ScreenFlow.

medium.com/sketchdesigner/animation1-5b124aca0b3d

#UI_анимация #Фреймер

Листаем страницы #GIF

Плагин Distributor

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

Скачать: github.com/PEZ/SketchDistributor

Также его можно установить через Runner.

Написал подробное руководство о том, как выравнивать объекты по горизонтали и вертикали.

medium.com/sketchdesigner/distributor-4c1d7d578f4d

#плагины

Прикладываю файл, который использовал для иллюстраций поста про Distributor.

Marvel: веб-прототипы из скетч-макетов

Я наконец нашёл нормальную замену InVIsion. Ей стал сервис Marvel app. Краем уха слышал о нём и раньше, но инструментов и сервисов теперь столько, что гнаться за ними нет никакого смысла. И при всём этом пёстром зоопарке бывает сложно найти именно тот, который точно закрывает потребность.

marvelapp.com

Марвел позволяет:
- Плагином загружать макеты из Скетча в приятную веб-морду
- В ней расставить хотспоты
- Делиться ссылкой на прототип
- Тестировать в приложении, даже если нет интернета
- Делать прототипы прямо на устройстве
- Писать комментарии поверх прототипа
- Заменять экраны функцией Replace с сохранением ссылок
- Сортировать проекты по папкам
- Накидывать лоуфай-прототипы в вебе в режиме Design
- Встраивать прототип в виде HTML-эмбеда

До двух проектов бесплатен. За 16 баксов в месяц (либо 144 в год) снимает ограничение на количество проектов.

#прототипы #марвел

После перехода на Марвел лично у меня нет больше ни одной причины держать тяжеловесный плагин Крафт установленным: про Library и Prototype уже рассказывал. Другие инструменты, входящие в Крафт, все как на подбор такие же кривые и нежизнеспособные. Можно выдохнуть: больше Крафт Менеджер не будет изводить бесконечными бесполезными обновлениями.

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

Так выглядит моя история переписки с Инвижном. Это всё тикеты о глюках. Эта картинка — пример того, насколько важна единая экосистема продукта и как долго она может держать пользователя лояльным.