Каркас сайта

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

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

Вайрфреймы фокусируются на:

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

Каркас веб-сайта соединяет основную концептуальную структуру или информационную архитектуру с поверхностью или визуальным дизайном веб-сайта. ^[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 Цель состоит в том, чтобы облегчить использование максимально и эффективность. Обычными элементами дизайна интерфейса являются кнопки действий, текстовые поля, флажки, переключатели и раскрывающиеся меню.

См. также [ править ]

Ссылки [ править ]

^ Jump up to: ^а ^б ^с ^д ^и ^ж ^г ^час ^я ^дж Браун, Дэн М. (2011). Коммуникационный дизайн: разработка документации веб-сайта для дизайна и планирования (2-е изд.). Пресса Нью-Райдерс . ISBN 978-0321712462 .
^ Jump up to: ^а ^б ^с Анхелес, Майкл (25 сентября 2014 г.). " "Каркасы" " . Кониги Вики . Архивировано из оригинала 5 мая 2018 г. Проверено 25 марта 2011 г.
^ Jump up to: ^а ^б ^с ^д ^и ^ж Гарретт, Джесси Джеймс (2010). Элементы пользовательского опыта: ориентированный на пользователя дизайн для Интернета и за его пределами . Пресса Нью-Райдерс . ISBN 978-0321683687 .
^ Jump up to: ^а ^б ^с ^д Водтке, Кристина; Говелла, Остин (2009). Информационная архитектура: проекты Интернета (2-е изд.). Пресса Нью-Райдерс . ISBN 978-0321600806 .
^ Jump up to: ^а ^б Хольцблатт, Карен; Бейер, Хуг. «Контекстный дизайн» (PDF) . Проверено 1 ноября 2023 г.
^ Jump up to: ^а ^б «Низкокачественные и высокоточные каркасы — устойчивый креатив» . Стойкий креатив . 13 сентября 2016 г. Проверено 06 февраля 2018 г.
^ Jump up to: ^а ^б «Вайрфреймы: низкая точность против высокой точности» . Дюпон Креатив . 27 ноября 2016 г. Проверено 8 июля 2019 г.

[brown-1] Jump up to: ^а ^б ^с ^д ^и ^ж ^г ^час ^я ^дж Браун, Дэн М. (2011). Коммуникационный дизайн: разработка документации веб-сайта для дизайна и планирования (2-е изд.). Пресса Нью-Райдерс . ISBN 978-0321712462 .

[konigi-2] Jump up to: ^а ^б ^с Анхелес, Майкл (25 сентября 2014 г.). " "Каркасы" " . Кониги Вики . Архивировано из оригинала 5 мая 2018 г. Проверено 25 марта 2011 г.

[garrett-3] Jump up to: ^а ^б ^с ^д ^и ^ж Гарретт, Джесси Джеймс (2010). Элементы пользовательского опыта: ориентированный на пользователя дизайн для Интернета и за его пределами . Пресса Нью-Райдерс . ISBN 978-0321683687 .

[wodtke-4] Jump up to: ^а ^б ^с ^д Водтке, Кристина; Говелла, Остин (2009). Информационная архитектура: проекты Интернета (2-е изд.). Пресса Нью-Райдерс . ISBN 978-0321600806 .

[Holtzblatt-5] Jump up to: ^а ^б Хольцблатт, Карен; Бейер, Хуг. «Контекстный дизайн» (PDF) . Проверено 1 ноября 2023 г.

[:0-6] Jump up to: ^а ^б «Низкокачественные и высокоточные каркасы — устойчивый креатив» . Стойкий креатив . 13 сентября 2016 г. Проверено 06 февраля 2018 г.

[dupont-7] Jump up to: ^а ^б «Вайрфреймы: низкая точность против высокой точности» . Дюпон Креатив . 27 ноября 2016 г. Проверено 8 июля 2019 г.

[1]

[2]

[3]

[4]

[5]

[6]

[7]