Для тех, кто интересуется веб-дизайном, наборы пользовательского интерфейса в Adobe XD — отличный способ начать новый дизайнерский проект. С помощью этих наборов вы получаете доступ к некоторым удобным ресурсам, которые вы можете модифицировать и использовать для дизайна своего веб-сайта или приложения.
Если вы новичок в программном обеспечении и не знаете, как использовать наборы пользовательского интерфейса в Adobe XD, то вы попали по адресу. В этой статье я покажу вам, как вы можете установить наборы пользовательского интерфейса в программное обеспечение, а затем использовать включенные ресурсы для своего проекта.
Как загрузить наборы пользовательского интерфейса в Adobe XD
Во-первых, давайте посмотрим, как вы можете загружать наборы пользовательского интерфейса в Adobe XD прямо из программного обеспечения. Просто выполните следующие действия, чтобы начать:
Шаг 1: Нажмите на кнопку меню гамбургера в верхнем левом углу программного обеспечения.
Шаг 2: В меню прокрутите вниз до параметра «Получить наборы пользовательского интерфейса», а затем щелкните один из трех доступных вариантов.
Для этой статьи я выберу набор Google Material UI. Однако, в зависимости от вашего проекта, вы можете выбрать комплекты Apple iOS или Microsoft Windows. Откроется официальная веб-страница, с которой вы можете бесплатно загрузить наборы пользовательского интерфейса.
Шаг 3: Найдите комплект пользовательского интерфейса Adobe XD на следующей веб-странице и загрузите его в свою систему.
Шаг 4: Теперь откройте загруженный файл в Adobe XD, и вы увидите набор артбордов, содержащих ресурсы пользовательского интерфейса для соответствующей платформы.
Вы можете удерживать кнопку Ctrl и перемещать колесо прокрутки, чтобы увеличивать/уменьшать масштаб, чтобы увидеть все отдельные монтажные области.
Если вы хотите вместо этого загрузить Wireframes, вы можете нажать на опцию Wireframes в меню Get UI Kits.
Вы также можете найти дополнительные наборы пользовательского интерфейса на веб-сайте Adobe, щелкнув параметр «Дополнительные наборы пользовательского интерфейса» в меню «Получить наборы пользовательского интерфейса».
На веб-сайте есть несколько отличных вариантов на выбор, в том числе этот действительно классный набор пользовательского интерфейса Movie Magic, который выглядит как дисплей на лобовом стекле.
Теперь, когда вы знаете, как загружать наборы пользовательского интерфейса, давайте посмотрим, как вы можете использовать их в своих проектах.
Как использовать наборы пользовательского интерфейса в Adobe XD
Чтобы использовать наборы пользовательского интерфейса в своем проекте, выполните следующие простые действия:
Шаг 1: Увеличьте элемент пользовательского интерфейса, который вы хотите использовать в своем проекте, и щелкните его заголовок, чтобы выбрать его.
Шаг 2: Теперь скопируйте элемент с помощью сочетания клавиш Ctrl+C.
Шаг 3: Затем откройте новый проект Adobe XD из меню.
Шаг 4: Здесь вставьте элемент пользовательского интерфейса, используя сочетание клавиш Ctrl+V.
В этой статье я буду использовать элемент Mobile Dark из набора пользовательского интерфейса Google Material. Элемент включает в себя направляющие, которые помогут вам разместить больше слоев, но если вы не хотите их использовать, вы можете легко удалить их, выполнив следующий шаг.
Шаг 5: Чтобы удалить направляющие, щелкните значок замка в верхнем левом углу, а затем нажмите «Удалить». Вы можете пропустить этот шаг, если хотите использовать направляющие для точного размещения большего количества объектов в элементе.
Шаг 6: Теперь вернитесь к набору пользовательского интерфейса, чтобы выбрать другой элемент для добавления на эту страницу. Еще раз нажмите на заголовок элемента и скопируйте его с помощью сочетания клавиш Ctrl+C.
Я создам основной тост для этой статьи, для которого я буду использовать один из диалогов.
Шаг 7: Вставьте новый элемент в предыдущий элемент, а затем выровняйте его в соответствии с направляющими.
Шаг 8: Теперь, чтобы отредактировать каждый элемент всплывающего уведомления, дважды щелкните текстовое поле, а затем введите текст, который хотите использовать. Во-первых, давайте изменим название тоста.
Затем измените содержимое тела, дважды щелкнув текстовое поле и введя все, что вы хотите добавить.
Вы также можете изменить текст кнопок таким же образом. Когда вы закончите редактирование текста, вы можете изменить цвет и прозрачность текста. Чтобы изменить непрозрачность, просто переместите ползунок под опцией «Непрозрачность» на панели инструментов вправо.
Чтобы изменить цвет текста, щелкните прямоугольник рядом с параметром «Заливка», а затем выберите новый цвет в палитре цветов.
И это не только текст, который вы можете редактировать таким образом. Вы также можете изменить цвет и прозрачность почти всех элементов в диалоговом окне, что очень удобно, если вы хотите использовать уникальную цветовую схему.
Как только вы будете удовлетворены результатом, просто сохраните файл, щелкнув параметр «Сохранить как» в меню или используя сочетание клавиш Shift + Ctrl + S.
Совершенствуйте свой дизайн с помощью наборов пользовательского интерфейса
Теперь, когда вы знаете, как загружать и использовать наборы пользовательского интерфейса в Adobe XD, я уверен, что вы в кратчайшие сроки начнете создавать потрясающие дизайны. Эти наборы пользовательского интерфейса, безусловно, очень удобны и помогут вам сразу перейти к вашему проекту, не беспокоясь о разработке каждого элемента пользовательского интерфейса.
Следующий: Завершили проект в Adobe XD и не знаете, как его экспортировать в HTML? В следующей статье вы найдете простое пошаговое руководство.
