Sådan får du dig selv i gang med UXPin
Når vi bevæger os ind i rige af mobil design, app design og lydhør design har der været et stigende fokus på UX (User Experience) og wireframing, interaktive prototyper og mockups. Der er masser af værktøjer derude, der er rettet mod denne niche, og de løber hele spektret fra komplekse, funktionfyldte behemoter til sparsomme og knap nyttige. Et af de værktøjer, der har fået øje med, er UXPin, simpelthen fordi det blev udviklet af designere til designere.
Før vi går videre … en advarsel. Hvis din er en organisation, der foretrækker at eje softwaren, så er UXPin ikke til dig. Alt arbejdet i denne app udføres i browseren, og de projekter, du gemmer, gemmes på din konto.
For at komme i gang med UXPin du starter en browser og leder til UXPin. Herfra kan du tilmelde dig en gratis prøveperiode eller arrangere en månedlig plan baseret på dit forventede behov. Tilmeldingsprocessen er ganske let, og når du har angivet dit brugernavn og password, er du klar til at komme i gang.
Sådan starter du et projekt i UXPin
Når du logger ind, ankommer du på instrumentbrættet, og herfra kan du beslutte dig for at oprette en ny wireframe, et nyt mobilprojekt eller et Responsive Web Design-projekt. Der er også plug-ins til UXPin, der giver dig mulighed for at indlæse dine Photoshop eller Sketch-projekter. Til dette Hvordan skal jeg lave et banner med nogle tekst og tilføje en e-mail-knap til banneret. For at opnå dette valgte jeg Opret en ny wireframe.
Sådan bruges UXPIN-grænsefladen
Designoverfladen er opdelt i fire områder. I det sorte område til venstre er en række værktøjer, som giver dig mulighed for at vende tilbage til instrumentbrættet, åbne de elementer, du vil bruge, åbne panelet Smart Elements, søge efter elementer, tilføje noter til siden og tilføj teammedlemmer. Nederst er en knap, der åbner en kort vejledning, en anden, der giver dig adgang til din konto og en anden, der får adgang til FAQ'erne, lad os stille spørgsmål og endda give feedback.
I det blå område langs toppen er en række værktøjer og egenskaber. De mørkere knapper på højre side giver dig mulighed for at gentage dit design, justere projektindstillingerne, dele siden og foretage en simulering af browseren i browseren.
Elements panelet er hvor du grabber bitene og stykkerne til Design Surface, navngiv dit projekt og tilføj eller fjern sider.
Elements biblioteket er en behagelig overraskelse for UX designere. Denne pop-down kan du vælge fra anon 30 biblioteker lige fra iOS til Android Lolipop. Du har også adgang til Bootstrap og Foundation elementer sammen med Font Awesome ikoner, Gesture ikoner til mobil og en samling af Social Widgets.
04 af 09Sådan tilføjer du et element til en UXPin-side
For at komme i gang slæbte jeg bokselementet til designfladen, og når jeg slipper musen, Egenskabspanel åbnes. Egenskabsknappen lader dig navngive elementet og indstille elementets breddehøjde og positionsværdier. Du kan også tilføje polstring til elementet, afrunde hjørnerne og justere dets opacitet. Hvis du klikker på knappen Baggrundsfarve, åbnes en RGBA farvevalg.
Du kan også tildele et skrifttype, en ramme og et mønster til det valgte element. Lynbolten giver dig mulighed for at tilføje interaktivitet til et valgt element.
05 af 09Sådan tilføjes og formateres tekst i UXPin
For at tilføje tekst skal du trække tekstelementet til designfladen og indtaste din tekst. Klik på tekstegenskaben knappen for at åbne fontegenskaberne og formatere din tekst. Hvis du har brug for en blok af dummy-tekst, skal du tilføje et tekstelement og klikke på GENERER LOREM IPSUM knappen i Font egenskaber.
06 af 09Sådan tilføjes et billede til en UXPin-side
Der er et par måder at udføre denne opgave på. Du kan bruge Billedværktøj i værktøjslinjen skal du tilføje et billedelement fra biblioteket eller blot trække og slip et billede fra dit skrivebord på elementet på designfladen som vist ovenfor.
07 af 09Sådan tilføjer du en knap til en UXPin-side
Selv om der er et knapelement, indtaster du " Knap " ind i Søg område, som vist ovenfor åbner alle de knapper, der findes i alle bibliotekerne. Træk den, der virker for dig på designoverfladen, og brug egenskaberne til at ændre farven, skrifttypen og endda grænseradien. For at ændre teksten inde i knappen, skal du klikke en gang på teksten og indtaste den nye tekst.
08 af 09Sådan tilføjer du interaktivitet til en UXPin-side
Dette er ikke så kompliceret som det måske først vises. For e-mail-indgangen tilføjede jeg et inputelement, ændrede størrelsen, indtastede teksten og formaterede teksten. Med indgangselementet valgt Klik på knappen Egenskaber og, når Elementegenskaber vises klik på knappen Sigtbarhed knappen - øjenklumpet - i øverste højre hjørne af panelet.
Vælg knappen og klik på knappen Knappen Interaktioner - Lightning Bolt- i egenskaberne. Når panelet Interaktioner åbnes, skal du vælge Ny interaktion. Vælg Klik fra Trigger pop-down. Vælg Vis element i Aktivitetsområdet. Du bliver nu spurgt om hvilket element der skal vises. Klik en gang på gunsite og klik på input elementet. Med det identificerede element kan du nu afgøre, om elementet skal animeres eller ej. I dette tilfælde besluttede jeg at vise Input-boksen med en lethed i og gik med standardvarigheden på 300ms.
Jeg vil også have knappen flytte omkring 65 pixels til højre, når den klikkes. Jeg har valgt knappen, åbnet interaktionspanelet og valgt Ny interaktion. Jeg brugte disse indstillinger:
- Udløser: Klik
- Handling: Flyt By
- Flyt retning: 65 px på x-aksen
- Animation: Lineær
- Varighed: 300 ms
For at fjerne en interaktion skal du vælge elementet og åbne panelet Interaktioner. Vælg interaktionen i panelet, og klik på papirkurven for at slette den.
09 af 09Sådan testes din side i UXPin
På grund af det faktum, at du arbejder i browseren, er testen død simpel. Klik på knappen Simulere design knap. Siden åbnes i browseren, og du kan teste vejen. Der vil også være et panel tilføjet til venstre på siden, som giver mulighed for Kommentarer, et webstedskort, hvis der er flere sider, Usability Testing, Live Sharing, Redigering og en tilbagevenden til Dashboard.
Nederst på siden er et andet lille panel, der giver dig mulighed for at vise de interaktive elementer, vise eller skjule kommentarer og dele projektlinket med andre.
