UXPUB 🇺🇦 Дизайн-спільнота

Cover image for Silver : Легковесное мобильное прототипирование в Sketch 3
Редакція
Редакція

Опубліковано

Silver : Легковесное мобильное прототипирование в Sketch 3

Silver – это комбинация приложений iOS и Mac, а также плагина Sketch, идеально работающих друг с другом для максимально простого и быстрого процесса дизайна под мобильные устройства.

Предыстория Silver

Я начал работу над Silver в качестве параллельного проекта в начале 2015 года, когда моя охота над идеальным инструментом для прототипирования принесла смешанные результаты. Во время моих поисков я открыл прекрасные решения, включая Framer, Pixate, Form, Origami, Invision, Flinto, Marvel, Proto.io и UXPin. Каждый из этих инструментов предоставлял свои уникальные преимущества, но все они так или иначе добавляли хлопот в мой рабочий процесс. В то время как одни были заточены под дизайн микро-взаимодействий, другие отлично подходили для поточных прототипов. И в отсутствии какой-либо интеграции между этими двумя видами инструментов, было крайне неудобно переключаться между ними на каждом шагу процесса разработки. В целом, я не смог найти одно приложение, которое бы удовлетворяло все мои требования. А мои требования были просты:

  • В процессе дизайна приложения мне нужно начать прототипировать поведение пользователя с самого начала. И хотя я отрисовываю один скрин в конкретный момент, поведение пользователя на нем не ограничивается, и мне не хочется потерять картину в комплексе.
  • Мне нужно постоянно видеть, как приложение будет выглядеть в реальности, представлять динамику на мобильном устройстве, без необходимости экспортировать изображения, синхронизировать файлы или рисовать хотспоты (ненавижу рисовать хотспоты). Проще создать прототип, оценить свою идею в работе и в случае, если это окажется не лучший подход, с легкостью от него отказаться.
  • Сначала мне нужно набросать лишь грубый дизайн приложения без мелкой детализации, и начать его тестировать. По мере тестирования и итерации дизайна, я хочу постепенно наращивать детали на каждом шагу, без необходимости переключаться на другие программы.
  • Мне нужно работать в рамках ограничений, которые предъявляют разработчики, которые будут реализовывать приложение в коде, чтобы не остаться с дизайном, который невозможно реализовать.
  • Я хочу продолжить работать со Sketch, потому что на данный момент это лучшее решение для дизайна интерфейсов. Мне нужен инструмент, который будет хорошо интегрироваться со Sketch, чтобы я мог пользоваться всеми преимуществами, которые идут в комплекте с ним в виде плагинов.
  • Как только общие черты интерфейса определены, протестированы и утверждены, нужно заняться прототипированием микро-взаимодействий на уровне скринов. Framer – мой любимый инструмент для добавления интерактивности в прототип на уровне скринов, так что мой идеальный инструмент должен также хорошо интегрироваться с Framer.
  • И что важнее, нужно сократить лишние хлопоты в процессе дизайна, чтобы я мог больше времени уделять общению с клиентами, исследованиям или прототипированию большего количества опций для тестирования.

Вместо жалоб на нехватку идеальных приложений, которые магическим образом решат все мои проблемы, я начал создавать такое приложение сам. Я уже делал плагины и знал немного «внутренности» Sketch, так что решение в виде плагина сразу всплыло в уме. Затем я скооперировался с Андреем, которого я считаю одним из настоящих гуру в разработке плагинов, чтобы он помог перенести мою идею на новый уровень. Вот некоторые возможности Silver, которые мы уже реализовали с рекомендациями, как вам использовать их для ускорения работы над дизайном:

Интеграция Silver со Sketch

Когда вы установите Silver на Mac, система также попросит вас установит плагин для Sketch, который взаимодействует Mac-приложением в фоновом режиме. Само приложение Silver обитает в панели меню, и помогает подключаться к мобильным приложениям, но остальной функционал построен прямо поверх Sketch, и значительно упрощается при помощи плагина. Silver : Легковесное мобильное прототипирование в Sketch 3 Приложение Silver в панели меню, с и без подключенных устройств. Вся логика, которая конвертирует ваш дизайн в прототип, живет в вашем документе Sketch. Нашей целью было упразднить процесс импортирования, экспортирования, синхронизации и переключения между инструментами.

Подключайте устройства через WiFi или USB

Если вы создаете дизайн мобильного приложения, вы должны предварительно посмотреть дизайны на мобильном устройстве, чтобы оценить свои наработки в действии. Если приложение Silver Preview установлено на вашем iOS-устройстве, вы можете транслировать изменения из текущего артборда Sketch или просматривать целые Flow (потоки), созданные непосредственно в плагине Silver Sketch. Подключение устройств по WiFi дает вам гибкость в демонстрации прототипов коллегам в офисе, но Silver также позволяет вам подключать устройства через USB, который значительно улучшает скорость показа. Silver автоматически переключается между USB и WiFi на основе того, подключено ли устройство.

Создавайте переходы, а не только скрины

Одна из наших любимых возможностей Silver – возможность линковать слои с артбордами для создания взаимодействий прямо в Sketch. Чтобы создать ссылку, выделите слой и нажмите на клавиатуре клавишу С. Она запускает коннектор, который можно поместить на целевой артборд. Затем можно выбрать жест, который инициирует переход и другие детали по типу перехода между элементами. Когда создаете переход, используя Silver, и просматриваете его в iOS-приложении, вы получаете реальную iOS-навигацию. Это не только делает прототип более реалистичным, но также помогает использовать структуру iOS-навигации в вашу пользу. Silver поддерживает три типа перехода:

Пуш-переходы в Silver

Создание пуш-переходов Вы можете использовать пуш-переход для навигации на следующий иерархический уровень контента вашего приложения. Например, переход от списка разговоров к одному конкретному разговору в приложении для обмена сообщениями. Чтобы вернуться на предыдущий экран вы можете либо свайпить с левого края экрана, либо настроить слой с поведением обратной ссылки (Link Back).

Модальные переходы

Комбинация пуш-переходов с модальными Модальный переход используется для начала независимого задания, которое либо должно быть завершено, либо категорически проигнорировано вашими пользователями. Создание нового письма, публикация ново фото в Инстаграм, создание новой заметки в Evernote – это все примеры независимых заданий, которые должны быть выполнены в один или более иерархических шагов, или должны быть все вместе отменены. Чтобы отменить модальное задание, вы должны создать слой с поведением Dismiss Modal. Модальные переходы дают больше гибкости в анимации целевого артборда. Вы также можете настроить модальный переход для интерактивной отмены с помощью свайп-жеста. Создание выдвижной навигации с помощью модального перехода

Отсутствие перехода (No Transition)

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

Запуск базового функционала iOS

Вдобавок к созданию переходов, Silver также позволяет вам создавать ссылочные слои, которые запускают ключевой функционал iOS, такой как включение камеры, браузер фотографий, загрузка системных email или SMS клиентов, совершение телефонного звонка или загрузка внешнего URL в браузере по умолчанию. Вам больше не нужно создавать фальшивые статические экраны, чтобы эмулировать такой функционал в прототипах. Вот пример, который показывает, как создавать ссылки для браузинга фотографий на iOS-устройствах. Вы также можете использовать выделенные фото для заливки слоя, назвав его _photo. Создание ссылки для просмотра фото и отображения выбранной фотографии.

Фиксированные шапки и подвалы

Создание хедеров и футеров в Silver Silver позволяет создавать фиксированные шапки и подвалы c помощью горячих клавиш. Выделите слои, которые хотите сделать фиксированными, нажмите Ctrl+Shift+H для хедера или Ctrl+Shift+F для футера, и все. Любые изменения в размере и позиции этих слоев после фиксирования будут автоматически подтянуты в превью.

Поля ввода

Создание полей ввода Silver Иногда вам нужно прототипировать переход, который требует от пользователя ввести определенную информацию. Возможно, это простой скрин для входа с полями логина и пароля, или скрин для редактирования профиля, которые содержит больше текстовых полей. Вам захочется сымитировать эту часть поведения пользователя, поскольку создание настоящих полей ввода в прототипе – это довольно болезненный процесс. Уже нет : ) В Silver вы можете конвертировать обычный текстовый слой в Sketch в живое поле ввода во время предпросмотра, просто отредактировав несколько настроек. Поля ввода привносят некоторый функционал объектов UITextField, включая настройку плейсхолдеров, показ кнопки очистки (х) в текстовом поле, выбор типа клавиатуры и т.д.

Встроенные веб-виды

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

Публичная бета-версия

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


Перевод статьи Aby Nimbalkar

Топ коментарі (0)