01 od 09
Kako započeti s UXPinom
Kao što smo se preselili u područje mobilnog dizajna, dizajna aplikacija i responzivnog dizajna, sve se više usredotočio na UX (User Experience) i wireframing , interaktivne prototipove i modele. Postoji mnogo alata koji su usmjereni na ovu nišu i oni pokreću cijeli raspon od složenih, značajnih ladenih behemota do rijetkih i jedva korisnih. Jedan od alata koji je uhvaćen moj pogled je UXPin jednostavno zato što su ga razvili dizajneri za dizajnere.
Prije nego što krenemo naprijed ... upozorenje. Ako je vaša organizacija koja preferira vlastiti softver onda UXPin nije za vas. Sve radove u ovoj aplikaciji obavlja se u pregledniku, a projekti koje spremite spremaju se na vaš račun.
Za početak rada s UXPinom pokrenuli ste preglednik i krenuli prema UXPinu. Odavde možete se prijaviti za besplatnu probnu verziju ili organizirati mjesečni plan na temelju vaše predviđene potrebe. Postupak registracije je prilično jednostavan, a nakon što postavite svoje korisničko ime i lozinku, spremni ste za početak.
02 od 09
Kako započeti projekt u sustavu UXPin
Kada se prijavite dolazite na Nadzornu ploču i odavde možete odlučiti za stvaranje novog žičanog okvira, novog mobilnog projekta ili projekta Responsible Web Design. Tu su i plug-in za UXPin koji će vam omogućiti da unesete svoje Photoshop ili Sketch projekte. Za ovo Kako ću stvoriti banner s nekim tekstom i dodati gumb e-pošte na banner. Da biste to postigli, odabrao sam Izraditi novi žičani okvir.
03 od 09
Kako koristiti sučelje UXPin
Dizajn površina je razbijen u četiri područja. U crnom području slijeva nalazi se niz alata koji vam omogućuju povratak na nadzornu ploču, otvaranje elemenata koje ćete koristiti, otvaranje ploče Pametnih elemenata, pretraživanje elemenata, dodavanje bilješki na stranicu i dodavanje članova tima. Na dnu je gumb koji otvara kratki vodič, drugi koji vam omogućuje pristup vašem računu, a drugi koji pristupa FAQ-u, postavljajte pitanja, pa čak i dajte povratne informacije.
U plavom području uz vrh su niz alata i svojstava. Mračnije gumbe na desnoj strani omogućuju vam ponavljanje vašeg dizajna, prilagodbu postavki projekta, dijeljenje stranice i simulaciju stranice u pregledniku.
Panel elemenata je mjesto gdje ćete zgrabiti komadiće i komade za Design Surface, nazvati svoj projekt i dodati ili ukloniti stranice.
Biblioteka Elements je ugodno iznenađenje za dizajnere UX-a. Ovaj pop dolje vam omogućuje da odaberete 30 anonimnih knjižnica u rasponu od iOS-a do Android Lolipop-a. Također imate pristup Bootstrap i elementima Zaklade zajedno s ikonom Font Awesome, ikone Pokreta za mobilne uređaje i zbirku Social Widgeta.
04 od 09
Kako dodati element na stranicu UXPin
Da biste započeli, povukao sam okvir elementa na dizajnersku površinu i, kada otpustim miša, otvorit će se ploča Svojstva . Gumb Svojstva omogućuje vam nazivanje elementa i postavljanje visine i položaja širine elementa. Također možete dodati padding elementu, zaokružiti uglove i prilagoditi njegov neprozirnost. Klikom na gumb Boja pozadine otvara se alat za odabir boje RGBA.
Također možete dodijeliti font, granicu i uzorak odabranom elementu. Lightning Bolt vam daje mogućnost dodavanja interaktivnosti odabranom elementu.
05 od 09
Kako dodati i formatirati tekst u UXPin
Da biste dodali tekst, povucite tekstualni element na dizajnersku površinu i unesite tekst. Kliknite gumb Tekstualni objekt za otvaranje svojstava fonta i oblikovanje teksta. Ako vam je potreban blok blokova, dodajte tekstualni element i kliknite gumb GENERATE LOREM IPSUM u svojstvima Font.
06 od 09
Kako dodati sliku na stranicu UXPin
Postoji nekoliko načina ostvarivanja ovog zadatka. Alat za slike možete koristiti na alatnoj traci, dodati Element slike iz biblioteke ili jednostavno povucite i ispustite sliku s radne površine na element na površini dizajna kao što je gore prikazano.
07 od 09
Kako dodati gumb na stranicu UXPin
Iako postoji Button element, unosom " gumba " u područje pretraživanja , kao što je prikazano gore, otvara sve gumbe koje se nalaze u svim knjižnicama. Povucite onu koja vam odgovara na dizajnersku površinu i upotrijebite svojstva za promjenu boje, fonta, pa čak i graničnog polumjera. Da biste promijenili tekst unutar gumba, jednom kliknite na tekst i unesite novi tekst.
08 od 09
Kako dodati interaktivnost na stranicu UXPin
Ovo nije tako komplicirano kao što se prvo može pojaviti. Za unos e-pošte dodam ulazni element, promijenio je veličinu, unio tekst i formatirala tekst. Pomoću odabranog elementa unosa kliknite gumb Svojstva i kada se značajke Elementa pojave, kliknite gumb Vidljivost - očni jabučica - u gornjem desnom kutu ploče.
Odaberite gumb i kliknite gumb Interakcije - Lightning Bolt - u svojstvima. Kada se otvori ploča Interakcije, odaberite Nova interakcija. Odaberite Klik na padajućem izborniku Trigger. U području Aktivnosti odaberite Prikaži element. Sada ćete biti upitani koji se element prikazuje. Kliknite jednom na mjesto oružja i kliknite Ulazni element. Pomoću identificiranog elementa sada možete odrediti želite li animirati element. U tom sam slučaju odlučio prikazati ulazni okvir s lakoćom i otišao s zadanom vrijednošću trajanja od 300 ms.
Također želim da se gumb pomakne oko 65 piksela udesno kada se klikne. Odabrao sam gumb, otvorio ploču Interakcije i odabrala Nova interakcija . Koristio sam ove postavke:
- Trigger : kliknite
- Radnja: Premjesti
- Premjesti smjer : 65 px na x osi
- Animacija : linearna
- Trajanje: 300 ms
Da biste uklonili interakciju, odaberite element i otvorite ploču Interakcije. Odaberite interakciju na ploči i kliknite Kukac za otpad da biste ga izbrisali.
09 od 09
Kako testirati svoju stranicu u UXPinu
Zbog činjenice da radite u pregledniku, testiranje je mrtvo jednostavno. Kliknite gumb Simuliraj dizajn . Stranica će se otvoriti u pregledniku i možete testirati način. Tu će također biti dodana ploča na lijevu stranu stranice koja omogućuje Komentare, Mapa stranice ako postoji više stranica, Testiranje upotrebljivosti, Dijeljenje uživo, Uređivanje i povratak na Nadzornu ploču.
Na dnu stranice nalazi se još jedna mala ploča koja vam omogućuje prikaz interaktivnih elemenata, prikazivanje ili skrivanje komentara i dijeljenje veze projekta s drugima.