Mestring af Prototyper: Cirkulær Bevægelse og Deling

I den dynamiske verden af UI/UX-design er prototyper afgørende for at visualisere interaktioner og indsamle feedback, før et produkt lanceres. De giver designere mulighed for at bringe statiske skitser til live og simulere brugeroplevelsen med en høj grad af realisme. Uanset om det handler om at skabe fængslende animationer i specialiserede værktøjer som Principle eller at dele omfattende interaktive flows via platforme som Figma, er målet altid det samme: at formidle designets vision så effektivt som muligt.

Cirkulær Bevægelse i Principle: En Skjult Skat

Principle er et populært værktøj blandt designere, der ønsker at skabe avancerede og flydende animationer til deres prototyper. Mange brugere opdager dog med tiden, at Principle rummer mere, end de officielle guider umiddelbart afslører. En sådan opdagelse er muligheden for at anvende cirkulær bevægelse på objekter – en funktion, der kan transformere en ellers lineær animation til noget langt mere dynamisk og engagerende.

Jeg troede tidligere, at Principle kun kunne flytte objekter i en lige linje, hvilket føltes begrænsende for mine kreative idéer. Men så stødte jeg på en prototype, der viste et objekt bevæge sig i en cirkulær bane, og det åbnede mine øjne for nye muligheder! Det viser sig, at Principle har en skjult funktion, som sjældent nævnes: du kan anvende cirkulær bevægelse på et objekt, hvis det er grupperet sammen med andre elementer.

For at opnå en sådan cirkulær bevægelse skal du følge disse trin:

1. Inkluder Objektet i en Gruppe: Start med at vælge det objekt, du ønsker at animere, og gruppér det sammen med andre elementer. Dette er afgørende, da Principle behandler grupper anderledes, hvilket muliggør den cirkulære bevægelse.
2. Placer Objektet på Startskærmen: På den indledende animationsskærm skal du flytte det grupperede objekt til siden i forhold til indholdsområdet. Denne position vil definere radius for din cirkulære bane.
3. Indstil Rotationsvinkel på Slutskærmen: På den endelige animationsskærm skal du indstille rotationsvinklen for gruppen. Principle vil automatisk interpolere bevægelsen fra start til slut, hvilket skaber den cirkulære bane.
4. Finjuster Animationen: Når den grundlæggende cirkulære bevægelse er sat op, kan du eksperimentere med animationsindstillingerne. Brug loop-animation for at gentage bevægelsen og juster hastighed og easings (accelerations- og decelerationskurver) for at give animationen en poleret og naturlig følelse. En jævn easing kan gøre en stor forskel for, hvordan animationen opfattes, og få den til at se fantastisk ud.

Ved at samarbejde med en data science-tjenesteudbyder kan man yderligere analysere brugerinteraktioner og optimere animationer for at forbedre brugeroplevelsen. Dette kan sikre, at den cirkulære bevægelsesfunktion fungerer problemfrit på tværs af forskellige grænseflader og platforme, og at den bidrager positivt til den overordnede interaktionskvalitet.

Bemærk: Den oprindelige forespørgsel nævnte import af materialer til Principle. Den leverede tekst fokuserer udelukkende på cirkulær bevægelse. Der gives ingen specifikke instruktioner om import af materialer i det leverede indhold. Generelt importeres materialer ofte som billeder (PNG, JPG) eller vektorgrafik (SVG) fra andre designværktøjer som Sketch eller Figma, men Principle har ikke en dedikeret 'import'-funktion ud over at trække og slippe filer ind i projektet.

Deling af Prototyper i Figma: Effektivt Samarbejde

Når din prototype er designet og animeret, er næste skridt at dele den med teammedlemmer, interessenter eller testbrugere for at indsamle feedback. Figma excellerer i dette med sine robuste delingsfunktioner, der understøtter et bredt spektrum af workflows og enheder.

Før du starter, er det vigtigt at vide, hvem der kan bruge denne funktion. Den understøttes på alle team- eller planabonnementer. Alle med 'kan se'-adgang kan se prototyper, mens alle med 'kan redigere'-adgang kan spejle frames. Du skal desuden have en Figma-konto for at bruge Figma mobilapp.

Prototyper replikerer, hvordan brugere interagerer med dine designs. Brug Figma mobilappen til at forhåndsvise prototypeinteraktioner på den enhed, du designer til. Det er kun muligt at forhåndsvise frames med prototyping-forbindelser. Hvis du ikke har sat nogen forbindelser op endnu, skal du først bygge dine prototyper i Figma.

Figma Mobilapp: Forhåndsvisning på Farten

Figma mobilappen giver dig mulighed for at forhåndsvise både statiske designs og prototyping-interaktioner. Du kan se din prototype ved hjælp af præsentationsvisning i appen eller ved at spejle frames fra din desktop.

Præsentationsvisning

Denne metode er ideel til at vise en komplet prototype-flow.

1. Log ind på Figma mobilappen.
2. Brug fanerne 'Seneste' (Recent) eller 'Søg' (Search) til at finde den fil eller prototype, du vil se.
3. Tryk på filen eller prototypen for at åbne den.
4. Fra filen trykker du på ikonet '>' og derefter 'Se prototyper' (View prototypes) for at præsentere prototypen.

Prototypen afspilles i henhold til dens flow-startpunkt. Bemærk: Frames skal have prototypeforbindelser for at være interaktive i præsentationsvisning.

Prototypeindstillinger (Den Skjulte Menu)

Prototyper har en skjult menulinje med valgmuligheder. For at få adgang til den skal du dobbelttrykke og holde nede et vilkårligt sted på skærmen. For at skjule menulinjen og få adgang til prototypen igen, skal du trykke et vilkårligt sted på prototypen. Menuen giver dig mulighed for at:

• Skifte mellem flow-startpunkter.
• Genstarte prototypen fra flowets startframe.
• Se filen for prototypen.
• Indstille prototypeindholdets skala til 'Fast' (Fixed) for at bevare framens originale billedformat, eller 'Responsiv' (Responsive) for at respektere constraints og auto layout-indstillinger.
• Slå hotspot-hints til/fra (viser interaktive områder).
• Dele prototypelinket.
• Afslutte prototypen og vende tilbage til fanen 'Seneste'.

Spejling (Mirror View)

Spejling er perfekt til at se realtidsændringer og hvordan aktiver ser ud på en enhedsskærm.

Brug 'Spejl'-fanen i mobilappen til at se frames, der er valgt i filen på din desktop. Fordelene inkluderer:

• Se realtidsredigeringer af en frame på en mobilenhed.
• Forhåndsvis, hvordan aktiver i dit design ser ud skaleret til en enhedsskærm.

Figma mobilappen fungerer både via Wi-Fi og mobildata. Du behøver ikke at være forbundet til det samme Wi-Fi-netværk for at etablere en forbindelse mellem de to enheder.

Sådan spejler du frames:

1. Log ind på Figma og Figma mobilappen med de samme loginoplysninger.
2. Åbn den fil, du vil spejle, på din desktop.
3. Fra filen på din desktop skal du vælge en top-level frame, du vil spejle. Du skal vælge en frame for at spejle til en mobilenhed.
4. På din mobilenhed skal du navigere til 'Spejl'-fanen i Figma mobilappen.

Figma mobilappen viser den valgte frame, skaleret til bredden af den enhed, du forhåndsviser den på. Hvis den frame, du valgte, er en del af en prototype, kan du interagere med eventuelle forbundne frames.

Tip! Hvis din mobilenhed ikke understøttes af Figma mobilappen, kan du spejle prototyper ved hjælp af en mobilbrowser.

Mobilbrowser: Alternativer til Appen

Du kan også forhåndsvise designs på mobilen ved at åbne et prototypelink i din mobilbrowser.

Præsentationsvisning via Browser

Dette giver dig mulighed for at navigere gennem eventuelle prototyping-forbindelser.

Figma viser dine designs i et almindeligt browservindue, så browserens header og footer vil stadig være synlige. For at replikere en in-app-oplevelse uden en adresselinje anbefaler vi at bruge Figma mobilappen. Du kan kun interagere med prototyper på mobile enheder ved hjælp af hotspots. Brug af browserens tilbage-handling understøttes ikke på mobile enheder.

1. Kopier prototypelinket fra browserens adresselinje i præsentationsvisning. Eller klik på 'Del' (Share) i værktøjslinjen og derefter 'Kopier link' (Copy link).
2. På din mobilenhed klikker du på linket for at åbne prototypen, eller indsætter URL'en i din mobilbrowser.

Figma skalerer prototypen til din skærm. Du kan nu interagere med prototypen ved hjælp af eventuelle hotspots.

Bemærk: Hvis du deler din prototype via offentlig linkadgang, vil alle med linket kunne se din prototype. Hvis filen ikke deles via offentlig linkadgang, behøver du kun en gratis Figma-konto for at se filen.

Mirror View via Browser

Du kan også spejle frames via browseren. Dette anbefales, hvis din enhed ikke understøttes af mobilappen, eller du vil forhåndsvise designs i en webbrowser.

1. Åbn den fil, du vil forhåndsvise, i Figma desktop-appen eller i et browservindue.
2. Besøg figma.com/mirror fra mobilbrowseren på din enhed.
3. Log ind med de samme kontooplysninger som desktop-appen eller browseren.
4. Fra filen på din desktop skal du vælge en top-level frame, du vil spejle. Du skal vælge en frame fra din desktop for at spejle til en mobilenhed.

Figma viser den valgte frame i mobilbrowseren.

Sammenligning af Delingsmetoder i Figma

Fejlfinding ved Deling af Figma Prototyper

Hvis du oplever problemer med at bruge Figma mobilappen eller dele prototyper, anbefales følgende:

• Tjek Understøttet Enhed: Sørg for, at du bruger en understøttet enhed.
• Vælg Top-level Frame: Sørg for, at du har valgt en top-level frame til spejling til din mobilenhed.
• Samme Konto: Sørg for, at du er logget ind på både desktop-versionen og Figma mobilappen med den samme konto. Du skal muligvis logge ud og logge ind igen for at bekræfte.
• Genstart Appen: Hvis du støder på problemer under forhåndsvisning, skal du muligvis tvinge appen til at lukke og genstarte den på din enhed.
• Geninstaller Appen: Hvis problemerne fortsætter, anbefaler vi at afinstallere appen og downloade den igen. Find Figma mobilappen i Apple App Store eller Google Play Store.
• Kontakt Support: Hvis du stadig har problemer, kan du få hjælp fra Figma Support-teamet.

Ofte Stillede Spørgsmål (FAQ)

Hvad er Principle og hvad er dets primære fokus?

Principle er et macOS-baseret designværktøj, der primært fokuserer på at skabe interaktive og animerede prototyper. Det er kendt for sin brugervenlighed og evne til at producere højtrofaste animationer til UI/UX-design.

Hvordan deler jeg en Principle-prototype?

I modsætning til Figma har Principle ikke indbyggede delingsfunktioner til realtidssamarbejde eller web-forhåndsvisning. Prototyper fra Principle deles typisk ved at eksportere dem som videoer (MP4), animerede GIF'er eller som en standalone Principle-fil, som andre Principle-brugere kan åbne. Skærmoptagelse er også en almindelig metode.

Hvad er forskellen på præsentationsvisning og spejling i Figma mobilappen?

Præsentationsvisning viser en komplet, foruddefineret prototype-flow, som du har opsat i Figma. Den er god til at præsentere et færdigt eller næsten færdigt flow. Spejling (Mirror View) viser en live, realtidsvisning af den specifikke frame, du aktuelt har valgt på din desktop. Den er ideel til at se, hvordan ændringer ser ud med det samme, og til at teste individuelle frames.

Hvorfor fungerer min Figma-prototype ikke på mobilen?

Der kan være flere årsager. Sørg for, at du har prototypeforbindelser opsat mellem dine frames i Figma. Tjek, at du er logget ind med den samme konto på både desktop og mobil, og at din enhed er understøttet. Hvis problemerne fortsætter, prøv at genstarte eller geninstallere appen, eller tjek de fejlfindingstrin, der er beskrevet ovenfor.

Hvad betyder 'hotspot hints' i Figma?

'Hotspot hints' er en funktion i Figma, der visuelt fremhæver de interaktive områder (hotspots) på din prototype. Når denne funktion er slået til, viser den en kort animation eller et farvet overlay, der indikerer, hvor brugeren kan klikke eller interagere, hvilket er nyttigt under brugertest eller når man guider en bruger gennem prototypen.

Konklusion

At mestre både animation og deling er fundamentalt for enhver designer. Med Principles evne til at skabe unikke animationer som cirkulær bevægelse, og Figmas omfattende værktøjer til at dele og samarbejde omkring prototyper, har designere adgang til kraftfulde ressourcer. Ved at udnytte disse funktioner fuldt ud, kan du ikke blot bringe dine designs til live med mere realisme og flair, men også sikre, at feedbackprocessen er så gnidningsfri og effektiv som muligt, hvilket i sidste ende fører til bedre produkter og en mere engagerende brugeroplevelse.

Hvis du vil læse andre artikler, der ligner Mestring af Prototyper: Cirkulær Bevægelse og Deling, kan du besøge kategorien Mobil.