Så här börjar du med UXPin
När vi flyttar in i raden av mobil design, appdesign och responsiv design har det blivit allt större fokus på UX (User Experience) och wireframing, interaktiva prototyper och mockups. Det finns massor av verktyg där ute som är inriktade på denna nisch och de kör hela spalten från komplexa, funktionerade belagda behemoter till gles och knappast användbar. Ett av de verktyg som har blivit mitt öga är UXPin helt enkelt för att det utvecklades av designers för designers.
Innan vi går framåt … en försiktighet. Om din organisation är en organisation som föredrar att äga programvaran är UXPin inte för dig. Allt arbete som görs i den här appen är klar i webbläsaren och de projekt du sparar sparas på ditt konto.
För att komma igång med UXPin startar du en webbläsare och leder till UXPin. Härifrån kan du anmäla dig till ett gratis prov eller ordna en månadsplan baserat på ditt förväntade behov. Registreringsprocessen är ganska lätt och när du har ställt in ditt användarnamn och lösenord är du redo att komma igång.
Så här startar du ett projekt i UXPin
När du loggar in kommer du fram till instrumentpanelen och här kan du välja att skapa en ny trådram, ett nytt mobilprojekt eller ett Responsive Web Design-projekt. Det finns också plug-ins för UXPin som låter dig ta med dina Photoshop eller Sketch-projekt. För detta Hur ska jag skapa en banner med lite text och lägga till en email-knapp i bannern. För att uppnå detta valde jag Skapa en ny wireframe.
Så här använder du UXPin-gränssnittet
Designytan är uppdelad i fyra områden. I det svarta området till vänster finns en rad verktyg som låter dig återvända till instrumentbrädan, öppna de element du ska använda, öppna panelen Smart Elements, leta efter element, lägg till anteckningar på sidan och lägg till teammedlemmar. Längst ner är en knapp som öppnar en kort handledning, en annan som låter dig komma åt ditt konto och en annan som får tillgång till vanliga frågor, låt oss ställa frågor och till och med ge feedback.
I det blå området längs toppen är en rad verktyg och egenskaper. Med de mörkare knapparna på höger sida kan du repetera din design, justera projektinställningarna, dela sidan och göra en simulering av webbläsaren i webbläsaren.
Panelen Elements är där du tar tag i bitar och bitar för designytan, namnet på ditt projekt och lägg till eller ta bort sidor.
Elements-biblioteket är en trevlig överraskning för UX-designers. Med den här popup-knappen kan du välja mellan anon 30-bibliotek, från iOS till Android Lolipop. Dessutom har du tillgång till Bootstrap och Foundation-element tillsammans med Font Awesome ikoner, Gesture-ikoner för mobil och en samling sociala widgets.
04 av 09Så här lägger du till ett element på en UXPin-sida
För att komma igång slog jag boxelementet till designytan och när jag släppte musen, Egenskaper panel öppnas. Egenskapsknappen låter dig namnge elementet och ställa in elementets breddhöjd och positionsvärden. Du kan också lägga på vaddering på elementet, avrunda hörnen och justera dess opacitet. Om du klickar på knappen Bakgrundsfärg öppnas en RGBA-färgväljare.
Du kan också tilldela ett teckensnitt, gränsen och mönster till det valda elementet. Lightning Bolt ger dig möjlighet att lägga till interaktivitet för ett valt element.
05 av 09Så här lägger du till och formaterar text i UXPin
Om du vill lägga till text drar du textelementet till designytan och anger din text. Klicka på textegenskapen knappen för att öppna Font-egenskaperna och formatera din text. Om du behöver ett block av dummy-text lägger du till ett textelement och klickar på GENERAT LOREM IPSUM knappen i egenskaperna Font.
06 av 09Så här lägger du till en bild på en UXPin-sida
Det finns ett par sätt att uppnå denna uppgift. Du kan använda Bildverktyg i verktygsfältet, lägg till ett bildelement från biblioteket eller dra och släpp en bild från skrivbordet på elementet på designytan som visas ovan.
07 av 09Så här lägger du till en knapp på en UXPin-sida
Även om det finns ett knappelement, anger du " Knapp " in i Sök Området, som visas ovan, öppnar alla knappar som finns i alla bibliotek. Dra den som fungerar för dig på designytan och använd egenskaperna för att ändra färg, teckensnitt och till och med gränserad radie. För att ändra texten inuti knappen, klicka en gång på texten och ange den nya texten.
08 av 09Så här lägger du till interaktivitet på en UXPin-sida
Det här är inte så komplicerat som det först kan visas. För e-postinmatningen lade jag till ett inmatningselement, ändra storlek på det, skrev in texten och formaterade texten. Med inmatningselementet valt klicka på knappen Egenskaper och när Elementegenskaper visas klicka på Synlighet knapp - ögonlocket - i det övre högra hörnet av panelen.
Välj knappen och klicka på Knappen Interaktioner - Lightning Bolt- i egenskaperna. När panelen Interaktioner öppnas väljer du Ny interaktion. Välj Klicka från Trigger-popup-knappen. Välj Visa element i Åtgärdsområdet. Du kommer nu att fråga vilken element som ska visas. Klicka en gång på gunsite och klicka på Input-elementet. Med det identifierade elementet kan du nu avgöra huruvida elementet ska animeras eller inte. I det här fallet bestämde jag mig för att visa Input-rutan enkelt och gick med standardvärdet på 300ms.
Jag vill också få knappen att flytta cirka 65 bildpunkter till höger när den klickas. Jag har valt knappen, öppnat panelen Interaktioner och valt Ny interaktion. Jag använde dessa inställningar:
- trigger: Klick
- Verkan: Flytta By
- Flytta riktning: 65 px på x-axeln
- Animering: Linjär
- Varaktighet: 300 ms
Om du vill ta bort en interaktion markerar du elementet och öppnar panelen Interaktioner. Välj interaktionen i panelen och klicka på papperskorget för att radera det.
09 av 09Hur man testar din sida i UXPin
På grund av att du arbetar i webbläsaren är testningen död enkel. Klicka på Simulera design knapp. Sidan öppnas i webbläsaren och du kan testa sättet. Det kommer också att finnas en panel till vänster på sidan som tillåter kommentarer, en webbplatskarta om det finns flera sidor, användbarhetstestning, levande delning, redigering och en återgång till instrumentpanelen.
Nederst på sidan finns en annan liten panel som låter dig visa de interaktiva elementen, visa eller dölja kommentarer och dela projektlänken med andra.
