Собака Павлова
Сто шпаргалок Технологии и разработка Как использовать интерактивный прототип интерфейса в разработке

Как использовать интерактивный прототип интерфейса в разработке

Когда мы создаем прототип не для тестирования, а для передачи в разработку, по смыслу он превращается в документ. Требования к этому документу формирует команда. И команда же должна уметь работать с результатом. Не только в режиме презентации, но и с «исходниками».

#интерактивный прототип #разработка #интерфейсы

Три главных предмета в фокусе внимания

  1. Команда разработки

    Раз это основные пользователи интерактивного прототипа, то нужно снимать требования с них. Не с менеджера и не с руководства, а с команды.

  2. Презентация

    В сырье разбираться долго. Презентация прототипа не опишет все, но даст 80% важной информации по поведению системы.

  3. Режимы Prototype и Dev

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

5 советов,
как делать хорошо

  1. Относитесь к прототипу, как к документации

    Интерактивный прототип, переходы и связи между элементами нужно уметь считывать, как пункты документации.

  2. Делайте интерактив в нужный момент

    Компоненты — в начале проекта, интерактив всего интерфейса — в конце.

  3. Проектируйте микровзаимодействия, в том числе анимацию

    Это поможет разработчикам сфокусироваться на реализации. Возможно, они сделают не так, как в прототипе, но главное, что они вообще что-то сделают.

  4. Используйте для тестирования

    Интерактив — многофункциональный артефакт, и этим нужно пользоваться

  5. Обновляйте прототип по ходу разработки

    Разработка всегда что-то меняет, добавляет, убирает. Сверяйтесь с реализацией и подправляй прототип, чтобы «документация» была в порядке.

Например

StreamTelecom

Разработчики увидели интерактив, собранный для тестирования, и поняли, что именно в таком виде им было бы проще принимать работы.

Рельеф-Центр

Делали интерактив в Axure еще когда не было никаких модных инструментов.

Хороший образец

Базовый интерактив (например, мигание курсора) может быть зашит в дизайн-систему.

Выложим, когда сделаем публичным

Так делать не надо

Идеально выверенный прототип, который показали стейкхолдерам и отложили в сторонку.

Инструменты

Режимы Prototype и Dev в Figma

Базовый инструмент интерфейсного дизайнера

Axure

Для сложного интерактива в корпоративных системах

Фреймворки

Создавать прототипы, адаптированные под конкретный фреймворк

UI-kit или дизайн-система

Систематизировать интерактив на уровне элементов

Самая крутая ситуация с интерактивном, когда команда разработки сама понимает его необходимость, просит сделать и использует в работе.

Наталья Прокофьева, генеральный директор «Собаки Павловой»

Другие шпаргалки

Ищете подрядчика или команду?

Давайте обсудим вашу задачу.

Хотите у нас научиться?

1000+ упражнений по дизайну интерфейсов.