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