01 od 09
Kako začeti z UXPin
Ko se preselimo v področje mobilnega oblikovanja, oblikovanja aplikacij in odzivnega oblikovanja, se vedno bolj osredotoča na UX (uporabniško izkušnjo) in žično prepletanje, interaktivno izdelavo prototipov in mockupov. Obstaja tona orodij, ki so usmerjena v to nišo in vodijo celotno lestvico od zapletenih, značilnosti obremenjenih behemot za redke in komaj koristne. Eno izmed orodij, ki me je ujelo, je UXPin preprosto zato, ker ga razvijajo oblikovalci za oblikovalce.
Preden gremo naprej ... opozorilo. Če je vaša organizacija, ki raje poseduje programsko opremo, potem UXPin ni za vas. Vsa dela, opravljena v tej aplikaciji, se izvedejo v brskalniku in shranjeni projekti se shranijo v vaš račun.
Če želite začeti z UXPin, sprožite brskalnik in pojdite na UXPin. Od tu se lahko prijavite za brezplačni preizkus ali uredite mesečni načrt glede na pričakovano potrebo. Postopek prijave je precej enostaven in ko ste nastavili svoje uporabniško ime in geslo, so vaši pripravljeni začeti.
02 od 09
Kako začeti projekt v UXPin
Ko se prijavite, pridete na nadzorno ploščo in od tod lahko odločite, da boste ustvarili novo žično ogrodje, nov mobilni projekt ali projekt Responsive Web Design. Obstajajo tudi vtičnike za UXPin, ki vam omogočajo, da prinesete svoje projekte Photoshop ali Sketch. Za to Kako naj ustvarim banner z nekaj besedilom in banneru dodam gumb za e-pošto. Za to sem izbral Ustvari nov okvir.
03 od 09
Kako uporabljati vmesnik UXPin
Projektna površina je razdeljena na štiri področja. V črnem območju na levi so vrsto orodij, ki vam omogočajo, da se vrnete na armaturno ploščo, odprete elemente, ki jih boste uporabili, odprli ploščo Smart Elements, poiskali elemente, dodali beležke na stran in dodali člane skupine. Na dnu je gumb, ki odpre kratek vadnico, drugi pa vam omogoča dostop do vašega računa in drugega, ki dostopa do pogosto zastavljenih vprašanj. Postavimo vam vprašanja in celo podajte povratne informacije.
Na modrem območju vzdolž vrha so vrsto orodij in lastnosti. Temnejši gumbi na desni strani vam omogočajo, da ponovite svojo zasnovo, prilagodite nastavitve projekta, delite stran in naredite simulacijo strani v brskalniku.
Element plošča je, kjer ste zgrabite bitov in kosov za Design Surface, navedite svoj projekt in dodate ali odstranite strani.
Knjižnica Elements je prijetno oblikovanje za UX oblikovalce. Ta pop up navzdol vam omogoča, da izberete med 30 knjižnicami od IOS do Android Lolipop. Imate tudi dostop do elementov Bootstrap in Fundacije skupaj z ikonami Font Awesome, ikonami Gesture za mobilne naprave in zbirko socialnih pripomočkov.
04 od 09
Kako dodati element na stran UXPin
Če želite začeti, sem povlekel element Box na površino zasnove in, ko spustim miško, se odpre plošča Properties (Lastnosti) . Gumb Lastnosti vam omogoča poimenovanje elementa in nastavitev višine in položaja elementa. Elementu lahko dodate tudi oblogo, zaokrožite vogale in prilagodite njeno motnost. S klikom na gumb Barva ozadja se odpre izbirnik barv RGBA.
Izbranemu elementu lahko dodelite tudi pisavo, rob in vzorec. Lightning Bolt vam omogoča dodajanje interaktivnosti izbranemu elementu.
05 od 09
Kako dodati in oblikovati besedilo v UXPin
Če želite dodati besedilo, povlecite besedilni element na površino zasnove in vnesite svoje besedilo. Kliknite gumb Lastnosti besedila, da odprete lastnosti pisave in oblikujete svoje besedilo. Če potrebujete blok lažnega besedila, dodajte element besedila in kliknite gumb GENERATE LOREM IPSUM v lastnostih Font.
06 od 09
Kako dodati sliko na stran UXPin
Obstaja nekaj načinov za to nalogo. V orodni vrstici lahko uporabite orodje za slikanje, v knjižnico dodate slikovni element ali preprosto povlečete in spustite sliko iz namizja na element na površini zasnove, kot je prikazano zgoraj.
07 od 09
Kako dodati gumb na UXPin stran
Čeprav obstaja element Button, v polje » Iskanje « vstopite » gumb «, kot je prikazano zgoraj, odpre vse gumbe, ki jih najdemo v vseh knjižnicah. Povlecite tistega, ki deluje za vas na površino zasnove in uporabite Properties za spreminjanje barve, pisave in celo obrobe obrobe. Če želite spremeniti besedilo znotraj gumba, enkrat kliknite besedilo in vnesite novo besedilo.
08 od 09
Kako dodati interaktivnost na stran UXPin
To ni tako zapleteno, kot se lahko prvič pojavi. Za vhod v e-pošto sem dodal vhodni element, ga spremenil, vnesel besedilo in formatiral besedilo. Z izbranim vnosnim elementom kliknite gumb Lastnosti in, ko se pojavijo elementi lastnosti, kliknite gumb Visibility - očesno jabolko - v zgornjem desnem kotu plošče.
Izberite gumb in kliknite gumb Interactions - Lightning Bolt - v lastnostih. Ko se odpre plošča Interactions, izberite Nova interakcija. Izberite klik iz sprožilca sprožilca. V območju Akcija izberite Prikaži element. Sedaj boste vprašali, kateri element naj se prikaže. Kliknite enkrat na pištolo in kliknite element Input. Z določenim elementom lahko sedaj ugotovite, ali želite animirati ali ne. V tem primeru sem se odločil, da se polje Input prikaže z lahkoto in se prikaže s privzeto vrednostjo trajanja 300ms.
Hkrati želim, da se gumb ob premikanju zaslona premakne približno 65 slikovnih pik. Sem izbral gumb, odprl ploščo Interakcije in izbral novo interakcijo . Te nastavitve sem uporabil:
- Trigger : Kliknite
- Dejanje: Premakni
- Premik smeri : 65 px na osi x
- Animacija : Linearna
- Trajanje: 300 ms
Če želite odstraniti interakcijo, izberite element in odprite ploščo Interakcije. Izberite interakcijo na plošči in kliknite Trash Can, da jo izbrišete.
09 od 09
Kako testirati svojo stran v UXPin
Zaradi dejstva, da delate v brskalniku, je testiranje mrtvo preprosto. Kliknite gumb Simulate Design . Stran se odpre v brskalniku in preizkusite pot. Na levi strani strani bo dodana tudi plošča, ki omogoča, da so komentarji, zemljevid strani, če je več strani, testiranje uporabnosti, deljenje v živo, urejanje in vrnitev na nadzorno ploščo.
Na dnu strani je še en majhen panel, ki vam omogoča prikaz interaktivnih elementov, prikazovanje ali skrivanje komentarjev in skupno rabo povezave z drugimi.