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.
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.
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 09Kā pievienot elementu UXPin lapā
Lai sāktu, es velku lodziņa elementu uz dizaina virsmu, un, kad es atbrīvoju peli, Īpašību panelis atveras. 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 09Kā pievienot un formatēt tekstu UXPin
Lai pievienotu tekstu, velciet teksta elementu uz dizaina virsmu un ievadiet tekstu. Noklikšķiniet uz Teksta īpašums pogu, 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 IZGLĪT LOREM IPSUM pogas Fontu rekvizīti.
06 no 09Kā pievienot attēlu UXPin lapā
Šim uzdevumam ir vairāki veidi. Jūs varat izmantot Attēlu rīks rīkjoslā no bibliotēkas pievienojiet attēla elementu vai vienkārši velciet un nometiet attēlu no darbvirsmas uz dizainparauga elementu, kā parādīts iepriekš.
07 no 09Kā pievienot pogu uz UXPin lapu
Lai gan ir pogas elements, ievadot " Poga " iekšā Meklēt kā parādīts iepriekš, atver 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 09Kā 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 Elementa īpašības parādās noklikšķiniet uz Redzamība poga - acs ābols - paneļa augšējā labajā stūrī.
Izvēlieties pogu un noklikšķiniet uz Poga Mijiedarbība - zibens skrūve - īpašībās. 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, atveru interaktivitātes paneli un atlasīju Jauna mijiedarbība. Es izmantoju šos iestatījumus:
- Aktivizētājs: Klikšķis
- Darbība: Pārvietot pa
- Pārvietot virzienu: 65 x pikseļi x ass
- Animācija: Lineārs
- 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 09Kā 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 Simulēt dizainu 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.
