Каркас веб-сайта - Website wireframe
Сайт каркасный , также известный как страница схема или чертеж экрана , является визуальным руководством , которое представляет костные рамки веб - сайт . Термин каркас взят из других областей, в которых каркасный каркас используется для представления трехмерной формы и объема. Каркасы создаются с целью упорядочения элементов для наилучшего выполнения определенной цели. Цель обычно определяется бизнес-целью и творческой идеей. Каркас отображает макет страницы или расположение содержимого веб-сайта, включая элементы интерфейса и системы навигации, а также то, как они работают вместе. Каркасу обычно не хватает типографского стиля, цвета или графики, поскольку основное внимание уделяется функциональности, поведению и приоритету контента. Другими словами, он фокусируется на том, что делает экран, а не на том, как он выглядит. Каркасные модели могут быть карандашными рисунками или набросками на доске, или они могут быть созданы с помощью широкого набора бесплатных или коммерческих программных приложений. Каркасы обычно создаются бизнес-аналитиками, дизайнерами пользовательского интерфейса, разработчиками, визуальными дизайнерами, а также специалистами в области дизайна взаимодействия , информационной архитектуры и исследования пользователей.
Вайрфреймы ориентированы на:
- Набор доступных функций
- Относительные приоритеты информации и функций
- Правила отображения определенных видов информации
- Влияние разных сценариев на дисплей
Каркас веб-сайта связывает базовую концептуальную структуру или информационную архитектуру с поверхностью или визуальным дизайном веб-сайта. Каркасы помогают установить функциональность и взаимосвязь между различными шаблонами экрана веб-сайта. Итеративный процесс создания каркасов - эффективный способ быстрого создания прототипов страниц при одновременном измерении практичности концепции дизайна. Каркасное построение обычно начинается между «структурными работами высокого уровня, такими как блок-схемы или карты объектов, - и дизайном экранов». В процессе создания веб-сайта вайрфрейминг - это то место, где мышление становится осязаемым.
Каркасные модели также используются для создания прототипов мобильных сайтов, компьютерных приложений или других экранных продуктов, которые предполагают взаимодействие человека с компьютером .
Использование каркасов
Каркасы могут использоваться в разных дисциплинах. Разработчики используют каркасы, чтобы лучше понять функциональность сайта, а дизайнеры используют их для продвижения процесса пользовательского интерфейса (UI). Дизайнеры взаимодействия с пользователем и информационные архитекторы используют каркасы для отображения путей навигации между страницами. Бизнес-аналитики используют каркасы для визуальной поддержки бизнес-правил и требований к взаимодействию на экране. Заинтересованные стороны из бизнеса просматривают макеты, чтобы убедиться, что требования и цели выполнены в процессе разработки. К профессионалам, создающим каркасы, относятся бизнес-аналитики, информационные архитекторы, дизайнеры взаимодействия, дизайнеры взаимодействия с пользователем, графические дизайнеры, программисты и менеджеры по продуктам.
Работа с каркасом может быть совместным усилием, поскольку оно связывает информационную архитектуру с визуальным дизайном. Из-за совпадения этих профессиональных ролей могут возникать конфликты, в результате чего каркасные модели становятся спорной частью процесса проектирования. Поскольку каркасные модели обозначают эстетику «голых костей», дизайнерам сложно оценить, насколько точно каркас должен отображать фактические макеты экрана. Во избежание конфликтов рекомендуется, чтобы бизнес-аналитики, которые понимают требования пользователей, создали базовый каркас, а затем поработали с дизайнерами над дальнейшим улучшением каркасов. Еще одна трудность с каркасами заключается в том, что они не могут эффективно отображать интерактивные детали, поскольку являются статическими представлениями. Современный дизайн пользовательского интерфейса включает в себя различные устройства, такие как расширяющиеся панели, эффекты наведения и карусели, которые создают проблему для двухмерных диаграмм.
Каркасные модели могут иметь разные уровни детализации и могут быть разбиты на две категории с точки зрения точности или степени их сходства с конечным продуктом.
Низкая точность воспроизведения
Можно быстро создать каркасы с низкой точностью, напоминающие черновой набросок или быстрый макет. Эти каркасы помогают проектной команде обмениваться идеями и более эффективно сотрудничать, поскольку они более абстрактны и используют прямоугольники и метки для представления содержимого. Фиктивное содержимое, латинский текст-заполнитель ( lorem ipsum ), образец или символическое содержимое используются для представления данных, когда реальное содержимое недоступно. Например, вместо использования реальных изображений можно использовать прямоугольник-заполнитель.
Каркасные модели с низкой точностью могут использоваться для облегчения взаимодействия команды по проекту и используются на ранних стадиях проекта.
Высокая точность
Каркасные модели с высокой точностью часто используются для документирования, потому что они включают уровень детализации, который более точно соответствует дизайну реальной веб-страницы, что требует больше времени для создания.
Для простых чертежей или чертежей с низкой точностью обычно используется бумажное прототипирование . Поскольку эти наброски являются всего лишь представлениями, полезны аннотации - примечания, поясняющие поведение. Для более сложных проектов популярно рендеринг каркасов с помощью компьютерного программного обеспечения. Некоторые инструменты позволяют включать интерактивность, включая Flash-анимацию , и интерфейсные веб-технологии, такие как HTML , CSS и JavaScript .
Высокоточные каркасы включают в себя более реальный контент, конкретные варианты типографики и информацию о размерах изображения. В отличие от каркасов с низкой точностью, каркасы с высокой точностью могут включать в себя реальные изображения. Варианты цвета не включены, но различные значения цвета могут быть представлены в оттенках серого.
Элементы каркасов
Каркасный план веб-сайта можно разбить на три компонента: информационный дизайн, дизайн навигации и дизайн интерфейса. Макет страницы - это место, где эти компоненты объединяются, а каркасная структура - это то, что отображает отношения между этими компонентами.
Информационный дизайн
Информационный дизайн - это представление - размещение и приоритезация информации таким образом, чтобы облегчить понимание. Информационный дизайн - это область дизайна пользовательского опыта , предназначенная для эффективного отображения информации для четкого общения. Для веб-сайтов информационные элементы должны быть расположены таким образом, чтобы отражать цели и задачи пользователя.
Система навигации предоставляет набор экранных элементов, которые позволяют пользователю перемещать страницу за страницей через веб-сайт. Дизайн навигации должен сообщать о взаимосвязи между содержащимися в нем ссылками, чтобы пользователи понимали, какие у них есть варианты навигации по сайту. Часто веб-сайты содержат несколько систем навигации, таких как глобальная навигация, локальная навигация, дополнительная навигация, контекстная навигация и бесплатная навигация.
Дизайн интерфейса
Дизайн пользовательского интерфейса включает в себя выбор и расположение элементов интерфейса, чтобы пользователи могли взаимодействовать с функциональными возможностями системы. Цель состоит в том, чтобы максимально облегчить удобство использования и эффективность. Общие элементы, встречающиеся в дизайне интерфейса, - это кнопки действий, текстовые поля, флажки, переключатели и раскрывающиеся меню.
Смотрите также
- Комплексная планировка
- Графический дизайн
- Информационная архитектура
- Интерактивный дизайн
- Дизайн пользовательского опыта
- Дизайн пользовательского интерфейса
- веб-дизайн