Skissa appen med Prototypes

Protoypes är ett enkelt Mac-program som låter dig testa en app-design innan du lämnar över den till de programmerare som utför grovjobbet. Detta betyder att du i en handvändning kan utforma både utseende och gränssnitt för en app utan att kunna programmera. När din prototyp är klar kan du låta andra användare ta del av den genom att ladda upp den på ­webben och låta utvalda personer besöka proto­typen genom sin iPhone-webbläsare (iPad-stöd kommer i en framtida uppdatering).

Tanken med Prototypes är att göra statiska designbilder klickbara genom att begåva dem med interaktivitet. På så vis får du snabbt en känsla för hur den färdiga appen kommer att fungera och hur den kommer att upplevas av andra användare.

I den här guiden visar vi hur Prototypes används för att simulera en simpel app som identifierar vinetiketter. Kanske vill du göra något mer avancerat med massor av funktioner? Inga problem, designa nya sidor och följ stegen nedan för att göra en komplett app-prototyp med Prototypes.



Skapa din startskärm
Vi ska göra en prototyp av en app som kan identifiera vinflaskors etiketter och ge oss information om vinerna. Vi börjar med att skapa ett nytt Illustrator-dokument med måtten 640 x 920 pixlar (för retina-upplösning). Det här blir appens startskärm med logotyp och grundmeny. Om du känner dig obekväm med Illustrator kan du använda andra grafik­program, huvudsaken är att du sparar bilden i ai-, jpg- eller png-format.



Infoga din bild
I Prototypes väljer du rätt upplösning längst ned till höger innan du importerar bilden genom plustecknet i vänsterspalten. Efter ­importen ombeds du att skapa en ny knapp – eller ”hotspot” som de kallas här. I appen kommer textrutan ”Hitta flaska” att leda till telefonens kamerafunktion som ska användas för bildigenkänning av vinetiketter. För att simulera denna funktion måste du lägga in en ny bild som knappen länkas till.



Skapa nästa bild
Nu är det dags att skapa en skärmdump från telefonens kamera-app med en vinflaska i siktet. Innan du lägger in bilden i Prototypes ska du rita in en bakåt-knapp på skärmdumpen. Vi tar en pil från Illustrators symbolbibliotek som vi placerar i skärmdumpens nedre vänstra hörn, och vi sätter även en info-ikon i det högra hörnet som ska berätta mer om vinerna. Sedan lägger vi in bilden i Prototypes genom att klicka på plustecknet igen.



Sammanlänka bilderna i Prototypes
Så där, dags att sammanlänka bilderna. Gå till bilden av appens startskärm i Prototypes, klicka i hörnet av ”Hitta flaska”-knappen och håll in musknappen för att markera rutan. I den meny som dyker upp greppar du tag i ”Page” och drar den till kamerabilden med vinflaskan. En lila båge skapas för att bekräfta länken. Gå nu till vinflaskebilden och skapa en hotspot över bakåt-pilen. Dra den nya lila bågen till appens startskärm.



Skapa sista bilden
Skapa och infoga en tredje bild med samma mått som tidigare. Denna gång gör du en infosida över det fotograferade vinet, och även den här bilden får en bakåt-pil. Följ stegen från punkt 4 för att länka ­kamerabildens info-knapp till den nya sidan. Skapa sedan en ny hotspot med en bakåtlänk på info-sidans pilknapp genom att välja ”Back” i knappmenyn. Tryck på play-knappen i Prototypes övre högra hörn för att testa knapparna.



Dela din prototyp
Allt i sin ordning? Då är det dags att pröva prototypen i telefonen. Klicka på pil-ikonen i det övre högra hörnet för att ladda upp din prototyp och få din pin-kod. Gå sedan till ptyp.es med din iPhone och följ sajtens instruktioner för att skapa en webb-app och testa prototypen i skarpt läge. Dela med dig av koden till medarbetare och vänner för feedback på din app-idé. När du väl är nöjd skickar du prototypen till valfri kodknackare.

Fakta: Prototypes

Funktion: Skapar interaktiva app-prototyper
Version: 1.0.1
Mer info: mw24.se/jf
Pris: 299 kronor