В чем разница между каркасами и макетами?
Ответы:
Каркасный о функциональности. Это может быть действительно простой набросок, который демонстрирует, какие вещи вы можете сделать в своем дизайне. Например, на каркасе сайта будут отображаться навигация, основные кнопки, столбцы, размещение различных элементов. Вы можете думать об этом как о проекте веб-сайта.
Макет представляет собой реалистическое представление о том, что продукт будет выглядеть, в данном случае: веб - сайте. Окончательный результат может выглядеть точно так же, как макет, или быть его вариацией после пересмотра версии. В то время как некоторые люди предпочитают рисовать макеты с помощью графического программного обеспечения, другие делают это прямо в HTML / CSS.
Я использую Balsamiq для каркасов, а также Photoshop / Illustrator или HTML + CSS (в зависимости от сложности) для макетов.
Пример каркаса:
Каркасы - это элементарные формы или линии, используемые только для обозначения положения и / или размера. Цель любого каркаса - «вписать» элементы в макет, а не указывать, как элементы могут фактически отображаться в окончательном проекте, только там, где они будут расположены.
Макеты строятся поверх каркасов и идут дальше, чтобы показать общие аспекты внешнего вида дизайна, включая выбор типа, выбор цвета и т. Д. Цель макета - показать, насколько это возможно, как будут отображаться все окончательные виды.
Я поддерживаю подробный ответ @Yisela, также чтобы добавить это видение, представленное в следующей презентации
Вот краткое изложение статьи Марцина Трейдера :
Каркасный
Каркас - это представление проекта с низкой точностью. Следует четко показать:
- • Основные группы контента (что?)
• Структура информации (где?)
• Описание и базовая визуализация взаимодействия пользовательского интерфейса (как?)
- Рассматривайте их как основу вашего дизайна и помните, что каркас должен содержать представление о каждой важной части конечного продукта.
Макет
- Макет - это статичное, дизайнерское представление средней и высокой точности. Очень часто макет представляет собой проект визуального дизайна
- Представляет структуру информации, визуализирует содержание и демонстрирует основные функциональные возможности в статической форме.
- Призывает людей на самом деле пересмотреть визуальную сторону проекта
Каркасные модели используются для определения структуры, информационной иерархии, демонстрации рабочего процесса, предоставления подробных сведений о том, что находится на экране, и описания работы компонента (аннотация). В зависимости от сложности приложения или сайта, каркасы должны быть построены на основе другого требования; модели процессов. Каркас можно использовать для получения требований от клиента и в конечном итоге для подтверждения требований с клиентом. Каркасы - это визуальная модель структуры сайта или приложения. Они не определяют шрифт, который будет использоваться, отступы, цвет, стиль и т. Д. Они не масштабируются и не имеют тонов или градиентов. Все это необходимо сообщить клиенту, чтобы он понимал процесс и контекст результатов каркасной работы в сочетании с другими результатами требований.
Макет обычно создается в Photoshop, и, хотя он основан на структуре или структуре подтвержденного каркасного результата, он представляет собой отдельный результат с четким графиком и процессом утверждения. Макеты или композиции, определяющие визуальный стиль или тон интерфейса. После принятия макеты преобразуются в ряд дополнительных требований или рабочих продуктов, таких как код CSS, руководства по стилю, графические ресурсы и т. Д.
Каркасы никогда не должны быть макетами. Макеты могут использоваться в качестве каркасов, но это будет иметь последствия для любых изменений, которые могут потребоваться, и существенно повлияет на ваш бюджет.
Источник: 15 лет в качестве дизайнера коммуникаций, UX Lead, бизнес-аналитика в корпоративной среде, разрабатывающей веб-сайты и приложения. И любимый БАБОК
У меня пока нет репутации, чтобы комментировать ответ Дейва Кея, поэтому мне пришлось отвечать напрямую. Очень стоит отметить его ответ по сравнению с блестящим ответом Рачуру.
В интерпретации современных фраз объяснение непрофессионала могло / должно быть;
- Каркасы "дизайн"
- Макеты - это «представленные демки»
Фактическая терминология берет свое начало с 80-х годов. В то время у вас не было вычислительной мощности для создания изображений в режиме реального времени, но вы могли наблюдать «каркасные» графики, плавающие на экране в режиме реального времени. Правильная демонстрация, необходимая для рендеринга в течение ночи
В настоящее время «каркас» представляет собой «конструкцию» скелета, и при хорошем итеративном процессе проектирования люди должны генерировать макеты из каркаса, получать обратную связь и передавать ее обратно, чтобы улучшить дизайн каркаса.
К сожалению, в настоящее время клиентам доступно множество программ, позволяющих им создавать макеты, в которых не используется ничего, что непосредственно использовалось бы программистами. Зачастую их проекты строятся на основе других, поэтому макет расширяется в частном порядке, а не возвращается программистам, чтобы учитывать великие замыслы.
Я думаю, что это то, что Дейв был немного более вежливым в упоминании :-)
Кит
Нужно добавить одно замечание, которое люди не сделали ... все эти ответы дают достойные технические описания, но в рабочей среде различия не всегда так очевидны. Некоторые компании могут добавить функциональность в макет, а некоторые могут поместить требования к дизайну высокого уровня в каркас. Я был бы осторожен с тем, чтобы слишком запутаться в ответе о том, что «должно» быть, так как самая первая компания, в которую вы пойдете, может сделать что-то, что не является ни одним из них!
Согласно моим знаниям, экраны макетов являются окончательным представлением интерфейса, внешнего вида и ощущений. Каким будет нормальный поток и каким будет альтернативный поток. Я думаю, что это может быть своего рода веб-прототип, в основном созданный в HTML и CSS. Мы делаем это в основном на этапе HLD, чтобы показать и принять от клиента.
Каркасы сравнения сравнивают больше как блок-схемы, где есть общее описание. Если не представлены некоторые подробные описания, например, что происходит при нажатии на событие, изменение события и тому подобное. Они в основном сделаны SA / BA, а макет - дизайнером / разработчиком. Более того, некоторые люди прилагают технические спецификации с каркасами, такими как DB, которые связаны с этим конкретным пользовательским интерфейсом.
Но опять же, это зависит от проекта к проекту. В нашем случае каркасы являются источником правды.
Это то, что я понимаю, как разница в них
Каркас может быть макетом. Макет можно считать каркасным. Хотя они иногда являются отдельными вещами (как утверждали другие), они также часто не отдельные вещи.
Когда-то можно было бы рассмотреть каркасы, которые создаст Visio. И Макеты были бы тем, что создал бы PhotoShop.
Но сегодня, имея в своем распоряжении широкий спектр инструментов, они часто являются одним и тем же документом. В начале они могут начинаться как каркасные (просто макет и функционирование), но со временем становятся все более и более детальными до такой степени, что их можно считать макетом. И если использовать интерактивный инструмент, такой как Axure, в определенный момент можно считать его прототипом.
Так что это спектр с большим количеством совпадений.
Каркасы
Когда вы намереваетесь разработать мобильное приложение или веб-приложение, вам сначала потребуется набросок того, как будет выглядеть каждая страница. Только на основе бизнес-концепций дизайнер может определить поток приложения и первый черновик дизайна, в котором есть эскиз того, как он будет выглядеть, какие кнопки будут, какие поля будут и т. Д. Вот что такое каркас предназначены для.
Макеты
Макеты - это более живые картинки. Они визуально более привлекательны, имеют цвета, шрифты, темы, кнопки, логотип и т. Д. На этом этапе в дизайне указываются метки полей, заметки, типы шрифтов, меню навигации и т. Д. Это точное представление о том, как будет выглядеть мобильное приложение или как будут выглядеть веб-страницы.
Вы можете найти подробное сравнение между Каркасами и Макетами в этой информативной статье: Разница между Каркасами, Макетами и Прототипами