01 no 09
Kā lai sāktu darboties ar UXPin
Pārejot uz mobilā dizaina, lietotņu dizaina un reaģējošā dizaina jomu, aizvien lielāka uzmanība pievērsta UX (lietotāja pieredze) un wireframing , interaktīvai prototipēšanai un modelēšanai. Tajā ir virkne instrumentu, kuru mērķis ir šī niša, un tie pavada pilnu spektru no sarežģītām iezīmēm, kuru klātbūtne ir slapjš, un tās ir reti un tikko noderīgas. Viens no instrumentiem, kas ir noķēris manu aci, ir UXPin vienkārši tāpēc, ka to izstrādāja dizaineri dizaineriem.
Pirms mēs virzīties uz priekšu ... atrunu. Ja jūsu uzņēmums ir organizācija, kas dod priekšroku programmatūras īpašumtiesībām, tad UXPin nav jūsu labā. Viss šajā lietotnē veiktais darbs tiek veikts pārlūkprogrammā, un jūsu saglabātie projekti tiek saglabāti jūsu kontā.
Lai sāktu darbu ar UXPin, jūs palaidat pārlūku un dodieties uz UXPin. No šejienes jūs varat pieteikties bezmaksas izmēģinājuma versijai vai organizēt ikmēneša plānu, pamatojoties uz jūsu paredzēto vajadzību. Pierakstīšanās process ir diezgan vienkāršs, un, tiklīdz esat iestatījis savu lietotāja vārdu un paroli, esat gatavs sākt darbu.
02 no 09
Kā sākt projektu UXPin
Kad jūs piesakāties, ierodoties pie informācijas paneļa, no šejienes jūs varat izlemt izveidot jaunu korpusu, jaunu mobilo projektu vai atbildīgu Web dizaina projektu. UXPin ir arī spraudņi, kas ļaus jums pievienot jūsu Photoshop vai Sketch projektus. Šim nolūkam kā es gatavojas izveidot reklāmkarogu ar kādu tekstu un pievienojot e-pasta pogu uz reklāmkarogu. Lai to izdarītu, es izvēlējos Izveidot jaunu karkass.
03 no 09
Kā lietot UXPin saskarni
Dizaina virsma ir sadalīta četrās zonās. Melnajā apgabalā pa kreisi ir vairāki rīki, kas ļauj atgriezties informācijas panelī, atveriet elementus, kurus izmantosit, atveriet paneli Smart Elements, atrodiet elementus, pievienojiet piezīmes un pievienojiet komandas dalībniekus. Apakšā ir poga, kurā tiek atvērta īsa apmācība, vēl viena, kas ļauj piekļūt savam kontam, un otrs, kas piekļūst bieži uzdotajiem jautājumiem, ļaujam jums uzdot jautājumus un pat sniegt atgriezenisko saiti.
Zilajā zonā augšpusē ir vairāki rīki un īpašības. Tumšākās pogas labajā pusē ļauj jums atkārtot dizainu, pielāgot projekta iestatījumus, kopīgot lapu un veikt lappuses pārlūka simulāciju.
Elements panelī ir vieta, kur jūs satverat dizaina virsmas gabalus un gabalus, nosauciet savu projektu un pievienojiet vai noņemiet lapas.
Elementu bibliotēka ir patīkams pārsteigums UX dizaineriem. Šis pop-up ļauj jums izvēlēties no 30 bibliotēkām, sākot no iOS līdz Android Lolipop. Tāpat kā jūs varat piekļūt Bootstrap un Fonda elementiem, kā arī fontu satriecošām ikonām, žestu ikonām mobilajām ierīcēm un sociālo lietojumprogrammu kolekcijai.
04 no 09
Kā pievienot elementu UXPin lapā
Lai sāktu, es velku lodziņa elementu uz dizaina virsmu, un, kad es atbrīvoju peli, tiek atvērts Properties paneļa logs. Pogas Rekvizīti ļauj norādīt elementu un iestatīt elementa platuma augstumu un pozīcijas vērtības. Varat arī pievienot elementam polsterējumu, noapaļot stūrus un pielāgot tā necaurredzamību. Noklikšķinot uz pogas Fona krāsa, tiek atvērts RGBA krāsu atlasītājs.
Jūs varat arī piešķirt atlasītajam elementam fontu, robežu un rakstu. Lightning Bolt ļauj jums pievienot interaktivitāti izvēlētajam elementam.
05 no 09
Kā pievienot un formatēt tekstu UXPin
Lai pievienotu tekstu, velciet teksta elementu uz dizaina virsmu un ievadiet tekstu. Noklikšķiniet uz pogas Teksta īpašums , lai atvērtu fonta rekvizītus un formatētu tekstu. Ja jums ir nepieciešama manekena teksta bloks, pievienojiet teksta elementu un noklikšķiniet uz pogas GENERATE LOREM IPSUM Fontu rekvizītos.
06 no 09
Kā pievienot attēlu UXPin lapā
Šim uzdevumam ir vairāki veidi. Jūs varat izmantot rīku joslā attēlu rīku , pievienot bibliotēkā attēlu elementu vai vienkārši vilkt un nomest attēlu no darbvirsmas uz konstrukcijas virsmas elementu, kā parādīts iepriekš.
07 no 09
Kā pievienot pogu uz UXPin lapu
Lai gan ir pogas elements, meklēšanas lodziņā ievadot pogu , kā parādīts iepriekš, tiek atvērtas visas pogas, kas atrodamas visās bibliotēkās. Velciet to, kas jums strādā uz dizaina virsmas, un izmantojiet Properties, lai mainītu krāsu, fontu un pat robežas rādiusu. Lai mainītu tekstu pogas iekšienē, vienu reizi noklikšķiniet uz teksta un ievadiet jauno tekstu.
08 no 09
Kā pievienot interaktivitāti UXPin lapā
Tas nav tik sarežģīti, kā tas vispirms parādās. E-pasta ievades laikā es pievienoju ievades elementu, mainīja to, ievadīja tekstu un formatēja tekstu. Izvēloties ievades elementu, noklikšķiniet uz pogas Rekvizīti un, kad parādās elementa rekvizīti, paneļa augšējā labajā stūrī noklikšķiniet uz pogas Redzamība - acs ābols.
Izvēlieties pogu un noklikšķiniet uz pogas Mijiedarbība - Lightning Bolt - īpašumos. Kad tiek atvērts mijiedarbības panelis, atlasiet Jauna mijiedarbība. Atlasiet Noklikšķiniet, lai aktivizētu trigeri. Rīcības zonā atlasiet Rādīt elementu. Tagad jums tiks uzdots jautājums, kuru elementu rādīt. Noklikšķiniet vienu reizi uz gunsite un noklikšķiniet uz ievades elementa. Ar identificēto elementu jūs tagad varat noteikt, vai elementu animēt vai ne. Šajā gadījumā es izlēmu parādīt ievades lodziņu ar vieglumu un iet ar standarta ilguma vērtību 300 ms.
Es arī vēlos, lai pogas pogas pārvietotu aptuveni 65 pikseļus pa labi, kad tas tiek noklikšķināts. Es izvēlējos pogu, atvēru interaktīvo paneļu un izvēlējās jauno mijiedarbību . Es izmantoju šos iestatījumus:
- Trigger : noklikšķiniet uz
- Darbība: pārvietot līdz
- Pārvietot virzienu : 65 pikseļi x ass
- Animācija : Lineāra
- Ilgums: 300 ms
Lai noņemtu mijiedarbību, izvēlieties elementu un atveriet interaktivitātes paneli. Panelē izvēlieties mijiedarbību un noklikšķiniet uz atkritnes maiņas, lai to izdzēstu.
09 no 09
Kā pārbaudīt savu lapu UXPin
Sakarā ar to, ka jūs strādājat pārlūkprogrammā, testēšana ir vienkārša. Noklikšķiniet uz Simulate Design poga. Šī lapa tiks atvērta pārlūkprogrammā, un jūs to varat pārbaudīt. Lapas kreisajā pusē tiks pievienots arī panelis, kas ļauj pievienot komentārus, vietnes karti, ja ir vairākas lapas, Usability Testing, Live Sharing, Rediģēšana un atgriešanās pie informācijas paneļa.
Lapas apakšdaļā ir vēl viens neliels panelis, kas ļauj parādīt interaktīvos elementus, parādīt vai slēpt komentārus un kopīgot projekta saiti ar citiem.