Noveo

Наш блог Craft Prototype: новая эра прототипов

Craft Prototype: новая эра прототипов

Современные дизайнеры имеют огромный набор инструментов для тестирования “работоспособности” своего дизайна. Речь, конечно, об инструментах для создания прототипов.

Если раньше мы тратили дни на разработку объемных прототипов с нетривиальной логикой при помощи Axure, сегодня в InVision нам требуются минуты, чтобы собрать прототип, который будет выглядеть и ощущаться как настоящий готовый продукт.

Что нас ждет завтра? Мы подготовили перевод статьи дизайнера Джо Тоскано с обзором плагина Craft Prototype. Читайте и вдохновляйтесь, а мы уже тестируем бету :)

InVision готовится предоставить возможность создавать в Sketch прототипы, которые будут неотличимы от прототипов на основе кода. Эта статья позволит вам подсмотреть грядущие нововведения. Вам уже не захочется возвращаться к тому, что было раньше.

На грани будущего

За время своей карьеры я использовал множество инструментов для прототипирования, но даже бета-версия плагина Craft Prototype для Sketch от Invision – лучшее сочетание богатых возможностей и интуитивного интерфейса из всех, что мне доводилось использовать.

Переходы между страницами

Переходы между страницами – одна из основных возможностей, которая есть в большинстве инструментов для прототипирования.

Craft Prototype позволяет использовать любые виды переходов, которые только придут вам в голову, например:

  • по тапу
  • по тапу с задержкой (т.е. 3D Touch)
  • по свайпу влево
  • по свайпу вправо
  • по свайпу вверх
  • по свайпу вниз.

Кроме того, можно использовать связанные с этими переходами анимации:

  • мгновенное появление
  • растворение
  • появление справа
  • появление слева
  • появление сверху
  • появление снизу

Слои также можно конвертировать в overlay и управлять ими при помощи индивидуальных дополнительных настроек. С этим вы разберетесь сами : Р

transitions

Фиксирование хедера и футера

Зафиксированные хедер и футер – ещё одна довольно стандартная возможность, но Craft Prototype делает их использование необыкновенно простым: нужно всего лишь выбрать группу слоёв и зафиксировать их.

sticky-header

Редактируемые текстовые поля

Редактируемые текстовые поля — ещё один шаг в сторону будущего. Большая часть инструментов прототипирования для этого потребует от вас знания инструментов визуального программирования. С помощью Craft Prototype вы можете просто создать строку текста, нажать ‘с’ для активации Prototype и превратить строку в живой текст.

Создавая текстовое поле, вы можете указать, какой тип клавиатуры использовать (например, стандартный, ввод телефонного номера, ввод электронной почты и т.д.), какой текст-подсказку отображать, использовать ли кнопку “удалить весь текст”, а также многое другое.

Инструмент предлагает различные типы ввода с заданным поведением:

  • ввод в одну строку
  • ввод в несколько строк
  • ввод с защитой пароля
  • email адрес.

editable-fields

Поля с защитой пароля

Технически это должно было попасть в предыдущую секцию, я просто хочу выразить свое восхищение тем, насколько это круто: вы можете создавать поля с защитой пароля!

password-protected

Фотосъёмка

Фотосъёмка – ещё одна невероятная фича, обычно доступная только с помощью инструментов визуального программирования или реализуемая при помощи кода.

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

taking-photos

Доступ к галерее телефона

Можно не только сделать фото, но и выбрать снимок из галереи вашего телефона. Как и при фотосъёмке, добавьте в название слоя “_photo”, чтобы ваша фотография отображалась на странице должным образом.

access-camera-roll

Телефонный звонок

Я не знаю, как часто эта возможность будет использоваться в прототипах, но то, что из статичного слоя можно сделать кнопку, по нажатию на которую будет совершаться настоящий звонок — это круто!

phone-call

Отправка iMessage

Помимо звонков вы можете отправлять iMessage. Вы даже можете предзаполнить текст сообщения. Или оставьте его пустым, используйте возможности интерактивного интерфейса iMessage!

imessage

Доступ к Safari

Нужно использовать внешнюю ссылку внутри вашего приложения? Всего за пару кликов вы можете создавать в своём прототипе нативные ссылки, чтобы отправлять пользователей, куда только захотите.

Вам нужно всего лишь выбрать слой, нажать ‘c’, чтобы запустить Prototype, перетащить элемент интерфейса на иконку Safari и ввести адрес сайта, на который будет происходить редирект.

access-safari

Встроенный Web View

Что может быть круче, чем ссылки в вашем прототипе? Возможность встроить внутрь прототипа сайт или данные!

Казалось бы, это не так уж и много, но задумайтесь: случалось ли вам видеть прототип со встроенными картами Google Maps?

Если вы не боитесь кода и хотите взломать систему, вставив несколько отличных микро-взаимодействий, ознакомьтесь со статьёй Николаса Кляйна (Nicolas Klein), рассказывающей о том, как вставить код в ваш прототип.

embed-web-view

Попробуйте Craft Prototype уже сегодня

В первую очередь вам понадобится код бета-версии. Получить его можно у друзей, которые уже используют бета-версию, или написав вежливое письмо с просьбой отправить код для доступа к Prototype на support@invisionapp.com.

После того, как вы получите код, начинается самая сложная часть – установка Craft Prototype. К счастью, ребята из InVision написали инструкцию, которая немного упрощает задачу.

https://support.invisionapp.com/hc/en-us/articles/208434466-Craft-Enabling-beta-releases-of-Craft-plugins

После того, как вы установили Prototype в Sketch, вам нужно будет скачать InVision Viewer app, чтобы создать зеркало прототипа на вашем телефоне.

Скачайте Demo

Я создал demo-прототип, который проведёт вас через использование Prototype шаг за шагом. Или вы можете просто оставить эту статью открытой и смотреть на gif-ки во время создания вашего прототипа.

Но на вашем месте я бы всё же скачал demo!

http://www.sketchappsources.com/free-source/2173-craft-prototype-demo-sketch-freebie-resource.html

Установите его и посмотрите, как он работает, прежде, чем начнёте создавать что-то новое. Я создал прототип, чтобы научить вас создавать прототипы.

Я получал довольно хорошие отзывы от людей, которые им воспользовались, включая моих коллег по R/GA из Сан-Франциско, Портленда и Нью-Йорка, а также некоторых ребят из Nike. Надеюсь, он будет полезен и вам!

Хотите больше?

Более подробную документацию о возможностях, которые предоставляет Prototype, вы можете найти в этой статье от InVision:

https://support.invisionapp.com/hc/en-us/articles/208391196-Craft-Introduction-to-the-Prototype-plugin

Если у вас возникли сложности на любом этапе, не стесняйтесь и пишите! Я уже помог нескольким людям, смогу помочь и вам настроить Craft Prototype без лишних усилий!

Будущее прототипирования

Craft Prototype – самый простой и мощный инструмент, который я только использовал для создания прототипов. И это только бета-версия!

Представьте, что произойдёт, когда Craft Prototype расширит свои возможности до нескольких платформ, начнёт интегрироваться с адаптивными артбордами Sketch и будет регулярно обновляться, чтобы соответствовать ожиданиям пользователей. Мы будем всего лишь в паре шагов от того, чтобы начать создавать приложения, не написав ни строчки кода!

Эта мечта становится всё ближе с каждым обновлением, и нет сомнений, что Sketch и InVision лидируют на пути к ней!

Оригинал статьи: https://medium.com/re-write/craft-prototype-invisions-adobe-xd-killer-d39687c966c2

Если вы нашли ошибку, пожалуйста, выделите фрагмент текста и нажмите Ctrl+Enter.

НазадПредыдущий пост ВпередСледующий пост

Сообщить об опечатке

Текст, который будет отправлен нашим редакторам: