01 van 09
Hoe om jouself te begin met UXPin
Soos ons beweeg in die koninkryk van die mobiele ontwerp, app ontwerp en reageer ontwerp is daar 'n toenemende fokus op UX (User Experience) en wireframing , interaktiewe prototyping en mockups. Daar is 'n klomp gereedskap daar buite wat op hierdie nis gemik is en hulle hardloop die volle spektrum van komplekse, funksie gelaaide behemote tot yl en skaars nuttig. Een van die gereedskap wat my oog gevang het, is UXPin bloot omdat dit ontwerp is deur ontwerpers vir ontwerpers.
Voordat ons vorentoe beweeg ... 'n waarskuwing. As joune 'n organisasie is wat verkies om die sagteware te besit, dan is UXPin nie vir jou nie. Al die werk wat in hierdie program gedoen word, word in die blaaier gedoen en die projekte wat jy stoor, word in jou rekening gestoor.
Om met UXPin te begin, begin jy 'n blaaier en gaan na UXPin. Van hier kan jy inteken vir 'n gratis proef of reël vir 'n maandelikse plan wat gebaseer is op jou verwagte behoefte. Die aanmeldproses is redelik maklik en sodra u u gebruikersnaam en wagwoord opgestel het, is u gereed om te begin.
02 van 09
Hoe om 'n projek in UXPin te begin
As jy inteken, kom jy by die Dashboard aan en van hieruit kan jy besluit om 'n nuwe draadraamwerk, 'n nuwe mobiele projek of 'n Responsive Web Design-projek te skep. Daar is ook invoegtoepassings vir UXPin wat jou in staat stel om jou Photoshop- of Sketch-projekte in te bring. Vir hierdie Hoe gaan ek 'n banner met 'n paar teks skep en 'n e-posknoppie by die banner voeg. Om dit te bereik, het ek geselekteer Skep 'n nuwe draadraamwerk.
03 van 09
Hoe om die UXPin-koppelvlak te gebruik
Die ontwerpoppervlak word in vier dele verdeel. In die swart gedeelte aan die linkerkant is 'n reeks gereedskap waarmee jy na die dashboard terugkeer. Maak die elemente wat jy sal gebruik, maak die Smart Elements-paneel oop, soek na elemente, voeg aantekeninge by die bladsy en voeg spanlede by. Onderaan is 'n knoppie wat 'n kort tutoriaal oopmaak, 'n ander wat u toelaat om toegang tot u rekening te verkry en 'n ander wat toegang tot die algemene vrae het. Kom ons stel u vrae en gee selfs terugvoering.
In die blou gebied langs die bokant is 'n reeks gereedskap en eienskappe. Met die donker knoppies aan die regterkant kan jy jou ontwerp herhaal, die projek instellings verander, die bladsy deel en 'n in-blaaier simulasie van die bladsy doen.
Die elemente paneel is waar jy die stukkies vir die ontwerpoppervlak gryp, jou projek noem en bladsye byvoeg of verwyder.
Die Elements-biblioteek is 'n aangename verrassing vir UX-ontwerpers. Hierdie pop-down kan u kies uit anon 30 biblioteke wat wissel van iOS na Android Lolipop. U het ook toegang tot Bootstrap en Foundation-elemente, asook die Font Awesome ikone, Gebaarikone vir mobiele en 'n versameling Sosiale Widgets.
04 van 09
Hoe om 'n element by 'n UXPin-bladsy te voeg
Om te begin het ek die Box-element na die ontwerpoppervlak gesleep en wanneer ek die muis los, maak die Eienskappe-paneel oop. Met die eienskappe knoppie kan jy die element noem en die element se breedte hoogte en posisie waardes stel. Jy kan ook voeg by die element, afronding van die hoeke en pas sy deursigtigheid aan. Deur op die knoppie Agtergrondkleur te klik, word 'n RGBA kleurkieser oopgemaak.
U kan ook 'n lettertipe, grens en patroon aan die gekose element toewys. Die Lightning Bolt gee jou die vermoë om interaktiwiteit aan 'n geselekteerde element by te voeg.
05 van 09
Hoe om teks in UXPin by te voeg en te formateer
Om teks by te voeg, sleep die tekselement na die ontwerpoppervlak en voer jou teks in. Klik op die knoppie Tekst Eiendom om die lettertipe-eienskappe oop te maak en jou teks te formateer. As jy 'n blokkie van dummy-teks benodig, voeg 'n tekselement by en klik die GENERATE LOREM IPSUM- knoppie in die lettertipe-eienskappe.
06 van 09
Hoe om 'n prent by 'n UXPin-bladsy te voeg
Daar is 'n paar maniere om hierdie taak te bereik. U kan die prentbalk in die nutsbalk gebruik, 'n beeldelement van die biblioteek byvoeg of eenvoudig 'n prent van u lessenaar sleep na die element op die ontwerpoppervlak soos hierbo getoon.
07 van 09
Hoe om 'n knoppie by 'n UXPin-bladsy te voeg
Alhoewel daar 'n Knoppie-element is, word 'n knoppie wat in al die biblioteke voorkom, oopgemaak. Sleep die een wat vir jou op die ontwerpoppervlak werk en gebruik die eienskappe om die kleur, die lettertipe en selfs die grensradius te verander. Om die teks binne die knoppie te verander, klik een keer op die teks en voer die nuwe teks in.
08 van 09
Hoe om interaktiviteit by 'n UXPin-bladsy te voeg
Dit is nie so ingewikkeld soos dit eers voorkom nie. Vir die e-pos invoer het ek 'n invoer element bygevoeg, dit verander, die teks ingevoer en die teks geformateer. Met die Invoer element gekies, klik die Eienskappe knoppie en wanneer die Element eienskappe verskyn, klik die Sigbaarheid knoppie - die oogbal - in die regter bovenhoek van die paneel.
Kies die knoppie en klik op die knoppies Interaksies - die Weerligbout - in die eienskappe. Wanneer die Interaksie-paneel oopmaak, kies New Interaction. Kies Klik vanaf die Trigger-pop-down. Kies in die Aksie-area Wys Element. U sal nou gevra word watter element om te wys. Kliek een keer op die gunsite en klik op die Input-element. Met die element wat geïdentifiseer is, kan jy nou bepaal of die element al dan nie aangepas moet word. In hierdie geval het ek besluit om die Inset boks met 'n gemak in te wys en het met die standaard duur van 300ms.
Ek wil ook hê dat die knoppie ongeveer 65 pixels na regs beweeg wanneer dit geklik word. Ek het die knoppie gekies, die Interaksiespaneel oopgemaak en Nuwe Interaksie gekies. Ek het hierdie instellings gebruik:
- Trigger : Click
- Aksie: beweeg deur
- Beweeg rigting : 65 px op die x-as
- Animasie : Lineêr
- Duur: 300 ms
Om 'n interaksie te verwyder, kies die element en maak die Interaksies-paneel oop. Kies die interaksie in die paneel en klik op die asblik om dit te verwyder.
09 van 09
Hoe om jou bladsy te toets in UXPin
As gevolg van die feit dat u in die blaaier werk, is toetsing dood eenvoudig. Klik op die knoppie Simuleer ontwerp . Die bladsy sal in die blaaier oopmaak en jy kan die manier toets. Daar sal ook 'n paneel aan die linkerkant van die bladsy bygevoeg word, wat toelaat dat Kommentaar, 'n Sitekaart as daar meer bladsye, bruikbaarheidstoetsing, lewende deel, redigering en 'n terugkeer na die dashboard is.
Onderaan die bladsy is nog 'n klein paneel waarmee jy die Interaktiewe elemente kan wys, kommentaar kan gee of verberg en die projek skakel met ander kan deel.