Лого vc.ru

Инструмент: Создание прототипов приложений без программирования с помощью бета-версии Craft Prototype

Инструмент: Создание прототипов приложений без программирования с помощью бета-версии 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

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

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

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

Скачать демо-прототип

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

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

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

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

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

Присылайте свои колонки и интерфейсные кейсы на interface@vc.ru

Популярные статьи
Показать еще
Комментарии отсортированы
как обычно по времени по популярности

Многое из этого было в Axure уже очень давно (за исключением смартфонных штук конечно).

А ещё я не понял - это только для мобайла?

Sketch вроде как в принципе для айфона.

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

Год уже в бета, всё не дождёмся.

Если все действительно так, то это одноо с лучших решений на рынке

Кода ни у кого нет?

0

Наконец-то заживем. А то Principle уже никого не удивишь...

0

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

Сейчас обсуждают
Юрий Кушниров

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

«Выясняйте, почему пользователи остаются, а не почему они уходят»
0
Alexander Seliverstov
Intech

Он знает слова, а наш реально умеет этим пользоваться:)

«Боты станут умнее, а вы потеряете свою работу»
0
Sasha Zivers

Это кто-то к прошлому футуристическому прогнозу кинул ссылку и вот оно уже тут)
Думал там что-то интерсное, а там типичные женские бредни, только не про гороскопы, а про будущее.

«Добро пожаловать в 2030 год»: член датского парламента о счастливой жизни без приватности и личных вещей
0
GunRoman

АХахах) Как то тусил с универским друганом (а он такой типичный консалтер в известной конс. фирме) - он мне рассказывал как он джуниоров и прочую мелочь собеседует, давал мне их кейсы и задачки на пробу. Я их порешал, мы пообсуждали.

Потом мне это надоело и я сказал "Все это клево, но вот тебе жестче тема" - ну и как вы поняли пошла в дело Великая Задача О Двух Стульях.

С учетом того, что в общем то в ответе есть своя логика и даже общий принцип решения таких вещей - он не смог решить ее)

Бывший глава Google затруднился ответить на один из традиционных вопросов компании на собеседованиях
0
Rostislav Pankratov

Мне нравится развитие статьи: в заголовке это Мильнер и Цукерберг, в описании к ним присоединился еще и Грин, а к концу оказывается там есть ещё и "другие ИТ-предприниматели".

Мильнер и Цукерберг назвали лауреатов своей научной премии Breakthrough Prize фондом $25 млн
0
Показать еще