Käyttöliittymäsarjojen käyttäminen Adobe XD: ssä

Verkkosuunnittelusta kiinnostuneille, käyttöliittymäpaketteja Adobe XD ovat loistava tapa aloittaa uusi suunnitteluprojekti. Näiden sarjojen avulla saat käyttöösi joitain käteviä resursseja, joita voit muokata ja käyttää verkkosivustosi tai sovelluksesi suunnittelussa.

Jos olet uusi ohjelmiston käyttäjä etkä ole varma käyttöliittymäsarjojen käyttämisestä Adobe XD, niin olet tullut oikeaan paikkaan. Tässä artikkelissa näytän sinulle, kuinka voit asentaa käyttöliittymäsarjoja ohjelmistoon ja käyttää sitten mukana tulevia resursseja projektiisi.

Käyttöliittymäpakettien lataaminen Adobe XD: ssä

Katsotaanpa ensin, kuinka voit ladata käyttöliittymäsarjoja Adobe XD: ssä suoraan ohjelmistosta. Aloita noudattamalla näitä ohjeita:

Vaihe 1: Napsauta hampurilaisvalikkopainiketta ohjelmiston vasemmassa yläkulmassa.

Vaihe 2: Vieritä valikossa alas Get UI Kits -vaihtoehtoon ja napsauta sitten jompaakumpaa kolmea käytettävissä olevaa vaihtoehtoa.

Tätä artikkelia varten valitsen Google Material -käyttöliittymäpaketin. Projektistasi riippuen voit kuitenkin valita joko Apple iOS- tai Microsoft Windows -sarjan. Tämä avaa virallisen verkkosivun, josta voit ladata käyttöliittymäsarjat ilmaiseksi.

Vaihe 3: Etsi Adobe XD UI Kit seuraavalta verkkosivulta ja lataa se järjestelmääsi.

Vaihe 4: Avaa nyt ladattu tiedosto Adobe XD: ssä ja sinua tervehditään joukolla tauluja, jotka sisältävät käyttöliittymäresursseja vastaavalle alustalle.

Voit lähentää tai loitontaa pitämällä Ctrl-painiketta painettuna ja liikuttamalla vierityspyörää nähdäksesi kaikki yksittäiset taulut.

Jos haluat sen sijaan ladata Wireframes-sovelluksen, voit napsauttaa Wireframes-vaihtoehtoa Get UI Kits -valikosta.

Voit myös etsiä muita käyttöliittymäsarjoja Adoben verkkosivustolta napsauttamalla Lisää käyttöliittymäsarjoja -vaihtoehtoa Hanki UI Kits -valikosta.

Sivustolla on hienoja vaihtoehtoja, joista valita, mukaan lukien tämä todella siisti Movie Magic -käyttöliittymäsarja, joka näyttää heads-up-näytöltä.

Nyt kun tiedät kuinka ladata käyttöliittymäsarjoja, katsotaanpa, kuinka voit käyttää niitä projekteissasi.

Käyttöliittymäsarjojen käyttäminen Adobe XD: ssä

Voit käyttää käyttöliittymäsarjoja projektissasi noudattamalla näitä yksinkertaisia ​​ohjeita:

Vaihe 1: Lähennä käyttöliittymäelementtiä, jota haluat käyttää projektissasi, ja valitse se napsauttamalla sen otsikkoa.

Vaihe 2: Kopioi nyt elementti Ctrl+C-pikanäppäimellä.

Vaihe 3: Avaa sitten uusi Adobe XD -projekti valikosta.

Vaihe 4: Liitä tähän käyttöliittymäelementti Ctrl+V-pikanäppäimellä.

Käytän tässä artikkelissa Mobile Dark -elementtiä Google Material -käyttöliittymäpakkauksesta. Elementti sisältää oppaita, joiden avulla voit sijoittaa enemmän kerroksia, mutta jos et halua käyttää niitä, voit helposti poistaa ne noudattamalla seuraavaa vaihetta.

Vaihe 5: Poistaaksesi apuviivat, napsauta lukkokuvaketta vasemmassa yläkulmassa ja paina sitten poista. Voit ohittaa tämän vaiheen, jos haluat käyttää ohjaimia sijoittaaksesi enemmän esineitä elementtiin tarkasti.

Vaihe 6: Palaa nyt käyttöliittymäsarjaan ja valitse toinen elementti lisättäväksi tälle sivulle. Napsauta vielä kerran elementin otsikkoa ja kopioi se Ctrl+C-pikanäppäimellä.

Luon tälle artikkelille perusmaljan, jota varten käytän yhtä valintaikkunoista.

Vaihe 7: Liitä uusi elementti edellisen elementin päälle ja kohdista se sitten ohjeiden mukaan.

Vaihe 8: Muokkaa nyt kutakin paahtolehden elementtiä kaksoisnapsauttamalla tekstiruutua ja kirjoittamalla sitten teksti, jota haluat käyttää. Muutetaan ensin paahtoleivän otsikko.

Muuta seuraavaksi tekstin sisältöä kaksoisnapsauttamalla tekstiruutua ja kirjoittamalla mitä haluat lisätä.

Voit myös muuttaa painikkeiden tekstiä samalla tavalla. Kun tekstin muokkaus on valmis, voit muuttaa tekstin väriä ja läpinäkyvyyttä. Voit muuttaa peittävyyttä siirtämällä työkalupalkin Opacity-vaihtoehdon alla olevaa liukusäädintä oikealle.

Jos haluat muuttaa tekstin väriä, napsauta Täyttö-vaihtoehdon vieressä olevaa suorakulmiota ja valitse sitten uusi väri värivalitsimesta.

Eikä vain tekstiä voi muokata tällä tavalla. Voit myös muuttaa melkein kaikkien valintaikkunan kohteiden väriä ja peittävyyttä, mikä on hienoa, jos haluat ainutlaatuisen väriteeman.

Kun olet tyytyväinen tulokseen, siirry eteenpäin ja tallenna tiedosto napsauttamalla Tallenna nimellä -vaihtoehtoa valikossa tai käyttämällä Shift+Ctrl+S-pikanäppäintä.

Täydennä suunnittelusi käyttöliittymäsarjojen avulla

Nyt kun tiedät kuinka ladata ja käyttää käyttöliittymäsarjoja Adobe XD: ssä, olen varma, että alat valmistaa upeita malleja hetkessä. Nämä käyttöliittymäsarjat ovat ehdottomasti varsin käteviä ja auttavat sinua pääsemään suoraan projektiisi ilman, että sinun tarvitsee huolehtia käyttöliittymäelementtien suunnittelusta.

Seuraava: Saitko Adobe XD -projektin valmiiksi etkä tiedä kuinka viedä se HTML-muotoon? Katso seuraavasta artikkelista yksinkertainen vaiheittainen opetusohjelma.