Каркас веб-сайта - Website wireframe

Каркасный документ для просмотра профиля человека

А каркас веб-сайта, также известный как схема страницы или же план экрана, это визуальное руководство который представляет собой скелетный каркас интернет сайт.[1]:166 Каркасы создаются с целью упорядочения элементов для наилучшего выполнения определенной цели. Целью обычно является бизнес-цель и творческая идея. Каркас изображает макет страницы или расположение содержимого веб-сайта, включая элементы интерфейса и системы навигации, и то, как они работают вместе.[2]:131 Каркасу обычно не хватает типографского стиля, цвета или графики, поскольку основное внимание уделяется функциональности, поведению и приоритету контента.[1]:167 Другими словами, он фокусируется на том, что делает экран, а не на том, как он выглядит.[1]:168 Каркасные модели могут быть карандашными рисунками или набросками на доске, или они могут быть созданы с помощью широкого набора бесплатных или коммерческих программных приложений. Каркасы обычно создаются бизнес-аналитиками, дизайнерами пользовательского интерфейса, разработчиками, визуальными дизайнерами и теми, кто имеет опыт в интерактивный дизайн, информационная архитектура и исследования пользователей.

Вайрфреймы ориентированы на:

  • Набор доступных функций
  • Относительные приоритеты информации и функций
  • Правила отображения определенных видов информации
  • Влияние разных сценариев на дисплей[1]:169

Каркас веб-сайта соединяет основную концептуальную структуру или информационная архитектура, на поверхность, или визуальный дизайн сайта.[2]:131 Каркасы помогают установить функциональность и взаимосвязь между различными шаблонами экрана веб-сайта. Итеративный процесс создания каркасов - эффективный способ быстрого создания прототипов страниц при одновременном измерении практичности концепции дизайна. Каркасное построение обычно начинается между «структурными работами высокого уровня, такими как блок-схемы или карты сайта … И экранов ».[1]:167 В процессе создания веб-сайта вайрфрейминг - это то место, где мышление становится осязаемым.[3]:186

Помимо веб-сайтов, каркасы используются для создания прототипов мобильных сайтов, компьютерных приложений или других экранных продуктов, которые включают взаимодействие человека с компьютером.[4]

Использование каркасов

Каркасные модели могут использоваться в разных дисциплинах. Разработчики используют каркасы, чтобы лучше понять функциональность сайта, а дизайнеры используют их, чтобы пользовательский интерфейс (UI) процесс. Дизайнеры взаимодействия с пользователем и информационные архитекторы используют каркасы для отображения путей навигации между страницами. Бизнес-аналитики используют каркасы для визуальной поддержки бизнес-правил и требований к взаимодействию на экране. Заинтересованные стороны из бизнеса просматривают каркасы, чтобы убедиться, что требования и цели выполнены в процессе разработки.[1]:167 К профессионалам, создающим каркасы, относятся бизнес-аналитики, информационные архитекторы, дизайнеры взаимодействия, дизайнеры взаимодействия с пользователем, графические дизайнеры, программисты и менеджеры по продуктам.[4]

Работа с каркасом может быть совместным усилием, поскольку оно связывает информационную архитектуру с визуальным дизайном. Из-за наложения в этих профессиональных ролях, могут возникнуть конфликты, делая Wireframing спорной части процесса проектирования.[3]:186 Поскольку каркасные модели обозначают эстетику «голых костей», дизайнерам трудно оценить, насколько точно каркас должен отображать фактические макеты экрана.[1]:168 Чтобы избежать конфликтов, рекомендуется, чтобы бизнес-аналитики, которые понимают требования пользователей, создали базовый каркас, а затем поработали с дизайнерами для дальнейшего улучшения каркасов. Еще одна трудность с каркасами заключается в том, что они не могут эффективно отображать интерактивные детали, поскольку являются статическими представлениями. Современный дизайн пользовательского интерфейса включает в себя различные устройства, такие как расширяющиеся панели, эффекты наведения и карусели, которые создают проблему для двухмерных диаграмм.[1]:169

Каркасные модели могут иметь разные уровни детализации и могут быть разделены на две категории с точки зрения точности или степени их сходства с конечным продуктом.

Низкая точность воспроизведения

Можно быстро создать каркасы с низкой точностью, напоминающие набросок или быстрый макет. Эти каркасы помогают команде проекта обмениваться идеями и более эффективно сотрудничать, поскольку они более абстрактны и используют прямоугольники и метки для представления содержимого.[3]:185 Фиктивное содержание, латинский текст-заполнитель (lorem ipsum ), образец или символический контент используются для представления данных, когда реальный контент недоступен.[1]:175 Например, вместо использования реальных изображений можно использовать прямоугольник-заполнитель.

Каркасные модели с низкой точностью могут использоваться для облегчения взаимодействия команды по проекту и используются на ранних стадиях проекта.[5]

Высокая точность

Каркасные модели с высокой точностью часто используются для документирования, потому что они включают уровень детализации, который более точно соответствует дизайну реальной веб-страницы, что требует больше времени для создания.[3]:185

Для простых рисунков или рисунков с низкой точностью. бумажное прототипирование это обычная техника. Поскольку эти наброски являются всего лишь изображениями, аннотации - смежные примечания для объяснения поведения - полезны.[1]:194 Для более сложных проектов популярно рендеринг каркасов с помощью компьютерного программного обеспечения. Некоторые инструменты позволяют включать интерактивность, включая Flash анимация и интерфейсные веб-технологии, такие как, HTML, CSS, и JavaScript.

Вайрфреймы с высокой точностью включают больше реального контента, особые варианты типографики и информацию о размерах изображения. В отличие от каркасов с низкой точностью, каркасы с высокой точностью могут включать в себя реальные изображения. Варианты цвета не включены, но различные значения цвета могут быть представлены в оттенках серого.[5]

Элементы каркасов

Каркасный план веб-сайта можно разбить на три компонента: информационный дизайн, дизайн навигации и дизайн интерфейса. Макет страницы - это место, где эти компоненты объединяются, а каркасная структура - это то, что отображает отношения между этими компонентами.[2]:131

Информационный дизайн

Основная статья: Информационный дизайн

Информационный дизайн - это представление - размещение и приоритезация информации таким образом, чтобы облегчить понимание. Информационный дизайн - это область дизайн пользовательского опыта, предназначенный для эффективного отображения информации для четкого общения. Для веб-сайтов информационные элементы должны располагаться таким образом, чтобы отражать цели и задачи пользователя.[2]:126

Дизайн навигации

Система навигации предоставляет набор экранных элементов, которые позволяют пользователю перемещать страницу за страницей через веб-сайт. Дизайн навигации должен сообщать о взаимосвязи между содержащимися в нем ссылками, чтобы пользователи понимали, какие у них есть варианты навигации по сайту. Часто веб-сайты содержат несколько систем навигации, таких как глобальная навигация, локальная навигация, дополнительная навигация, контекстная навигация и удобная навигация.[2]:120–122

Дизайн интерфейса

Основная статья: Дизайн пользовательского интерфейса

Дизайн пользовательского интерфейса включает в себя выбор и расположение элементов интерфейса, чтобы пользователи могли взаимодействовать с функциональными возможностями системы.[2]:30 Цель состоит в том, чтобы облегчить удобство использования и максимальную эффективность. Общие элементы, встречающиеся в дизайне интерфейса, - это кнопки действий, текстовые поля, флажки, переключатели и раскрывающиеся меню.

Смотрите также

Рекомендации

  1. ^ а б c d е ж грамм час я j Браун, Дэн М. (2011). Коммуникационный дизайн: разработка документации веб-сайта для дизайна и планирования (2-е изд.). New Riders Press. ISBN  978-0321712462.
  2. ^ а б c d е ж Гаррет, Джесси Джеймс (2010). Элементы пользовательского опыта: ориентированный на пользователя дизайн для Интернета и не только. New Riders Press. ISBN  978-0321683687.
  3. ^ а б c d Водтке, Кристина; Говелла, Остин (2009). Информационная архитектура: проекты для Интернета (2-е изд.). New Riders Press. ISBN  978-0321600806.
  4. ^ а б Анхелес, Майкл (25 сентября 2014 г.). ""Каркасы"". Konigi Вики. Архивировано из оригинал на 2018-05-05. Получено 2011-03-25.
  5. ^ а б "Низкая точность по сравнению с каркасными каркасами с высокой точностью - стойкий креатив". Стойкий творческий. 2016-09-13. Получено 2018-02-06.