В чем разница между вайрфреймами и мокапами?

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

Макет — это реалистичное представление того, как будет выглядеть продукт, в данном случае веб-сайт. Конечный результат может выглядеть точно так же, как макет, или быть его вариацией после ревизии версии. В то время как некоторые люди предпочитают рисовать макеты с помощью графического программного обеспечения, другие делают это прямо в HTML/CSS.

Я использую Balsamiq для вайрфреймов и либо Photoshop/Illustrator, либо HTML + CSS (в зависимости от сложности) для мокапов.

Пример каркаса:

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

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

Я поддерживаю подробный ответ @Yisela, также чтобы добавить это видение, представленное в следующей презентации .

Вот краткое изложение статьи Марцина Тредера :

Каркас

Каркас — это низкоточное представление дизайна. Он должен четко показывать:

1. • Основные группы контента (какие?)

2. • Структура информации (где?)

3. • Описание и базовая визуализация взаимодействия пользователя с интерфейсом (как?)

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

Макет

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

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

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

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

Источник: 15 лет в качестве дизайнера по коммуникациям, руководителя UX, бизнес-аналитика в корпоративной среде, разрабатывающей веб-сайты и приложения. И любимый БАБОК

У меня еще нет репутации, чтобы прокомментировать ответ Дейва Кея, поэтому мне пришлось ответить напрямую. Очень стоит отметить его ответ по сравнению с блестящим ответом Рачуру.

В интерпретации современных фраз объяснение непрофессионала может / должно быть;

1. Вайрфреймы — это «дизайн»
2. Мокапы — это «рендеринг демо».

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

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

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

Я думаю, что это то, о чем Дэйв чуть более вежливо упоминал :-)

Кейт

Проще говоря:

Каркасы : скелет/структура

Мокапы : кожа/визуальный аспект

Как заметили некоторые люди, в настоящее время каркасы приобретают все большее значение, а мокапы сливаются в прототипы.

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

Насколько мне известно, макеты экранов являются окончательным представлением пользовательского интерфейса, внешнего вида. Какой будет нормальный поток и какой будет альтернативный поток. Я думаю, что это может быть своего рода веб-прототип, созданный в основном на HTML и CSS. Затем мы делаем это в основном на этапе HLD, чтобы показать и получить одобрение от клиента.

Вайрфреймы, как сравнение, больше похожи на блок-схему, где есть общее описание. Если не представляет несколько подробных описаний, например, что происходит при щелчке события, изменении события и подобных вещах. Их в основном делает SA/BA, а макеты делают дизайнеры/разработчики. Более того, некоторые люди прикрепляют технические спецификации к каркасам, таким как БД, связанные с этим конкретным пользовательским интерфейсом.

Но опять же, это зависит от проекта к проекту. В нашем случае каркасы являются источником истины.

Вот это я понимаю разница в них

Каркас может быть мокапом. Мокап можно считать каркасом. Хотя иногда они являются отдельными вещами (как заявляли другие), они так же часто не являются отдельными вещами.

Когда-то можно было подумать о том, что Visio создаст каркасы. И Мокапы были бы тем, что создал бы PhotoShop.

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

Так что это спектр с большим количеством перекрытий.

Каркасы

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

Мокапы

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

Подробное сравнение вайрфреймов и мокапов можно найти в этой информативной статье: Разница между вайрфреймами, мокапами и прототипами.