Kako uporabljati komplete uporabniškega vmesnika v Adobe XD

Za tiste, ki jih zanima spletno oblikovanje, kompleti uporabniškega vmesnika Adobe XD so odličen način za hiter začetek novega oblikovalskega projekta. S temi kompleti dobite dostop do nekaterih priročnih virov, ki jih lahko spremenite in uporabite za oblikovanje vašega spletnega mesta ali aplikacije.

Če ste novi v programski opremi in niste prepričani, kako uporabljati komplete uporabniškega vmesnika Adobe XD, potem ste prišli na pravo mesto. V tem članku vam bom pokazal, kako lahko namestite komplete uporabniškega vmesnika v programsko opremo in nato uporabite priložene vire za svoj projekt.

Kako prenesti komplete uporabniškega vmesnika v Adobe XD

Najprej si oglejmo, kako lahko prenesete komplete uporabniškega vmesnika v Adobe XD neposredno iz programske opreme. Za začetek sledite tem korakom:

Korak 1: Kliknite gumb menija za hamburgerje v zgornjem levem kotu programske opreme.

2. korak: V meniju se pomaknite navzdol do možnosti Get UI Kits in nato kliknite katero koli od treh razpoložljivih možnosti.

Za ta članek bom izbral komplet uporabniškega vmesnika Google Material. Vendar pa lahko glede na vaš projekt izberete bodisi Apple iOS bodisi komplete Microsoft Windows. To bo odprlo uradno spletno stran, s katere lahko brezplačno prenesete komplete uporabniškega vmesnika.

3. korak: Poiščite komplet Adobe XD UI na naslednji spletni strani in ga prenesite v svoj sistem.

4. korak: Zdaj odprite preneseno datoteko v Adobe XD in pozdravil vas bo kup umetniških plošč, ki vsebujejo vire uporabniškega vmesnika za ustrezno platformo.

Lahko držite gumb Ctrl in premikate kolesce za pomikanje, da povečate/pomanjšate in si ogledate vse posamezne umetniške plošče.

Če želite namesto tega prenesti Wireframes, lahko kliknete možnost Wireframes v meniju Get UI Kits.

Dodatne komplete uporabniškega vmesnika lahko poiščete tudi na spletnem mestu Adobe, tako da kliknete možnost Več kompletov uporabniškega vmesnika v meniju Get UI Kits.

Spletno mesto ima nekaj odličnih možnosti, med katerimi lahko izbirate, vključno s tem res kul kompletom uporabniškega vmesnika Movie Magic, ki je videti kot prikazovalnik.

Zdaj, ko veste, kako prenesti komplete uporabniškega vmesnika, si oglejmo, kako jih lahko uporabite v svojih projektih.

Kako uporabljati komplete uporabniškega vmesnika v Adobe XD

Če želite v svojem projektu uporabiti komplete uporabniškega vmesnika, sledite tem preprostim korakom:

Korak 1: Povečajte element uporabniškega vmesnika, ki ga želite uporabiti v svojem projektu, in kliknite njegov naslov, da ga izberete.

2. korak: Zdaj kopirajte element z bližnjico Ctrl+C.

3. korak: Nato v meniju odprite nov projekt Adobe XD.

4. korak: Tukaj prilepite element uporabniškega vmesnika z bližnjico Ctrl+V.

Za ta članek bom uporabil element Mobile Dark iz kompleta uporabniškega vmesnika Google Material. Element vključuje vodnike, ki vam pomagajo postaviti več plasti, če pa jih ne želite uporabljati, jih lahko preprosto odstranite tako, da sledite naslednjemu koraku.

5. korak: Če želite odstraniti vodila, kliknite ikono ključavnice v zgornjem levem kotu in nato pritisnite Izbriši. Ta korak lahko preskočite, če želite uporabiti vodila za natančno postavitev več predmetov v element.

6. korak: Zdaj se vrnite v komplet uporabniškega vmesnika, da izberete drug element, ki ga želite dodati tej strani. Še enkrat kliknite naslov elementa in ga kopirajte z bližnjico Ctrl+C.

Za ta članek bom ustvaril osnovno zdravico, za katero bom uporabil enega od pogovornih oken.

7. korak: Prilepite nov element na prejšnji element in ga nato poravnajte po vodilih.

8. korak: Če želite urediti vsak element v zdravici, dvokliknite besedilno polje in nato vnesite besedilo, ki ga želite uporabiti. Najprej spremenimo naslov zdravice.

Nato spremenite vsebino telesa tako, da dvokliknete besedilno polje in vnesete, kar želite dodati.

Na enak način lahko spremenite tudi besedilo gumbov. Ko končate z urejanjem besedila, lahko spremenite barvo in motnost besedila. Če želite spremeniti motnost, samo premaknite drsnik pod možnostjo Motnost v orodni vrstici na desno.

Če želite spremeniti barvo besedila, kliknite pravokotnik poleg možnosti Fill in nato v izbirniku barv izberite novo barvo.

In na ta način lahko urejate ne samo besedilo. Prav tako lahko spremenite barvo in motnost skoraj vseh elementov v pogovornem oknu, kar je odlično, če želite edinstveno barvno shemo.

Ko ste zadovoljni z izidom, samo nadaljujte in shranite datoteko s klikom na možnost Shrani kot v meniju ali z uporabo bližnjice Shift+Ctrl+S.

Izpopolnite svoj dizajn s kompleti uporabniškega vmesnika

Zdaj, ko veste, kako prenesti in uporabljati komplete uporabniškega vmesnika v Adobe XD, sem prepričan, da boste v kratkem času začeli ustvarjati neverjetne modele. Ti kompleti uporabniškega vmesnika so vsekakor zelo priročni in vam pomagajo priti naravnost do vašega projekta, ne da bi vas skrbelo za oblikovanje posameznih elementov uporabniškega vmesnika.

Naslednji: Ste dokončali projekt na Adobe XD in ne veste, kako ga izvoziti v HTML? Oglejte si naslednji članek za preprosto vadnico po korakih.