Инструмент: Создание прототипов приложений без программирования с помощью бета-версии Craft Prototype
Дизайнер Google Джо Тоскано в своем блоге на Medium рассмотрел функции бета-версии плагина Craft Prototype, который позволяет создавать прототипы приложений в Sketch.
Редакция рубрики «Интерфейсы» публикует перевод материала, выполненный командой компании-разработчика Noveo.
InVision готовится предоставить возможность создавать в Sketch прототипы, неотличимые от прототипов на основе кода. Расскажу о грядущих нововведениях.
За время своей карьеры я использовал множество инструментов для прототипирования, но плагин Craft Prototype для Sketch от Invision - лучшее сочетание богатых возможностей и интуитивного интерфейса из всех, что я встречал, хотя это еще только бета-версия.
Переходы между страницами
Возможность переходить между страницами есть в большинстве инструментов для прототипирования. Craft Prototype позволяет использовать любые виды переходов, которые только могут прийти в голову, например:
- по тапу;
- по тапу с задержкой (то есть 3D Touch);
- по свайпу влево;
- по свайпу вправо;
- по свайпу вверх;
- по свайпу вниз.
Кроме того, можно использовать связанные с этими переходами анимации:
- мгновенное появление;
- растворение;
- появление справа;
- появление слева;
- появление сверху;
- появление снизу.
Слои также можно конвертировать в оверлеи и управлять ими при помощи индивидуальных дополнительных настроек.
Фиксирование хедера и футера
Зафиксированные хедер и футер - еще одна довольно стандартная возможность, но Craft Prototype делает их использование необыкновенно простым: нужно всего лишь выбрать группу слоев и зафиксировать их.
Редактируемые текстовые поля
В большинстве инструментов прототипирования, чтобы создать такое поле, вам потребуется знать инструменты визуального программирования. С помощью Craft Prototype можно просто создать строку текста, нажать C для активации Prototype и превратить строку в живой текст.
Вы можете указать, какой тип клавиатуры использовать (стандартный, ввод телефонного номера, ввод электронной почты и так далее), какую текстовую подсказку отображать, использовать ли кнопку «удалить весь текст» и многое другое.
Инструмент предлагает различные типы ввода с заданным поведением:
- ввод в одну строку;
- ввод в несколько строк;
- ввод с защитой пароля;
- электронный адрес.
Поля с защитой пароля
Технически этот пункт должен был попасть в предыдущую секцию, но я хочу восхититься тем, насколько это круто: вы можете создавать поля с защитой пароля.
Фотосъемка
Обычно функция фотосъемки доступна только с помощью инструментов визуального программирования или реализуется при помощи кода.
Всего за пару кликов вы получаете доступ к камере телефона и можете сделать фото внутри прототипа. Если вы назовете слой _photo, то прототип будет использовать его как маску для вашей фотографии.
Доступ к галерее телефона
Можно не только сделать фото, но и выбрать снимок из галереи телефона. Как и при фотосъемке, добавьте в название слоя _photo, чтобы фотография отображалась на странице должным образом.
Телефонный звонок
Не знаю, как часто эта возможность будет использоваться в прототипах, но круто, что из статичного слоя можно сделать кнопку, по нажатию на которую будет совершаться настоящий звонок.
Отправка iMessage
Помимо звонков, вы можете отправлять iMessage. Вы даже можете предзаполнить текст сообщения. Или оставьте его пустым, используйте возможности интерактивного интерфейса iMessage.
Доступ к Safari
Всего за пару кликов можно создавать в прототипе нативные ссылки. Нужно всего лишь выбрать слой, нажать C, чтобы запустить Prototype, перетащить элемент интерфейса на иконку Safari и ввести адрес сайта, на который будет происходить редирект.
Встроенный Web View
Круче ссылок в прототипе - только возможность встроить в него сайт или данные. Казалось бы, это не так уж и много, но задумайтесь: случалось ли вам видеть прототип со встроенными картами Google Maps?
Если вы не боитесь кода и хотите взломать систему, вставив несколько отличных микровзаимодействий, ознакомьтесь со статьей Николаса Кляйна о том, как вставить код в ваш прототип.
Как воспользоваться Craft Prototype
В первую очередь вам понадобится код бета-версии. Можно получить его у друзей, которые уже используют бета-версию, или написать вежливое письмо на [email protected] с просьбой отправить код для доступа к Prototype.
После того как вы получите код, начнется самая сложная часть - установка Craft Prototype. К счастью, команда InVision написала инструкцию, которая немного упрощает задачу.
После установки Prototype в Sketch нужно скачать InVision Viewer app, чтобы создать зеркало прототипа на своем телефоне.
Скачать демо-прототип
Я создал демо-прототип, который проведет вас через использование Prototype шаг за шагом. Можно просто оставить эту статью открытой и смотреть на GIF во время создания прототипа, но на вашем месте я бы все же скачал демо. Установите его и посмотрите, как он работает, прежде чем создавать что-то новое.
Я получал довольно хорошие отзывы от людей, которые им воспользовались, включая коллег по R/GA из Сан-Франциско, Портленда и Нью-Йорка, а также некоторых ребят из Nike. Надеюсь, он будет полезен и вам!
Более подробную документацию о возможностях, которые предоставляет Prototype, можно найти в этой статье от InVision. Если на каком-то этапе возникли сложности, не стесняйтесь и пишите.
Будущее прототипирования
Craft Prototype - самый простой и мощный инструмент, который я только использовал для создания прототипов, и это только бета-версия. Представьте, что произойдет, когда он расширит возможности до нескольких платформ, начнет интегрироваться с адаптивными артбордами Sketch и будет регулярно обновляться. Мы будем в паре шагов от того, чтобы создавать приложения, не написав ни строчки кода.
