Если вы хотите задать вопрос или поделиться интересной идеей, вступайте в сообщество Adobe XD. Мы будем рады услышать ваши идеи и увидеть ваши работы.
Последнее обновление
11 мар. 2022 г.
Узнайте, как добавить несколько состояний для компонентов в вашей системе проектирования, чтобы с легкостью разрабатывать интерактивный контент.
Компоненты, которые изменяют внешний вид в зависимости от взаимодействия с пользователем, идеально подходят для создания высококачественных прототипов.
Вы можете создать компонент, добавить к нему несколько вариантов (состояний) и связать его для имитирования поведения настоящего пользователя (без необходимости в многократном копировании компонентов).
Наличие компонентов с состояниями также облегчает управление вашим ресурсами и создание систем интерактивного дизайна.
Добавление состояний компонента
После создания компонента в инспекторе свойств появится новый раздел, в котором содержится компонент с параметром Состояние по умолчанию. Теперь вы можете добавить три типа состояний для ваших компонентов — Новое состояние, «Состояние наведения» или «Состояние переключения». Читайте дальше, чтобы узнать, как добавить состояние.
Новое состояние
Используйте «Новое состояние» для сценариев, в которых вы хотите показать варианты компонента, такие как отключенная или выбранная версия компонента.
Нажмите кнопку + рядом с состоянием по умолчанию главного компонента в инспекторе свойств и выберите Новое состояние.
Новое состояние не содержит в себе никаких интерактивных состояний. Вы должны связать с ним взаимодействие в режиме прототипа. Для получения дополнительной информации см. раздел Добавление интерактивности компонентам.
Состояние наведения
Используйте «Состояние наведения», если хотите, чтобы ваш компонент изменялся и отображал другое состояние, когда пользователь наводит курсор мыши на этот компонент.
В режиме Оформление нажмите кнопку + рядом с состоянием по умолчанию главного компонента в инспекторе свойств и выберите Состояние наведения.
При использовании параметра Состояние наведения вам не нужно переходить в режим прототипа, чтобы связать взаимодействие. Этот шаг выполняется автоматически.
Состояние переключения
Используйте состояние Переключение, если надо создать компоненты с интерактивным режимом переключения, например переключатель, поле флажка и т. д.
В режиме Дизайн нажмите кнопку + рядом с состоянием по умолчанию основного компонента в инспекторе свойств и выберите Состояние переключения.
После того как состояние переключения создано, по умолчанию XD будет автоматически поддерживаться в двух двунаправленных действиях касания между состояниями По умолчанию и Переключение, то есть действие полностью интерактивно.
Вы можете добавлять состояния только для главного компонента. Экземпляры компонентов всегда наследуют свои состояния от главного компонента.
Визуализация компонентов в разных состояниях
После добавления состояний для вашего компонента вы сможете редактировать его свойства, а также визуально просматривать интерактивность этого компонента для пользователей, взаимодействующих с ним.
- Выберите компонент.
- Перейдите в инспектор свойств и инициируйте самостоятельно различные состояния или переключитесь между ними.
Добавление интерактивности компонентам
Можно использовать триггеры Нажатие, Наведение, Клавиши и геймпад и Голос для связывания взаимодействий между состояниями компонентов в режиме прототипа. Связывание взаимодействий между состояниями компонентов аналогично добавлению взаимодействий между монтажными областями. Основное различие заключается в том, что при создании взаимодействий между состояниями компонентов вы выбираете в качестве назначения состояние, а не монтажную область.
- Откройте вкладку «Прототип».
- Выберите состояние компонента, из которого нужно создать взаимодействие.
- Для добавления взаимодействия нажмите значок > на компоненте состояния или + в разделе «Взаимодействие» Инспектора свойств.
- В качестве триггера выберите Нажатие (для щелчков), Парение (для действий при наведении курсора мыши), Клавиши и геймпад (варианты использования для навигации и специальных возможностей) или Голос (варианты использования для навигации и специальных возможностей).
- Выберите тип действия (например, «Автоматическое анимирование» или «Переход»).
- Выберите состояние в качестве назначения.
- Перейдите в окно предварительного просмотра и протестируйте интерактивные возможности вашего компонента.
Состояния перечислены выше монтажных областей в выпадающем списке с разделителем.
Вы можете назначить несколько взаимодействий для одного и того же состояния компонента. Например, если у вас есть тумблер с включенным по умолчанию состоянием, выключенным состоянием и состоянием наведения, вы можете определить отдельные взаимодействия в состоянии по умолчанию. Повторите шаги 4–7, чтобы определить взаимодействие с дополнительным состоянием. После создания нескольких взаимодействий вы увидите раздел «Взаимодействие», в котором отображаются назначенные взаимодействия. Переключайтесь между этими взаимодействиями и изменяйте их свойства в соответствии с вашими требованиями.
Изменение состояний компонента
Когда вы назначаете взаимодействие для состояния главного компонента, все экземпляры этого компонента автоматически унаследуют его взаимодействия. Это означает, что если вы подключаете компонент к определенной монтажной области или состоянию, то все экземпляры этого компонента будут также содержать эти взаимодействия.
Когда вы выбрали экземпляр на холсте и хотите отредактировать существующие состояния или добавить новые состояния для главного компонента, это можно сделать одним из следующих способов:
Способ 2
Нажмите «Изменить» для переключения выделения на главный компонент, чтобы добавить или изменить состояния.
Способ 1
Щелкните экземпляр компонента правой кнопкой мыши и выберите «Редактировать главный компонент».
Экземпляры компонента связаны с главным компонентом. Изменения, внесенные в главный компонент, распространяются на все экземпляры. Дополнительные сведения см. в разделе Управление компонентами из одного источника.
Переименование, изменение порядка и удаление состояний компонента
Переименование состояния компонента: дважды щелкните название состояния компонента в инспекторе свойств и введите новое название.
Изменить порядок состояний главного компонента: перетащите состояния главного компонента в инспекторе свойств, чтобы изменить их порядок.
Удалить состояние компонента из главного компонента: щелкните правой кнопкой мыши по состоянию компонента и выберите «Удалить». После удаления состояния компонента из главного компонента все экземпляры этого компонента, для которых это состояние активно на холсте, переключаются на свое состояние по умолчанию.
Вы можете переименовывать и удалять состояния только в главном компоненте. Состояние по умолчанию переименовывать нельзя.
Публикация и совместное использование состояний компонентов
Вы можете публиковать компоненты и связанные с ними состояния в библиотеке Creative Cloud с помощью панели библиотек и распространять их в рамках системы дизайна. Дополнительные сведения см. в разделе Работа с Creative Cloud Libraries в XD.
Управление компонентами из одного источника
Чтобы упростить управление состояниями компонентов, можно только добавлять, переименовывать и удалять состояния в главном компоненте. Экземпляры этого компонента автоматически наследуют любые изменения состояний, сделанные в главном компоненте. Вы можете легко идентифицировать главный компонент по зеленому заполненному ромбу на холсте или в разделе «Компонент» инспектора свойств. Центральная часть зеленого ромба экземпляров не заполнена цветом.
Наследование состояний компонентов
Следуйте этим принципам при редактировании состояний главных компонентов и экземпляров:
- Вы можете переопределить свойства (текст, растровое изображение, размер, внешний вид или изменения структуры) для состояний так же, как вы можете переопределить экземпляр компонента.
- Когда вы редактируете состояние в главном компоненте, это состояние обновляется во всех его экземплярах.
- Когда вы редактируете состояние в экземпляре, оно рассматривается как уникальное переопределение и больше не синхронизируется с изменениями состояний в главном компоненте.
Если вас не устраивают результаты переопределения, сбросьте свойства до исходных настроек главного компонента, щелкнув экземпляр правой кнопкой мыши и выбрав Сбросить до основного состояния. Будут удалены все переопределения экземпляра, а сам экземпляр сбросится до настроек главного компонента.
Дополнительные сведения о переопределении компонента см. в разделе Работа с компонентами в XD.
Связанные состояния компонентов в разных документах
Вы можете создать и поддерживать единый источник для всех ваших часто используемых компонентов, а также их состояний и назначенных взаимодействий. Например, если у вас есть компонент кнопки с 5 назначенными состояниями (основное, второстепенное, наведение, нажатие и отключенное), то при копировании и вставке этого компонента в документы XD создает связанный компонент, который поддерживает все назначенные состояния компонента вместе с взаимодействиями состояний.
Если вы измените свойства связанного компонента (стиль, взаимодействия и т. д.) в исходном документе, XD отправит документам с экземплярами этого связанного компонента уведомления об этих обновлениях. После этого вы сможете просмотреть эти изменения и принять или проигнорировать их.
Связанные компоненты поддерживают только взаимодействия, назначенные между состояниями, а не монтажными областями.
Примеры и образцы файлов
Хотите создать переключатель, который включается и выключается, когда пользователь нажимает на него?
- Загрузите образец файла переключателя и откройте его в XD.
- Выделите весь объект (убедитесь, что круг выделен) и нажмите Cmd + K (macOS) или Ctrl + K (Win).
- Добавьте новое состояние и назовите его «Отключено».
- В состоянии «Отключено» выберите прямоугольник со скругленными углами и измените заливку на серый. Выберите круг и переместите его влево.
- В режиме прототипа свяжите следующие взаимодействия:
- Состояние по умолчанию: установите для параметра Триггер значение Нажатие, для параметра Действие значение Автоматическое анимирование, а для параметра место назначения установите значение Отключено.
- Отключенное состояние: установите для параметра Триггер значение Нажатие, для параметра Действие значение Автоматическое анимирование, а для параметра Место назначения установите значение Состояние по умолчанию.
- Необязательно: если вы хотите, чтобы переключатель светился при наведении, выберите компонент, добавьте к нему параметр Состояние наведения, а затем отредактируйте компонент, чтобы получить эффект свечения.
Подробнее
Посмотрите это видео, чтобы узнать больше о том, как создавать интерактивные функции, используя компоненты с состояниями.
Время просмотра: 7 минут.
Что дальше?
Теперь вы знаете все необходимое для того, чтобы начать использовать компоненты с состояниями. Ознакомьтесь с этой статьей сообщества, чтобы узнать о том, как использовать эту возможность для создания флажков.
Есть вопросы или идеи?
Связанные материалы
Проектируйте прототипы пользовательских интерфейсов при помощи Adobe XD
Создавайте интерактивные макеты для веб-сайтов и мобильных приложений.
