Руководство пользователя Отмена

Создание повторяющихся элементов

Поиск
XD

XD

Открыть приложение
  1. Руководство пользователя Adobe XD
  2. Введение
    1. Новые возможности Adobe XD
    2. Распространенные вопросы
    3. Создание дизайна, прототипов и совместная работа в Adobe XD
    4. Управление цветом
    5. Системные требования
      1. Требования к оборудованию и программному обеспечению
      2. Adobe XD, Big Sur и Apple Silicon | macOS 11
    6. Основные сведения о рабочей среде
    7. Изменение языка приложения в Adobe XD
    8. Доступ к наборам для дизайна пользовательского интерфейса
    9. Доступность в Adobe XD
    10. Сочетания клавиш
    11. Советы и рекомендации
  3. Дизайн
    1. Монтажные области, направляющие и слои
      1. Начало работы с монтажными областями
      2. Использование направляющих и сеток
      3. Создание прокручиваемых монтажных областей
      4. Работа со слоями
      5. Создание групп прокрутки
    2. Фигуры, объекты и путь
      1. Выделение, изменение размера и поворот объектов
      2. Перемещение, выравнивание, распределение и упорядочивание объектов
      3. Группирование, блокирование, дублирование, копирование и зеркальное отражение объектов
      4. Задание обводки, заливки и теней для объектов
      5. Создание повторяющихся элементов
      6. Создание перспективных проектов с помощью 3D-преобразований
      7. Редактирование объектов с помощью логических операций
    3. Текст и шрифты
      1. Работа с инструментами для рисования и создания текста
      2. Шрифты в Adobe XD
    4. Компоненты и состояния
      1. Работа с компонентами
      2. Работа с вложенными компонентами
      3. Добавление нескольких состояний для компонентов
    5. Маскировка и эффекты
      1. Создание маски с фигурами
      2. Работа с эффектами размытия
      3. Создание и изменение градиентов
      4. Применение эффектов наложения
    6. Макет
      1. Адаптивное изменение размера и ограничения
      2. Установка фиксированного отступа для компонентов и групп
      3. Создание динамичных проектов с подборками
    7. Видео и анимации Lottie
      1. Работа с видео
      2. Создание прототипов при помощи видео
      3. Работа с анимацией Lottie
  4. Создание прототипа
    1. Создание интерактивных прототипов
    2. Анимирование прототипов
    3. Свойства объекта, которые поддерживаются при автоматическом анимировании
    4. Создание прототипов с клавиатуры и геймпада
    5. Создание прототипов с помощью голосовых команд и воспроизведения
    6. Создание синхронизированных переходов
    7. Добавление наложений
    8. Создание голосовых прототипов
    9. Создание якорных ссылок
    10. Создание гиперссылок
    11. Предварительный просмотр проектов и прототипов
  5. Публикация, экспорт и проверка
    1. Публикация выбранных монтажных областей
    2. Предоставление совместного доступа к проектам и прототипам
    3. Настройка разрешений на доступ к ссылкам
    4. Работа с прототипами
    5. Просмотр прототипов
    6. Работа со спецификациями дизайна
    7. Предоставление общего доступа к спецификациям дизайна
    8. Проверка спецификаций дизайна
    9. Навигация в спецификациях дизайна
    10. Проверка и комментирование спецификаций дизайна
    11. Экспорт ресурсов дизайна
    12. Экспорт и загрузка ресурсов из спецификаций дизайна
    13. Корпоративный групповой совместный доступ
    14. Резервное копирование или перенос ресурсов XD
  6. Системы дизайна
    1. Системы дизайна с библиотеками Creative Cloud Libraries
    2. Работа с ресурсами документа в Adobe XD
    3. Работа с библиотеками Creative Cloud Libraries в Adobe XD
    4. Переход от связанных ресурсов к библиотекам Creative Cloud Libraries
    5. Работа с проектными токенами 
    6. Использование ресурсов из библиотек Creative Cloud Libraries
  7. Облачные документы
    1. Облачные документы в Adobe XD
    2. Совместная работа и совместное редактирование проектов
    3. Совместное редактирование документов, к которым вам предоставили доступ
  8. Интеграция и плагины
    1. Работа с внешними ресурсами
    2. Работа с ресурсами проекта из Photoshop
    3. Копирование ресурсов из Photoshop
    4. Как импортировать или открыть проекты Photoshop
    5. Работа с ресурсами Illustrator в Adobe XD
    6. Импортирование и открытие проектов Illustrator
    7. Копирование векторных объектов из Illustrator в XD
    8. Плагины для Adobe XD
    9. Создание плагинов и управление ими
    10. Интеграция Jira с XD
    11. Подключаемый модуль Slack для XD
    12. Подключаемый модуль Zoom для XD
    13. Публикация работы из XD на Behance
  9. XD для iOS и Android
    1. Предварительный просмотр на мобильных устройствах
    2. Часто задаваемые вопросы по Adobe XD для мобильных устройств
  10. Устранение неполадок
    1. Выявленные неполадки и исправленные ошибки
      1. Выявленные неполадки
      2. Исправленные неполадки
    2. Установка и обновления
      1. XD отображается как несовместимый в Windows
      2. Код ошибки 191
      3. Код ошибки 183
      4. Проблемы при установке плагинов XD
      5.  Запрос на удаление и переустановку XD в Windows 10
      6. Проблемы с миграцией предпочтений
    3. Запуск и сбой
      1.  XD аварийно завершает работу при запуске в Windows 10
      2.  XD закрывается при выходе из Creative Cloud
      3. Проблема со статусом подписки в Windows
      4. Предупреждение о заблокированном приложении при запуске XD в Windows
      5. Создание аварийного дампа в Windows
      6. Сбор и отправка журнала сбоев
    4. Облачные документы и библиотеки Creative Cloud Libraries
      1. Проблемы с облачными документами XD
      2. Проблемы со связанными компонентами
      3. Проблемы с библиотеками и ссылками
    5. Прототип, публикация и обзор
      1. Не удается записать взаимодействия прототипов в macOS Catalina
      2. Проблемы с процессами публикации
      3. Опубликованные ссылки не отображаются в браузерах
      4. Прототипы некорректно отображаются в браузерах
      5. На общих ссылках внезапно появляется панель комментариев
      6. Невозможно опубликовать библиотеки
    6. Импорт, экспорт и работа с другими приложениями
      1. Импорт и экспорт в XD
      2. Файлы Photoshop в XD
      3. Файлы Illustrator в XD
      4. Экспорт из XD в After Effects
      5. Файлы Sketch в XD
      6. В разделе экспорта не представлены сторонние приложения

Узнайте, как создавать повторяющиеся элементы в Adobe XD с использованием повторяющейся сетки.

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

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

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

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

Создание повторяющейся сетки

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

  1. Создайте базовый элемент, который вы хотите повторить (например, сочетание эскизов и текста).

  2. Выберите элементы, которые необходимо повторить.

  3. Преобразуйте выделение в повторяющуюся сетку, нажав соответствующую кнопку в инспекторе свойств или используя сочетание клавиш Cmd + R (Mac) или Ctrl + R (Windows).

    На границе элемента появятся крупные маркеры.

    Маркеры для повторения элемента или группы элементов
    Маркеры для повторения элемента или группы элементов

  4. Чтобы повторить элемент в вертикальной сетке, перетащите маркер в нижнее части элемента. Чтобы повторить элемент в горизонтальной сетке, перетащите маркер в правой части элемента.

    Вертикальная повторяющаяся сетка

    Горизонтальная повторяющаяся сетка

  5. Чтобы выбрать элементы в сетке для их редактирования, дважды щелкните сетку.

Чтобы разгруппировать элементы сетки и работать с ними отдельно, выделите сетку и в инспекторе свойств выберите «Разгруппировать сетку».

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

После внесения изменений закройте контекст редактирования, нажав клавишу Esc.

Примечание.

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

Настройка отступа между двумя элементами в повторяющейся сетке

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

Вертикальная сетка с повторяющимися элементами
Вертикальная сетка с повторяющимися элементами

Работа с текстом в повторяющейся сетке

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

Обновление отдельных текстовых элементов в повторяющейся сетке

  1. Щелкните текстовый объект в вашей повторяющейся сетке, удерживая нажатой клавишу Cmd (Mac) или Ctrl (Windows), чтобы выбрать его. 

  2. Чтобы отредактировать текстовый элемент, дважды щелкните его и измените текст.

Примечание.

Изменения, внесенные в содержимое одного текстового объекта не применяются к другим объектам в повторяющейся сетке. Однако любой стиль, примененный к одному текстовому объекту, применяется ко всем остальным текстовым объектам.

Перетаскивание текстового файла с выделением абзацев клавишей возврата каретки в текстовый объект на повторяющейся сетке

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

  1. Создайте текстовый файл формата TXT. Вы можете создать его, используя TextEdit (Mac), Notepad (Windows) или любой другой текстовый редактор, сохранив документ в файл с расширением «.txt». Установите в качестве кодировки формат UTF-8. Разделите каждую строку данных, используя клавишу возврата каретки (Enter). 

  2. Перетащите этот текстовый файл на повторяющуюся сетку.

    Перетаскивание текстового файла на объект в повторяющейся сетке
    Перетаскивание текстового файла на объект в повторяющейся сетке (будет обновлено)

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

Работа с изображениями в повторяющейся сетке

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

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

Перетаскивание графических файлов на объект в повторяющейся сетке
Перетаскивание графических файлов на объект в повторяющейся сетке (будет обновлено)

Замена изображений в повторяющейся сетке

Чтобы заменить изображения в сетке, откройте Finder или Проводник и перейдите в место, где вы сохранили изображения для своего проекта. Выберите все изображения, которые хотите отобразить в сетке, и перетащите их на целевой объект в повторяющейся сетке.

Старые изображения заменятся новыми изображениями, размер которых изменится автоматически.

Создание взаимодействий из повторяющейся сетки

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

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

  1. В режиме «Дизайн» создайте вторую монтажную область в своем файле, используя инструмент «Монтажная область» (A).

  2. Переключитесь в режим прототипа, щелкнув соответствующую вкладку или используя сочетание клавиш Ctrl + Tab.

  3. Выберите необходимую повторяющуюся сетку на первой монтажной области. На правой стороне объекта в его средней точке появится соединитель со стрелкой.

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

  5. Для предварительного просмотра нажмите кнопку воспроизведения в верхнем правом углу фрейма приложения или используйте сочетание клавиш Cmd + Enter (Mac) или Ctrl + Enter (Windows). Щелкните в любом месте повторяющейся сетки, чтобы воспроизвести взаимодействие.

Привязка одного элемента повторяющейся сетки к взаимодействию

  1. Выберите объект в повторяющейся сетке.

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

  3. Для предварительного просмотра нажмите кнопку воспроизведения в верхнем правом углу фрейма приложения или используйте сочетание клавиш Cmd + Enter (Mac) или Ctrl + Enter (Windows). Щелкните объект, чтобы проверить его взаимодействие.

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

Вы также можете создать группу объектов в повторяющейся сетке, а затем создать взаимодействия из этой группы.

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

  2. После выбора объектов нажмите правую кнопку мыши и выберите в контекстном меню пункт Группировать. Вы также можете использовать сочетание клавиш Cmd + G (Mac) или Ctrl + G (Windows) для группировки объектов.

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

  4. Для предварительного просмотра нажмите кнопку воспроизведения в верхнем правом углу фрейма приложения или используйте сочетание клавиш Cmd + Enter (Mac) или Ctrl + Enter (Windows). Щелкните группу, чтобы проверить ее взаимодействие.

Импорт контента с повторяющей сеткой

Вот видео с примером, как начать работу с повторяющимися сетками. 

Связанные материалы

 Adobe

Получайте помощь быстрее и проще

Новый пользователь?

Ссылки быстрого перехода

Просмотреть все свои планы Управление планами
Просмотреть ссылки быстрого доступа
Скрыть ссылки быстрого доступа

Юридическая информация    |    Политика конфиденциальности в Интернете