fbpx
Возможности прототипирования в Sketch через Silver Flows

Возможности прототипирования в Sketch через Silver Flows

Все мы довольно долгое время ждем появления очень интересного плагина для прототипирования интерфейсов под названием 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? Какие возможности вы бы хотели в нем увидеть в будущем?

4 Комментариев
Старые
Новые Популярные
Межтекстовые Отзывы
Посмотреть все комментарии
Похожие статьи
Практические советы по улучшению микровзаимодействий вашего интерфейса
Подробнее

Практические советы по улучшению микровзаимодействий вашего интерфейса

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

Лучшие статьи, раз в неделю, с доставкой на почту

Total
0
Share