Каркас веб-сайта , также известный как схема страницы или чертеж экрана , представляет собой визуальное руководство , представляющее скелетную структуру веб -сайта . [1] : 166 Термин каркас взят из других областей, в которых скелетная структура используется для представления трехмерной формы и объема. [2] Каркасы создаются с целью организации элементов для наилучшего достижения определенной цели. Цель обычно обусловлена бизнес-целью и творческой идеей. Каркас отображает макет страницы или расположение содержимого веб-сайта, включая элементы интерфейса и навигационные системы, а также то, как они работают вместе. [3] : 131 Каркас обычно не имеет типографского стиля, цвета или графики, поскольку основное внимание уделяется функциональности, поведению и приоритету содержимого. [1] : 167 Другими словами, он фокусируется на том, что делает экран, а не на том, как он выглядит. [1] : 168 Каркасы могут быть карандашными рисунками или набросками на доске, или они могут быть созданы с помощью широкого спектра бесплатных или коммерческих программных приложений. Каркасы обычно создаются бизнес-аналитиками, дизайнерами пользовательского опыта, разработчиками, визуальными дизайнерами и теми, кто имеет опыт в проектировании взаимодействия , информационной архитектуре и исследовании пользователей.
Каркасы фокусируются на:
Каркас веб-сайта соединяет базовую концептуальную структуру или информационную архитектуру с поверхностью или визуальным дизайном веб-сайта. [3] : 131 Каркасы помогают установить функциональность и отношения между различными шаблонами экрана веб-сайта. Создание каркасов — это итеративный процесс, который является эффективным способом создания быстрых прототипов страниц, одновременно измеряя практичность концепции дизайна. Каркасирование обычно начинается между «высокоуровневой структурной работой — например, блок-схемами или картами сайта — и дизайном экрана». [1] : 167 В процессе создания веб-сайта каркасное моделирование — это то, где мышление становится осязаемым. [4] : 186
Каркасы также используются для создания прототипов мобильных сайтов, компьютерных приложений или других экранных продуктов, которые предполагают взаимодействие человека и компьютера . [2]
Каркасы могут использоваться в различных дисциплинах. Разработчики используют каркасы, чтобы получить более ощутимое представление о функциональности сайта, в то время как дизайнеры используют их для продвижения процесса пользовательского интерфейса (UI). Дизайнеры пользовательского опыта и информационные архитекторы используют каркасы, чтобы показать пути навигации между страницами. Бизнес-аналитики используют каркасы для визуальной поддержки бизнес-правил и требований к взаимодействию для экрана. Заинтересованные стороны бизнеса проверяют каркасы, чтобы убедиться, что требования и цели выполняются через дизайн. [1] : 167 Специалисты, которые создают каркасы, включают бизнес-аналитиков, информационных архитекторов, дизайнеров взаимодействия, дизайнеров пользовательского опыта, графических дизайнеров, программистов и менеджеров по продуктам. [2]
Работа с каркасами может быть совместным усилием, поскольку она связывает информационную архитектуру с визуальным дизайном. Из-за совпадений в этих профессиональных ролях могут возникать конфликты, делая каркас спорной частью процесса проектирования. [4] : 186 Поскольку каркасы означают эстетику «голых костей», дизайнерам сложно оценить, насколько близко каркас должен отображать фактические макеты экрана. [1] : 168 Чтобы избежать конфликтов, рекомендуется, чтобы бизнес-аналитики, которые понимают требования пользователя, создали базовый каркас, а затем работали с дизайнерами для дальнейшего улучшения каркасов. Другая сложность с каркасами заключается в том, что они неэффективно отображают интерактивные детали, поскольку являются статическими представлениями. Современный дизайн пользовательского интерфейса включает в себя различные устройства, такие как расширяющиеся панели, эффекты наведения и карусели, которые представляют собой проблему для двухмерных диаграмм. [1] : 169
Главное преимущество каркасов заключается в том, что их можно использовать для итерации любого интерфейса в гибкой манере. Это происходит посредством процесса, часто называемого тестами удобства использования, где пользователям предоставляется возможность взаимодействовать с интерфейсом и либо думать вслух о своем мыслительном процессе, либо отвечать на более структурированные вопросы по ходу. После каждого испытания с пользователем исследователь пользовательского опыта может определить общие взаимодействия с интерфейсом, синтезировать данные и перепроектировать соответствующим образом. [5]
Из-за общей низкой точности каркаса, вносить изменения очень просто и экономически эффективно. Цель каркаса — зафиксировать дизайн фундаментальной структуры, высокоуровневый шаблон взаимодействия в интерфейсе, также известный как критические точки, [5], поэтому он действительно позволяет дизайнеру работать быстро, идеально подходит для гибкой среды, где члены группы работают совместно, чтобы «перейти» к следующей итерации.
Каркасы могут иметь разную степень детализации и могут быть разделены на две категории с точки зрения точности, или того, насколько близко они напоминают конечный продукт.
Низкая точность
Напоминающие грубый набросок или быстрый макет, каркасы с низкой точностью могут быть быстро созданы. Эти каркасы помогают команде проекта обмениваться идеями и сотрудничать более эффективно, поскольку они более абстрактны, используя прямоугольники и маркировку для представления контента. [4] : 185 Фиктивный контент, латинский текст-заполнитель ( lorem ipsum ), образец или символический контент используются для представления данных, когда реальный контент недоступен. [1] : 175 Например, вместо использования реальных изображений можно использовать прямоугольник-заполнитель.
Каркасы низкой точности могут использоваться для облегчения командного взаимодействия в проекте и применяются на ранних стадиях проекта. [6] [7]
Высокая точность
Высокоточные каркасы часто используются для документирования, поскольку они включают уровень детализации, который более точно соответствует дизайну реальной веб-страницы, поэтому на их создание уходит больше времени. [4] : 185
Для простых или неточных чертежей бумажное прототипирование является распространенной техникой. Поскольку эти эскизы являются всего лишь представлениями, аннотации — смежные заметки для объяснения поведения — полезны. [1] : 194 Для более сложных проектов популярна визуализация каркасов с помощью компьютерного программного обеспечения. Некоторые инструменты позволяют включать интерактивность, включая Flash-анимацию и интерфейсные веб-технологии, такие как HTML , CSS и JavaScript .
Высокоточные каркасы включают более реальный контент, конкретные варианты типографики и информацию о размерах изображения. В отличие от низкоточных каркасов, высокоточные каркасы могут включать реальные изображения. Выбор цвета не включен, но различные значения цвета могут быть представлены в оттенках серого. [6] [7]
Скелетный план веб-сайта можно разбить на три компонента: информационный дизайн, навигационный дизайн и дизайн интерфейса. Макет страницы — это то, где эти компоненты объединяются, в то время как каркасное моделирование — это то, что отображает отношения между этими компонентами. [3] : 131
Информационный дизайн — это представление, размещение и приоритизация информации таким образом, чтобы облегчить понимание. Информационный дизайн — это область дизайна пользовательского опыта , предназначенная для эффективного отображения информации для ясной коммуникации. Для веб-сайтов элементы информации должны быть организованы таким образом, чтобы отражать цели и задачи пользователя. [3] : 126
Система навигации предоставляет набор элементов экрана, которые позволяют пользователю перемещаться со страницы на страницу через веб-сайт. Дизайн навигации должен сообщать о взаимосвязи между ссылками, которые он содержит, чтобы пользователи понимали, какие возможности навигации по сайту у них есть. Часто веб-сайты содержат несколько систем навигации, таких как глобальная навигация, локальная навигация, дополнительная навигация, контекстная навигация и навигация вежливости. [3] : 120–122
Дизайн пользовательского интерфейса включает выбор и расположение элементов интерфейса, чтобы пользователи могли взаимодействовать с функциональными возможностями системы. [3] : 30 Цель состоит в том, чтобы максимально облегчить удобство использования и эффективность. Распространенными элементами дизайна интерфейса являются кнопки действий, текстовые поля, флажки, радиокнопки и раскрывающиеся меню.