Jak używać zestawów ui w adobe xd

Dla osób zainteresowanych projektowaniem stron internetowych zestawy interfejsu użytkownika w Adobe XD to świetny sposób na rozpoczęcie nowego projektu. Dzięki tym zestawom masz dostęp do pewnych przydatnych zasobów, które możesz modyfikować i wykorzystywać do projektowania swojej witryny lub aplikacji.

Jeśli jesteś nowicjuszem w tym oprogramowaniu i nie wiesz, jak używać zestawów interfejsu użytkownika w Adobe XD, trafiłeś we właściwe miejsce., Pokażę ci, jak możesz zainstalować zestawy interfejsu użytkownika w oprogramowaniu, a następnie użyć dołączonych zasobów dla swojego projektu.

Również w Technice przewodniej

Jak wsadowo konwertować zdjęcia za pomocą Adobe Bridge

Jak pobrać zestawy interfejsu użytkownika w Adobe XD

Najpierw przyjrzyjmy się, jak można pobrać zestawy interfejsu użytkownika w Adobe XD bezpośrednio z poziomu oprogramowania. Aby rozpocząć, wykonaj następujące kroki:

Krok 1: Kliknij przycisk menu hamburgera w lewym górnym rogu oprogramowania.

Krok 2: W menu przewiń w dół do opcji Pobierz zestawy interfejsu użytkownika, a następnie kliknij jedną z trzech dostępnych opcji.

W tym artykule wybiorę zestaw narzędzi Google Material UI. Jednak w zależności od projektu możesz wybrać zestawy Apple iOS lub Microsoft Windows. Spowoduje to otwarcie oficjalnej strony internetowej, z której można bezpłatnie pobrać zestawy interfejsu użytkownika.

Krok 3: Znajdź zestaw interfejsu użytkownika Adobe XD na poniższej stronie internetowej i pobierz go w swoim systemie.

Krok 4: Teraz otwórz pobrany plik w Adobe XD, a zostaniesz powitany przez kilka obszarów roboczych zawierających zasoby interfejsu użytkownika dla danej platformy.

Możesz przytrzymać przycisk Ctrl i przesunąć kółko przewijania, aby powiększyć / pomniejszyć, aby zobaczyć wszystkie poszczególne obszary robocze.

Jeśli zamiast tego chcesz pobrać Wireframes, możesz kliknąć opcję Wireframes w menu Get UI Kits.

Możesz także szukać dodatkowych zestawów interfejsu użytkownika na stronie internetowej Adobe, klikając opcję Więcej zestawów UI w menu Pobierz zestawy interfejsu użytkownika.

Witryna ma kilka wspaniałych opcji do wyboru, w tym ten naprawdę fajny zestaw Movie Magic UI, który wygląda jak ekran heads-up.

Teraz, gdy już wiesz, jak pobierać zestawy interfejsu użytkownika, przyjrzyjmy się, jak możesz ich używać w swoich projektach.

Jak używać zestawów interfejsu użytkownika w Adobe XD

Aby używać zestawów interfejsu użytkownika w swoim projekcie, wykonaj następujące proste czynności:

Krok 1: Powiększ element interfejsu użytkownika, którego chcesz użyć w projekcie, i kliknij jego tytuł, aby go wybrać.

Krok 2: Teraz skopiuj element za pomocą skrótu Ctrl + C.

Krok 3: Następnie otwórz nowy projekt Adobe XD z menu.

Krok 4: Tutaj wklej element interfejsu użytkownika za pomocą skrótu Ctrl + V.

W tym artykule użyję elementu Mobile Dark z zestawu Google Material UI. Element zawiera prowadnice, które pomogą Ci umieścić więcej warstw, ale jeśli nie chcesz ich używać, możesz je łatwo usunąć, wykonując następny krok.

Krok 5: Aby usunąć prowadnice, kliknij ikonę kłódki w lewym górnym rogu, a następnie naciśnij Usuń. Możesz pominąć ten krok, jeśli chcesz użyć prowadnic, aby dokładnie umieścić więcej obiektów w elemencie.

Krok 6: Teraz wróć do zestawu interfejsu użytkownika, aby wybrać inny element do dodania do tej strony. Ponownie kliknij tytuł elementu i skopiuj go za pomocą skrótu Ctrl + C.

Będę tworzyć podstawowy toast za ten artykuł, dla którego użyję jednego z okien dialogowych.

Krok 7: Wklej nowy element w poprzednim elemencie, a następnie wyrównaj go zgodnie z instrukcjami.

Krok 8: Teraz, aby edytować każdy element toastu, kliknij dwukrotnie pole tekstowe, a następnie wprowadź tekst, którego chcesz użyć. Najpierw zmień tytuł toastu.

Następnie zmień zawartość ciała, klikając dwukrotnie pole tekstowe i wpisując cokolwiek chcesz dodać.

Możesz również zmienić tekst przycisków w ten sam sposób. Po zakończeniu edycji tekstu możesz zmienić kolor i krycie tekstu. Aby zmienić krycie, po prostu przesuń suwak pod opcją Krycie na pasku narzędzi po prawej stronie.

Aby zmienić kolor tekstu, kliknij prostokąt obok opcji Wypełnienie, a następnie wybierz nowy kolor z próbnika kolorów.

I to nie tylko tekst, który możesz edytować w ten sposób. Możesz także zmienić kolor i krycie prawie wszystkich elementów w oknie dialogowym, co jest świetne, jeśli wybierasz unikatowy schemat kolorów.

Gdy jesteś zadowolony z wyniku, po prostu zapisz plik, klikając opcję Zapisz jako w menu lub używając skrótu Shift + Ctrl + S.

Również w Technice przewodniej

#projekt graficzny

Kliknij tutaj, aby zobaczyć naszą stronę z artykułami dotyczącymi projektowania graficznego

Doskonal swój projekt za pomocą zestawów interfejsu użytkownika

Teraz, gdy już wiesz, jak pobierać i używać zestawów interfejsu użytkownika w Adobe XD, na pewno szybko zaczniesz tworzyć niesamowite projekty. Te zestawy interfejsu użytkownika są z pewnością bardzo przydatne i pomagają przejść od razu do projektu, nie martwiąc się o projektowanie każdego elementu interfejsu użytkownika.

Następny w górę: Ukończono projekt na Adobe XD i nie wiesz, jak wyeksportować go do HTML? Zapoznaj się z następnym artykułem, aby zapoznać się z prostym samouczkiem krok po kroku.