F и Z паттерны: HTML/CSS руководство

TL;DR

F‑ и Z‑паттерны помогают направить взгляд пользователя по странице и увеличить шанс взаимодействия с CTA. Используйте F‑паттерн для насыщенных текстом страниц, Z‑паттерн — для страниц с минимальным контентом. Ниже — готовые HTML/CSS примеры, рекомендации по применению и прощёные чек‑листы для команды.

Иллюстрация схем F и Z для веб‑дизайна

В эпоху информационной перегрузки важно сделать сайт приятным для восприятия и упорядочить контент при помощи визуальной иерархии. Дизайн учитывает цвет, контраст, отступы, выравнивание и паттерны сканирования страницы. Паттерны F и Z — одни из самых распространённых и простых для реализации при помощи HTML и CSS.

Далее — практические примеры и советы по внедрению. Всё готово для копирования и адаптации под ваш проект.

Дизайн F‑паттерна с HTML и CSS

Согласно F‑паттерну, взгляд посетителя начинает сканирование с верхнего левого угла и движется вправо по горизонтали, затем опускается и снова сканирует. Этот шаблон особенно эффективен для страниц с большим объёмом текста: заголовки, первые строки абзацев и списки получают больше внимания.

HTML

  
  
  
  
   
  
     
  
     
  
     
  
     
  
     
  
     
  
     
  
     
  
     
  
     
  
     
  
  
   F and Z-Patterns Using HTML and CSS  
  
   
  
   
  
   F-Pattern Using HTML and CSS  
  
     
  
     Design Patterns  
  
       
  
       Most users follow the F-pattern for content heavy websites.  
  
       
  
       
  
       Lorem ipsum dolor sit amet consectetur adipisicing elit vitae incidunt  
  
       similique!  
  
       
  
  
  
       
  
         
  
           
  
           Nobis assumenda, in recusandae quam laborum quibusdam sint iusto  
  
           excepturi omnis earum aspernatur magnam maiores cum facilis alias  
  
           quo id. Dolorem, expedita!  
  
           
  
           
  
           Facilis obcaecati fugiat libero quas quod animi rerum  
  
           exercitationem, accusantium autem dicta incidunt, qui voluptatem,  
  
           recusandae nobis inventore sunt accusamus neque nam?  
  
           
  
           
  
           Officia deserunt assumenda aut temporibus eligendi obcaecati  
  
           similique totam iste aliquid molestias rem modi, inventore ex  
  
           voluptatem repellendus voluptas animi? Suscipit, reprehenderit?

Общий CSS (используется для обоих паттернов)

Поскольку мы делаем и F, и Z‑паттерны, часть CSS общая для обоих примеров.

* {  
  
 padding: 0px;  
  
 margin: 0px;  
  
 box-sizing: border-box;  
  
}  
  
  
  
html {  
  
 font-size: 62.5%;  
  
}  
  
  
  
body {  
  
 font-family: 'Rubik', sans-serif;  
  
 line-height: 1;  
  
 font-weight: 400;  
  
 color: #555;  
  
 font-size: 1.8rem;  
  
}  
  
  
  
header {  
  
 font-size: 4.4rem;  
  
 text-align: center;  
  
 padding: 0.8rem;  
  
 background: #e78229;  
  
 color: #fff3e8;  
  
}  
  
  
  
.container {  
  
 max-width: 130rem;  
  
 background-color: #fff3e8;  
  
 margin: 0 auto;  
  
}  
  
.padding {  
  
 padding: 3.6rem;  
  
}  
  
  
  
.css-image {  
  
 height: 24rem;  
  
 width: 24rem;  
  
 background-color: #e78229;  
  
 justify-self: center;  
  
 position: relative;  
  
}

Стилизация для F‑паттерна

.logo {  
  
 font-family: 'Pacifico', cursive;  
  
 font-style: bold;  
  
 font-size: 4.4rem;  
  
 margin-bottom: 5.6rem;  
  
}  
  
  
.text-heading-primary {  
  
 font-size: 3.6rem;  
  
 margin-bottom: 2.4rem;  
  
 color: #e78229;  
  
 font-weight: 600;  
  
}  
  
  
.text-heading {  
  
 font-size: 2.2rem;  
  
 margin-bottom: 5.6rem;  
  
 font-style: italic;  
  
}  
  
  
.grid-2-cols {  
  
 display: grid;  
  
 grid-template-columns: 1fr 1fr;  
  
 padding: 2.4rem;  
  
}  
  
  
.text {  
  
 display: grid;  
  
 gap: 3.6rem;  
  
 margin-bottom: 4.8rem;  
  
  
  
}  
  
.img-01 {  
  
 border-radius:  5% 40% 40% 40%;  
  
}  
  
  
button {  
  
 font-family: 'Rubik', sans-serif;  
  
 font-size: 1.8rem;  
  
 color: #555;  
  
 font-weight: 600;  
  
 padding: 2.4rem;  
  
 display: inline-block;  
  
 margin-right: 5rem;  
  
 border: none;  
  
 border-radius: 15px 15px 15px 15px;  
  
 background-color: #ffc18b;  
  
  
  
}

Результат визуального расположения элементов:

Пример расположения элементов по F‑паттерну

Первое, что привлекает взгляд — заголовок и подзаголовок. Затем глаза скользят по спискам и кнопкам CTA. Изображение выступает вспомогательным элементом. Расположение элементов по F‑паттерну формирует предсказуемый маршрут взгляда и подводит пользователя к кнопке действия.

Дизайн Z‑паттерна с HTML и CSS

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

Пользователь начинает сканировать в верхнем левом углу, проводит взгляд вправо, затем вниз по диагонали и вновь вправо — получается буква Z.

HTML

  
  
  
  
   
  
     
  
     
  
     
  
     
  
     
  
     
  
     
  
     
  
   F and Z-Patterns Using HTML and CSS  
  
   
  
   
  
   Z-Pattern Using HTML and CSS  
  
     
  

  
  
       
  
       01  
  
       Minimal copy? Use the Z-Pattern right away!  
  
         
  
         Lorem, ipsum dolor sit amet consectetur adipisicing elit. Eum  
  
         voluptatum ad, impedit ab consequatur porro harum a distinctio  
  
         accusantium reiciendis rerum, vel ut blanditiis excepturi nostrum,  
  
         earum labore esse culpa?  
  
         
  
       
  
       
  
  
  

  
  
       
  
       
  
       02  
  
       Minimal copy? Use the Z-Pattern right away!  
  
         
  
         Lorem, ipsum dolor sit amet consectetur adipisicing elit. Eum  
  
         voluptatum ad, impedit ab consequatur porro harum a distinctio  
  
         accusantium reiciendis rerum, vel ut blanditiis excepturi nostrum,  
  
         earum labore esse culpa?

Стилизация для Z‑паттерна

Простейший способ реализовать Z‑паттерн — сетка CSS grid из двух колонок.

Примечание: не забудьте подключить общий файл general.css, который используется и в F‑паттерне.

.container {  
  
 max-width: 130rem;  
  
 background-color: #fff3e8;  
  
 margin: 0 auto;  
  
}  
  
  
.grid-2-cols {  
  
 display: grid;  
  
 grid-template-columns: 1fr 1fr;  
  
 padding: 5rem;  
  
 gap: 5.2rem;  
  
 justify-items: center;  
  
 align-items: center;  
  
}  
  
  
.text {  
  
 max-width: 45rem;  
  
}  
  
  
.text-number {  
  
 color: #ccc;  
  
 font-size: 8.6rem;  
  
 font-weight: 600;  
  
 margin-bottom: 1.2rem;  
  
}  
  
  
.text-heading {  
  
 font-size: 2.4rem;  
  
 font-weight: 600;  
  
 margin-bottom: 3.4rem;  
  
}  
  
  
.css-image {  
  
 height: 24rem;  
  
 width: 24rem;  
  
 background-color: #e78229;  
  
 justify-self: center;  
  
 position: relative;  
  
}  
  
.img-01 {  
  
 border-radius: 5% 40% 40% 40%;  
  
}  
  
.img-02 {  
  
 border-radius: 40% 5% 40% 40%;  
  
}

Результат визуального расположения элементов:

Пример расположения элементов по Z‑паттерну

Z‑паттерн идеально подходит для страниц с лаконичным текстом. Правильно расставленные акценты и пустое пространство направляют внимание пользователя и мотивируют к действию.

Когда использовать F и Z паттерны

F‑паттерн: длинные статьи, блоги, страницы с большим количеством списков или описаний. Помогает выделить заголовки, первые строки абзацев и CTA.
Z‑паттерн: лендинги, промостраницы, страницы с короткими блоками контента и крупными визуальными акцентами.

Важно: паттерн — это не правило, а рекомендация; тестируйте изменения с реальными пользователями.

Когда эти паттерны не подходят

Если пользовательская задача требует пошагового процесса (онлайн‑форма с множеством полей) — паттерны могут отвлекать.
В интерфейсах с интерактивными панелями и сложной навигацией (дашборды, аналитика) поведение взгляда другое.
При адаптивном дизайне на маленьких экранах порядок чтения меняется — нужно проверять на мобильных.

Альтернативные подходы и сочетания

Картографирование внимания (attention mapping) — анализируя логи и тепловые карты, можно спроектировать уникальную композицию.
Карточный интерфейс (card UI) отлично работает для каталога или каталожных страниц.
Модульная сетка и флексбокс помогают комбинировать элементы и сохранять порядок при разных ширинах экрана.

Практическая методика внедрения (мини‑руководство)

Определите цель страницы и основное действие (CTA).
Выберите паттерн: F для текста, Z для минимального контента.
Разметьте страницу: заголовки, лид, списки, изображения, CTA.
Реализуйте сетку (CSS grid/flex) и стили (шрифты, контраст, отступы).
Проведите быстрые юзабили‑тесты (5–7 пользователей) и соберите тепловые карты.
Итеративно улучшайте по данным и метрикам (CTR, время на странице, конверсии).

Чек‑лист по ролям

Дизайнер: выбрать паттерн, подготовить визуальные акценты, обеспечить контраст и читаемость.
Верстальщик: настроить grid/flex, адаптивность, доступность (ARIA, tab order).
Продукт‑менеджер: задать KPI страницы и организовать тестирование.

Критерии приёмки

Заголовок и подзаголовок видимы при первом скролле на десктопе.
CTA доступна и заметна без лишнего поиска.
Мобильная версия сохраняет логическую последовательность блоков.
Сбор метрик: рост кликов на CTA или уменьшение показателя отказов в тестовой выборке.

Небольшая галерея исключительных случаев

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

Краткая терминология

F‑паттерн: схема сканирования, где взгляд движется в форме буквы F.
Z‑паттерн: схема сканирования в виде буквы Z, используется при минимальном тексте.
CTA: Call to Action — кнопка или элемент, призывающий к действию.

Итог

F‑ и Z‑паттерны — практичные инструменты для управления визуальным потоком на странице. Они просты в реализации с помощью CSS grid/flex и улучшают шанс, что пользователь увидит ключевые элементы. Главное — тестировать и адаптировать под конкретную аудиторию и устройство.