Как использовать интерактивный прототип интерфейса в разработке
Когда мы создаем прототип не для тестирования, а для передачи в разработку, по смыслу он превращается в документ. Требования к этому документу формирует команда. И команда же должна уметь работать с результатом. Не только в режиме презентации, но и с «исходниками».
Три главных предмета в фокусе внимания
-
Команда разработки
Раз это основные пользователи интерактивного прототипа, то нужно снимать требования с них. Не с менеджера и не с руководства, а с команды.
-
Презентация
В сырье разбираться долго. Презентация прототипа не опишет все, но даст 80% важной информации по поведению системы.
-
Режимы Prototype и Dev
И дизайнерам, и разработчикам нужно уметь считывать логику и структуру прототипа.
5 советов,
как делать хорошо
- Относитесь к прототипу, как к документации
Интерактивный прототип, переходы и связи между элементами нужно уметь считывать, как пункты документации.
- Делайте интерактив в нужный момент
Компоненты — в начале проекта, интерактив всего интерфейса — в конце.
- Проектируйте микровзаимодействия, в том числе анимацию
Это поможет разработчикам сфокусироваться на реализации. Возможно, они сделают не так, как в прототипе, но главное, что они вообще что-то сделают.
- Используйте для тестирования
Интерактив — многофункциональный артефакт, и этим нужно пользоваться
- Обновляйте прототип по ходу разработки
Разработка всегда что-то меняет, добавляет, убирает. Сверяйтесь с реализацией и подправляй прототип, чтобы «документация» была в порядке.
Например
Разработчики увидели интерактив, собранный для тестирования, и поняли, что именно в таком виде им было бы проще принимать работы.
Хороший образец
Базовый интерактив (например, мигание курсора) может быть зашит в дизайн-систему.
Так делать не надо
Идеально выверенный прототип, который показали стейкхолдерам и отложили в сторонку.
Инструменты
Режимы Prototype и Dev в Figma
Базовый инструмент интерфейсного дизайнера
Для сложного интерактива в корпоративных системах
Фреймворки
Создавать прототипы, адаптированные под конкретный фреймворк
UI-kit или дизайн-система
Систематизировать интерактив на уровне элементов
Самая крутая ситуация с интерактивном, когда команда разработки сама понимает его необходимость, просит сделать и использует в работе.
Наталья Прокофьева, генеральный директор «Собаки Павловой»
Другие шпаргалки
Ищете подрядчика или команду?
Давайте обсудим вашу задачу.
Хотите у нас научиться?
1000+ упражнений по дизайну интерфейсов.
eduhund.com