🔜 Новый тренд дизайна: слайдер

Слайдеры - это один из тех элементов дизайна, который нравиться клиентам.

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

🔶Connected Slides

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

Современное направление этой техники - вытащить «слайды» из контейнера и сделать их более интересными и интерактивными.

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

🔶Scrolling Cues

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

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

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

🔶Mini Navigation

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

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

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

🔶Hover States

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

Вероятно, есть несколько способов сделать это, но одним из них является использование Hvass & Hannibal выше.

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

🔶For E-Commerce or Shopping

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

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

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

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

🔶To Showcase Multiple Elements

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

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

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

🔶In a Split Screen

Добавьте ползунок в другой элемент дизайна - разделенные экраны.

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

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

Источник