Smart Tiles Введение
Плитка, которая реагирует на приближение указателя, сообщает посетителю «это кнопка» ещё до нажатия. Smart Tiles предлагает девять таких реакций — от лёгкого затемнения до полного инвертирования цветов, — каждая с настраиваемой силой и временем перехода. В этой статье описаны настройки, действие каждого эффекта и удачные сочетания.
Включение эффекта
- Откройте страницу в режиме редактирования и нажмите Изменить веб-часть, чтобы открыть область свойств.
- В группе Вид включите Эффект наведения. Под переключателем появятся ещё три элемента управления.
- Выберите эффект в списке Эффект.
- Задайте силу ползунком под списком. Его подпись — Процент (%), град. или пикс. — зависит от эффекта.
- Задайте Длительность перехода — от 0 до 5 секунд с шагом 0,1.
Наведите указатель на плитку на странице, чтобы увидеть результат; настройки применяются сразу.
Девять эффектов
Эффекты — это фильтры изображения браузера, применяемые ко всей плитке — фону, значку и текстам вместе. По смыслу силы они делятся на две группы.
Эффекты, для которых 100 % — исходный вид. Меньшие значения уменьшают свойство; плитка возвращается к обычному виду, когда указатель уходит.
| Эффект | При меньших значениях |
|---|---|
| Яркость | Плитка темнеет. 70–85 % — классический вид «нажатой» кнопки; 0 % — чёрный. |
| Контраст | Цвета сглаживаются к серому. 50 % даёт мягкую, выцветшую плитку. |
| Насыщенность | Цвета блёкнут к серому при сохранении яркости. 0 % — монохромная плитка. |
| Прозрачность | Плитка становится полупрозрачной, и сквозь неё просвечивает страница. 70–80 % — едва заметно; 0 % делает плитку невидимой. |
Эффекты, для которых 0 % — исходный вид. Большие значения применяют эффект сильнее.
| Эффект | При больших значениях |
|---|---|
| Оттенки серого | Цвета убираются; 100 % — чёрно-белая плитка. |
| Сепия | Плитка приобретает тёплый коричневатый оттенок; 100 % — плитка полностью в тонах сепии. |
| Инвертирование цвета | Цвета инвертируются; при 100 % белая плитка становится чёрной, а синий — оранжевым. 20–30 % дают заметное, но не резкое изменение. |
Эффекты с другими единицами.
| Эффект | Единица и поведение |
|---|---|
| Поворот оттенка | Градусы, 0–360. Сдвигает каждый цвет плитки по цветовому кругу: при 180° синий становится оранжевым, а зелёный — пурпурным; 360° — снова исходный вид. Небольшие значения (15–30°) дают живой сдвиг, остающийся в семействе исходного цвета. |
| Размытие | Пиксели, 0–20. Смягчает плитку; 1–2 px — лёгкая смена фокуса, 5 px и более делают заголовок нечитаемым. |
Сила для каждой единицы запоминается отдельно: переключение с Яркость 70 % на Поворот оттенка и обратно восстанавливает 70 %.
Длительность
Длительность — это время, за которое плитка переходит от обычного вида к эффекту — и обратно, когда указатель уходит. При 0 изменение мгновенное; 0,2–0,4 с ощущается отзывчиво; всё, что больше 1 с, кажется медленным для навигации. Переход выполняется в обе стороны, поэтому плитка никогда не «отскакивает» назад.
Клавиатура и специальные возможности
Эффект применяется не только под указателем, но и когда плитка получает фокус с клавиатуры, поэтому посетители, перемещающиеся клавишей Tab, получают ту же обратную связь, что и пользователи мыши.
Когда в операционной системе включено уменьшение движения — Уменьшить движение в macOS и iOS, отключённые Эффекты анимации в Windows, — переход пропускается: эффект по-прежнему появляется, но мгновенно, без анимации.
📝 Заметка
Эффекты задаются для каждой веб-части отдельно. Две веб-части Smart Tiles на одной странице могут использовать разные эффекты, а одна из них — вовсе никакого.
Рекомендуемые настройки
- Выбор по умолчанию: Яркость 80 %, Длительность 0,2 с. Работает на цветных плитках, на фотографиях и в тёмных темах.
- Сдержанно, для монохромных панелей: Контраст 60 % или Насыщенность 40 %, Длительность 0,3 с. Плитка под указателем смягчается, не меняя цвета.
- Игриво: Поворот оттенка 20°, Длительность 0,4 с. Плитка сдвигается к соседнему оттенку и обратно.
- Плитки с фотографиями: Прозрачность 85 % или Яркость 75 %; Размытие 1 px даёт смену фокуса, похожую на объектив.
- Избегайте инвертирования цвета и поворота оттенка с большими значениями на плитках с фирменными цветами — плитка под указателем покажет цвета, которые не являются вашими.
❗ Важно
Эффект меняет всю плитку, включая текст. Убедитесь, что заголовок остаётся читаемым при выбранной силе — Яркость ниже 50 % или Прозрачность ниже 60 % делают белый текст на тёмной плитке трудночитаемым именно в тот момент, когда посетитель собирается нажать.
💡 Совет
Остальные настройки группы Вид описаны в статье KB10042. Как добавить и настроить веб-часть Smart Tiles.
Подробнее о продукте: https://vitextra.com/ru/products/smart-tiles