Как да използвате комплекти за потребителски интерфейс в Adobe XD
Miscellanea / / November 29, 2021
За тези, които се интересуват от уеб дизайн, UI комплекти в Adobe XD са чудесен начин да стартирате нов дизайнерски проект. С тези комплекти получавате достъп до някои удобни ресурси, които можете да модифицирате и използвате за дизайна на вашия уебсайт или приложение.
![Как да използвате Ui комплекти в Adobe Xd Featured](/f/f51170c6fd33f6c4baf00d0f31b7e986.jpg)
Ако сте нов в софтуера и не сте сигурни как да използвате UI комплекти Adobe XD, значи сте попаднали на правилното място. В тази статия ще ви покажа как можете да инсталирате UI комплекти в софтуера и след това да използвате включените ресурси за вашия проект.
Как да изтеглите UI комплекти в Adobe XD
Първо, нека да разгледаме как можете да изтеглите UI комплекти в Adobe XD, направо от софтуера. Просто следвайте тези стъпки, за да започнете:
Етап 1: Кликнете върху бутона на менюто за хамбургер в горния ляв ъгъл на софтуера.
![Използвайте комплекти за потребителски интерфейс Adobe Xd 1](/f/f1bffbb779ef4fd40491b1e0f84990b2.jpg)
Стъпка 2: В менюто превъртете надолу до опцията Get UI Kits и след това щракнете върху една от трите от наличните опции.
![Използвайте комплекти за потребителски интерфейс 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 и ще бъдете посрещнати с куп артбордове, съдържащи UI ресурси за съответната платформа.
![Използвайте комплекти за потребителски интерфейс 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 UI kit, който изглежда като хедс-ъп дисплей.
![Използвайте комплекти за потребителски интерфейс Adobe Xd 11](/f/1ae757b9ced7e4961b570bcc131cdb3c.jpg)
Сега, когато знаете как да изтеглите комплекти за потребителски интерфейс, нека да разгледаме как можете да ги използвате във вашите проекти.
Как да използвате комплекти за потребителски интерфейс в Adobe XD
За да използвате UI комплекти във вашия проект, просто следвайте тези прости стъпки:
Етап 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. Елементът включва водачи, които да ви помогнат да поставите повече слоеве, но ако не искате да ги използвате, можете лесно да ги премахнете, като следвате следващата стъпка.
Стъпка 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? Вижте следващата статия за прост урок стъпка по стъпка.