Skab App-Prototyper Nemt med MarvelApp

I en verden, hvor mobilapplikationer og digitale oplevelser er i konstant udvikling, er det afgørende at kunne visualisere og teste idéer, før de omsættes til færdig kode. Prototyping er blevet en uundværlig del af designprocessen, og værktøjer som MarvelApp har revolutioneret måden, vi bringer koncepter til live på. MarvelApp er kendt for sin intuitive tilgang og brugervenlighed, hvilket gør det muligt for både erfarne designere og nybegyndere at skabe alt fra lav-fidelitets wireframes til høj-fidelitets prototyper, der føles som ægte applikationer. Men hvordan kan MarvelApp præcist hjælpe dig med at skabe en prototype, og hvad gør det til et foretrukket valg for mange?

Hvad er MarvelApp, og Hvordan Bruges Det?

MarvelApp er et fremragende online værktøj, der giver designere mulighed for at skabe interaktive prototyper af mobilapplikationer og webprojekter. Det skiller sig ud fra mængden af andre fremragende prototyping-værktøjer som InVision, Framer, Flinto og Pixate ved sin enkelhed og effektivitet. Mange designere vælger MarvelApp, ikke fordi det nødvendigvis er det eneste værktøj, der kan udføre opgaven, men fordi det giver en følelse af komfort og flydende arbejdsgang. Det handler om at finde et værktøj, man føler sig hjemme i, og for mange er det netop MarvelApp.

Med MarvelApp kan du nemt omdanne statiske designfiler – uanset om de er skitser på papir, screenshots eller færdige designs fra Photoshop – til klikbare, interaktive oplevelser. Dette giver dig mulighed for at teste brugerflows, samle feedback og iterere på dine designs, længe før der bruges dyre udviklingsressourcer. Det er en bro mellem idé og implementering, der sikrer, at det endelige produkt lever op til forventningerne.

Nøglefunktioner i MarvelApp

MarvelApp praler af en række imponerende funktioner, der strømliner prototyping-processen:

• Dropbox-synkronisering: En af de mest kraftfulde funktioner. Når du arbejder i programmer som Photoshop og gemmer dine filer, opdateres prototypen automatisk i realtid. Dette sikrer, at dine designs altid er opdaterede i prototypen, hvilket sparer tid og minimerer manuelt arbejde.
• Tilføj skitser fra mobil-app: Hvis du foretrækker at starte med pen og papir, kan du nemt tage billeder af dine håndtegnede skitser via Marvels mobil-app, og de bliver øjeblikkeligt en del af dit projekt. Dette er ideelt til hurtig idéudvikling og lav-fidelitets prototyping.
• Understøttelse af forskellige overgange og bevægelser: Skab en realistisk brugeroplevelse ved at tilføje forskellige skærmovergange (f.eks. fade, slide, push) og interaktive bevægelser (f.eks. klik, tryk, swipe). Dette giver liv til dine prototyper og gør dem mere engagerende.
• Mulighed for at skabe ubegrænsede teams: Organiser dine projekter effektivt ved at oprette teams for forskellige klienter, projekter eller hackathons. Dette fremmer samarbejde og holder arbejdsgange adskilt og organiseret.
• Enhedsrammer til forhåndsvisning: Se dine prototyper, som de ville se ud på forskellige enheder (f.eks. iPhone, Android-telefoner, tablets). MarvelApp kan endda automatisk registrere den bedst passende enhedsramme baseret på dine designs’ opløsning.
• En meget pæn og visuelt detaljeret grænseflade: MarvelApp er designet med brugervenlighed for øje. Grænsefladen er ren, intuitiv og nem at navigere i, hvilket gør designprocessen til en fornøjelse.
• Flere muligheder for deling af prototyper: Del dine prototyper nemt med kolleger, klienter eller brugere til test. Du kan dele via link, embedde dem på hjemmesider eller endda downloade dem til offline visning.

Trin-for-Trin Guide til Skabelse af en MarvelApp Prototype

Lad os nu dykke ned i, hvordan du trin for trin kan skabe din egen prototype med MarvelApp. Vi vil gennemgå processen fra første kontakt til forhåndsvisning og deling.

1. Første Kontakt og Projektopsætning

Trin 1: Opret forbindelse til MarvelApp.Gå til marvelapp.com og log ind. Det er vigtigt at bemærke, at du skal have en Dropbox-konto for at starte med MarvelApp, da dette muliggør synkronisering af alle filer, du bruger i dine prototyper. Du behøver ikke at have Dropbox installeret på din computer, men du skal kunne godkende adgang via Dropbox.com. Når du har givet MarvelApp adgang til din Dropbox-konto (MarvelApp får kun adgang til de billeder, du arbejder med, og ingen andre filer), vil du se startskærmen.

Trin 2: Opret dit første projekt.Klik på knappen "Create project". Der vises et nyt popup-vindue, hvor du skal indtaste projektets navn. Her kan du også udfylde yderligere indstillinger, såsom at dele projektet med et team eller tilføje adgangskodebeskyttelse, men for nu indtaster vi blot et navn. Lad os kalde det "MIT SPIL PROTOTYPE". Klik derefter på "Create project".

Trin 3: Tilføj dit indhold.Når dit projekt er oprettet, skal vi tilføje indhold. Du vil se nye muligheder på skærmen, især "Add designs from Dropbox" og "Take photos of sketches". For denne guide fokuserer vi på at tilføje billeder fra Dropbox. Upload alle dine .png-filer (eller andre understøttede formater som JPG, GIF) til en mappe i din Dropbox-konto. For eksempel en mappe kaldet "SPILSKÆRME". Vend derefter tilbage til MarvelApp-skærmen, klik på "Add images from Dropbox"-knappen, vælg alle billederne i din Dropbox-mappe, og fortsæt.

Trin 4: Tjek billederne og enhedsindstillinger.MarvelApp er intelligent. Når du har uploadet dine designs, vil MarvelApp ofte automatisk registrere den bedst passende enhedsramme baseret på billedernes størrelse. For eksempel, hvis dine billeder er 750x1334px, som matcher en iPhone 6's opløsning, vil iPhone 6-enhedsrammen sandsynligvis allerede være valgt i indstillingerne. Du kan altid klikke på "Settings" for at se og justere enhedsrammen og andre visuelle indstillinger. Lad alt være standard for nu, og luk vinduet med ✕-ikonet.

2. Bygning af Din Prototype: Interaktioner og Overgange

Nu begynder den sjove del: at skabe interaktioner!

Trin 1: Rediger billeder og skab hotspots.Bevæg musen over dine uploaded billeder, og nye muligheder vil dukke op. Hold f.eks. musen over "00-Intro.png" og klik derefter på "Edit". Du vil se et popup-vindue, der viser dig, hvordan du opretter hotspots. Et hotspot er et "interaktivt område" på dit design, som du kan klikke eller trykke på for at udløse en handling. Zoom ind eller ud med zoom-muligheden i topmenuen, hvis billedet er for stort eller lille.

Trin 2: Opret et hotspot.For at tilføje interaktioner skal vi tilføje hotspots. Du kan oprette dem hvor som helst ved blot at klikke og trække, indtil du har den ønskede form. Opret f.eks. et nyt hotspot over knappen "Casual mode" i dit design. Når du er færdig, vises en ny værktøjslinje. Denne værktøjslinje bruges til at indstille, hvordan hotspotet skal opføre sig. Du kan ændre hotspotets position og størrelse ved at vælge og flytte eller skalere det.

Trin 3: Link hotspots til skærme.På værktøjslinjen ser du alle de billeder, du har i projektet. Hvis du oprettede hotspotet over "Casual mode"-knappen, skal du nu klikke på billedet "01-Casual-option" for at vælge det og linke hotspotet til det. Dette billede vil være det, vi ser på skærmen, når vi interagerer med det specifikke hotspot, hvilket simulerer et tryk eller klik. Fokusér nu på "Hotspot Behaviour". Som standard er overgangstypen "None", hvilket betyder ingen animation. Handlingen, der udløser interaktionen, er "Click or tap". Lad det være standard for nu.

Trin 4: Duplikering af hotspots.For at spare tid kan du duplikere hotspots. Klik på "Duplicate this hotspot"-muligheden. I det nye vindue vælger du et andet billede, f.eks. "02-Challenge-option". Klik på den grønne knap for at fuldføre handlingen. Duplikerede hotspots bliver grønne i stedet for standard blå, hvilket indikerer, at de er kopier.

Trin 5: Tilføj overgangseffekter.Luk værktøjslinjen med ✕-ikonet. Brug skyderen øverst til at flytte til det næste billede, f.eks. "01-Casual-option". Opret et nyt hotspot over "Casual mode" og link det med billedet "06-casual-mode". For at ændre overgangseffekten skal du klikke på "Transition" og vælge "Fade". Vi simulerer adgang til en af applikationens spiltilstande.

Trin 6: Flere interaktioner og overgange.Fortsæt med at tilføje hotspots til andre elementer. Opret f.eks. et hotspot over "Challenge mode"-knappen og link det med "02-Challenge-option"-billedet. Brug "Duplicate this hotspot" til også at kopiere det til "00-Intro"-billedet.

Opret et andet hotspot over trofæikonet nederst på billedet. Link dette hotspot til "04-trophies"-billedet. Skift "Transition" til "Slide Up". Brug "Duplicate this hotspot" og kopier det til "00-Intro" og "02-Challenge-option".

Endnu et eksempel: Opret et hotspot over "No limit"-knappen. Link det til "03-Nolimit-option"-billedet. Skift "Transition" til "Push left" og brug "Duplicate this hotspot" til at kopiere det til "00-Intro" og "02-Intro-Challenge-option". Disse gentagne trin er grundlaget for at skabe et flydende prototype-flow.

Trin 7: Tilbage til sidste skærm.Flyt til det næste billede, f.eks. "03-Nolimit-option". Opret et nyt hotspot lige over "Back to menu"-muligheden. Klik nu på "Link to last visited screen"-muligheden. På denne måde vil din prototype vende tilbage til den tidligere skærm, hvor du foretog interaktionen. Dette er yderst nyttigt for navigationsknapper, der skal føre brugeren tilbage til, hvor de kom fra, uanset hvilken skærm det var.

Trin 8: Faste headers (Fixed Headers).Lad os flytte til det næste billede, f.eks. "04-trophies". Fokusér på muligheden "Fixed header". Klik og træk ned, indtil du når omkring 92px-mærket. På denne måde kan vi holde headeren fast, mens indholdet ruller op og ned. Dette er afgørende for lange sider, hvor navigations- eller informationselementer skal være synlige, uanset hvor langt brugeren scroller.

Trin 9: Flere specifikke interaktioner.Opret et nyt hotspot over ikonet i øverste venstre hjørne. Link det til "00-Intro"-billedet og vælg "Slide Down" som "Transition". Dupliker dette hotspot for "05-trophies-share" og også for "08-results" og "09-trophies-unlocked".

Opret et andet hotspot over hele området af "Trophy title 1". Link det til "05-trophies-share"-billedet og sæt "Fade" som "Transition". Dette viser, hvordan du kan skabe interaktioner med større, mere komplekse områder.

Trin 10: Gameplay-interaktioner.Fortsæt til det næste billede: "06-casual-mode". Her skal vi oprette et hotspot til at vise pausemenuen og et andet hotspot til at vise resultatet, vi ville se i slutningen af spillet. Opret et nyt hotspot over ikonet øverst i midten, lige mellem timeren og scoren. Link det til "07-pause"-billedet. Brug "Fade" som "Transition". Opret et andet hotspot over midten af skærmen og link det til "08-results". Sæt "Slide Fade" som "Transition".

Trin 11: Pausemenu-logik.Næste billede! Brug skyderen og gå til "07-pause". Lav et nyt hotspot over "Continue"-muligheden. Du kan enten bruge "Link to last visited screen"-muligheden eller linke hotspotet til "06-casual-mode"-billedet for at simulere effekten af at vende tilbage til spillet fra pausemenuen. Opret også et hotspot over "Back to menu"-muligheden og link det til "00-Intro"-billedet ved at vælge "Slide Fade" som "Transition".

Trin 12: Afsluttende interaktioner, inkl. swipe.Vi er næsten færdige! Gå til "08-results". Du bør se et tidligere oprettet hotspot på ikonet i den øverste bjælke. Opret et nyt over "New Game"-knappen. Link det til "06-casual-mode". Brug "Fade" som "Transition". Dupliker hotspotet i "09-trophies-unlocked"-billedet.

Opret et andet hotspot midt på skærmen. Link hotspotet til "09-trophies-unlocked", brug "Slide Left" som "Transition" og "Swipe Left" som "Action". Når du ser denne prototype på en mobil enhed, kan du bruge denne gestus til at udløse interaktionen (desktop-computere vil stadig køre klik-handlingen). Dette demonstrerer MarvelApps evne til at håndtere touch-specifikke interaktioner.

Trin 13: Sidste billede og swipe-tilbage.Fortsæt til "09-trophies-unlocked"; sidste billede! Du bør allerede have to hotspots oprettet. Opret et nyt i den mellem-venstre zone af skærmen. Link det til "08-results", brug "Slide Right" som "Transition" og "Swipe Right" som "Action". Dette fuldender en cirkulær navigation og viser, hvordan man navigerer tilbage med en swipe-bevægelse.

Tillykke! Din prototype er færdig. Nu er det tid til at se den og dele den med andre.

Forhåndsvisning og Delingsmuligheder

Efter at have lagt så meget arbejde i din prototype, er det tid til at se den i aktion og dele den med dit publikum.

Trin 1: Se din prototype.Klik på "Preview"-muligheden i topbjælken. Et nyt vindue med din prototype vises inden for en iPhone 6-skabelon (eller den enhed, du har valgt). Den er levende! Klik på husikonet for automatisk at vende tilbage til den første skærm. Nu kan du bladre gennem skærmene og interagere med de forskellige hotspots, du har oprettet. Bemærk, hvordan markøren ændrer sig, når du holder den over et hotspot (på desktop-computere). Hvis du ikke husker præcis, hvor hotspots er, skal du blot trykke eller klikke på skærmen for at vise dem.

Trin 2: Del din prototype.Luk vinduet med prototypen og vend tilbage til skærmen, hvor du arbejdede. Klik på "Close"-muligheden for at vende tilbage til projektets hovedskærm. Herfra kan du få adgang til redigeringsskærmen, tilføje nye billeder, opdatere de tidligere, inkludere et applikationsikon osv. Du kan også bruge "Play"-muligheden til at genstarte forhåndsvisningen i din browser.

Klik på "Share"-muligheden. Du vil se alle de muligheder, du har til rådighed for at dele prototypen, du lige har oprettet, med andre designere, udviklere eller klienter. Du kan dele et link, som er nemt at sende via e-mail eller chat, eller du kan downloade de nødvendige filer til at køre din prototype hvor som helst offline. Luk "Share your prototype"-vinduet, og klik derefter på "Download" på projektskærmen for at downloade en zip-fil med alt, hvad du behøver.

Ofte Stillede Spørgsmål om MarvelApp

Hvorfor vælge MarvelApp frem for andre prototyping-værktøjer?

MarvelApp skiller sig ud ved sin enkle og intuitive brugerflade, der gør det nemt at komme i gang, selv for nybegyndere. Dets tætte integration med Dropbox og muligheden for at omdanne håndtegnede skitser til interaktive prototyper er store fordele. Selvom der findes mange kraftfulde værktøjer, vælger mange MarvelApp, fordi det fokuserer på at gøre prototyping-processen så gnidningsfri og hurtig som muligt, hvilket giver designere mulighed for at fokusere på kreativitet frem for kompleksitet.

Hvad er Marvel Android-appen?

Marvel Android-appen er en mobilapplikation, der giver dig mulighed for at udvide din prototyping-oplevelse til din smartphone eller tablet. Med den kan du omdanne håndtegnede skitser og tegninger til interaktive prototyper direkte fra din enhed. Ingen skitser ved hånden? Du kan også designe direkte i appen ved hjælp af former, tekst, ikoner og stockfotos. Den er perfekt til at skabe høj-fidelitets prototyper på farten, uanset hvor du er. Du kan downloade Marvel til Android fra Google Play Butik.

Hvordan starter jeg et Marvel-projekt med mine egne designs gemt på min computer?

Hvis du allerede har designet dine skærme i et program som Photoshop, Sketch, Figma eller lignende, og de er gemt som JPG-, PNG- eller GIF-filer på din computer, kan du hurtigt importere dem til dit Marvel-projekt for at starte prototyping. Når du er inde i dit Marvel-projekt, skal du blot klikke på "Add images" og derefter vælge "Upload from computer". Du kan derefter trække og slippe dine designfiler direkte ind i vinduet eller vælge dem fra din computer. MarvelApp vil ubesværet integrere dem i dit projekt, klar til at blive forvandlet til en interaktiv prototype.

Konklusion

MarvelApp er et utroligt kraftfuldt, men alligevel tilgængeligt værktøj for alle, der ønsker at visualisere og teste deres app- og webdesignidéer. De trin, vi har gennemgået i denne guide – fra den første opsætning og import af designs til skabelsen af komplekse interaktioner med hotspots, overgange og gestus, samt de nemme delingsmuligheder – har forhåbentligt udrustet dig med de nødvendige færdigheder til fuldt ud at forstå, hvordan du hurtigt og effektivt kan bruge MarvelApp til at skabe imponerende prototyper. Uanset om du er en erfaren UX/UI-designer eller en nybegynder, der ønsker at bringe dine idéer til live, er MarvelApp et fremragende valg, der gør processen intuitiv og sjov. Begynd at eksperimentere med dine egne designs i dag, og se, hvordan MarvelApp kan transformere din designproces.

Hvis du vil læse andre artikler, der ligner Skab App-Prototyper Nemt med MarvelApp, kan du besøge kategorien Mobil.