Яка різниця між провідними кадрами та макетами?
Відповіді:
Каркасний про функціональність. Це може бути дійсно простий ескіз, який демонструє, які речі ви можете зробити у своєму дизайні. Наприклад, каркасний веб-сайт відображатиме навігацію, основні кнопки, стовпці, розміщення різних елементів. Ви можете думати про це як креслення веб-сайту.
Макет являє собою реалістичне уявлення про те, що продукт буде виглядати, в даному випадку: веб - сайті. Кінцевий результат може виглядати точно як макет або бути його варіантом після перегляду версії. Хоча деякі вважають за краще малювати макети за допомогою графічного програмного забезпечення, інші роблять це прямо в HTML / CSS.
Я використовую Balsamiq для дротяних кадрів, або Photoshop / Illustrator або HTML + CSS (залежно від складності) для макетів.
Приклад дротяного кадру:
Каркаси - це рудиментарні форми або лінії, які використовуються лише для позначення положення та / або розміру. Мета будь-якого каркаса - "вписати" елементи в макет, а не вказати, як елементи можуть насправді відображатися в остаточному дизайні, лише там, де вони будуть розташовані.
Макети побудовані поверх каркасів та йдуть далі, щоб показати загальні аспекти зовнішнього вигляду дизайну, включаючи вибір типу, вибір кольорів тощо. Мета макету - показати якомога ближче, як будуть відображатися всі фінальні виступи.
Я підтримую детальну відповідь @Yisela, щоб також додати це бачення, викрите в наступній презентації
Ось короткий підсумок статті Марчіна Тредера :
Каркас
Дротяний каркас - це низька вірність дизайну. Це повинно чітко показувати:
- • Основні групи змісту (що?)
• Структура інформації (де?)
• Опис та основна візуалізація взаємодії користувач - інтерфейс (як?)
- Розгляньте їх як основу вашого дизайну і пам’ятайте, що каркасні рамки повинні містити представлення кожної важливої частини кінцевого продукту.
Макет
- Макет - це середня до високої вірності, статичності, дизайнерського зображення. Дуже часто макет - це проект візуального дизайну
- Представляє структуру інформації, візуалізує зміст і демонструє основні функціональні можливості статичним чином
- Закликає людей реально переглянути візуальну сторону проекту
Wireframes використовуються для визначення рамки, ієрархії інформації, демонстрації робочого процесу, надання деталей про те, що знаходиться на екрані, та опису того, як працює компонент (анотація). Залежно від складності програми або сайту, каркаси повинні бути побудовані на основі іншої необхідної потреби; моделей процесів. Провідні рамки можуть використовуватися для отримання вимог від клієнта та врешті-решт підтвердження вимог із клієнтом. Wireframes - це візуальна модель структури сайту чи програми. Вони не визначають шрифт, який буде використовуватися, накладку, колір, стиль тощо. Вони не мають масштабу, і вони не мають тонів і градієнтів. Все це потрібно повідомити з клієнтом, щоб він зрозумів процес та контекст доставки каркасного зв'язку в поєднанні з іншими результатами.
Макет, як правило, створюється у Photoshop, і хоча він заснований на структурі або структурі підтвердженої схеми доставки, вона є чіткою доставкою, з чітким графіком та процедурою затвердження. Макети або компіляції, визначають візуальний стиль або тон інтерфейсу. Після прийняття макети перетворюються на ряд додаткових вимог або робочих продуктів, таких як код CSS, посібники зі стилів, графічні активи тощо.
Каркаси ніколи не будуть макетом. Макети можуть використовуватися як каркасні рамки, але це може мати наслідки для будь-яких змін, які можуть знадобитися і суттєво вплинуть на ваш бюджет.
Джерело: 15 років як дизайнер комунікацій, керівник UX, бізнес-аналітик у корпоративному середовищі, що розробляє веб-сайти та програми. І коханий БАБОК
У мене ще немає репутації коментувати відповідь Дейва Кей, тому мені довелося відповісти прямо. Дуже варто відзначити його відповідь порівняно з блискучою відповіддю Рачуру.
В інтерпретації сучасних фраз пояснення мирян могло / повинно бути;
- Каркаси - це "дизайн"
- Макети - це "візуалізовані демонстрації"
Справжня термінологія бере свій початок з 80-х років. Тоді у вас не було обчислювальної потужності для створення зображень у режимі реального часу, але ви могли дивитись "каркасні" графіки, що плавають по екрану в режимі реального часу. Належна "демонстрація" потрібна була протягом доби і т.д.
У цей час "каркас" являє собою "дизайн" каркаса, і, маючи хороший ітеративний процес проектування, люди повинні генерувати макети з каркасної форми, отримувати зворотній зв'язок і передавати їх назад, щоб поліпшити дизайн каркасної рамки.
На жаль, на сьогоднішній день клієнтам доступно багато програмного забезпечення, яке дозволяє розробляти макети, які не використовують нічого, що безпосередньо можна використовувати програмістам. Часто їхні проекти розробляються іншими людьми, тому макет стає частково розширеним, а не повертається програмістам, щоб перетворитись на грандіозні проекти.
Я думаю, що це ефективно те, що Дейв був трохи ввічливішим згадувати :-)
Кіт
Треба додати ще один момент, якого люди не зробили ... всі ці відповіді дають гідні технічні характеристики, але в робочому середовищі відмінності не завжди є настільки зрозумілими. Деякі компанії можуть додати функціональні можливості макету, а деякі можуть поставити вимоги до дизайну високого рівня в каркасі. Я буду дуже обережним над тим, щоб занадто замикатися у відповіді про те, що має бути "першою компанією, в яку ви їдете, може зробити щось, що не є жодним із них!
Згідно з моїми екранами макетів знань - це остання репресія інтерфейсу користувача, зовнішній вигляд. Яким буде нормальний потік і яким буде змінний потік. Я думаю, що це може бути різновид веб-прототипу, в основному створеного в HTML та CSS. Тоді ми робимо здебільшого під час фази HLD, щоб показати та отримати акцепт від клієнта.
Каркаси в порівнянні концентруються більше, як схема потоку, де є загальний опис. Якщо не представлено мало описів деталей, наприклад, що відбувається при натисканні події, змініть подію та подібні речі. Вони здебільшого роблять SA / BA, а макети роблять дизайнери / розробники. Більше того, деякі люди додають технічні характеристики з дротяними кадрами, як БД, що бере участь у конкретному інтерфейсі.
Але знову ж це залежить від проекту до проекту. У нашому випадку дротяні кадри є джерелом істини.
Це я розумію як різницю в них
Каркас може бути макетом. Макет і вважається каркасом. Хоча вони іноді є окремими речами (як вони заявили інші), вони так само часто не є окремими речами.
Свого часу можна розглянути провідні кадри, що створив Visio. І макети - це те, що створив би PhotoShop.
Але сьогодні, за допомогою ряду інструментів, якими ми володіємо, вони часто є тим самим фактичним документом. На початку вони можуть починатися як каркасні рамки (суто компонування та функції), але з часом стають все більш детальними до того, як їх можна вважати макетом. І якщо використовувати інтерактивний інструмент, такий як Axure, в певний момент можна було б вважати його прототипом.
Отже, це спектр з великим перекриттям.
Дротяні рами
Коли ви маєте намір створити мобільний додаток або веб-додаток, вам спочатку знадобиться ескіз того, як має виглядати кожна сторінка. Тільки на основі бізнес-концепцій дизайнер може визначити потік додатків та перший проект дизайну, який має ескіз того, як це буде виглядати, які кнопки будуть там, які поля там будуть і т. Д. Це те, що є каркасною схемою призначений для.
Макети
Макети - це більш живі картинки. Вони візуально привабливіші, мають кольори, шрифти, теми, кнопки, логотип тощо. На цьому етапі в дизайні вказуються мітки полів, приміток, типів шрифту, меню навігації тощо. Це точне зображення того, як буде виглядати мобільний додаток або веб-сторінки.
Ви можете знайти докладне порівняння між Wireframes та макетами в цій інформативній статті: Різниця між Wireframe, макетом та прототипом