Rastrikujundus Adobe XD-ga intuitiivsete paigutuste jaoks

Adobe XD pakub sulle võimsaid tööriistu paigutuste täpselt kujundamiseks. Ridade sätete kasutamisel saad tagada, et su disainid oleksid nii lauaarvutitel kui ka mobiilseadmetes ühtlased ja esteetiliselt meeldivad. Samba- ja ristkülikukujuliste võrkude abil lihtsustad sa mitte ainult elementide paigutamist, vaid loob ka selge struktuuri oma projektis.

Olulisemad tähelepanekud

• Adobe XD paigutus kasutab vaikimisi nelja samba, kuid sobib ka täiendavaks samba kohandamiseks.
• Samba vahemaa ja laius saab vabalt määrata, mis annab sulle kontrolli oma disaini üle.
• Ristkülikukujuline võrk on eriti kasulik täpsemate elementide paigutuste jaoks.
• Aitavad jooned ja joondamise funktsioonid optimeerivad disaini töövoo.

Samme-sammult juhend

Võrgu aktiveerimine

Võrgu aktiveerimiseks ava oma artboard ja leia paremas paneelis kontrollnupp võrgu jaoks. Kliki sellel, et võrku nähtavaks teha. See on esimene samm struktureeritud disaini jaoks.

Sammasätete kohandamine

Vaikimisi näitab Adobe XD nelja sambat. Sa saad muuta sammaste arvu, sõltuvalt oma projektist. Kui näiteks töötad mobiilsete disainidega, on sageli neli samba optimaalsed. Lisa siis uus artboard, vajutades kiirklahvi 'A'. Vali tahvelarvuti formaat, et näha kaheksat samba, või veebilahendust, et näha kaheteistkümmet samba.

Samba vahemaa määramine

Oluline funktsioon on võimalus muuta samba vahemaa. Sea samba vahemaa näiteks 30 piksliks, et mõjutada kuvamist. Hetkel, kui muudad vahemaa, kohandub võrk vastavalt. Muuda ka samba laius, et muuta elementide vahemaa.

Servade seadistamine

Lisaks sammastule saad ka servi kohandada. Aktiveeri servade valik ja seadista ülemise ja alumise servi väärtused, näiteks 50 piksliks. See annab sinu disainile rohkem ruumi ja struktuuri.

Praktiline näide ekraanipiltidega

Tõmba ekraanipilt oma telefonist tööpinnale, et näha võrgu praktilist rakendust. Aktiveeri paigutuse võrk, et kontrollida servi ja vahemaid. See paigutus toetab elementide asetust võrgu kohaselt.

Ristkülikukujulise võrgu kasutamine

Kasu ‘Command + Shift + #’ (või ‘Ctrl + Shift + #’ Windowsi jaoks) klahvikombinatsiooni, et vajadusel ristkülikukujulist võrgustikku sisse ja välja lülitada. See annab sulle paindlikkuse vahetada erinevate võrgu tüüpide vahel ja kasutada seda sihipäraselt. Lisa veel üks artboard, et näidata, kuidas ristkülikukujuline võrk töötab.

Paindlik elementide paigutamine

Kui loo ristkülik ristkülikutööriistaga, saad liikuda oma elemente kümnete või kahekümnete sammudega. See lihtsustab täpset asetust võrgus. Elementide asetamine võrgu joonte kohale toimub sujuvalt, nii kaua kuni hoiad abijooned silmas.

Kasutage abijooni

Sammaste ja võrgu töötamise käigus märkad abijooni, mis aitavad sul joondada. Need on eriti kasulikud elementide paigutamiseks, et veenduda, et kõik näeb välja hea ja on korralikult paigutatud. 'Command' klahvi abil saad automaatse joondamise välja lülitada, juhul kui vajad rohkem vabadust elementide paigutamisel.

Disainipõhimõtete ühendamine

Pea alati meeles, et võrgu kasutamisel on eesmärk luua puhtaid ja tõhusaid paigutusi. Kasuta selles loomisprotsessis saadud teadmisi oma disainide optimeerimiseks ja ole paindlik, eriti reageerivate disainidega töötades.

Kokkuvõte – Adobe XD võrgu seadistuste valdamine

Võrgu ja samba seadistuste kasutamine Adobe XD-s on hädavajalik struktureeritud disainide loomisel. Sa oled õppinud, kuidas aktiveerida paigutusi, kohandada samba ja vahemaid ning kasutada abijooni enda kasuks. Nende tehnikate kaudu töötad sa efektiivsemalt ja kujundad meeleolukaid kasutajaliideseid.