Repeat Grid в Adobe XD: разбор функционала повторяющейся сетки

Если вы визуальный дизайнер, возможно, тратите большую часть своего времени на мелкие настройки множества визуальных элементов. Возможно, ваш клиент решил, что им нужно увеличить на парочку пикселей отступы между каждым из элементов, или же вы решили, что все их аватарки должны иметь закругленные углы. В любом случае вы будете делать одни и те же настройки снова и снова… и снова. В Adobe Experience Design CC (Beta) представлена опция Repeat Grid (повторяющаяся сетка) в ответ на эту изнуряющую часть рабочего процесса дизайнера. В этой статье мы углубимся и раскроем истинную ценность этой функции. Мы создадим и настроим повторяющуюся сетку, добавим в нее контент и подключим ее к простому и мощному режиму прототипирования в Adobe XD. Если вам все еще интересно, скачайте и протестируйте Adobe XD бесплатно.

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

По своей сути Repeat Grid - это определенный тип группы. Как мы группируем объекты, также и создадим повторяющуюся сетку, выделив объект или группу объектов и сконвертировав их в повторяющуюся сетку. В этом упражнении мы создадим обычный список контактов с фото и именем.

Шаг 1: создание начальных объектов

• В приветственном окне выберите тип артборда и начните новый файл.
• Нарисуйте прямоугольник с помощью инструмента Rectangle (R).
• Справа от прямоугольника введите какой-то произвольный текст, используя инструмент Text (T).
• С помощью инструмента Выделение (V) выберите оба объекта либо рамкой, либо выделив каждый объект по отдельности с нажатой клавишей Shift.

Здесь особая точность не нужна, мы настроим эти объекты позже.

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

Сконвертируйте выделение в повторяющуюся сетку, кликнув на кнопке Repeat Grid в инспекторе свойств (Property Inspector) или используя горячие клавиши Cmd + R (Mac) или Ctrl + R (Windows). Наша группа стала повторяющейся сеткой. Вы можете видеть, что теперь есть два элемента управления - один справа, другой внизу, и рамка вокруг группы представляет собой зеленую, точечную линию. Вы можете создать повторяющуюся сетку из любых элементов. Кликните и потяните правую кнопку управления вправо, расширяя сетку. Вы также можете ее удлинить, потянув за нижний элемент управления. Сейчас у нас есть повторяющиеся элементы в Repeat Grid. Все стили, применяемые к любому объекту в сетке, будут применены и ко всем его копиям.

Шаг 3: Настройка любых элементов в повторяющейся сетке

Как в любой группе, мы можем получить доступ к компонентам повторяющейся сетки, дважды кликнув на группе. Как только изменения произведены, можно выйти из режима редактирования, нажав кнопку Escape. Также есть и другие способы доступа к элемента сетки. Например, можно использовать панель слоев на Mac (Cmd + Y) или напрямую выделить объект (Cmd + Click на Mac, Ctrl + Click на Windows).

• Используя инструмент выделения (V), кликните дважды на любом прямоугольнике в Repeat Grid. Вы должны увидеть синюю рамку вокруг редактируемой ячейки. Выделите и потяните ваш текст, чтобы он был выровнен по прямоугольнику.
• Кликните на объекте Text и измените шрифт и размер в инспекторе свойств справа. Все ваши текстовые объекты будут иметь одинаковый стиль.
• Нажмите Escape для выхода из режима редактирования и передвиньте Repeat Grid так, чтобы она была выровнена по артборду.

Когда выполняете настройки атрибутов любых объектов, они применяются ко всем ячейкам повторяющейся сетки.

Шаг 4: Настройка полей строк и ячеек в повторяющейся сетке

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

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

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

Использование данных в повторяющейся сетке

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

Шаг 1: Обновите индивидуальные текстовые элементы

• Выделите с помощью клавиш Cmd + Click (Mac) или Ctrl + Click (Windows) текстовый объект в повторяющейся сетке. Вы вошли в режим редактирования сетки.
• Дважды кликните на текстовом элементе для редактирования, измените текст на настоящее имя. Помните, что контент не применится ко всем текстовым объектам в повторяющейся сетке. Так применяются только стили.

Шаг 2: Создайте паттерн графической заливки

• Перетащите изображение в один из прямоугольников для импорта. Ваша картинка будет применена как заливка прямоугольника, и автоматически ее размер подгонится под заливаемую фигуру. Мы называем эту опцию “авто-маской”.
• Перетяните второе изображение во второй прямоугольник. Мы задаем порядок в повторяющейся сетке слева-направо (сначала слева направо, затем сверху вниз). Учтите, что теперь в повторяющейся сетке первое фото отличается от второго. Мы создали паттерн из 2 фотографий.
• Перетащите третье фото в четвертый прямоугольник. Теперь у нас паттерн из 4 фото, первое и третье - идентичны.
• Перетащите четвертое изображение в первый прямоугольник. Теперь первый элемент залит 4-м фото, у вас получилось четыре уникальных фотографии в паттерне.

Вы можете менять текст и графику в повторяющейся сетке. Текст работает как overrides: вы можете заменить контент самого текстового объекта, в то время, как стили остаются идентичными для всех копий объекта в сетке. Тем не менее, мы можем построить повторяющиеся паттерны как авто-маскированные объекты, в котором графическая заливка объекта повторяется в заданном наборе. Например, если вы перетащили третье фото в третий прямоугольник, вы бы создали набор (паттерн) из 3 фото. Аналогично, если бы вы перетащили фото в пятый прямоугольник, вы бы создали паттерн из 5 фото. Но это все может быть слишком трудозатратно. Вместо заливки контента вручную мы воспользуемся заранее приготовленным контентом.

Шаг 3: Перенос текста из текстового файла в Repeat Grid

• Создайте текстовый файл с расширением .txt. Вы можете создать его используя программу TextEdit на Mac (выберите Format > Make Plain Text), или в Блокноте на Windows (сохранить как .txt) или в любом другом текстовом редакторе. Разделите каждый фрагмент данных с новой строки.
• После сохранения файла перетяните его из окна поиска в текстовый объект повторяющейся сетки в Adobe XD для импорта данных.

Теперь объект повторяется в зависимости от количества строк в текстовом файле. В нашем файле-примере 4 строки, 4 текстовых сущности будут разными, а затем начнут повторяться.

Шаг 4: Перетащите серию выделенных фото в прямоугольник

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

По аналогии с перетаскиванием множества картинок одновременно вы создаете повторяющийся паттерн для заливки объекта. Как и в случае с текстом, любое изменение контейнера отобразится на всех его копиях в рамках повторяющейся сетки. Помните, что вы можете легко изменить контент повторяющейся сетки, либо редактируя объекты по отдельности, либо перенося источники данных вместе. Данные импортируются и не связываются с исходным файлом. То есть любые изменения в файле-источнике не отразятся на данных, которые вы поместили в файл XD. Все ваши стили, размер и форма любого контейнера отражается во всех копиях элемента.

Добавление контента в повторяющуюся сетку

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

Шаг 1: Рисуйте в режиме редактирования

• Войдите в контекстное меню Edit на повторяющейся сетке.
• Нарисуйте горизонтальную линию под ячейкой, выбрав инструмент Line (L) и ведите линию, удерживая кнопку Shift.
• С помощью инструмента выделения (Selection) настройте положение линии так, чтобы она была выровнена по левому краю прямоугольника.
• Нажмите Escape для выхода из режима редактирования.

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

Шаг 2: Коррекция отрицательных полей

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

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

Шаг 3: Вырезание и вставка в режиме редактирования повторяющейся сетки

• Скачайте файл star.svg и перетяните его на pasteboard, за пределы текущего артборда. Так вы проимпортируете файл star.svg в проект.
• Сконвертируйте ваш импортированный контур в повторяющуюся сетку, и потащите правую рамку вправо, пока не получите в сумме 4 звезды. Настройте отступы, чтобы звезды располагались ближе друг к другу.
• Вырежьте повторяющуюся сетку со звездами (Cmd + X на Mac, Ctrl + X на Windows), затем кликните дважды на любой ячейке списка контактов, чтобы войти в режим редактирования.
• Вставьте (Cmd + V на Mac, Ctrl + V на Windows). Ваша повторяющаяся сетка из звезд вставится в центр ячейки. Передвиньте звезды так, чтобы они были под текстом.

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

Шаг 4: Разгруппировка внутренней повторяющейся сетки

• Так как вы уже в режиме редактирования списка контактов, кликните на повторяющуюся сетку звезд, чтобы выделить ее.
• Разгруппируйте повторяющуюся сетку, нажав кнопку Ungroup в инспекторе параметров, выберите Ungroup Grid из контекстного меню (Ctrl + Click на Mac или правая кнопка мыши), или используя горячие кнопки Cmd + Shift + G (Mac) или Ctrl + Shift + G (Windows).
• Выделите две звезды и снимите галочку с заливки.

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

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

Теперь, когда есть Repeat Grid, мы перенесем ее на артборд в режиме прототипирования. Используя Adobe XD, вы можете быстро переключаться между режимами дизайна и прототипирования, что позволяет редактировать и сам интерфейс, и взаимодействия одновременно. В данном случае мы просто создадим второй артборд и сделаем три разных сценария из повторяющейся сетки.

Опция 1: Подключите целую повторяющуюся сетку к одному взаимодействию

• Создайте второй артборд в файле используя инструмент Artboard (A). Кликните справа от текущего артборда, чтобы рядом с первый создать второй.
• Переключитесь в режим Prototype, кликнув на вкладке вверху приложения или используя горячие клавиши Cmd + Tab (Mac) или Ctrl + Tab (Windows).
• Выделите повторяющуюся сетку на артборде. С правой стороны посередине объекта появится соединитель со стрелкой.
• Потяните этот соединитель на следующий артборд. Выберите настройки перехода во всплывающем меню и нажмите Escape или кликните за пределы окна, чтобы закрыть его.
• Предварительный просмотр возможен через кнопку Play в верхнем правом углу приложения или с помощью горячих клавиш Cmd + Enter (Mac) или Ctrl + Enter (Windows). Кликните где-то над сеткой, чтобы проиграть взаимодействие.

В данном случае мы подключили целый объект, включая отступы, в качестве точки взаимодействия.

Опция 2: Взаимодействие с отдельным элементом повторяющейся сетки

• Отмените последнее присоединение с помощью Cmd + Z (Mac) или Ctrl + Z (Windows).
• Cmd + клик (Mac) или Ctrl + клик (Windows) на прямоугольник в повторяющейся сетке, чтобы напрямую выделить этот элемент.
• Перетащите соединитель к правой стороне прямоугольника и подтяните его ко второму артборду. Выберите опции перехода во всплывающем меню, как в предыдущем случае, затем закройте его.
• Если окно предварительного просмотра не открыто с прошлого раза, запустите его снова и кликните на цели.

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

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

• Отмените последнее соединение, используя Cmd + Z (Mac) или Ctrl + Z (Windows).
• Переключитесь обратно в режим Design, кликнув на вкладку или используя горячие клавиши Cmd + Tab (Mac) или Ctrl + Tab (Windows).
• Нажмите Cmd + Клик (Mac) или Ctrl + Клик (Windows) на прямоугольнике в повторяющейся сетке, чтобы напрямую его выделить. Кликните, удерживая Shift, текстовый объект рядом с ним, чтобы добавить его к выделению.
• Сгруппируйте два объекта, используя опцию в контекстном меню или с помощью кнопок Cmd + G (Mac) или Ctrl + G (Windows).
• Переключитесь обратно в режим прототипирования. Заметьте, выделение осталось прежним, как в дизайн-режиме.
• Перетяните соединитель из группы ко второму артборду. Теперь вы подключили всю область группы в качестве точки взаимодействия.

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

Вот и все!

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

---

Перевод статьи Elaine Chao