Содержание
Прежде чем открывать редактор кода, стоит задать себе ещё один вопрос: что на вашей странице будет двигаться, а что реагировать на действия пользователя. Иными словами, где в плакате проходит граница между анимацией CSS и интерактивностью JavaScript.
Два видя модулей
Вспомните разделение, которое мы разбирали в статье про статичные и динамичные веб-плакаты. Статические модули — это всё, что живёт своей жизнью без участия пользователя. Вращающиеся формы, пульсирующие фоны, бегущие строки, мерцающий текст. Они создают визуальную среду и задают ритм, но не реагируют на действия зрителя.
Динамические модули — это элементы, которые откликаются на конкретное действие. Наведение курсора раскрывает скрытый слой, клик переключает состояние, перетаскивание перемещает объект, движение мыши деформирует композицию. Здесь зритель становится участником.
На этапе концепции полезно пройтись по макету и отметить для каждого элемента, к какому типу он относится. Буквально нарисуйте на черновике или в Figma два цвета: один для статических модулей, другой для реагирующих на действия пользователя. Эта карта покажет, как распределяется внимание на странице и где возникают точки взаимодействия.
Плотность на экране
Когда на одном экране одновременно происходит слишком многое — десяток анимаций, несколько кликабельных зон, мерцающий фон — зритель теряется. Он не понимает, куда смотреть и с чем взаимодействовать. Плотность визуального шума может работать как художественный приём, мы видели это в работах вроде «Кары», но даже там хаос фона контрастирует с читаемыми элементами переднего плана.
Подумайте о каждом экране как об отдельной сцене. Сколько вещей происходит одновременно? Есть ли среди них что-то, на чём взгляд может остановиться? Если всё движется с одинаковой скоростью и одинаковой амплитудой, ни один элемент не выделяется. Контраст между подвижным и неподвижным, между быстрым и медленным работает на иерархию внимания точно так же, как контраст размеров в типографике.
Простое правило: на одном экране — одна интерактивная зона. Это не жёсткое ограничение, а отправная точка. Если зритель видит перед собой три кликабельных элемента, два drag-and-drop-объекта и мерцающую кнопку, он скорее всего не нажмёт ни на что. Если же среди движущегося фона выделяется один элемент, который явно приглашает к взаимодействию, шансы на контакт резко возрастают.
Поймёт ли зритель
Это, пожалуй, самый недооценённый вопрос при проектировании интерактива. Вы придумали механику, где при клике на объект раскрывается скрытый слой. Но зритель не знает, что этот объект кликабелен. Он видит статичный элемент среди других статичных элементов и просто скроллит дальше.
В работе «Алло, Гораций?» эта задача решена аккуратно. Все интерактивные элементы сопровождаются cursor: pointer и визуальными изменениями при наведении, а после завершения действия появляется обратная связь — мигающий экран и текст, который подсказывает, что секция пройдена. Зритель всегда понимает, где он находится и что может делать.
Есть несколько способов подсказать зрителю, что элемент интерактивен. Визуальная инаковость: кликабельный элемент должен чем-то отличаться от окружения — цветом, формой, поведением. Если всё вокруг статично, а один объект слегка покачивается, то это уже отличная визуальная подсказка. Реакция на hover: даже простое изменение opacity или сдвиг на пару пикселей при наведении курсора сигнализирует о возможности взаимодействия. Текстовые подсказки или же маркер с вопросиком одни из самых надёжных способов дать зрителю конкретное представление, что он должен сделать.
Ощущение, когда страница откликается на твоё действие, само по себе создаёт вовлечение. Но чтобы оно возникло, зритель должен сначала понять, что интерактивный элемент вообще существует.
Библиотека модулей
На этом этапе вам не нужно знать, как именно реализовать задуманное. Вам нужно понять, что вы хотите, чтобы происходило. При наведении фон меняет цвет, при скролле текст появляется побуквенно, при клике объект разворачивается. Простые формулировки формулировки на уровне поведения.
Именно здесь пригодится библиотека модулей с нашего сайта. Каждый модуль описывает конкретный визуальный или интерактивный приём с примером кода и демонстрацией результата. Вам не нужно читать все модули подряд. Достаточно просмотреть список и отметить те, которые совпадают с вашими задумками и планами.
Модули устроены так, чтобы их можно было комбинировать. Один плакат может использовать «Движение» для фоновых элементов, «Ховер» для интерактивных подсказок и «Блюр» для эффекта глубины. Планирование модулей на этапе концепции экономит время, потому что вы заранее понимаете, из каких технических кирпичиков будет собран ваш плакат.
Помните о том, что некоторые модули вроде Hover или же Drag and Drop могут быть не доступны пользователям на некоторых устройствах. Например, большинство решений с перетскиванием попросту не будут работать на мобильных устройствах. Такие риски необходимо понимать и учитывтаь на уровне проектирования, важно давать всем пользователям одинаково насыщенный опыт изучения плаката.
Простая схема для начала
Перед тем как писать код, попробуйте ответить на четыре вопроса.
Что движется само? Перечислите элементы, которые будут анимированы через CSS без участия пользователя.
Что реагирует на зрителя? Перечислите элементы, которые должны откликаться на hover, клик, скролл или другие действия.
Сколько всего происходит на одном экране? Проверьте, не перегружена ли сцена. Если на одном экране больше двух-трёх одновременных событий, подумайте, можно ли что-то перенести на следующий экран или убрать. Хотя если ваша концепиция требует максимального визуального хаоса, то подумайте как можно ещё сильнее докрутить эту идею до максимума.
Поймёт ли зритель, с чем можно взаимодействовать? Для каждого интерактивного элемента придумайте подсказку, визуальную, текстовую или через поведение при hover.
