Со второго обновления Adobe Experience Design для Windows у нас появилась возможность, прямо из меню получить доступ к 3 различным наборам пользовательского интерфейса:
- Apple iOS
- Google Material
- Microsoft Windows
Эти UI (пользовательский интерфейс) наборы расположились там, чтобы предоставить вам быстрый доступ к общеупотребляемым макетам и элементам UI для 3 самых популярных мобильных платформ. Этот мощный апгрейд сводит на нет необходимость создания этих UI элементов с нуля и избавляет от сильной «головной боли».
Если вы предпочитаете смотреть видео...
Открытие UI комплектов
Чтобы начать использовать UI комплекты. Просто откройте гамбургер меню в верхнем левом углу Adobe XD и выберите желаемый комплект Apple iOS, Google Material или Windows.
Использование комплектов
Давайте откроем комплект пользовательского интерфейса Google Material:
Как мы видим, нам представлены различные рабочие области (31 если быть точнее). Они содержат всё, от типографики до диалогов, и основных макетов.
В этих комплектах нет ничего особенного это просто обычные .XD файлы, которые были созданы с целью дать другим возможность повторно использовать элементы и рабочие области.
То, какой из них вам использовать, будет зависеть от того, что вы пытаетесь сделать. Допустим, вы разрабатываете приложение для Android, в котором есть галерея с миниатюрами.
Выберите рабочую область под названием «Mobile — Dark». Вы должны нажать на её название, чтобы выбрать всю рабочую область. Затем нажмите CTRL-C, чтобы скопировать её.
Теперь нажмите CTRL-N, чтобы создать новый .XD документ и вставьте скопированную рабочую область с помощью CTRL-V.
Замечательно! Вы только что впервые применили комплект Google Material! Но мы еще не закончили.
Давайте избавьтесь от этих розовых направляющих. Выберите любую из розовых линий и щелкните на иконку замка в верхнем левом углу выделения, а затем нажмите клавишу удаления.
Вернитесь к документу UI набора, с которым мы работаем. На монтажной области «Grid» выберите галерею с миниатюрами и скопируйте её.
Вставьте её в другой .XD документ и расположите так, как показано ниже:
Белый фон галереи в данном случае нам не нужен, поэтому давайте избавимся от него.
Дважды щелкните по нижней части белого контейнера, пока вы не заметите, что индикатор цвета справа на панели Adobe XD, показывает белый цвет заливки. Двойной щелчок выбирает слой, даже если он является частью группы. Нажмите клавишу удаления.
Теперь, выбрав галерею, просто растяните её по высоте за нижнюю часть так, как показано ниже:
Выберите всю рабочую область, щелкнув левой кнопкой мыши по заголовоку, нажмите CTRL-C, а затем CTRL-V, чтобы вставить её:
Выберите галерею на дубликате рабочей области, щелкните по ней правой кнопкой мыши и выберите Ungroup (разгруппировать). Затем нажмите кнопку Ungroup Grid (разгруппировать сетку) в правом верхнем углу Adobe XD.
Удалите все миниатюры изображений, кроме изображения медведя. Выделив изображение медведя, удерживайте Shift, чтобы пропорционально увеличить его на всю ширину.
Изображение оказалось ужасно пиксилизованно, поэтому, если вы хотите, вы можете скачать другую фотографию медведя (вы можете использовать её бесплатно). Перетащите её на две рабочих областей поверх двух экземпляров изображения с медведем.
Теперь выберите медведя на второй рабочей области и уменьшите его вертикальную высоту, примерно до 50% от видимой области экрана приложения.
Затем вернитесь к набору пользовательского интерфейса и скопируйте раздел с типографикой на рабочей области «Typography» (типографика).
Вставьте его во вторую рабочую область нашего документа. Щелкните по нему правой кнопкой мыши и разгруппируйте. Затем удалите все текстовые слои за исключением слоев с названием «Title» и «Body 2 / Menu». Выберите оба и сделайте их цвета белыми (#FFFFFF).
Если вы выберете текст «Body 2 / Menu», то заметите, что это Roboto с размером 14pt. Если вы снова вернетесь к той же рабочей области UI набора, то увидите, что вторичный цвет текста для темного фона, будет белый (#FFFFFF) с непрозрачностью 70%.
Однако, этот шрифтовой слой создан для справки. Мы собираемся созданить собственный стиль слоя используя инструмент для работы с текстом. Щелчкните левой кнопкой мыши и растяните текстовый фрейм на рабочей области, как показано ниже. Для текстового заполнителя, можете использовать генератор ru.lipsum.com и уменьшите непрозрачность цвета текста до 70%.
Замечательно! Допустим, мы довольны результатом и хотим, создать интерактиность. Нажмите на вкладку Prototype (прототип), а затем выберите галерею на левой рабочей области и разгруппируйте её несколько раз, пока не сможете выбрать отдельно миниатюру с медведем. Затем потяните синюю стрелку и перетащите ее на второю рабочую область, чтобы установить интерактивную связь.
Разгруппируйте верхнюю панель инструментов на правой рабочей области и выберите только стрелку и переместите её влево.
