Если вы работаете над цифровым дизайн-проектом, ожидайте столкнуться с терминами каркас и прототип. Вы можете даже услышать, как коллеги-дизайнеры сравнивают прототип и каркас и задаются вопросом, в чем разница.
Хотя оба используются для тестирования на ранних стадиях разработки продукта, это не одно и то же. Мы здесь, чтобы помочь вам разобраться в различиях между прототипом и каркасом, как использовать оба и почему эти термины не взаимозаменяемы.
Прототип и каркас: в чем разница?
Каркасы отличаются от прототипов следующими критериями: функция, назначение, тип и инструменты. Несмотря на то, что оба являются результатом проектирования, которые представляют конечный продукт, который создают дизайнеры пользовательского опыта (UX) и пользовательского интерфейса (UI), они принципиально отличаются. Давайте углубимся в то, почему это так.
Прототип против каркаса: функция
Каркасы
Функция каркаса веб-сайта состоит в том, чтобы обеспечить двухмерное представление первоначального дизайна продукта. Из-за этого дизайнеры обычно создают прототип перед каркасом. Подумайте об этом так: каркас - это то же самое, что план для строителей, создающих дом. Обычно есть несколько итераций, но каркас начинается с грубого наброска, который поможет направить путь создания.
Как только дизайнеры получат обратную связь и включат ее, они добавят ее, чтобы конкретизировать детали. Тем не менее, цель одна и та же: обеспечить фундаментальную визуальную структуру приложения или веб-сайта, который они создают.
Итак, что вы должны ожидать увидеть на каркасе? Как правило, он дает четкое представление о структуре страницы с такими деталями, как макет и необходимые элементы, такие как кнопки, ссылки и описания контента. На заключительных этапах разработки каркаса вы также можете ожидать увидеть изображения, цвет и брендинг. В целом, ваш каркас предоставит вам руководство, к которому можно обращаться на протяжении всего проекта.
Вот пример, который даст вам представление о том, как выглядит каркас:
Прототипы
Сравнивая прототип и каркас, вы заметите, что время, когда дизайнеры используют эти два результата, отличается. В то время как каркас часто является первым шагом в процессе, прототип будет считаться следующим. Вместо 2D-представления руководящих принципов проекта ваш прототип делает еще один шаг вперед. Он предоставляет рабочую модель веб-сайта или приложения, которое вы создаете, и более полно имитирует взаимодействие с пользователем. Вот почему это полезно на этапе пользовательского тестирования вашей темы.
Давайте вернемся к нашей аналогии с домом. Прототип можно сравнить с моделью дома. Потенциальные домовладельцы (или пользователи) могут физически испытать, каково это быть внутри дома. Они даже могут совершить экскурсию, чтобы испытать это на себе. Нет, это не тот дом, в котором они будут жить, который, согласно их отзывам, в конечном итоге будет завершен последними штрихами. Но это близко.
Итак, напомним, что прототип не является окончательной версией проекта, но он должен быть достаточно близок, чтобы полностью протестировать продукт, прежде чем он будет представлен потребителям. Когда пользователи, протестировавшие ваш продукт, загружают приложение или посещают веб-сайт, не должно быть огромных сюрпризов.
Вот как это может выглядеть:
Прототип против каркаса: функция
Каркасы
Вот где есть некоторое совпадение в сравнении прототипа и каркаса: вы используете оба для тестирования дизайна. Важно отметить, что между этими двумя результатами нет конкуренции — вы не можете адекватно протестировать свой дизайн с одним и игнорировать другой. Обратная связь на обоих этапах абсолютно необходима, потому что проблемы, поднятые прототипом и каркасом, будут принципиально разными. Начнем с назначения каркасов.
Каркас обеспечивает основу для дизайнеров, поскольку они переводят свои абстрактные идеи в осязаемое руководство. Это помогает создать концепцию продукта, которую могут почувствовать все дизайнеры, работающие над продуктом. На этом этапе хорошие дизайнеры будут учитывать пользовательский поток при создании визуальной структуры. Их иллюстрации могут даже описывать, как работает приложение или веб-сайт, используя такие символы, как стрелки, обозначения или каркасную карту. Важно узнать мнение пользователя по этому поводу, потому что то, что кажется дизайнеру интуитивно понятным, может отличаться от того, что нужно пользователю.
Некоторые дизайнеры пропускают этап каркаса и сразу переходят к прототипу. Они могут рассматривать это как пустую трату энергии или ненужный дополнительный шаг, особенно если они используют программное обеспечение, которое объединяет функции создания каркасов и прототипов. Однако каркасы могут быть полезны для документации и совместной работы. Вы не должны пропускать свой каркас - ваш прототип может быть слабее, если вы это сделаете.
Прототипы
Прототипы более явно используются для проверки пути пользователя, в частности, того, как пользователь на самом деле перемещается при использовании программы или приложения. На этапе создания прототипа тестировщики могут точно определить проблемы с потоком. Например, ваш прототип поможет вам выявить проблемы, когда пользователь разочарован слишком большим количеством кликов, чтобы добраться до нужной страницы или определенного макета, который не является интуитивно понятным и сложным для навигации.
В конце этапа прототипа вы захотите запустить симуляцию, в которой пользователи взаимодействуют с прототипом, прежде чем переходить к кодированию проекта.
Прототип против каркаса: типы
Типы каркасов
При сравнении прототипа и каркаса часто обсуждается точность. Как упоминалось ранее, верность относится к тому, как изображен продукт (или «уровень детализации и реализма» в дизайне).
Как каркасы, так и прототипы варьируются от низкоточных до высокоточных дизайнов. Каркасы часто ассоциируются с низкой точностью, но могут проходить через процесс разработки дизайна, который включает в себя проекты средней и высокой точности.
Каркасы с низкой точностью могут быть нарисованы на бумаге или визуализированы в цифровом виде. Обычно они начинаются в черно-белом цвете или в оттенках серого, но получают больше деталей (включая цвет) и брендинга, поскольку они становятся высококачественными каркасами. Помимо этих дополнительных деталей, основное внимание в каркасах уделяется тому, чтобы убедиться, что ключевые элементы присутствуют, а поток имеет смысл с визуальной точки зрения.
Когда дело доходит до вашего каркаса, сделайте его простым, чтобы устранить предвзятость при тестировании. На этом этапе вы пытаетесь проверить жизнеспособность продукта прежде всего. Если тестировщики сталкиваются с тем, что выглядит как очень отполированный каркас, они могут чувствовать себя некомфортно, критикуя то, что кажется уже законченным.
Типы прототипов
Как каркасы, так и прототипы варьируются от низкой до высокой точности, хотя прототипы обычно попадают в более высокий конец спектра точности. Помните: это почти как окончательный вариант вашего проекта.
Большая разница между прототипом и каркасом заключается в том, как прототипы фокусируются на взаимодействии с пользователем. Если у вас ограниченное время и ресурсы, вы можете использовать прототипы с низкой точностью. Но ваши отзывы пользователей будут хороши настолько, насколько хороши элементы, которые пользователи могут протестировать.
На более поздних этапах процесса проектирования прототипы должны быть высокоточными и динамичными, больше похожими на полнофункциональный веб-сайт или приложение. Тестирование дизайна, который близок к завершению, предоставит вам наиболее релевантную обратную связь от пользователей на этом этапе.
Прототип против каркаса: инструменты
Знаете ли вы, что многие популярные инструменты цифрового дизайна включают в себя как функции создания каркасов, так и прототипов? Это эффективно ради преемственности и поможет дизайнерам перейти от низкой к высокой точности на одной платформе, сэкономив время и, как следствие, деньги. Некоторые из самых популярных инструментов включают InVision, Sketch и Adobe XD.
Важно отметить, что, хотя большинство этих инструментов могут создавать красивые прототипы и каркасы, которые становятся великолепными, функциональными веб-страницами, они не могут преодолеть разрыв, чтобы вытолкнуть их в качестве живого веб-сайта. Вот где система управления контентом, такая как HubSpot CMS, может помочь вам создавать страницы и управлять ими по ходу дела. (И да, есть бесплатная версия CMS Hub, если вы только начинаете.)
Каркас против макета против прототипа
Если вы работаете в продуктовой команде, вы, вероятно, также часто слышите, как обсуждаются макеты. Так где же появляется макет? Давайте сравним каркас, макет и прототип, потому что, да, есть разница.
Что такое мокап?
Чтобы быстро резюмировать, визуальные элементы вашего продукта находятся в центре внимания макета. Вместо того, чтобы заботиться о том, чтобы изложить ваши абстрактные идеи на бумаге (например, на этапе каркаса) или получить правильную функциональность и пользовательский опыт (как это было бы на этапе прототипа), макет - это все о визуальном. Из-за этого вы можете считать макет ступенькой между каркасом и прототипом.
Это не значит, что нет сходства между каркасом, макетом и прототипом. Все они преследуют одну и ту же основную цель: предоставить вашей команде возможность усовершенствовать ваш продукт во всех аспектах, прежде чем он попадет к конечному потребителю.
Если каркасы, как правило, имеют низкую точность, а прототипы — высокую точность, макет находится где-то посередине. Вы можете ожидать увидеть такие элементы дизайна, как фирменная символика, значки и цвета. Тем не менее, он не будет сосредоточен на пользовательском потоке или опыте, как это было бы с прототипом. Это та середина между 2D-каркасом, который обеспечивает простую инструкцию и окончательный проект прототипа.
Вот пример макета:
Прототипы и каркасы помогут вам создавать великолепные дизайны
Несмотря на сходство, каркасы и прототипы важны для того, чтобы все заинтересованные стороны проекта были на одной волне. Оба представляют собой важнейшие части процесса проектирования, которые дают наилучшую возможную версию вашего продукта.