НОВОЕ😍 Рабочие процессы, структура компании, шаблоны и холст. Обновление Shtab 3.0 ➜
Попробовать бесплатно
UX и дизайнПроцесс дизайна

Прототип интерфейса

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

КРАТКО
Прототип — это черновик интерфейса, на котором идеи проверяют до того, как они станут кодом. Прототипы бывают разной детализации: от наброска на бумаге до почти настоящего интерактивного макета, где можно тестировать сценарии с пользователями. Чем раньше команда собирает прототипы, тем дешевле обходятся ошибки: переделать переход на макете — час, переписать готовый код — неделя.
СИНОНИМЫ:прототиппрототип интерфейсакликабельный макетPrototype

Прототипы экономят деньги тем, что переносят эксперименты на этап до разработки. Это работает почти всегда, и в этом смысле прототип — не «приятный артефакт дизайна», а инструмент управления риском.

По уровню детализации

  • Низкая детализация (low-fidelity) — наброски на бумаге, серые блоки, без цвета. Цель — обсудить структуру и сценарии.
  • Средняя детализация (mid-fidelity) — каркасы экранов в Figma, без финального оформления. Удобно проверять поток.
  • Высокая детализация (high-fidelity) — почти настоящий макет с цветом, шрифтами и анимацией. Используется для тестов с пользователями и презентаций.

По интерактивности

  • Статичные — просто экраны без переходов.
  • Интерактивные — переходы, состояния, иногда даже небольшие сценарии с условной логикой.
КОГДА ПРИМЕНЯТЬ
  • Перед крупной новой функцией или новым продуктом
  • Для тестов юзабилити до начала разработки
  • Для согласования с заказчиками и заинтересованными сторонами
КОГДА НЕ СТОИТ
  • Мелкие очевидные изменения, где прототип займёт больше времени, чем сама разработка
ПРИМЕР

Команда обсуждает новый процесс оформления заказа. Без прототипа спор тянулся неделями: каждый представлял что-то своё. За два дня в Figma собирают интерактивный прототип с тремя вариантами, проводят на нём короткие тесты юзабилити, и один из вариантов явно выигрывает. Разработка получает понятный артефакт и точно знает, что строить, — время на согласования сокращается в разы.

КАК ИСПОЛЬЗОВАТЬ В SHTAB

Не зацикливайтесь на красоте прототипа на ранних этапах. Высокая детализация раньше времени — частая ловушка: на серьёзные изменения уже жалко потраченных часов, и команда начинает защищать решения вместо того, чтобы их пересматривать. Сначала идея и сценарий, потом полировка.

Попробовать бесплатно

Вопросы про «Прототип интерфейса»

Мокап — статичная детализированная картинка экрана: по ней видно, как всё будет выглядеть, но нажать ничего нельзя. Прототип — интерактивная модель, по которой можно пройти сценарий. Детализированный прототип внешне почти неотличим от мокапа, но в нём работают переходы, состояния элементов и базовая логика, поэтому его можно давать пользователям на тест.

Ещё из «UX и дизайн»

Вся категория →
Atomic Design (атомарный дизайн)

Подход Брэда Фроста, в котором интерфейс собирается из иерархии «атомов», «молекул», «организмов», «шаблонов» и «страниц».

Mobile-first (сначала мобильная версия)

Подход к проектированию, при котором сначала продумывают мобильную версию, а уже потом расширяют её до десктопа.

UX и UI: в чём разница

UX — про общий опыт взаимодействия с продуктом, UI — про внешний вид и поведение конкретного интерфейса.

Применяйте термины на практике

База знаний, задачи и цели — в одном сервисе. Бесплатно — без лимита по числу людей.

Попробовать бесплатноВсе термины