01 od 09
Kako početi sa UXPin-om
Kako se krećemo u oblast mobilnog dizajna, dizajna aplikacije i odgovarajućeg dizajna, sve više se fokusira na UX (korisničko iskustvo) i wireframing , interaktivne prototipove i mockups. Postoji tona alata koja je usmerena na ovu nišu i pokreću punu složenost od složenih, opterećenih behemota do retkih i jedva korisnih. Jedan od alata koji me je uhvatio je UXPin jednostavno zato što su ga razvili dizajneri za dizajnere.
Pre nego što krenemo napred ... upozorenje. Ako je vaša organizacija koja više voli da poseduje softver, UXPin nije za vas. Svi radovi u ovoj aplikaciji se obavljaju u pretraživaču, a projekti koje sačuvate se čuvaju na vašem računu.
Da biste započeli sa UXPin-om, pokrenete pregledač i idite u UXPin. Odavde se možete prijaviti za besplatni probni rad ili dogovoriti mesečni plan na osnovu vaše očekivane potrebe. Proces registracije je sasvim jednostavan i kada ste postavili svoje korisničko ime i lozinku, vaši su spremni da započnu.
02 od 09
Kako započeti projekat u UXPin-u
Kada se prijavite dolazite do Dashboard-a i odavde možete odlučiti da napravite novu wireframe, novi mobilni projekat ili projekat Responsive Web Design. Postoje i plug-ins za UXPin koji će vam omogućiti da unesete svoje Photoshop ili Sketch projekte. Za ovo Kako ću kreirati baner sa nekim tekstom i dodati dugme e-pošte na baner. Da bih ovo ostvario, izabrao sam Kreiraj novu wireframe.
03 od 09
Kako koristiti UXPin interfejs
Površina dizajna je podeljena na četiri područja. U crnoj oblasti s lijeve strane nalazi se niz alata koji vam omogućavaju da se vratite na kontrolnu ploču, otvorite Elemente koje ćete koristiti, otvorite panel Smart Elements, potražite elemente, dodajte beleške na stranicu i dodajte članove tima. Na dnu je dugme koje otvara kratki tutorijal, drugi koji vam omogućava pristup vašem nalogu, a drugi koji pristupa najčešće postavljanjima često postavljate pitanja, pa čak i dostavljate povratne informacije.
U plavoj oblasti na vrhu su niz alata i svojstava. Tamnija dugmad na desnoj strani omogućavaju vam da ponovite svoj dizajn, prilagodite postavke projekta, podijelite stranicu i napravite simulaciju stranice u pretraživaču.
Panel Elements je mesto gde ćete grabiti delove za Design Surface, nazvati svoj projekat i dodati ili ukloniti stranice.
Biblioteka Elements je prijatno iznenađenje za UX dizajnera. Ovaj pop up omogućava vam da izaberete iz anon 30 biblioteka koji se kreću od iOS-a do Android-a Lolipop Takođe imate pristup elementima Bootstrap-a i Foundation-a zajedno sa Font Awesome ikonama, ikonama Gesture za mobilne uređaje i zbirkom Social Widgets-a.
04 od 09
Kako dodati jedan element na stranicu UXPin
Da bih započeo, povlačio sam element kutije na površinu dizajna i, kada otpustim miš, otvori se panel za osobine . Dugme Svojstva vam omogućava da navedete element i postavite širinu i veličinu elementa elementa. Takođe možete dodati dopunu elementu, zaokružiti uglove i prilagoditi njegovu prozirnost. Klikom na dugme Boja pozadine otvara se RGBA izbor boja.
Takođe možete dodijeliti font, granicu i obrazac 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, prevucite tekstni tekst na površinu dizajna i unesite svoj tekst. Kliknite na dugme Property Property da biste otvorili svojstva fonta i formatirali svoj tekst. Ako vam je potreban blok lažnog teksta, dodajte tekstualni element i kliknite na dugme GENERATE LOREM IPSUM u svojstvima fonta.
06 od 09
Kako dodati sliku na stranicu UXPin
Postoji nekoliko načina za postizanje ovog zadatka. Možete koristiti Image Tool na traci sa alatkama, dodati Element slike iz biblioteke ili jednostavno prevući i otpustiti sliku sa radne površine na element na površini dizajna kao što je prikazano gore.
07 od 09
Kako dodati dugme na stranicu UXPin
Iako postoji element dugmeta, unoseći " Button " u polje za pretragu , kao što je prikazano gore, otvara se sva dugmad koja se nalaze u svim bibliotekama. Prevucite onu koja radi za vas na površinu dizajna i koristite Properties za promjenu boje, fonta, pa čak i graničnog prelaza. Da biste promenili tekst unutar dugmeta, kliknite jednom na tekst i unesite novi tekst.
08 od 09
Kako dodati interaktivnost na UXPin stranicu
Ovo nije tako komplikovano kao što se možda prvo pojavljuje. Za unos e-pošte, dodao sam ulazni element, promenio ga, unesio tekst i formatirao tekst. Sa izabranim ulaznim elementom kliknite na dugme Svojstva i, kada se pojavljuju svojstva elementa, kliknite na dugme Vidljivost - očna ikona - u gornjem desnom uglu panela.
Izaberite dugme i kliknite na dugme Interactions - Lightning Bolt - u svojstvima. Kada se otvori panel Interactions, izaberite New Interaction. Izaberite Klik iz tastera Trigger. U oblasti Akcija izaberite Prikaži element. Sada će biti upitani koji Element će se prikazati. Kliknite jednom na pištolj i kliknite na ulazni element. Sa identifikovanim elementom, sada možete odrediti da li želite da animirate ili ne. U ovom slučaju sam odlučio da prikažem ulaznu kutiju sa lakoćom i otišao uz zadatu vrijednost trajanja od 300ms.
Takođe želim da se dugme pomeri oko 65 piksela na desno kada se klikne. Ja sam izabrao dugme, otvorio panel Interactions i odabrao New Interaction . Koristio sam ove postavke:
- Trigger : Kliknite
- Akcija: Move By
- Move Direction : 65 px na x osi
- Animacija : Linearna
- Trajanje: 300 ms
Da biste uklonili interakciju, izaberite element i otvorite panel Interactions. Izaberite interakciju na panelu i kliknite na Trash Can kako biste je izbrisali.
09 od 09
Kako testirati stranicu u UXPin-u
Zbog činjenice da radite u pretraživaču, testiranje je jednostavno mrtvo. Kliknite na dugme Simulate Design . Stranica će se otvoriti u pregledaču i možete testirati način. Takođe će se dodati panel na levoj strani stranice koja omogućava Komentari, Mapa sajta ako ima više stranica, Testiranje upotrebljivosti, Deljenje uživo, uređivanje i vraćanje na Dashboard.
Na dnu stranice je još jedan mali panel koji vam omogućava prikazivanje interaktivnih elemenata, prikazivanje ili sakrivanje komentara i dijeljenje veze sa projektom sa drugima.