01 de 09
Nola lortu Yourself hasi zen UXPin-ekin
Mugikorreko diseinuaren, aplikazioaren diseinuaren eta sentikorren diseinuaren arloan mugitzen gabiltzanean, UX (Erabiltzaileen Esperientzia) eta wireframing , prototipo interaktiboen eta mahainguruetan arreta handiagoa jarri da. Tresna horri zuzendutako tresnen tarte bat dago, eta gamaren osagaiak eskala txikiak eta oso baliagarriak diren behemoths konplexuak dira. Nire begiak harrapatu dituen tresnen artean UXPin diseinatzaileentzako diseinatzaileek garatu zuten.
Aurrera egin aurretik ... oharra. Zurea software propioa nahiago duen erakunde bat bada, orduan UXPin ez da zuretzat. Aplikazio honetan egindako lan guztia arakatzailean egiten da eta gordetako proiektuak zure kontura gordetzen dira.
UXPin-ekin hasteko, arakatzailea abiarazi eta UXPin-era joango zara. Hemendik doako proba bat har dezakezu edo zure beharretara oinarritutako hileko plan bat prestatu. Saioa hastea prozesua oso erraza da eta zure Erabiltzaile izena eta pasahitza ezarri ondoren, zure hasieratik prest daude.
02 de 09
Nola hasi UXPin proiektu bat
Saioa hastean saioa hasten duzunean Arbelera joango zara eta hemendik aldaera berri bat, proiektu mugikor berri bat edo Web Diseinu sentikor proiektu bat sortzea erabaki dezakezu. UXPin-en pluginak ere badira zure Photoshop edo Sketch proiektuak ekartzea ahalbidetuko duena. Horretarako, nola egin behar dudan banner bat testu batekin eta posta elektronikoko botoia bannerara gehitzeko. Horretarako, hautatu Sortu wireframe berri bat.
03 de 09
Nola erabili UXPin interfazea
Diseinuaren azala lau eremutan banatzen da. Ezkerraldeko eremu beltzean panelera itzultzeko aukera ematen duten tresna batzuk dituzu, erabili Elementuak ireki, Smart Elements panela ireki, elementuen bilaketa, orria oharrak gehitu eta taldeko kideak gehitu. Behealdean tutorial laburra irekitzen duen botoia da, zure konturako sarbidea eta FAQ-ekin sartzen den beste bat sartzeko aukera ematen duen beste bat. Galderarik egin eta iritziak eman.
Goiko urdinez, tresna eta propietate batzuk daude. Eskuinaldean botoiak ilunagoak zure diseinua iteratzea ahalbidetzen dute, proiektuaren doikuntzak doitu, orrialde partekatu eta orrialdean arakatzailearen simulazio bat egin.
Elementuen panelak diseinu azpiaren bittak eta piezak hartzen ditu, proiektuaren izena eta orriak gehitzeko edo kentzeko.
Elements liburutegia UX diseinatzaileentzat zoragarria da. Pop hau behera aukeratzen baduzu anon 30 liburutegiak iOS-etara Android Lolipop-era igarotzeaz gain, Bootstrap eta Fundazio elementuak ere sar ditzakezu Font Awesome ikonoekin, Gesture ikonoak mugikorrarekin eta Social Widgets bildumarekin.
04 de 09
Nola gehitu UXPin orrialderako elementua
Hasteko, Box elementua diseinuaren azalera arrastaka eraman nuen eta, sagua askatu ondoren, Propietateak panel irekitzen dira. Propietateen botoiak elementua izendatzeko aukera ematen du eta elementuaren zabalera altuera eta kokapen balioak konfiguratzeko aukera ematen du. Elementuari betegarria ere gehi diezaiokezu, baztertu txoko eta opakutasuna doitzeko. Atzeko planoaren kolorea sakatzean, RGBA kolore-hautatzailea irekiko da.
Eredua, ertza eta eredua aukera ditzakezu hautatutako elementura. Lightning Bolt-ek interaktibitatea hautatutako elementu bat gehitzeko gaitasuna ematen dizu.
05 de 09
Nola gehitu eta formatu testua UXPin-en
Testua gehitzeko, arrastatu testuaren elementua diseinuaren azalera eta idatzi zure testua. Egin klik Testu Propietatearen botoian Letra-tipoak propietateak irekitzeko eta zure testua formateatzeko. Fikziozko testuaren bloke bat behar baduzu, gehitu testu-elementu bat eta egin klik GENERATE LOREM IPSUM botoian Font propietateetan.
06ko 09
Nola gehitu irudia UXPin orrialdera
Zeregin hori betetzeko modu pare bat daude. Tresna- barrako Irudi-tresna erabil dezakezu, Liburutegiko Image elementu bat gehitzeko edo, besterik gabe, goiko irudian agertzen den elementuari mahaigainean irudi bat arrastatu eta jaregiteko.
07 de 09
Nola gehitu botoi bat UXPin orrialdera
Botoiaren elementua badago ere, " Botoia " bilaketa eremuan sartu, goian azaldu bezala, Liburutegi guztietan aurkitutako botoiak irekitzen ditu. Arrastatu diseinuaren gainazalean lan egiten duenarena eta erabili Propietateak kolorea, letra-tipoa eta ertzaren erradioa aldatzeko. Botoiaren barruan testua aldatzeko, egin klik behin testuan eta sartu testu berria.
08 de 09
Nola gehitu interaktibitatea UXPin orrialdera
Hau ez da oso konplexua, baliteke lehen agertzen den moduan. E-posta sarrerarako, sarrera-elementu bat gehitu dut, tamainaz aldatu da, testua idatzi eta formateatu da. Sarrerako elementuarekin hautatuta, egin klik Propietateak botoian eta, Elementuaren propietateak agertzen direnean, egin klik Ikuspegian botoia - eyeball - panelaren goiko eskuineko ertzean.
Aukeratu botoia eta egin klik Interakzio botoian - Lightning bolt-en propietateetan. Interakzio panelak irekitzen direnean, hautatu Interakzio berria. Hautatu Klik from Trigger pop down. Ekintza eremuan hautatu Erakutsi elementua. Orduan eskatuko zaizu zein erakusteko elementua. Egin klik behin gunsite gainean eta egin klik Idatzi elementuan. Elementu identifikatuarekin, elementua animatu ala ez zehaztu dezakezu. Kasu honetan sarrerako laukia modu errazean erakustea erabaki nuen eta 300ms iraupeneko balio lehenetsiarekin joan nintzen.
Nahi dut botoiaren mugimendua 65 pixel inguru eskuinera botoian klik egitean. Botoia hautatu nuen, Interakzio panelak ireki eta Elkarrekintza berria aukeratu nuen. Ezarpen hauek erabili ditut:
- Desaktibatu : Egin klik
- Ekintza: Mugitu
- Mugitu norabidea : 65 px x ardatzean
- Animazioa : lineala
- Iraupena: 300 ms
Elkarrekintza kentzeko, hautatu elementua eta ireki interakzioen panela. Hautatu paneleko elkarrekintza eta egin klik Zakarrontzian ezabatzeko.
09 de 09
Nola aurkeztu zure orria UXPin-en
Izan ere, arakatzailean ari zara lanean, probak huts egin du. Egin klik Simulazio Diseinua botoian. Orrialdea nabigatzailean irekiko da eta modu probatu dezakezu. Orrialde ezkerreko aldean gehitutako panela ere izango da. Iruzkinak, guneen mapa, orrialde anitzak, Usabilidad probak, Live partekatzea, edizioa eta panelera itzultzea ahalbidetzen du.
Orriaren behealdean beste panel txiki bat da. Elementu interaktiboak erakusteko aukera ematen du, iruzkinak erakusteko edo ezkutatzeko eta proiektuaren esteka besteekin partekatzeko.