В чем разница между каркасами и макетами?

44

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

Я гуглил это, но я не мог понять, в чем именно разница, я был бы признателен, если бы кто-то мог объяснить это мне кратко.

Rachuru
источник

Ответы:

51

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

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

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

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

Пример каркасного

Yisela
источник
3
Для сравнения, вот пример раннего макета для дизайна этого самого сайта, например, здесь, после обсуждения , большинство вещей остались прежними, но с логотипом и оттенком зеленого.
user56reinstatemonica8
Интересный. Я никогда не слышал о каркасе, прежде чем наткнулся на этот вопрос. Мне показалось, что макет - это то, что вы описываете как каркас. Либо мои профессора не правы, либо это проблема локализации (я из Германии).
Андре Станнек
17

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

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

Скотт
источник
11

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

Шершень
источник
6
Мне нравится визуальный ответ, но представляет ли размер шариков что-нибудь? Я думаю, что прототип имеет больший размах, чем каркас и макет
Сиви
8

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

Каркасный

Каркас - это представление проекта с низкой точностью. Следует четко показать:

  1. • Основные группы контента (что?)
  2. • Структура информации (где?)

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

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

Макет

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

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

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

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

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

user52529
источник
Привет и добро пожаловать в GD.SE! Если у вас есть какие-либо вопросы о том, как работает сайт, посетите справочный центр или не стесняйтесь пинговать одного из нас в чате графического дизайна, как только ваша репутация достигнет 20. Продолжайте вносить свой вклад и наслаждайтесь сайтом!
Вики
3

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

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

  1. Каркасы "дизайн"
  2. Макеты - это «представленные демки»

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

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

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

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

Кит

user23381
источник
2

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

Каркасы : каркас / конструкция

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

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

FA Design
источник
1

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

Дейв Кантер
источник
1

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

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

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

Это то, что я понимаю, как разница в них

Рахул Гоэль
источник
1

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

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

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

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

DA01
источник
0

Каркасы

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

Макеты

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

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

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