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

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

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

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

Давайте посмотрим „формула успеха“ Смотрите подробнее.

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

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

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

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

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

Это следует учитывать при разработке веб-сайта.

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

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

Цвет — Яркие цвета привлекают больше внимания, чем „Скука“ . Далее следуют более насыщенные и немного более темные. На третьем месте бледные цвета — они создают ощущение отдаленности. В нижней части цветовой иерархии находятся сероватые „убит“ Мелодии.

Читать также:  Alcatel 5, Alcatel 3, Alcatel 3v, Alcatel 3c, Alcatel 3x и Alcatel 1x станут новыми смартфонами компании.

Контраст — Драматический цветовой контраст более поразителен, чем светлый. Это позволяет выделить важные элементы веб-страницы. Все относительно, как говорили философы.

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

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

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

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

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

Читать также:  3 ключевых фактора успеха для мобильного приложения

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

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

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

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

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

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

Читать также:  Отзывчивый веб-дизайн

Z-образный

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

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

Шаблон F

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

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

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

Резюме

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

Понравилась статья? Поделиться с друзьями:
Что нужно знать пользователю?