Adobe XD pamoka – Naudojimo patirtis ir prototipavimas

Labai sveiki atvykę į didžiulį „Adobe XD“ mokymą. Šio įvado metu aš save pristatau kaip tavo instruktorių.

Koks skirtumas tarp naudotojo patirties (UX) ir naudotojo sąsajos (UI)? Kokios rūšys lygio kūrimo egzistuoja ir kam geriausiai Adobe XD naudoti? Atsakymą rasite čia!

Pirmą kartą atidarytas Adobe XD - ir jau siūlo daugybę galimybių, kurias galima pasirinkti. Šiame vaizdo įraše yra nedidelis šildymasis prie Adobe XD, apžvalga apie programą ir pristatymas apie XD paleidimo langą bei jo funkcijas.

Meno lentos (piešimo plotai) Adobe XD lengvai leidžia sukurti skirtingoms skiriamosioms gebėjimams ir įrenginiams. Kokių ypatybių reikia atsižvelgti, sužinosi šiame vadovėlyje.

Skirtingos tinklelio nustatymo galimybės palengvina elementų tvarkymą ir išdėstymą tarpusavyje. Tam turime tiesų tinklelį ir stulpelių skaidymo galimybę.

Google, Apple ir Microsoft siūlo praktiškas UI rinkinius greitam pradžiamokūriui. Šie paruošti drobės labai padeda mums vėliau puoselejant prototipus skirtingoms platformoms.

Spalvos beveik kiekviename dizaine atlieka labai svarbų vaidmenį - šiame vaizdo įraše sužinosi, kaip dirbti su spalvomis „Adobe XD“ programoje, kaip jas importuoti ir kokias praktines šaltinius galima naudoti, norint rasti paruoštus spalvų derinius.

Yra daugybė būdų, kaip importuoti turinį, tokius kaip paveikslėlius, failus, tekstinius dokumentus ir t.t., į Adobe XD. Šiame vaizdo įraše aš pristatau kai kuriuos metodus. Tačiau, kadangi XD yra Adobe Creative Cloud dalis, puikiai ir patogiai dirbti su bibliotekomis.

Šriftai ir tipografija yra svarbus elementas mūsų kelionėje per Adobe XD. Šiame vaizdo įraše išmoksi, kaip tinkamai ir efektyviai naudotis šriftais.

Formos gali būti lengvai importuojamos į „Adobe XD“ arba su takelio įrankiu gali būti sukurtos patys. Jei objektas naudojamas daugiau nei du kartus, rekomenduojama jį taip pat įtraukti kaip simbolį į turtų sąrašą.

Dizainas daug ką turi bendro su įkvėpimu ir išoriniu įvesties šaltiniu. Čia įeina analoginis pasaulis, taip pat ir skaitmeninis pasaulis. Čia aš norėčiau pateikti keletą portalų, kuriuos mielai lankau.

Pradėkime mažu, smagiu praktiniu projektu. Šiame vadove ir artėjančiuose dviejuose vaizdo įrašuose sukursime vienos puslapio svetainės maketą.

Kartojimo tinklelis yra viena svarbiausių „Adobe XD“ savybių. Jis padeda mums laisvai keisti ir individualiai užpildyti kartą sukurtas objektų grupes.

Paskutiniame puslapio kūrimo etape rūpinsimės porėškiu ir sritimi skirta nuorodoms. Čia naudosime patogius SVG failus ir išmoksime kitų dizaino technikų.

Šioje pamokoje susitelksime ties klausimu, kaip galima padaryti interaktyvų ryšį tarp atskirų artboard'ų. Kokias galimybes pasirinkti perėjimui (perėjimui) ir kokias kitas modifikacijas galime atlikti prototipe, aiškinsime čia.

Kiekvienai svetainei reikia naršymo taško. Šiame vaizdo įraše mes skiriame dėmesį tik pagrindinio naršymo kūrimui viršutiniame skyriuje ir sąveikos tarp jų kūrimui.

Ši treniruotė grindžiama ankstesniu skyriumi ir parodo, kaip prisitaikyti prie išmaniojo telefono sukurtos darbalaukio meniu. Hamburgeryje esantis piktograma ir meniu punktai bus papildyti įdomiais animacijomis.

Vienas iš galingiausių įrankių geriausiai vizualizuoti yra „Adobe XD“ „Auto-Animate“ funkcija. Šiame pavyzdyje paaiškinsiu, kaip galite adaptuoti „Auto-Animate“ funkcijos principą kiekvienam įmanomam scenarijui.

Šiose vaizdo įrašuose mokysimės kurti prototipą internetiniam parduotuvės puslapiui. Čia išmoksime, kaip iš paprastų dizaino šablonų sukurti vizualiai patrauklius aukšto lygio prototipus. Dalis 1 iš 4.

Antrajame dalyje mes rūpinsimės išsamios aprašymų pateikimu, įtrauksime slankiklį vaizdams ir susietosime meniu juostas tarpusavyje.

Interaktyviam prototipavimui skirta perluosto funkcija mums suteikia įdomių galimybių, kaip informacija gali būti tiesiogiai įjungiama ir išjungiama.

Geras našumo dizainas visada suteikia naudotojui atsiliepimą apie sistemos būseną. Šį atsiliepimą įtrauksime į gražią animaciją projekto pabaigoje.

Adobe XD prototipavimo procese taip pat įgalina sąveiką per kalbos komandas. Žodiniai nurodymai lemia sistemos veiksmus, kuriuos galime nustatyti patys. Kaip tai veikia, parodysiu šiame vadove.

Bendradarbiaujant su kitomis padalinio ir įtrauktais asmenimis, garso komentaravimas yra vertingas įrankis, padedantis aiškiau pateikti projekto būseną.

Prototipo testavimas virtualioje aplinkoje yra viena - jį demonstruoti tiesiogiai ant galinio įrenginio yra visiškai kita. Ir tiesiog tai galima patogiai išspręsti naudojant „Adobe XD“ arba per USB, arba per „Creative Cloud“ ryšį. Tam naudojame „Adobe XD“ programą iš programėlių parduotuvės.

Bendradarbiavimo metu būtina keistis informacija su kitomis skyriais apie projekto būklę. Panaudojus publikavimo funkciją prototipas gali būti paskelbtas, tam, kad recenzentai, programuotojai ir užsakovas gautų vizualines įžvalgas į projektą. Šioje stadijoje prasideda redagavimo ciklas tarp specialistų skyrių, siekiant užbaigti projektą.

Adobe XD kaip vis dar labai jaunas programa keičiasi su kiekvienu atnaujinimu: šiame vaizdo įraše paaiškinu, kokios naujovos atsirado peršokant nuo 18-osios versijos iki 19-osios, kaip naudojami šie funkcionalumai ir kokiose situacijose jie yra naudingi. Tai apima: komponentus vietoj simbolių, responsyvų dydį, pagalbines linijas, daugiakampių įrankį, daugiau galimybių teksto formatavimui ir daugiau. Geros pramogos!