Vodnik po programu Adobe XD - Oblikovanje izkušenj in prototipiranje

Dobrodošli na velikem Adobe XD vodiču. V tem uvodu se predstavljam kot vaš trener.

Kakšna je razlika med uporabniško izkušnjo (UX) in uporabniškim vmesnikom (UI)? Kakšne vrste oblikovanja ravni obstajajo in za kaj je najbolje uporabiti Adobe XD? Odgovor najdete tukaj!

Prvič odprl Adobe XD - in že se ponuja številne možnosti, ki jih lahko izberete. V tem videu je kratko ogrevanje za Adobe XD, pregled programa in uvod v Splash Screen XD ter njegove funkcije.

Artboardi (risalnice) je mogoče v programu Adobe XD hitro ustvariti za različne ločljivosti in naprave. Kateri posebnosti je treba upoštevati, izveš v tem vodiču.

Različne nastavitve mreže nam olajšajo čisto razporeditev elementov in predmetov med seboj. Za to imamo na voljo pravokotno mrežo in razdelitev stolpcev za stolpce.

Google, Apple in Microsoft zagotavljajo praktične UI-Komplete za hiter začetek. Ti pripravljeni artboardi nam zelo pomagajo pri kasnejšem oblikovanju prototipov za različne platforme.

Barve igrajo v skoraj vsakem dizajnu izjemno pomembno vlogo - v tem videu se boste naučili, kako v programu Adobe XD delati z barvami, kako jih uvoziti in kateri praktični viri obstajajo za zbiranje pripravljenih barvnih harmonij.

Obstaja veliko metod za uvoz sredstev, kot so slike, datoteke, besedilni dokumenti itd., v program Adobe XD. V tem videu bom predstavil nekaj postopkov. Kljub temu pa je XD del Creative Cloud podjetja Adobe, zato je delo z zbirkami zelo udobno in priročno.

Tema pisav in tipografije je pomemben gradnik na našem potovanju skozi Adobe XD. V tem videoposnetku se boš naučil, kako ustrezno in učinkovito upravljati s pisavami.

Oblike je mogoče enostavno uvoziti v Adobe XD ali pa jih ustvariti s pomočjo orodja poti. Če se predmet uporablja več kot dvakrat, je priporočljivo, da se doda med simbole na seznamu virov.

Oblikovanje ima veliko opraviti z navdihom in vplivom od zunaj. Sem spada analogni okolje kot tudi digitalni svet. Tu bom predstavil nekaj portalov, ki jih rad obiščem.

Začnimo z majhnim, lepim praktičnim projektom. V tem vodiču in naslednjih dveh videoposnetkih bomo ustvarili enostransko spletno stran.

Mreža ponavljanja je ena najpomembnejših funkcij programa Adobe XD. Pomaga nam, da enkrat ustvarjene skupine predmetov poljubno povečamo in individualno napolnimo.

V zadnjem delu oblikovanja Onepagerja se bomo posvetili nogi strani in območju za reference. Tu bomo uporabili praktične SVG-datoteke ter spoznavali dodatne oblikovalske tehnike.

V tej lekciji se bomo posvetili vprašanju, kako je mogoče interaktivno povezati posamezne tabelarične liste. Kako izbrati prehod (prehod) in kakšne druge spremembe lahko naredimo pri prototipu, bomo pojasnili tukaj.

Vsaka spletna stran potrebuje sidro za navigacijo. V tem videoposnetku se bomo osredotočili izključno na ustvarjanje glavne navigacije v zgornjem delu in interaktivno povezovanje med seboj.

To usposabljanje temelji na prejšnjem poglavju in prikazuje, kako prilagodimo ustvarjeni namizni meni za pametni telefon. Ikona hamburgerja in menijske postavke bodo obogateni z zanimivimi animacijami.

Eden izmed najmočnejših orodij za najboljšo možno vizualizacijo je funkcija Auto-Animate v programu Adobe XD. V tem primeru bom pojasnil, kako lahko prilagodite načelo funkcije Auto-Animate za katerokoli možno scenarij.

V naslednjih videoposnetkih se bomo naučili, kako ustvariti prototip spletnega trgovine. Naučili se bomo, kako iz preprostih artboardov ustvariti vizualno privlačne prototipe visoke ločljivosti. Del 1 od 4.

V drugem delu se bomo posvetili prikazu podrobnih opisov, vstavili drsnik za slike in povezali umetniške plošče med seboj.

Funkcija prekrivanja za interaktivno prototipiranje nam ponuja zanimive možnosti, kako informacije lahko neposredno prikažejo in skrijejo.

Dober oblikovalski design uporabniku vedno nudi povratne informacije o stanju sistema. Te povratne informacije bomo na koncu projekta vključili v privlačno animacijo.

Adobe XD v svojem postopku prototipiranja prav tako omogoča interakcijo prek glasovnih ukazov. Besedilni ukazi torej sprožijo sistemske akcije, ki jih lahko sami določimo. Kako to deluje, vam bom pokazal v tem vadniškem videoposnetku.

Pri sodelovanju z drugimi oddelki in vključenimi osebami je avdio komentiranje dragocena funkcija za jasno predstavitev statusa projekta.

Testiranje prototipa v virtualnem okolju je eno – prikazovanje v živo na končni napravi pa povsem drugo. In prav to lahko enostavno rešimo preko programa Adobe XD, bodisi preko USB-ja ali povezave s Creative Cloud. Za to uporabljamo aplikacijo Adobe XD iz trgovine z aplikacijami.

Med sodelovanjem je nujno, da se z drugimi oddelki izmenjuje informacije o stanju projekta. S funkcijo »Objavi« je mogoče prototip objaviti, da lahko pregledovalci, razvijalci in naročniki dobijo vizualne vtise projekta. Na tem mestu se začne tudi cikel urejanja med strokovnimi oddelki, da se projekt popelje do zrelosti.

Adobe XD se kot še vedno zelo mlad program s vsako posodobitvijo vedno bolj spreminja: V tem videoposnetku razložim, kakšne novosti so se pojavile pri preskoku iz različice 18 na različico 19, kako se funkcije uporabljajo ter v katerih primerih so koristne. Sem sodijo: komponente namesto simbolov, odzivno spreminjanje velikosti, vodila, orodje za ustvarjanje poligonov, dodatne možnosti oblikovanja besedila in še več. Uživajte!