- MacWorld:

Skissa appen med Prototypes

Av +

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



Sälj din Apple-pryl med MacWorld

Gratis guide: Så kopplar du mobilen till tv:n



Mer sånt? Fyll i din e-postadress så får du MacWorlds nyhetsbrev

Please don't insert text in the box below! Villkor



Frågor om vårt kommentarsystem, se vår FAQ: idg.se/faq

Artikelkommentatorerna ansvarar själva för sina inlägg.

OBS! Läs dessa regler som gäller vid postning av inlägg.

Regler för inlägg i artikelforumet

Kommentatorn ansvarar själv för sina inlägg. Inlägg som innehåller diskriminerande uttalanden, personliga påhopp eller språk som kan uppfattas som stötande, kommer att tas bort av tjänstgörande redaktör. Även datorkrigsinlägg och inlägg som är utanför ämnet, kan tas bort.

IDG förbehåller sig dessutom rätten att i varje enskilt fall bedöma huruvida ett inlägg ska tas bort, även om det inte faller under någon av reglerna ovan.

Upprepat postande av olämpliga inlägg kan medföra avstängning från artikelforumen.

Frågor? Mejla till redaktören, carl.grape@idg.se.

Läs mer om vår policy i diskussionsforum

iPhone 6 - här är alla nyheter
MacWorlds podcast


Du har väl inte missat vår podcast? Redaktionen diskuterar spaningar och nyheter i Applevärlden. Prenumerera för att inte missa något avsnitt.
Allt om OS X Yosemite och iOS 8


 


- MacWorld:

Tecken på ny svensk Apple Store


- MacWorld:

Seagate släpper mastodonthårddisk


- M3:

Så känns första bilen med Apples Carplay


- MacWorld:

"Större iPad släpps 2015"


- MacWorld:

iPad

Kaliforniska elever får ingen iPad


- MacWorld:

SVT Play finns nu i Apple TV



Nyheter och tips från Teknik & Trender. ANNONS

Bygg prestanda – spara pengar

Så enkelt reparerar du din Iphone själv

Sommarens 10 bästa teknikprylar

Så sparar du pengar när internet inte används







- MacWorld:

iTunes Festival

Nu finns iTunes Festival på Apple TV


- MacWorld:

"Kill switch" blir lag i Kalifornien


- MacWorld:

Kan jag få en bil med iOS inbyggt?


- MacWorld:

Starfish vill hjälpa glömska föräldrar


- MacWorld:

Ralph Lauren släpper teknik-tröja


- MacWorld:

Fem feta tips för Mac


- MacWorld:

Google Presentationer

Google Presentationer släppt för iOS


- MacWorld:

Tim Cook

Tim Cook firar 3 år som Apples vd


- MacWorld:

M7

"Apple satsar på ny rörelseprocessor"

iPhone 6 - här är alla nyheter
MacWorlds podcast


Du har väl inte missat vår podcast? Redaktionen diskuterar spaningar och nyheter i Applevärlden. Prenumerera för att inte missa något avsnitt.
Allt om OS X Yosemite och iOS 8