Prototyper til internettet med Framer
framer er et rigtig kraftfuldt værktøj, som kan prototype alt hvad du kan tænke på, men hvis du kigger på Framer's Gallery, registrerer du hurtigt noget:
Af deres 54 eksempler er 48 af dem apps, 4 til Apple Watch, 1 til iPad og 1 til Apple TV. Er Framer endda beregnet til 'traditionel' web / desktop design?
Absolut.
Ved IBM Design er de fleste af mine designs lavet til enterprise desktop webapplikationer. De fleste designere, jeg arbejder med Skitse (herunder mig selv). Disse Sketch-filer prototyperes ved hjælp af et værktøj som InVision eller genskabt og prototyper i kode. Som frontfront-udvikler på et designteam har jeg en enestående position, hvor jeg både designer og kodes prototyper.
Efter at have læst Grundlæggende om Framer besluttede jeg at tilføje det til mit Workflow, og det har virkelig forbedret min designproces. Den mest kraftfulde del er at kunne importere en statisk Sketch-fil til Framer og gøre den til en realistisk, interaktiv prototype på relativt kort tid.
Med dette behøver jeg ikke bruge værdifuld tid i starten af processen genskabe design i kode. Jeg kan få ideer foran interessenter og brugere meget hurtigere. Jeg kan gemme kodning til senere, når projektet er mere solidificeret.
Efter at have brugt Framer i et par måneder her er nogle ting, jeg har lært:
Planlæg og anvend dine prototyper
Før jeg starter et projekt, beslutter jeg et par ting:
Hvad forsøger jeg at opnå?
Hvorvidt prototypen er til brugertest eller en idékonceptualiseret, hvad er det mindste antal arbejde, der er nødvendigt for at få min idé på tværs af eller for at få indsigt i testen? Jeg er ikke bare doven;), det hjælper med at beslutte de nødvendige interaktioner, animationer og skærmbilleder, der er nødvendige.
Jo mere tid du bruger på dit design, desto mere bliver du vedhæftet. Jo mere tilknyttet, desto mindre sandsynligt er du at foretage de nødvendige ændringer.
Lad os bruge prototypen ovenfor som et eksempel.
Jeg arbejdede på et nyt projekt, og jeg ønskede at undersøge, hvad et kortbaseret layout med 'shuffling' animationer i mellem stater ville se ud. Jeg skitserede den grundlæggende idé, jeg ønskede at lave og brugte det som mit udgangspunkt.
hvis du tag et kig på Ved den færdige prototype er kun det første kort klikbart i hvert trin. Der er ingen måde at gå tilbage, ingen hover stater, indholdet i den sidste skærm er ikke komplet, og det er næsten ikke pixel perfekt. Ingen af dem var nødvendige for at få min idé på tværs, så jeg brugte ikke tid på at inkludere dem. Framer kan gøre næsten alt, men det betyder ikke, at du skal forsøge at gøre alt i din prototype.
Opret brugergrænseflader ved hjælp af Andreas fantastiske SeController-modul
Du kan bruge viewcontroller Skits plugin for at oprette brugerflow strømmer lige i Sketch. Skift dine designs hurtigt til klikbare prototyper uden at skulle skrive kode.
Dette er fantastisk til at præsentere dit arbejde for interessenter og er virkelig ret nemt at gøre. I stedet for at gå gennem en Sketch-fil med et dusin genstande eller en .pdf, kan du præsentere en interaktiv prototype eller dele din hostede Framer-projekt-URL.
Afhængigt af hvad jeg forsøger at udføre, kan jeg ende med at skrive nogle kodeord for ting som svæveffekter, animationer og tekstindgange for en ekstra touch af realisme og interaktivitet. Igen, som designer, bestemmer hvad der er nødvendigt for at få din idé på tværs og gennemføre på passende vis.
Tjek ud Andreas'Opret brugergrænseflader ved hjælp af Sketch and Framer-artiklen for at lære mere om plugin.
Microinteractions
Jeg tror, at der er nogle grunde til, at mobil prototyper er meget populære hos Framer, en af dem der er mikrointeraktioner synes at være meget mere almindeligt på mobil. Men det behøver ikke at være sådan! Jeg tror, at designere på nettet kan være bedre til at gøre vores arbejde mere bevægeligt, og Framer er rigtig god til dette.
Dette er bare et simpelt eksempel på en hurtig interaktion, jeg lavede ved hjælp af en Sketch-fil, som en designer på mit hold allerede havde lavet. At udforske interaktioner som dette tager et spørgsmål om minutter.
Sikker på, men hvorfor ikke bare kode?
Som en front-end-udvikler vil mange af mine projekter til sidst ende med en kodet prototype. Jeg bruger derefter denne prototype som grundlag for at skrive front-end-koden ind i produktet, der arbejder langs sideteknik. Så hvorfor ikke bare kode fra starten?
Som jeg nævnte tidligere, hastighed. Jeg kan hurtigt uddybe ideer, som jeg eller en anden designer allerede har lavet ved at importere dem fra Sketch into Framer. Det er fantastisk til den tidlige del af designprocessen, hvor du udforsker ideer og implementerer feedback hurtigt. Jeg kan flytte ret hurtigt i kode, men Framer tager det til næste niveau.
En anden grund er frihed. Den simple kendsgerning, at al min kode skrevet i Framer vil blive smidt væk, er faktisk meget god. Det giver mig mulighed for at prøve ting, jeg ikke ville ellers og være lidt mere løs med min kode. Jeg kan bruge 15 minutter på at udforske en ide og derefter affald det uden nogen form for anger.
Nogle tips og tricks
Du (eller den designer du arbejder med) vil sandsynligvis nødt til at oprette Sketch-filer lidt anderledes.
- Grupper dine lag. Lag, der ikke er i en gruppe, ignoreres
- Undgå at bruge mellemrum i dine gruppens navne
- Skjulte lag i Sketch importeres stadig, men deres synlighed bliver sat til falsk.
- Opret enkle, unikke navne til dine tavler
- En minus (-) i slutningen af dit tavle udelukker det fra at blive importeret til Framer
Flad alle lag i Sketch, som forbliver statiske. Dette vil forbedre opladningstiden for dit projekt, hvilket er særligt godt, når du opretter en stærkere prototype. Du kan gøre dette ved at tilføje en stjerne (*) til slutningen af laget i Sketch.
Det er værd at bruge lidt tid med designerne på dit hold for at gå over, hvordan du konfigurerer Sketch-filer, så de passer bedst til arbejdsgangen, og hvad der fungerer bedst for holdet.
Når du importerer en Sketch-fil til Framer, kan du se noget sådan her:
# Import file "design" sketch = Framer.Importer.load("imported/design@1x")Erstat skitse med $, og du kan nu bruge $ til at referere til dine Sketch-lag, så du undgår at skrive ordskitsen hundredvis af gange:
$ = Framer.Importer.load("imported/design@1x")Brug 'Normal markør' uddrag til en normal musemarkør:
document.body.style.cursor = "auto"and then scale them down, so they're extra crisp. Jeg importerer mine designs på @ 2x og derefter skalere dem ned, så de er ekstra skarpe. Bemærk, at dette ikke ser ud til at komme sammen med ViewController-modulet nævnt ovenfor.
Framer.Device.contentScale = .5Sketch and Framer bruger forskellige standard-tavler / enheder til internettet. Sketch bruger 1440 × 1024, mens Framer bruger 1440 × 900. Jeg vælger 1440 × 900. Tror ikke, at du er begrænset til 900 pixels for højde, men du kan nemt oprette rulle sider i Framer.
[- Denne artikel var oprindeligt bogført på Medium , genudgivet med forfatterens tilladelse -]