Добавление нескольких состояний для компонентов

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

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

Вы можете создать компонент, добавить к нему несколько вариантов (состояний) и связать его для имитирования поведения настоящего пользователя (без необходимости в многократном копировании компонентов). 

Наличие компонентов с состояниями также облегчает управление вашим ресурсами и создание систем интерактивного дизайна. 

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

Добавление состояний компонента

После создания компонента в инспекторе свойств появится новый раздел, в котором содержится компонент с параметром Состояние по умолчанию. Теперь вы можете добавить три типа состояний для ваших компонентов — Новое состояние«Состояние наведения» или «Состояние переключения». Читайте дальше, чтобы узнать, как добавить состояние.

Новое состояние

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

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

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

Состояние наведения

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

В режиме Оформление нажмите кнопку + рядом с состоянием по умолчанию главного компонента в инспекторе свойств и выберите Состояние наведения.

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

Состояние переключения

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

В режиме Дизайн нажмите кнопку + рядом с состоянием по умолчанию основного компонента в инспекторе свойств и выберите Состояние переключения.

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

Добавление состояний для компонента
Добавление состояний для компонента

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

Визуализация компонентов в разных состояниях

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

  1. Выберите компонент.
  2. Перейдите в инспектор свойств и инициируйте самостоятельно различные состояния или переключитесь между ними.
Переключение состояний в инспекторе свойств
Переключение состояний в инспекторе свойств

Добавление интерактивности компонентам

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

Добавление интерактивности
Связывание состояний компонента для создания взаимодействия нажатия

  1. Откройте вкладку «Прототип».
  2. Выберите состояние компонента, из которого нужно создать взаимодействие. 
  3. Для добавления взаимодействия нажмите значок > на компоненте состояния или + в разделе «Взаимодействие» Инспектора свойств.
  4. В качестве триггера выберите Нажатие (для щелчков), Парение (для действий при наведении курсора мыши), Клавиши и геймпад (варианты использования для навигации и специальных возможностей) или Голос (варианты использования для навигации и специальных возможностей).
  5. Выберите тип действия (например, «Автоматическое анимирование» или «Переход»).
  6. Выберите состояние в качестве назначения.
  7. Перейдите в окно предварительного просмотра и протестируйте интерактивные возможности вашего компонента.

 Состояния перечислены выше монтажных областей в выпадающем списке с разделителем.

 

Несколько взаимодействий для состояния компонента
Несколько взаимодействий для состояния компонента

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

  • Триггеры касания и наведения — поддерживаются только эти триггеры между состояниями компонентов
  • «Растворение» и «Автоматическое анимирование» — поддерживаются только эти переходы для состояний компонентов
  • Триггер наведения доступен только для взаимодействий между состояниями

  • Изменение свойств в состоянии по умолчанию экземпляра компонента не распространяется на другие состояния в этом экземпляре

Изменение состояний компонента

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

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

Способ 2

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

Нажмите «Изменить» для переключения выделения на главный компонент, чтобы добавить или изменить состояния

Способ 1

Щелкните экземпляр компонента правой кнопкой мыши и выберите «Редактировать главный компонент».

Экземпляры компонента связаны с главным компонентом. Изменения, внесенные в главный компонент, распространяются на все экземпляры. Дополнительные сведения см. в разделе Управление компонентами из одного источника.

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

Переименование состояния компонента: дважды щелкните название состояния компонента в инспекторе свойств и введите новое имя.

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

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

Публикация и совместное использование состояний компонентов

Вы можете публиковать компоненты и связанные с ними состояния в библиотеке Creative Cloud с помощью панели библиотек и распространять их в рамках системы дизайна. Дополнительные сведения см. в разделе Работа с Creative Cloud Libraries в XD.

Управление компонентами из одного источника

Чтобы упростить управление состояниями компонентов, можно только добавлять, переименовывать и удалять состояния в главном компоненте. Экземпляры этого компонента автоматически наследуют любые изменения состояний, сделанные в главном компоненте. Вы можете легко идентифицировать главный компонент по зеленому заполненному ромбу на холсте или в разделе «Компонент» инспектора свойств. Центральная часть зеленого ромба экземпляров не заполнена цветом. 

Наследование состояний компонентов

Следуйте этим принципам при редактировании состояний главных компонентов и экземпляров:

  • Вы можете переопределить свойства (текст, растровое изображение, размер, внешний вид или изменения структуры) для состояний так же, как вы можете переопределить экземпляр компонента. 
  • Когда вы редактируете состояние в главном компоненте, это состояние обновляется во всех его экземплярах.
  • Когда вы редактируете состояние в экземпляре, оно рассматривается как уникальное переопределение и больше не синхронизируется с изменениями состояний в главном компоненте.

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

Сброс настроек переопределения состояния до исходного состояния главного компонента
Сброс настроек переопределения состояния до исходного состояния главного компонента

Дополнительные сведения о переопределении компонента см. в разделе Работа с компонентами в XD.

Связанные состояния компонентов в разных документах

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

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

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

Примеры и образцы файлов

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

Создание анимированного переключателя из нашего образца ресурса
Создание анимированного переключателя из нашего образца ресурса

  1. Скачайте образец файла переключателя и откройте его в XD.
  2. Выделите весь объект (убедитесь, что круг выделен) и нажмите Cmd + K (macOS) или Ctrl + K (Win).
  3. Добавьте новое состояние и назовите его «Отключено».
  4. В состоянии «Отключено» выберите прямоугольник со скругленными углами и измените заливку на серый. Выберите круг и переместите его влево.
  5. В режиме прототипа свяжите следующие взаимодействия:
    • Состояние по умолчанию: установите для параметра Триггер значение Нажатие, для параметра Действие значение Автоматическое анимирование, а для параметра место назначения установите значение Отключено.
    • Отключенное состояние: установите для параметра Триггер значение Нажатие, для параметра Действие значение Автоматическое анимирование, а для параметра Место назначения установите значение Состояние по умолчанию.
  6. Необязательно: если вы хотите, чтобы переключатель светился при наведении, выберите компонент, добавьте к нему параметр Состояние наведения, а затем отредактируйте компонент, чтобы получить эффект свечения.

Подробнее

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

Время просмотра: 7 минут.

Что дальше?

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

Есть вопрос или идея?

Спросите сообщество

Если вы хотите задать вопрос или поделиться интересной идеей, вступайте в сообщество Adobe XD. Мы будем рады услышать ваши идеи и увидеть ваши работы.

Логотип Adobe

Вход в учетную запись