Визуальная иерархия в дизайне веб-страниц

Содержание

Принципы иерархии
Иерархические модели
Z модель
F модель
Заключение

Узнайте, как устроен контент, чтобы следовать естественному движению взгляда.

Как люди смотрят на дизайн сайта? Когда дизайнер знает, как человек воспринимает то, что он или она видит, он или она может организовать элементы каждой веб-страницы максимально эффективно. В результате сайт привлекает пользователей, заставляет их оставаться дольше и узнавать больше контента. Давайте посмотрим на «формулу успеха» более подробно.

Содержание веб-страницы следует определенной иерархии. Заголовки располагаются перед текстом, меню обычно вверху или всплывающее сбоку при просмотре на смартфоне. Дизайнеры организуют контент так, чтобы самое главное было видно первым. Договоренность следует за нисходящей линией от самого высокого до самого низкого приоритета. Помимо важной организации контента, термин «иерархия» также используется для обозначения связей между разделами на веб-странице, где они существуют, конечно.

Когда пользователи просматривают веб-страницу, они фактически определяют иерархию для себя. То, что первым привлекает их внимание, является наиболее важным. Таким образом, они просматривают элементы контента иерархическим образом, каждый из которых подчиняется предыдущему.

Принципы иерархии

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

Факторы, которые определяют иерархию восприятия информации человеческим глазом и которую необходимо учитывать при размещении веб-страниц:

Размер – чем больше элемент, тем больше внимания он будет привлекать по сравнению с меньшими элементами на веб-странице. Это проверенное временем решение – заголовки газетных заголовков всегда имеют очень большой шрифт, чтобы «броситься в глаза».

Цвет – яркие цвета привлекают больше внимания, чем тусклые тона. За ними идут более насыщенные и чуть темнее. Третьи бледнеют – они создают ощущение расстояния. В нижней части цветовой иерархии присутствуют серые «убитые» тона.

Контраст – драматический контраст цвета более впечатляющий, чем свет. Это позволяет выделять важные элементы веб-страницы. Как говорят философы, все относительно. Основная часть страницы, где будет находиться основное содержание, должна быть похожа на дом, в который вы хотите войти – солнечная, просторная и гостеприимная. Он контрастирует с нижним колонтитулом страницы, который лежит в основе дома – он должен излучать безопасность, стабильность и надежность, при этом будучи чрезвычайно удобным для пользователя.

Макет – должен быть порядок в элементах дизайна веб-страницы. Одна из наиболее часто используемых традиционных компоновок включает в себя большой столбец с основным содержимым и меньший справа от него, который обычно используется для навигации (как в нашем блоге). Важная техническая информация обычно находится в верхнем правом углу страницы – это может быть кнопка запроса или краткая форма входа, например, Facebook.

Повторение – повторение стилей дает пользователям ощущение, что контент в одном стиле связан. Например, жирный текст в этой статье означает, что это основная тема (сущность) абзаца. Точно так же все слова и выражения, выделенные синим цветом, указывают, что при нажатии открывается другая веб-страница.

Близость – чем ближе элементы дизайна друг к другу, тем крепче отношения между ними с точки зрения потребителя. Например, в настоящем перечне факторов между ними есть межстрочный интервал, указывающий, что они являются отдельными элементами, но в то же время они не имеют отдельных заголовков, что дает понять, что это лист. Вы не думали об этом до сих пор с точки зрения пользовательского опыта, не так ли?

Пробелы – также известные как отрицательные или пробелы, они используются для включения не элементов веб-страницы, чтобы они выделялись. Они достигают двух важных преимуществ: визуально различая каждый блок информации, облегчая его восприятие.

Согласованность и стиль – они отдают приоритет одному фрагменту контента над другим, за исключением более реалистичного ощущения и эстетики. Как и шрифты, они могут задавать тон для дизайна сайта. Вот пример. Туристическому агентству нужны две целевые страницы для рекламы: одна для рекламы отпуска на море, а другая для отдыха у озера. Для первых фон используется, чтобы показать море с близкого расстояния – кристально чистая вода, под которой виден мелкий белый песок. Однако, когда та же техника применяется к странице, рекламирующей отдых на озере, вместо песка видны большие темные камни. Текстура в этом случае становится слишком отвлекающей и не такой приятной для глаз, потому что она очень насыщенная – камни имеют более плотную и богатую текстуру, чем мелкий песок.

Одной из основных тенденций в дизайне современных веб-сайтов является использование психологических приемов, помогающих дизайну «попасться на глаза». Это облегчает пользователям взаимодействие с контентом одновременно на более глубоком уровне. Конечно, должен быть баланс между психологическими и эстетическими методами.

Иерархические модели

Существуют базовые модели для иерархии веб-страниц. Они основаны на том, как мы выглядим, когда открываем новую страницу на экране. Например, как на русском, так и на других привычных европейских языках, он читается слева направо, и это, естественно, заставляет нас сначала смотреть в верхнем левом углу экрана. На иврите и арабском языке читается справа налево, и дизайнеры, которые создают веб-сайты для пользователей, использующих эти языки, должны помнить об этом. Здесь мы предложим две иерархические модели, которые могут быть применены к дизайну веб-страниц для сайтов, чьи пользователи читают слева направо.

Z модель

Эта модель рекомендуется для веб-страниц с небольшим количеством текста – обычно это страницы продукта для продукта или бренда и могут быть страницы продукта в интернет-магазине. Пользователи видят мозаичные текстовые плитки и просматривают их, перемещаясь из верхнего левого угла в верхний правый, а затем в нижний левый (по диагонали) и оттуда в нижний правый угол.

Иерархия элементов и информации соответственно должна следовать за этим движением, которое соответствует латинской букве Z. Есть четыре информационных точки, соединенные тремя линиями. Интересно отметить, что эта модель часто используется не только для адаптивных дизайнерских сайтов, работающих на планшетах и смартфонах, но и для мобильных приложений.

F модель

Эта модель обычно используется для страниц веб-сайта, которые имеют объемный текст и / или видеоконтент. Пользователи просматривают верхнюю часть страницы слева направо, затем прокручивают страницу вниз, следуя по левой стороне страницы и обращая внимание на визуальные подсказки о том, что они ищут. Когда они находят его, они прокручивают содержимое слева направо. Этот процесс повторяется, пока они не достигнут конца страницы. В результате получается модель, похожая на латинскую букву F. Отличным примером такой иерархической структуры является таблица факторов, которая является частью этой статьи.

Для веб-сайта вполне возможно иметь страницы дизайна Z и F одновременно. Домашняя страница обычно строится на первой странице, а страницы статьи построены на второй модели. Также возможно использовать творческое сочетание обеих моделей на одной веб-странице.

Заключение

Иерархия создает порядок для веб-страниц, которые будут иметь смысл для пользователей и активно их использовать. Дизайнеры расставляют приоритеты для определенных товаров в зависимости от того, что они хотят, чтобы покупатель делал, и от того, что бренд хочет, чтобы покупатель делал. Остальное – творчество.