Як використовувати набори інтерфейсу користувача в Adobe XD
Різне / / November 29, 2021
Для тих, хто цікавиться веб-дизайном, комплекти інтерфейсу користувача Adobe XD — це чудовий спосіб розпочати новий дизайн-проект. За допомогою цих наборів ви отримуєте доступ до деяких зручних ресурсів, які можна змінити та використовувати для дизайну свого веб-сайту або програми.
![Як використовувати набори інтерфейсу користувача в Adobe Xd](/f/f51170c6fd33f6c4baf00d0f31b7e986.jpg)
Якщо ви новачок у програмному забезпеченні та не знаєте, як використовувати набори інтерфейсу користувача Adobe XD, тоді ви потрапили в потрібне місце. У цій статті я покажу вам, як можна встановити набори інтерфейсу користувача в програмне забезпечення, а потім використовувати додані ресурси для свого проекту.
Як завантажити набори інтерфейсу користувача в Adobe XD
По-перше, давайте подивимося, як ви можете завантажити набори інтерфейсу користувача в Adobe XD прямо з програмного забезпечення. Просто виконайте ці кроки, щоб почати:
Крок 1: Натисніть на кнопку меню гамбургера у верхньому лівому куті програмного забезпечення.
![Використовуйте набори інтерфейсу Adobe Xd 1](/f/f1bffbb779ef4fd40491b1e0f84990b2.jpg)
Крок 2: У меню прокрутіть униз до параметра Отримати комплекти інтерфейсу користувача, а потім клацніть будь-який із трьох доступних варіантів.
![Використовуйте набори інтерфейсу Adobe Xd 2](/f/369cca942baeb1e49d27d7df725582d7.jpg)
Для цієї статті я виберу набір інтерфейсу користувача Google Material. Однак, залежно від вашого проекту, ви можете вибрати комплекти Apple iOS або Microsoft Windows. Це відкриє офіційну веб-сторінку, з якої ви можете безкоштовно завантажити набори інтерфейсу користувача.
Крок 3: Знайдіть комплект Adobe XD UI на наступній веб-сторінці та завантажте його у свою систему.
![Використовуйте набори інтерфейсу Adobe Xd 3](/f/d410a96c2f89ce63c75c0016b7149637.jpg)
Крок 4: Тепер відкрийте завантажений файл у Adobe XD, і ви побачите купу монтажних областей, що містять ресурси інтерфейсу користувача для відповідної платформи.
![Використовуйте набори інтерфейсу Adobe Xd 4](/f/0a022b90f7e063aa7f14b881f0e5948b.jpg)
Ви можете утримувати кнопку Ctrl і переміщати колесо прокрутки, щоб збільшити/зменшити масштаб, щоб побачити всі окремі монтажні області.
![Використовуйте набори інтерфейсу Adobe Xd 5](/f/afb3a79877063680bc53801a776f2fb7.jpg)
Якщо ви хочете замість цього завантажити Wireframes, ви можете натиснути опцію Wireframes в меню Get UI Kits.
![Використовуйте набори інтерфейсу Adobe Xd 8](/f/fa1f5f65ea9837da53ac54f9fc8a283f.jpg)
Ви також можете шукати додаткові набори інтерфейсу користувача на веб-сайті Adobe, натиснувши опцію Більше наборів інтерфейсу користувача в меню Отримати набори інтерфейсу.
![Використовуйте набори інтерфейсу Adobe Xd 9](/f/5def953e1423a258a0fed27106875072.jpg)
На веб-сайті є кілька чудових варіантів на вибір, включаючи цей дійсно крутий набір інтерфейсу користувача Movie Magic, який виглядає як головний дисплей.
![Використовуйте набори інтерфейсу Adobe Xd 11](/f/1ae757b9ced7e4961b570bcc131cdb3c.jpg)
Тепер, коли ви знаєте, як завантажувати набори інтерфейсу користувача, давайте подивимося, як ви можете використовувати їх у своїх проектах.
Як використовувати набори інтерфейсу користувача в Adobe XD
Щоб використовувати набори інтерфейсу користувача у своєму проекті, просто виконайте ці прості кроки:
Крок 1: Збільште масштаб елемента інтерфейсу користувача, який ви хочете використовувати у своєму проекті, і клацніть його назву, щоб вибрати його.
![Використовуйте набори інтерфейсу Adobe Xd 12](/f/1dbb8b41af84750bc4defa03ad2682df.jpg)
Крок 2: Тепер скопіюйте елемент за допомогою комбінації клавіш Ctrl+C.
![Використовуйте набори інтерфейсу Adobe Xd 13](/f/7e8ddf2f2bec27ba8a1365dfef37df3a.jpg)
Крок 3: Потім відкрийте новий проект Adobe XD з меню.
![Використовуйте набори інтерфейсу Adobe Xd 14](/f/048450fc117d9b77769cff68666f9957.jpg)
Крок 4: Тут вставте елемент інтерфейсу користувача за допомогою ярлика Ctrl+V.
![Використовуйте набори інтерфейсу Adobe Xd 15](/f/0cb6e0263ce854b648c14a6c3ca98b57.jpg)
Для цієї статті я буду використовувати елемент Mobile Dark з набору Google Material UI. Елемент містить напрямні, які допоможуть вам розмістити більше шари, але якщо ви не хочете їх використовувати, ви можете легко видалити їх, виконавши наступний крок.
Крок 5: Щоб видалити напрямні, клацніть значок замка у верхньому лівому куті, а потім натисніть «Видалити». Ви можете пропустити цей крок, якщо хочете використовувати напрямні, щоб точно розмістити більше об’єктів у елементі.
![Використовуйте набори інтерфейсу Adobe Xd 16](/f/31660de2ec71ef5dd678d1711002b66d.jpg)
Крок 6: Тепер поверніться до набору інтерфейсу користувача, щоб вибрати інший елемент для додавання на цю сторінку. Ще раз клацніть на заголовку елемента та скопіюйте його за допомогою комбінації клавіш Ctrl+C.
![Використовуйте набори інтерфейсу Adobe Xd 17](/f/e66fe262da12751c28cd236c2ccdc59a.jpg)
Я буду створювати основний тост для цієї статті, для якого я буду використовувати одне з діалогових вікон.
Крок 7: Вставте новий елемент на попередній, а потім вирівняйте його відповідно до напрямних.
![Використовуйте набори інтерфейсу Adobe Xd 18](/f/d49d63d1f3ee987e479de42f75972ff4.jpg)
Крок 8: Тепер, щоб відредагувати кожен елемент у тості, двічі клацніть текстове поле, а потім введіть текст, який потрібно використовувати. Спочатку змінимо назву тосту.
![Використовуйте набори інтерфейсу Adobe Xd 19](/f/76f303a45c5aea4a08046ca04e7b1463.jpg)
Далі змініть вміст основного тексту, двічі клацнувши текстове поле та ввівши те, що ви хочете додати.
![Використовуйте набори інтерфейсу Adobe Xd 20](/f/6ca789b52cb0b59b94795f9e6e58e3a5.jpg)
Ви також можете змінити текст кнопок таким же чином. Після того, як ви закінчите редагувати текст, ви можете змінити колір і непрозорість тексту. Щоб змінити непрозорість, просто перемістіть повзунок під параметром Непрозорість на панелі інструментів праворуч.
![Використовуйте набори інтерфейсу Adobe Xd 21](/f/8fe2f9d2c6b5b88f2c34f9ceb0cde2bb.jpg)
Щоб змінити колір тексту, клацніть прямокутник поруч із параметром «Заливка», а потім виберіть новий колір у засобі вибору кольору.
![Використовуйте набори інтерфейсу Adobe Xd 23](/f/b502a75f404baa39d2d8892e2d4d8157.jpg)
І це не лише текст, який ви можете редагувати таким чином. Ви також можете змінити колір і непрозорість майже всіх елементів у діалоговому вікні, що чудово, якщо ви шукаєте унікальну колірну схему.
![Використовуйте набори інтерфейсу Adobe Xd 24](/f/991134a4b93ef0ef5864ddad3a7fd40e.jpg)
Коли ви задоволені результатом, просто продовжуйте і збережіть файл, натиснувши опцію «Зберегти як» у меню або скориставшись ярликом Shift+Ctrl+S.
Удосконалюйте свій дизайн за допомогою наборів інтерфейсу користувача
Тепер, коли ви знаєте, як завантажувати та використовувати набори інтерфейсу користувача в Adobe XD, я впевнений, що ви миттєво почнете створювати дивовижні дизайни. Ці набори інтерфейсу, безумовно, дуже зручні і допоможуть вам перейти безпосередньо до вашого проекту, не турбуючись про розробку кожного елемента інтерфейсу.
Далі: Ви завершили проект на Adobe XD і не знаєте, як експортувати його в HTML? Перегляньте наступну статтю, щоб отримати простий покроковий посібник.