Slik kommer du i gang med UXPin
Når vi beveger oss inn i rike av mobildesign, appdesign og responsiv design, har det vært et økende fokus på UX (User Experience) og wireframing, interaktiv prototyping og mockups. Det er massevis av verktøy der ute som er rettet mot denne nisjeen, og de kjører den fulle spekteret fra komplekse, innebygde bønder til sparsom og knapt nyttig. Et av verktøyene som har tatt øye med meg, er UXPin, bare fordi det ble utviklet av designere for designere.
Før vi går videre … en advarsel. Hvis din er en organisasjon som foretrekker å eie programvaren, så er UXPin ikke for deg. Alt arbeidet i denne appen er gjort i nettleseren, og prosjektene du lagrer lagres på kontoen din.
For å komme i gang med UXPin, starter du en nettleser og leder til UXPin. Herfra kan du registrere deg for en gratis prøveversjon eller arrangere en månedlig plan basert på forventet behov. Registreringsprosessen er ganske enkelt, og når du har angitt brukernavn og passord, er du klar til å komme i gang.
Slik starter du et prosjekt i UXPin
Når du logger inn, kommer du til Dashboard, og herfra kan du bestemme deg for å lage en ny wireframe, et nytt mobilprosjekt eller et Responsive Web Design-prosjekt. Det er også plug-ins for UXPin som lar deg ta med dine Photoshop- eller Sketch-prosjekter. For dette Hvordan skal jeg lage et banner med litt tekst og legge til en e-postknapp til banneret. For å oppnå dette valgte jeg Lag en ny wireframe.
Slik bruker du UXPin-grensesnittet
Designflaten er delt inn i fire områder. I det svarte området til venstre er en rekke verktøy som lar deg gå tilbake til dashbordet, åpne elementene du vil bruke, åpne Smart Elements-panelet, søke etter elementer, legge til notater på siden og legge til medarbeiderne. Nederst er en knapp som åpner en kort opplæring, en annen som gir deg tilgang til kontoen din og en annen som får tilgang til vanlige spørsmål, la oss stille spørsmål og til og med gi tilbakemelding.
I det blå området langs toppen er en rekke verktøy og egenskaper. De mørkere knappene på høyre side gjør det mulig å gjenta designet ditt, justere prosjektinnstillingene, dele siden og gjøre en simulering av nettleseren i siden.
Element-panelet er hvor du tar biter og brikker til designoverflaten, navn på prosjektet og legg til eller fjern sider.
Elements biblioteket er en hyggelig overraskelse for UX designere. Denne pop-down-funksjonen lar deg velge mellom anon 30 biblioteker fra iOS til Android Lolipop. I tillegg har du tilgang til Bootstrap og Foundation-elementer sammen med Font Awesome ikoner, Gesture ikoner for mobil og en samling av sosiale widgets.
04 av 09Slik legger du til et element på en UXPin-side
For å komme i gang drar jeg bokselementet til designflaten, og når jeg slipper musen, Egenskaper panel åpnes. Egenskaper-knappen lar deg navngi elementet og angi elementets breddehøyde og posisjonsverdier. Du kan også legge til polstring på elementet, runde av hjørnene og justere opaciteten. Hvis du klikker på Bakgrunnsfarge-knappen, åpnes en RGBA-fargevalg.
Du kan også tilordne en skrift, ramme og mønster til det valgte elementet. Lynbolten gir deg muligheten til å legge til interaktivitet til et valgt element.
05 av 09Slik legger du til og formaterer tekst i UXPin
For å legge til tekst, dra tekstelementet til designflaten og skriv inn teksten. Klikk på tekstegenskapen knappen for å åpne Font-egenskapene og formatere teksten. Hvis du trenger en blokk med dummy-tekst, legger du til et tekstelement og klikker på GENERER LOREM IPSUM knappen i Font-egenskapene.
06 av 09Slik legger du til et bilde på en UXPin-side
Det er et par måter å oppnå denne oppgaven på. Du kan bruke Bildeverktøy I verktøylinjen legger du til et bildeelement fra biblioteket eller bare dra og slipp et bilde fra skrivebordet på elementet på designflaten som vist ovenfor.
07 av 09Slik legger du til en knapp på en UXPin-side
Selv om det er et knappelement, skriver du inn " Knapp " inn i det Søke Området, som vist ovenfor, åpner opp alle knappene som finnes i alle bibliotekene. Dra den som jobber for deg på designflaten, og bruk Egenskaper for å endre fargen, skrifttypen og til og med kantradien. For å endre teksten inne i knappen, klikk en gang på teksten og skriv inn den nye teksten.
08 av 09Slik legger du til interaktivitet på en UXPin-side
Dette er ikke så komplisert som det først kan vises. For e-postinngangen la jeg til et innspillingselement, endret størrelsen, skrev inn teksten og formaterte teksten. Med Inngangselementet valgt Klikk på Egenskaper-knappen og når Elementegenskaper vises klikk på Synlighet knapp - øyeeballet - i øverste høyre hjørne av panelet.
Velg knappen og klikk på Interaksjonsknapp - Lightning Bolt- i egenskapene. Når Interaksjonspanelet åpnes, velg Ny interaksjon. Velg Klikk fra Trigger-nedlasting. Velg Vis element i handlingsområdet. Du blir nå bedt om hvilket element som skal vises. Klikk en gang på gunsite og klikk på Input-elementet. Med elementet identifisert, kan du nå avgjøre om du vil animere elementet eller ikke. I dette tilfellet bestemte jeg meg for å vise Input-boksen med en letthet i og gikk med standard varighetsverdi på 300ms.
Jeg vil også ha knappen flytte rundt 65 piksler til høyre når den klikkes. Jeg valgte knappen, åpnet Interaksjonspanelet og valgt Ny interaksjon. Jeg brukte disse innstillingene:
- Avtrekker: Klikk
- Handling: Flytt av
- Flytt retning: 65 px på x-aksen
- animasjon: Lineær
- Varighet: 300 ms
For å fjerne en interaksjon, velg elementet og åpne Interaksjonspanelet. Velg samspillet i panelet og klikk på Papirkurven for å slette det.
09 av 09Slik tester du din side i UXPin
På grunn av det faktum at du jobber i nettleseren, er testen død enkel. Klikk på Simulere design knapp. Siden åpnes i nettleseren, og du kan teste måten. Det vil også være et panel lagt til venstre på siden som tillater kommentarer, et nettstedskart hvis det er flere sider, brukervennlighetstesting, levende deling, redigering og en retur til oversikten.
Nederst på siden er et annet lite panel som lar deg vise de interaktive elementene, vise eller skjule kommentarer og dele prosjektlenkelen med andre.
