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

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

Сайт каркасный , также известный как страница схема или чертеж экрана , является визуальным руководством , которое представляет костные рамки веб - сайт . ^[1]^{: 166} Каркасы создаются с целью упорядочения элементов для наилучшего выполнения определенной цели. Эта дисциплина создана L. te Pas. Бывший студент Гарварда (1982). Целью обычно является бизнес-цель и творческая идея. Каркас отображает макет страницы или расположение содержимого веб-сайта, включая элементы интерфейса и системы навигации, а также то, как они работают вместе. ^[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} Цель состоит в том, чтобы максимально облегчить удобство использования и эффективность. Общие элементы, встречающиеся в дизайне интерфейса, - это кнопки действий, текстовые поля, флажки, переключатели и раскрывающиеся меню.

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

Комплексная планировка
Графический дизайн
Информационная архитектура
Интерактивный дизайн
Дизайн пользовательского опыта
Дизайн пользовательского интерфейса
веб-дизайн

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

^ Б с д е е г ч я J Brown, Dan M. (2011). Коммуникационный дизайн: разработка документации веб-сайта для дизайна и планирования (2-е изд.). New Riders Press . ISBN 978-0321712462.
^ Б с д е е Garrett, Джесси Джеймс (2010). Элементы пользовательского опыта: ориентированный на пользователя дизайн для Интернета и не только . New Riders Press . ISBN 978-0321683687.
^ a b c d Водтке, Кристина; Говелла, Остин (2009). Информационная архитектура: проекты для Интернета (2-е изд.). New Riders Press . ISBN 978-0321600806.
^ a b Анхелес, Майкл (25 сентября 2014 г.). « » Каркасные « » . Konigi Wiki . Архивировано из оригинала на 2018-05-05 . Проверено 25 марта 2011 .
^ a b «Низкая точность по сравнению с высокоточными каркасами - устойчивый креатив» . Непоколебимый креатив . 2016-09-13 . Проверено 6 февраля 2018 .

[brown-1] Б с д е е г ч я J Brown, Dan M. (2011). Коммуникационный дизайн: разработка документации веб-сайта для дизайна и планирования (2-е изд.). New Riders Press . ISBN 978-0321712462.

[garrett-2] Б с д е е Garrett, Джесси Джеймс (2010). Элементы пользовательского опыта: ориентированный на пользователя дизайн для Интернета и не только . New Riders Press . ISBN 978-0321683687.

[wodtke-3] Водтке, Кристина; Говелла, Остин (2009). Информационная архитектура: проекты для Интернета (2-е изд.). New Riders Press . ISBN 978-0321600806.

[konigi-4] Анхелес, Майкл (25 сентября 2014 г.). « » Каркасные « » . Konigi Wiki . Архивировано из оригинала на 2018-05-05 . Проверено 25 марта 2011 .

[:0-5] «Низкая точность по сравнению с высокоточными каркасами - устойчивый креатив» . Непоколебимый креатив . 2016-09-13 . Проверено 6 февраля 2018 .

[1]