Именование интеракций

Соглашение об именовании

Эта страница объясняет подходы к именованию Интеракций Webflow, чтобы сохранять порядок в структуре нашего проекта.

Элемент [Действие + Состояние]

Элемент - это секция, div блок, кнопка и т.д., к которым мы применяем интеракцию.

Действие описывает интеракцию. Добавьте описание Состояния, если это важно для понимания.

Например,

• Элемент = Стрелка кнопки сортировки
• Действие = Вращение
• Состояние = Открыто

Полное имя интеракции:

Стрелка кнопки сортировки [Вращение Открыто]
Sort Button Arrow [Rotate Open]

Максимум информации

Фразы Элемент и Действие должны дать максимум информации о цели этой интеракции в проекте.

Создавая имя интеракции, мы должны ответить на вопрос: "Что это за интеракция?"

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

Минимальное количество слов

Мы всегда хотим создавать описания минимальной длины. Краткость хороша. Мы хотим дать максимум информации, используя минимальное количество слов.

В идеале, наши имена интеракций никогда не превышают размер панели Designer’s Interaction.

Если наши имена регулярно не помещаются в пределах панели Designer’s Interaction, скорее всего, мы излишне подробно описываем наши интеракции.

Мы используем заглавные буквы для первого символа каждого слова, чтобы улучшить читаемость имени Интеракции.

Квадратные скобки

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

Это визуально разделяет части имени интеракции.

Примеры с базовым наименованием

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

Кнопка Стрелка [Перемещение Внутрь]
Button Arrow [Move In]
Стандартная кнопка стрелки перемещается внутрь. "Внутрь" - это состояние Действия "перемещение".

Кнопка Стрелка [Перемещение Наружу]
Button Arrow [Move Out]
Интеракция перемещает кнопку "наружу" в исходное положение.

Изображение [Показать При Прокрутке Внутрь]
Image [Show Scroll In]
Изображение появляется, когда пользователь пролистывает страницу к секции.

Изображение [Скрыть При Прокрутке Наружу]
Image [Hide Scroll Out]
Изображение скрывается, когда пользователь пролистывает страницу за пределы секции.

Меню навигации [Открыть]
Nav Menu [Open]
Основная интеракция открытия Меню навигации.

Меню навигации [Закрыть]
Nav Menu [Close]
Основная интеракция закрытия Меню навигации.

Примеры с конкретным наименованием

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

Первый экран Lottie [Показать]
Home Hero Lottie [Show]
Показать анимацию Lottie на первом экране.

Первый экран Lottie [Скрыть]
Home Hero Lottie [Hide]
Скрыть анимацию Lottie на первом экране.

Модальное окно предложения работы [Открыть]
Jobs Item Modal [Open]
Открывает модальное окно подачи заявки, которое вызывается элементом с описанием работы.

Модальное окно предложения работы [Закрыть]
Jobs Item Modal [Close]
Закрывает модальное окно подачи заявки, которое вызывается элементом с описанием работы.

Поле контактной формы [Увеличение высоты]
Contact Form Input [Height Increase]
Увеличивает высоту поля ввода контактной формы.

Поле контактной формы [Уменьшение высоты]
Contact Form Input [Height Decrease]
Уменьшает высоту поля ввода контактной формы.

Ключевые слова действий

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

Используйте минимальное количество слов для максимально полного описания цели интеракции.

Популярные ключевые слова действий

• Show (Показать)
• Hide (Скрыть)
• Move (Переместить)
• Rotate (Повернуть)
• Scale (Масштабировать)

Ключевые слова состояния

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

Популярные ключевые слова состояния

• In / Out (Внутрь / Наружу)
• Open / Close (Открыть / Закрыть)
• Increase / Decrease (Увеличить / Уменьшить)
• Expand / Collapse (Развернуть / Свернуть)

Действия и Состояния можно использовать совместно

Мы не должны строго следовать правилу [Действие + состояние]. Мы можем быть гибкими при использовании ключевых слов внутри скобок.

Возможно, что ключевые слова Действия и Состояния используются вместе Элемент [Действие + Состояние].

Возможно, они используются по отдельности Элемент [Действие] или Элемент [Состояние].

Возможно, что ключевое слово Состояния само по себе лучше, чем Действие + Состояние. Например, "Модальное окно предложения работы [Открыть]".

Возможно, что "Показать" и "Скрыть" воспринимаются как Действие или Состояние (Видимое / Скрытое). "Модальное окно предложения работы [Показать]".

Не тратьте много времени на размышления о Действии + Состоянии. Выберите что-то, что наиболее понятно, и продолжайте работать.

Наша цель: Ключевые слова Действия и Состояния должны использоваться внутри скобок так, чтобы дать пользователю максимум информации о цели интеракции.

Ключевые слова триггеров

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

Примеры ключевых слов триггера

• Click (Клик)
• Hover (Наведение)
• Mouse Move (Перемещение мыши)
• Scroll (Прокрутка)
• While Scrolling (Во время прокрутки)
• Load (Загрузка)

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

Опциональное добавление ключевых слов триггеров

Добавление ключевых слов триггеров в имя интеракции технически некорректно в Webflow.

Интеракции Webflow не предусматривают использование триггеров интеракциях. Поэтому интеракции Webflow могут работать с разными триггерами.

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

Например, интеракция создана для "открытия" выпадающего элемента навигации внутри компонента навигации.

• На десктопе интеракция запускается триггером "наведение".
• На мобильных устройствах интеракция запускается триггером "клик".
• Одна и та же интеракция используется на обоих разрешениях. Триггеры отличаются в зависимости от устройства пользователя.
• Это наглядный пример того, что триггер не является частью интеракции. Триггеры сами по себе.
• Использование имени типа "Меню навигации [Открыть по наведению мыши]" (Nav Dropdown [Open Hover In]) некорректно, поскольку на мобильных устройствах оно срабатывает по-другому.
• Использование имени "Меню навигации [Открыть]" (Nav Dropdown [Open]) точно описывает конфигурацию интеракции. Интеракция открывает выпадающее меню. Это именно то, что делает конфигурация.

Использование ключевых слов триггера

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

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

Модальное окно скидки [Задержка при загрузке]
Discount Modal [Delay On Load]

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

Пустой Div [Открыть модальное окно при JS клике]
Blank Div [Open Modal With JS Click]

Этот Div блок используется как триггер клика для запуска Интеракции Webflow с помощью JavaScript. Интеракция была создана специально для получения клика из JavaScript. После клика JS запускается интеракция Webflow. Добавление ключевого слова триггера "клик" в это имя помогает лучше понять назначение интеракции.

Ключевые слова для респонсивного дизайна

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

Боковая панель навигации [Показать] [Мобильные]
Nav Sidebar Slide [Show] [Mobile]
Показать боковую панель навигации только на мобильных устройствах.

Триггер скролла на первый экран [Внутрь] [Планшеты Мобильные]
Hero Scroll Trigger Div [In] [Tablet Mobile]
Показать панель навигации при скролле к первому экрану на планшетах и мобильных устройствах.

Текстуры фона [При наведении] [Десктоп]
Background Textures [Hover In] [Desktop]
Нам нужно указывать "десктоп" только если интеракция нужна для десктопа и отключена для планшета и мобильных разрешений.

Конфликты

Если вы столкнулись с конфликтом в именовании, не заморачивайтесь.

Просто примите решение и продолжайте двигаться вперед.

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

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

Успехов с интеракциями.