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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Изменить порядок состояний главного компонента: перетащите состояния главного компонента в инспекторе свойств, чтобы изменить их порядок.

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Подробнее

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

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

Что дальше?

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

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