Все мы довольно долгое время ждем появления очень интересного плагина для прототипирования интерфейсов под названием Silver Flows! И вот пару дней назад мы узнали о новости, что компания Invision купила Silver и теперь он выйдет в составе плагина Craft. Ждем с нетерпением выхода, а пока посмотрим на его возможности!

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

Что такое Silver?

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

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

Как это работает?

Работа Silver заключается в соединении слоев с артбордами для создания сценариев взаимодействия пользователя с интерфейсом (Flows). Чтобы создать ссылку, нужно просто нажать клавишу C на клавиатуре. Запустится простой интерфейс, который позволит прилинковать определенные слои и группы к артбордам.

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

Когда вы соединяете два элемента ссылкой, отображается подсказка с дополнительными настройками, включая жесты, поведение и переход (Gesture, Behavior и Transition).

Вот как легко связывать слои с артбордами

Жест (Gesture)

Этот раздел позволяет вам выбрать жест, который запустит сценарий (Flow). Есть возможность выбрать стандартные мобильные жесты, такие как Tap (касание), Tap and Hold (касание+удерживание), Swipe Left (свайп влево), Swipe Right (свайп вправо), Swipe Up (свайп вверх) и Swipe Down (свайп вниз).

Жесты

Поведение (Behavior)

Поведение — это действие, которое происходит, как только запущен сценарий (Flow). Вы можете подключить сценарий к артборду, установить обратную ссылку (возврат на предыдущий артборд), отменить модальное окно или запустить ключевой функционал iOS — запуск камеры, обзор фотографий, ссылка на вебсайт, составление электронного письма или SMS, или даже звонок на телефонный номер.

Behavior

Переход (Transition)

Вы можете выбрать из трех типов переходов — Swap, Push и Modal. Swap просто заменяет артборд, а Push симулирует родной пуш-переход iOS.

Как только вы выбрали модальный переход (Modal), появятся дополнительные опции. Они включают в себя способ анимации (In/Out), интерактивный жест для закрытия модального окна и так называемый дистрактор (Distractor). Он представляет собой оверлей в черном, сером или белом цвете. вы также можете размыть фон.

Transitions

Дублирование (Mirroring)

Если вы ранее использовали Sketch Mirror, вы понимаете, насколько важна возможность просмотра дизайнов и сценариев приложения на реальном устройстве. В Sketch Preview есть два режима: Mirror и Flow. Mirror предоставляет такой же функционал, как и Sketch Mirror. А вот во Flow начинается веселье — тут ваши дизайны становятся интерактивными.

Чтобы начать мониторинг дизайнов на вашем iPhone, нужно скачать Sketch Preview и App Store, а также подключить его к одной беспроводной сети с вашим Mac. Нет интернета? Не проблема! Подключитесь к Mac-у c помощью USB. Также есть опция протестировать сценарии через симулятор Xcode.

Тестирование сценариев через Xcode-симулятор

Демострация результата работы

Сбор отзывов или совместная работа с другими реализуется через обмен прямой ссылкой на сценарий. Как только вы отправили такую ссылку кому-то, этот человек может открыть ее на своем устройстве в Silver Flows Preview. Чтобы кто-то стал коллаборатором (collaborator), ему нужно создать аккаунт в Silver Flows. Главная разница в том, что люди с прямой ссылкой могут только просмотреть сценарий, которым вы с ним поделились. А по ссылке для коллаборатора сценарий будет обновлен, как только внесутся изменения в соответствующий файл Sketch.

Silver Flows Preview

Маленький совет: Организация файлов

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

Переименовать слой — это всего лишь секунда времени. Выделите слой и нажмите “CMD+R” для быстрого переименования. Если у вас в группе много слоев, можете нажать “TAB” перед нажатием “RETURN”, чтобы выделить следующий слой в группе.

Организация файлов sketch

Взаимодействие и анимация

Сейчас Aby и Andrey сфокусированы на том, чтобы превратить Silver Flows в UX-инструмент вместо инструмента для анимирования. Это означает, что вы не можете анимировать все элементы, как вы бы делали это в Principle. Он больше сравним с InVision, чем с Principle или Flinto. С Silver вы сможете прототипировать ваши дизайны без выхода из интерфейса Sketch, в считанные минуты.

Они работают над улучшением интеграции Framer.js, так что вы сможете анимировать элементы во всех возможных вариантах. Сейчас проблема решена установкой ссылки на ваш прототип Framer в web view.
Прототип Framer.js в Sketch с опцией Silver web view feature

Заключение

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

Он идеально отшлифован для команды из двух человек, которая работает над ним. Я не столкнулся ни с какими ощутимыми проблемами, только мелкие погрешности. Например, слой accessory не всегда ведет себя, как должен. В accessory можно располагать слои поверх клавиатуры при активном вводе. Иногда Silver Preview не сразу показывает дизайны, нужно вручную их обновлять.

Aby и Andrey усиленно работают, чтобы сделать Silver Flows просто безукоризненным для пользователя. Silver Flows уже пару раз переписывался за последние полгода.

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

Silver Flows ждет яркое будущее впереди, и я уже вижу его потенциал как инструмента для прототипирования и анимирования одновременно. Но не будем забегать так сильно вперед.

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

Что вы думаете о Silver Flows? Какие возможности вы бы хотели в нем увидеть в будущем?