Si të filloni punën me UXPin

01 nga 09

Si të filloni punën me UXPin

Vendosni një llogari në faqen kryesore të UXPin.

Ndërsa lëvizim në sferën e dizajnit celular, dizenjimi i aplikacioneve dhe dizajni i përgjegjshëm ka pasur një fokus në rritje në UX (User Experience) dhe wireframing , prototyping interaktive dhe mockups. Ka një sërë veglash atje që kanë për qëllim këtë vendtakim dhe ata e drejtojnë gamën e plotë nga komplekse, gjigandët e ngarkuar me karakteristika të rralla dhe mezi të dobishme. Një nga mjetet që ka kapur syrin tim është UXPin thjesht sepse është zhvilluar nga dizajnerët për projektues.

Para se të shkojmë përpara ... një paralajmërim. Nëse juaji është një organizatë që preferon të mbajë software atëherë UXPin nuk është për ju. E gjithë puna e bërë në këtë aplikacion bëhet në shfletuesin dhe projektet që ruani ruhen në llogarinë tuaj.

Për të filluar me UXPin, nisni një shfletues dhe shkoni në UXPin. Prej këtu ju mund të regjistroheni për një gjyq të lirë ose të organizoni një plan mujor bazuar në nevojën tuaj të parashikuar. Procesi i regjistrimit është shumë i lehtë dhe sapo të keni vendosur emrin tuaj të përdoruesit dhe fjalëkalimin, të jeni gati për të filluar.

02 nga 09

Si të filloni një projekt në UXPin

Ju mund të zgjidhni midis llojeve të ndryshme të projekteve.

Kur të hyni në të, ju arrini në Pult dhe, nga këtu ju mund të vendosni të krijoni një kornizë të re telegrami, një projekt të ri celular ose një projekt Responsive Web Design. Ka edhe plug-ins për UXPin që do t'ju lejojë të sjellni projektet tuaja Photoshop ose Sketch. Për këtë Si do të krijoj një flamur me disa tekste dhe të shtoj një buton email në flamurin. Për të arritur këtë kam zgjedhur Krijo një kornizë të re wireframe.

03 nga 09

Si të përdorni UXPin Interface

Ndërfaqja UXPin.

Sipërfaqja e Projektimit është thyer në katër fusha. Në zonën e zezë në të majtë janë një seri mjetesh që ju lejojnë të riktheheni në pult, të hapni Elementet që do të përdorni, hapni panelin e Elementeve të Zgjuar, kërkoni elemente, shtoni shënime në faqe dhe shtoni anëtarë të ekipit. Në pjesën e poshtme është një buton që hap një tutorial të shkurtër, një tjetër që ju lejon të hyni në llogarinë tuaj dhe një tjetër që hyn në FAQ, le të bëni pyetje dhe madje të jepni reagime.

Në zonën blu përgjatë krye janë një seri mjetesh dhe pronash. Butonat e errët në anën e djathtë ju lejojnë të përsërisni dizajnin tuaj, përshtatni cilësimet e projektit, ndani faqen dhe bëni një simulim në shfletues të faqes.

Paneli i Elementeve është vendi ku ju kapni pjesë dhe copa për Sipërfaqen e Projektimit, emrin tuaj dhe shtoni ose hiqni faqe.

Biblioteka Elements është një surprizë e këndshme për dizajnuesit UX. Ky pop-down ju lejon të zgjidhni nga 30 biblioteka që variojnë nga iOS në Android Lolipop Gjithashtu ju keni akses tek elementët e Bootstrap dhe të Fondacionit së bashku me ikonat me font të mahnitshëm, ikonat e gjesteve për celular dhe një koleksion të Widgets sociale.

04 nga 09

Si të shtoni një element në një faqe UXPin

Shtimi i një elementi është një proces drag and drop.

Për të filluar, e tërhoqa elementin e kutisë në sipërfaqen e dizajnit dhe, kur lëshoj miun, hapet paneli i pronave . Butoni Properties ju lejon të emërtoni elementin dhe të vendosni lartësinë e gjerësisë së elementit dhe vlerat e pozicionit. Ju gjithashtu mund të shtoni mbushje në element, rrumbullakosni qoshet dhe rregulloni perde e tij. Klikimi i butonit Color Background hap një picker ngjyra RGBA.

Ju gjithashtu mund të caktoni një font, kufi dhe model për elementin e përzgjedhur. Rrufeja e Rrufeja ju jep mundësinë për të shtuar ndërveprimin në një element të zgjedhur.

05 nga 09

Si të shtoni dhe formatoni tekstin në UXPin

Shtimi i tekstit në një element UXPin.

Për të shtuar tekstin, tërhiqni elementin e tekstit në sipërfaqen e dizajnit dhe futni tekstin tuaj. Klikoni butonin Property Property për të hapur pronat Font dhe formatoni tekstin tuaj. Nëse keni nevojë për një bllok teksti, shtoni një element teksti dhe klikoni butonin Generate LOREM IPSUM në vetitë e Font.

06 nga 09

Si të shtoni një imazh në një faqe UXPin

Ekzistojnë tri mënyra për të shtuar një imazh në një faqe.

Ka disa mënyra për të përmbushur këtë detyrë. Ju mund të përdorni Veglën e Imazhit në shiritin e veglave, të shtoni një Element të Imazhit nga Biblioteka ose thjesht të zvarritni dhe hidhni një imazh nga tavolina juaj mbi elementin në sipërfaqen e dizajnit siç tregohet më sipër.

07 nga 09

Si të shtoni një buton në një faqe UXPin

UXPin ka një bibliotekë të gjërë të butonave.

Edhe pse ka një element Button, duke hyrë " Button " në zonën e kërkimit , siç tregohet më lart, hap të gjitha butonat që gjenden në të gjitha Bibliotekat. Drag atë që punon për ju mbi sipërfaqen e projektimit dhe përdorni Properties për të ndryshuar ngjyrën, fontin dhe madje edhe rrezet e Kufirit. Për të ndryshuar tekstin brenda butonit, klikoni një herë në tekst dhe futni tekstin e ri.

08 nga 09

Si ta shtojmë interaktivitetin në një faqe UXPin

Interaktiviteti dhe mocioni shtohen përmes panelit të Ndërveprimeve.

Kjo nuk është aq e komplikuar sa mund të shfaqet së pari. Për futjen e email-it, shtova një element të inputit, e ndryshova atë, futja e tekstit dhe formatimi i tekstit. Me elementin e përzgjedhur të Input klikoni butonin Properties dhe kur vetitë e Elementit shfaqen klikoni butonin e Dukshmërisë - shikimi - në këndin e sipërm të djathtë të panelit.

Zgjidhni butonin dhe klikoni butonin Interactions - Lightning Bolt - në pronat. Kur hapet paneli i Ndërveprimeve, zgjidhni Ndërveprimin e Ri. Zgjidh Kliko nga Trigger poshtë. Në fushën e Veprimit zgjidhni Show Element. Tani do të kërkohet që Elementi të shfaqet. Klikoni një herë në vendndodhjen e armëve dhe klikoni mbi elementin e Input. Me elementin e identifikuar, tani mund të përcaktoni nëse doni ose jo të animoni elementin. Në këtë rast kam vendosur të tregoj Kutinë e Input me një lehtësi në dhe shkoi me vlerën e kohëzgjatjes default prej 300ms.

Unë gjithashtu dua që butoni të lëvizë rreth 65 pixels në të djathtë kur të klikohet. I zgjova butonin, hapi panelin e Ndërveprimeve dhe zgjodha ndërveprimin e ri . Kam përdorur këto cilësime:

Për të hequr një ndërveprim zgjidhni elementin dhe hapni panelin e Ndërveprimeve. Zgjidhni ndërveprimin në panel dhe klikoni Trash Can për ta fshirë atë.

09 nga 09

Si të testoni faqen tuaj në UXPin

Ju provoni në shfletuesin.

Për shkak të faktit që po punoni në shfletuesin, testimi është i vdekur i thjeshtë. Klikoni butonin Simuloni dizajn . Faqja do të hapet në shfletues dhe ju mund të provoni mënyrën. Do të shtohet edhe një panel në anën e majtë të faqes që lejon Komente, një Harta të Faqes nëse ka faqe të shumta, Testimi i përdorshmërisë, Ndarja e drejtpërdrejtë, Redaktimi dhe rikthimi në Pult.

Në pjesën e poshtme të faqes është një tjetër panel i vogël që ju lejon të shfaqni elementët Interaktiv, të tregoni ose fshihni komentet dhe të ndani lidhjen e projektit me të tjerët.