Мокап (Mockup)

При производстве mockup может представлять собой масштабную или физическую модель продукта в натуральную величину. В управлении цифровыми продуктами макет представляет собой подробное изображение приложения. Однако важно отметить, что макеты не включают функциональные возможности продукта.

Почему так важны мокапы

Мокапы служат мостом между начальным наброском каркаса и работой команды по прототипированию. Кроме того, этот шаг дает группе разработчиков недорогую возможность узнать, что заинтересованные стороны и потенциальные пользователи думают о внешнем виде продукта.

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

Отличие Вайрфрейма, Мокапа и Прототипа

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

Этап 1: Каркас/Вайрфрейм

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

Прежде чем тратить много времени на дизайн или кодирование, продуктовая группа хочет получить отзывы и одобрение заинтересованных сторон. Эти заинтересованные стороны могут включать другие внутренние группы, исполнительный персонал и потенциальных пользователей.

Вайрфреймы обычно используются как документация к проекту. Поскольку они являются статичным и фиксированным способом отображения интерфейса, их нужно соответствующе описать (от краткого пояснения, до сложной технической документации, если это необходимо). Однако они могут быть использованы не по столь формальному назначению.

Так как они удобны и просты в использовании, они полезны как быстрые наброски для внутренней коммуникации в команде. Если девелоперы спрашивают, как что-то должно быть выполнено, ответ можно представить как быстро выполненный вайрфрейм.

Этап 2: Мокап

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

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

Этап 3: Прототип

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

Что отличает прототип от конечного продукта, так это то, что он позволяет выполнять только базовые действия пользователя и не будет связан с серверной частью.

Например, если компания создает приложение для покупок, прототип может позволить пользователям просматривать страницы с подробными сведениями о продуктах и помещать товар в корзину. Однако, поскольку прототип не подключается к внутреннему решению компании для электронной коммерции, пользователь не сможет совершить покупку.