Почему современные сайты состоят из блоков?

No items found.
Аудио перевод статьи
0:00
0:00
·

Современные сайты состоят из следующих блоков: хэддер (шапка сайта), футер (подвал сайта), левый и правый сайдбар, и основной блок — контент, который также может состоять из информационных блоков.

Почему блочная структура стала основой для современных веб-ресурсов? Чем это обосновано? И нужно ли придерживаться блочной структуры при проектировании дизайна сайтов?

Информация в блоках легче воспринимается людьми

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

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

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

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

Преимущества блочной структуры сайтов

Блочная структура дизайна позволяет эффективно настроить адаптивные версии сайта. При этом логические связи макета не будут нарушены.
Статья «Создание блоков для эффективных макетов»,  2016 год

Блоки на сайте являются отдельными элементами дизайна. При настройке адаптивности автономность каждого блока позволит менять размер блока под размеры дисплея.
Статья «Основы адаптивного дизайна», 2016 год

Разделение контента на блоки повышает удобство использования веб-страницы на 47% за счет улучшения читабельности и понятности представления текста.
Статистика Нильсен Норман Групп, 1997 год

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

Резюме

Блочная структура стала основой для проектирования современных сайтов по двум основным причинам:

  • пользователям удобнее изучать отдельные элементы на странице в виде блоков текста или блоков навигации;
  • блочная структура значительно упрощает процесс настройки адаптивности сайта под различные размеры экранов.

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

Источник:
·
comments powered by HyperComments