Prototipavimas Figma | Figma pradedantiesiems #7

Šis straipsnis skirtas prototipavimui Figma. Šiandien sužinosite, kaip kurti interaktyvius komponentus, organizuoti savo dizainus ir dalintis savo prototipais. Skaitykite toliau, kad sužinotumėte daugiau.

Prototipavimas Figma – turinys:

1. Naudojamumo testavimas
2. Prototipų kūrimas
3. Prototipų parinktys
4. Srautas
5. Prototipų dalinimasis

Naudojamumo testavimas

Interaktyvūs sąsajos prototipai leidžia jums atvaizduoti vartotojo kelionės per jūsų programą kelią. Juos galite naudoti tyrimams, kad sužinotumėte, kaip vartotojai bendrauja su jūsų sąsaja. Tai vadinama naudojamumo testavimu, ir tai padeda jums rasti problemas, su kuriomis vartotojai gali susidurti.

Naudojamumo testavimas ankstyvose programos kūrimo stadijose padeda sumažinti nuostolius, kuriuos įmonė gali patirti, paleisdama nepatikrintą programą į rinką. Kartais idėjos, kurios dizaineriams atrodo puikios, pasirodo esą neintuityvios vartotojams. 

Prototipų kūrimas

Prototipus galite kurti Prototipo skirtuke Ypatybių panelei.

Prototipų parinktys

Jei nepasirinksite jokio sluoksnio, pamatysite prototipo nustatymus Prototipo skirtuke.

• Įrenginys – pasirinkite Įrenginį ir Modelį
• Peržiūra – čia galite pamatyti, kaip jūsų pakeisti nustatymai paveiks prototipo, kurį vėliau dalinsitės, išvaizdą.
• Fonas – galite pasirinkti fono spalvą, kad pritaikytumėte prototipą pagal savo prekės ženklą
• Srautai – galite pasirinkti pradinį prototipo rėmelį

Naudingas patarimas: Srauto pradžios taškas bus sukurtas automatiškai, kai pridėsite pirmąjį ryšį tarp dviejų rėmelių.

Srautas

Srautas yra rėmelių ir ryšių tinklas vienoje puslapio. Galite sukurti kelis atskirus srautus, pavyzdžiui, srautą, skirtą paskyros kūrimui, kitą – produktų peržiūrai arba sandorių užbaigimui. 

Norėdami sukurti ryšį, turite aktyvuoti Prototipavimo skirtuką, tada pasirinkite rėmelį arba objektą rėmelyje ir naudokite apvalų mazgą, kad nutemptumėte ryšį į kitą rėmelį.

Pridėtų ryšių nustatymus galite koreguoti Ypatybių panelei Interakcijų skyriuje, paspaudę ant sujungto objekto. Galite nurodyti interakcijos tipą.

Paspaudę ant tam tikros interakcijos, turite prieigą prie papildomų nustatymų.

a) Interakcijos detalės – nurodo interakcijos tipą (Paspaudus, Tempimo metu, Plūduriuojant, Spaudžiant) ir ką interakcija turėtų sukelti (Naršyti į, Pakeisti į). 

b) Animacija – čia galite nurodyti, kaip elementas turėtų elgtis po interakcijos. 

Norėdami pašalinti ryšį, paspauskite ir nutempkite abiejuose galuose.

  

Prototipų dalinimasis

Norėdami pasidalinti prototipu, pirmiausia turite jį peržiūrėti paspaudę mygtuką „Pristatyti“. Prototipo peržiūroje Pasidalinti prototipu mygtukas Įrankių juostoje bus prieinamas.

Paspaudę mygtuką Pasidalinti prototipu, atsidarys langas, kuriame galite nustatyti prieigos lygį (Gali peržiūrėti, Gali redaguoti) ir nurodyti, kas gali atidaryti failą (Bet kas su nuoroda, Tik žmonės, pakviesti į šį failą).

Užduotis 7. Pridėkite ryšius tarp savo ekranų. 

• Susiekite „Prisijungti“ mygtuką su Pagrindiniu rėmeliu.
• Susiekite nuotrauką ir produkto pavadinimą, kurie yra Pagrindiniame rėmelyje, su Produkto rėmeliu.
• Naudokite „Atgal“ mygtuką ir sukurkite ryšį, kad grįžtumėte į Pagrindinį ekraną.

Pridėję ryšius, galite juos peržiūrėti paspaudę mygtuką „Pristatyti“ ir patikrinti, kaip veikia jūsų prototipas. 

Jūs ką tik sužinojote daugiau apie prototipavimą Figma. Kiti ištekliai: Kas yra UX tyrimas?

Jei jums patinka mūsų turinys, prisijunkite prie mūsų užimtų bičių bendruomenės Facebook, Twitter, LinkedIn, Instagram, YouTube, Pinterest.