8 geriausios „Anima“ programos savybės, kurias turėtų naudoti visi dizaineriai

Vieninga dizaino į kodą platforma, tokia kaip „Anima“, gali padėti paspartinti svetainių ir programų kūrimo projektus.

„Anima“ yra „Figma“, „Adobe XD“ ir „Sketch“ skirtų projektavimo į kodą papildinys. Tai leidžia dizaineriams sukurti didelio tikslumo mobiliųjų programų, nukreipimo puslapių ar svetainių prototipus, o kūrėjai gali lengvai gauti reaguojančius, švarius ir pakartotinai naudojamus kodus, kurie taip pat yra paruošti gamybai.

Šiame straipsnyje bus pristatytos Anima papildinio projektavimo ir kodavimo funkcijos. Skaitykite toliau, kad sužinotumėte, ar ši programa bus naudinga jūsų UI / UX dizaino projektams.

1. Kodo konvertavimas

The Anima papildinys greitai konvertuoja vaizdinius mobiliųjų programų ar svetainių dizainus į kūrėjams pritaikytus kodus. Galite gauti kodus skirtingomis kūrimo kalbomis, tokiomis kaip Vue, React, CSS, Sass ir HTML. „Anima“ generuojami kodai yra veiksmingi, o ne tik sukurti mašinomis.

Kūrėjai gali naršyti per visą dizaino kodą ir atlikti bet kokius norimus pakeitimus. Jie taip pat gali patikrinti bet kokius pakeitimus toje pačioje darbo srityje, nes Anima rodo grafinį programavimo kodo vaizdą.

„Anima“ rengia projektus, siūlančius naujas kodo konvertavimo parinktis į „Swift“, „ReactNative“ ir „Angular“.

2. Kurkite aukštos kokybės prototipus

Papildinys „Anima“ padeda sukurti aukštos kokybės prototipus iš „Adobe XD“, „Figma“ ar „Sketch“ projektavimo projektų. Galite matyti ir sąveikauti su prototipu, kuris tikrai panašus į galutinę svetainę ar programą.

Susijęs: Geriausios „Figma“ funkcijos, kurias turėtų naudoti visi dizaineriai

Galite įtraukti lūžio taškus į savo dizaino elementus ir vizualizuoti savo prototipą tiesioginiame naršyklės rodinyje. Galite atlikti koregavimus nuolat peržiūrėdami galutinę svetainės, planšetinio kompiuterio ar mobiliojo telefono ekrano dydžių išvaizdą.

Papildinys taip pat siūlo įmontuotus efektus, kurie statinius dizainus paverčia gyvais elementais. Galite įtraukti paralakso slinkties animaciją, išskleidžiamuosius meniu, užvedimo efektus, ekrano įkėlimo animaciją, vaizdo įrašus ir kt.

Apibendrinant galima pasakyti, kad tai leidžia jums perduoti dizaino prototipą, turintį visus būtinus vartotojo sąsajos komponentus ir dizaino išteklius.

3. Eksportuokite Vue / React kodus gamybai

Galite be vargo eksportuoti prototipo dizaino Vue / React kodus, kad galėtumėte išbandyti, paruošti ir gaminti. Taip pat galite greitai sukurti kodu pagrįstą svetainę naudodami savo dizaino projekto HTML/CSS kodus.

Galėsite publikuoti savo svetainę tiesiai iš „Figma“, „Sketch“ arba „Adobe XD“. Pirma, naudokite Peržiūra naršyklėje funkcija, leidžianti patikrinti svetainės išvaizdą. Tada tiesiog naudokite Sinchronizuoti su Anima funkcija, skirta prijungti projektą prie „Anima“ papildinio prietaisų skydelio.

Anima projekto darbo srityje galite bendrinti svetainės nuorodą su bendradarbiais ar klientais. Taip pat galite eksportuoti svetainės HTML/CSS kodus ir paskelbti svetainę savo domene arba bendrinti kodą su svetainės kūrėju, kad būtų galima toliau apdoroti.

4. Darbas su medžiagų dizainu

Anima pristato jums visiškai naują Medžiagos dizainas biblioteka, pagrįsta naujausiomis „Google“ gairėmis. Medžiagų dizaino biblioteką galite pasiekti iš Valdiklių biblioteka Anima papildinio, skirto Adobe XD, Figma arba Sketch.

„Anima“ medžiagos komponentai yra interaktyvūs konstrukciniai elementai, skirti sukurti modernią ir stilingą svetainių ar mobiliųjų programų vartotojo sąsają. Galite naršyti iš didžiulio komponentų sąrašo ir tiesiog vilkite ir numeskite savo dizaino darbo sritį „Figma“, „Adobe XD“ arba „Sketch“.

Šiuo metu „Anima Material Design“ biblioteką sudaro devyni komponentų meniu: mygtukas, žymimasis laukelis, išskleidžiamasis meniu, FAB, „Google“ šrifto piktograma, radijo mygtukas, slankiklis, jungiklis ir teksto laukas.

Susijęs: Kas tu esi medžiaga? Viskas, ką reikia žinoti apie naująją „Android“ išvaizdą

Kūrėjas taip pat teigia, kad „Anima“ yra vienintelė platforma, siūlanti tikrai veikiančius medžiagų dizainus, kurie yra gyvi ir reaguoja. Šie dizaino elementai taip pat automatiškai paverčiami atitinkamais kodais.

5. Kodu pagrįstas prototipų testavimas

Galite naudoti populiarius dizaino įrankius, tokius kaip „Adobe XD“, „Figma“ ir „Sketch“, skirtus vartotojo sąsajos projektavimo projektams. Tačiau jie nepalaiko kodo ir tiesioginio prototipų kūrimo. „Anima“ yra vienas iš populiariausių papildinių, galinčių sugeneruoti kodą, kurio reikia prototipų testavimui.

Prototipų testavimo įrankiams, pvz., „Fullstory“ ir „Hotjar“, projektavimo projekte reikia šių dalykų, kad naudotojas galėtų sėkmingai išbandyti:

1. Responsive dizaino elementai.
2. Interaktyvūs mygtukai, išskleidžiamieji meniu, teksto laukai ir medija.
3. Funkcinis kodas, kurį galite įkelti į pirmiau nurodytus testavimo įrankius.

Papildinys „Anima“ padeda įvykdyti visus aukščiau išvardintus reikalavimus, kad galėtumėte sėkmingai ir be vargo išbandyti savo svetainę arba programėlės mobiliesiems prototipą.

Anima gamina vizualinis bendradarbiavimas kuriant dizainą ir plėtros projektus lengviau su komentarais realiuoju laiku. Jei bendradarbiaujate su keliais asmenimis, pvz., projektų vadovais, dizaineriais, kūrėjais ir klientais, tai puiki komunikacijos priemonė kiekvienam.

Užuot aprašę savo darbo eigą el. paštu, parašykite trumpus komentarus tiesiai projekto viduje. Jūsų bendradarbis gali tiksliai matyti, ką jūs bandote perteikti. Taip vizualizuodami scenarijų visi sutaupo laiko ir išvengia galimo konflikto.

7. Tvarkykite ir bendrinkite komponentus

„Anima“ bendradarbiavimo darbo sritis yra pagrindinė vieta, kur kiekvienas projekto narys dalijasi ir valdo komponentus ar turtą. Galite nesunkiai nešvaistyti laiko, kai projekto susitikimų metu ieškote dizaino komponentų ar kodo išteklių.

The Kodo režimas padalija darbo erdvę į tris atskiras dalis. Galite prieiti Komponentas ir Stiliaus vadovas apatiniame ekrano meniu. Dešinėje pusėje esančiame meniu rasite visą savo turtą Turtas skirtukas.

Ekrano centre realiuoju laiku rodomas dizainas. Dizaineriai taip pat gali sukurti pasirinktinę komponentų biblioteką, skirtą kūrėjui.

8. Dirbkite su tiesioginiais juodraščiais

Daugeliui mobiliųjų programų ir svetainių kūrimo projektų prarandamas laikas dėl kelių iteracijų. Daugeliu atvejų šios iteracijos yra skirtos tik nedideliems pakeitimams, kuriuos dizaineris ar kūrėjas gali atlikti per kelias minutes.

Jūsų dizaineris ir kūrėjas gali nuolat dirbti su projektu neprarasdami laiko. Dizaineris gali sinchronizuoti naują prototipo versiją iš „Figma“, „Sketch“ arba „Adobe XD“ su „Anima“ projekto prietaisų skydeliu. Iš ten kūrėjas gali pasiekti naują dizainą ir tęsti projektą. Taigi jūs ir jūsų komanda sutaupote brangaus laiko dirbdami su tiesioginiais juodraščiais.

Dizainas pagal kodą, sukurtas be pastangų naudojant „Anima“.

Aukščiau minėtos funkcijos aiškiai rodo, kad dizaino į kodą Anima papildinys pašalins daugybę kliūčių, su kuriomis susiduria daugelis UI / UX kūrimo projektų. Jūsų programos ar svetainės dizaineris ir kūrėjas gali glaudžiai bendradarbiauti, kad sukurtų veikiantį prototipą, panašų į jūsų viziją.

Pamirškite vargus, susijusius su sudėtingais dizaino perdavimu, klaidingais dizaino kodais ir vėlavimais gauti tiesioginę svetainę ar programą. Dabar galite daugiau dėmesio skirti grafinio dizaino elementams, kad nustebintumėte tikslinę auditoriją.

11 pagrindinių dizaino elementų ir kaip juos naudoti

Naujokas grafinio dizaino srityje? Šie elementai yra labai svarbūs kuriant patrauklų dizainą.

Skaitykite toliau

Apie autorių