7 интересных способов отображения анонсов статей сайта

От автора: анонсы статей сайта могут играть важную роль в UX. Анонсы дают пользователю понять, что будет внутри статьи, заманивая прочесть весь пост. Во многих CMS, например, WordPress есть возможность создавать пользовательские анонсы (или отображать Х число слов с начала статьи), которая встроена в ядро. Однако, когда речь заходит о стиле и функциональности, про анонсы часто забывают. Поэтому мы собрали коллекцию уникальных способов, которые помогут превратить анонсы из простого текста во что-то большее. Примеры ниже улучшают внешний вид анонсов, а некоторые даже добавляют функционал.

Табы анонсов

Пример с навигацией по вкладкам отлично подходит, когда пространство ограничено. Представьте, что вы показываете посты из определенных категорий. Сейчас на одной вкладке отображается один пост. Но если немного напрячь извилины и покодить, каждая вкладка может содержать ТОП-5 статей из каждой категории.

Скрол для отображения полной статьи

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

Все в карточке

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

CSS раскрытие

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

Раскрытие перспективы

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

Полноэкранное интро

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

Быть в центре внимания

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

Больше чем слова

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

Автор: Eric Karkovack

Источник: //speckyboy.com/

Редакция: Команда webformyself.

Комментарии Вконтакте: