Prototyping inde i Sketch 49 - Lær, hvordan det fungerer, og hvad du kan gøre

Sketch 49 bringer en af ​​de mest forventede og ønskede funktioner hjem - muligheden for at skabe og dele hurtige interaktive prototyper indfødt.

I årenes løb har Sketches fantastiske tredjepartsudviklerfællesskab gjort Sketch til et utroligt udvideligt designværktøjssæt. Som et resultat kan vi nyde snesevis af gode ledsageprodukter og prototype-plugins som Protowire, Craft, Mirr, Principle, Framer, Flinto, Flow, Marvel, Atomic, Kite, Origami, CanvasFlip, Proto og ProtoPie, bare for at nævne et få.

“Vil du bringe prototyper til Sketch?” Var måske det hyppigst stillede spørgsmål i fora og under design-møder. I dag besvarede Sketch disse spørgsmål med et stort og fedt, "Ja."
Indfødt prototype er endelig her.

At holde tingene enkle har været et konsistent tema for Sketch og en vigtig skelner mellem andre designværktøjer og Sketch. Vi lever i en alder af informationsoverbelastning, og det kommer med en voksende liste over forventninger og krav til designere, udviklere og produktfolk. Udviklingen i interaktionsdesign, presset til at sende hurtigt og mislykkes sikkert samt ønsket om at genbruge komponenter skubber virkelig ideen om at gøre mere med mindre eller bruge et værktøj til mange vigtige formål.

Der er dedikerede værktøjer til prototypeinteraktion med avancerede animationsfunktioner, tidslinje- og keyframe-funktioner og lette funktioner. Prototype inde i Sketch er enkel, men fantastisk! Du finder endnu ikke avancerede animationsfunktioner. Dette er en gang at huske på, når du udforsker denne første version.

Så hvad ser prototyper inde i Sketch?

Der er en nyttig guide til at komme i gang, som du kan finde under Sketch> File> New from Template> Prototyping Tutorial. Vi vil kort se på denne guide og prototypefunktioner.

Nye ikoner og prototypegenveje

Når du åbner den nyeste version af Sketch, kan du muligvis bemærke disse ikoner.

Tryk på W for at tilføje et link til et lag eller gruppeTryk på H for at indsætte et hotspot-lagControl + F skjuler / viser prototyperKommando + P åbner Preview

På lignende måde som Symbollag er Link- og Hotspot-lag angivet med brugerdefineret mappeikon i laglisten til venstre.

Viser knap med hotspot i laglisten

Inspektøren og animationer

Hvis du vælger et lag, afsløres et nyt prototypesektion i inspektøren. Her kan du oprette og slette Tap Mål. Desuden vil du være i stand til at vælge fra få basale Artboard-overgange i øjeblikket:

❇ Ingen animation
← Animeret tegnebræt fra højre
Imate Animeret artboard fra toppen
→ Animeret tegnebræt fra venstre
Imate Animeret tegnebræt fra bunden

Links og hotspots

For at oprette en prototype har du brug for den nyeste version af Sketch sammen med flere Artboards i dit dokument. Du kan derefter forbinde lag eller symboler (hvilket er meget kraftfuldt, når du overvejer indlejrede symboler) til forskellige tegnebræt med links og hotspot-lag. Se eksemplet herunder, hvor vi forbinder trailerminiaturet til Player Artboard med Animate Artboard fra toppen.

Oprettelse af links og hotspotsTryk på H for at indsætte et hotspot-lag

Hotspot er en type lag, der giver dig mulighed for at tegne en form, et trykmål, over en del af dit design og forbinde det til et Artboard. Mere vigtigt er, at hotspot-lag kan høre hjemme i symboler, hvor deres måldestination kan tilsidesættes. Du kan se, hvordan hvert hotspot kan tilpasses med tilsidesættelser i eksemplet herunder. Du kan også konvertere et link til et hotspot ved at vælge laget og klikke på ikonet Opret hotspot i inspektøren.

Hotspot-lag i symbolet

Eksempel

Når du får vist din prototype, kan du muligvis også se et lille flagikon. Dette er et startpunktmarkør, og det giver dig mulighed for at vælge tegnebrættet, hvorfra du gerne vil starte din prototype. Det er især nyttigt for dokumenter med mange tegnebræt. Så for at indstille et startpunkt, skal du først forhåndsvise tegnebrættet og klikke på flagikonet.

Prototypeksempel

Long Views alias Scrolling Artboards

Mere end ofte er vi nødt til at vise indhold som nyhedsfeed eller lange transaktionsdetaljer. I dette tilfælde kan vi blot oprette et længere tegnebræt til at vise et synspunkt, der ruller. Når der vises en forhåndsvisning af din prototype, rulles længere tegnebræt automatisk i henhold til artboardets forudindstillede.

Rullevisning i skitseeksempel

Prototype feedback og samarbejde

Prototype i Sketch Cloud

Når du har defineret et startpunkt og har renset din prototype, kan du dele det på Sketch Cloud. Med Sketch Cloud kan du hurtigt gennemgå og kommentere design og prototyper. Dine kolleger og venner vil kunne gøre dette med et unikt link.

Hvis du desuden demonstrerer din prototype til et lille publikum, kan du bruge Sketch Mirror til at få vist din prototype på den enhed, den er designet til. Sketch Mirror er en iOS-modpart-app, der giver dig mulighed for at forhåndsvise dine designs nær realtid på en iPhone eller iPad. Når du starter Mirror på iOS, vil du se en forbindelsesmeddelelse i øverste højre hjørne eller Sketch's vindue. Klik på det for at oprette forbindelse.

Sketch Mirror, en iOS-modpart-app, til forhåndsvisning af design og prototyper via Wi-Fi ogUSB Lightning-kabel.

Version 49 bringer også delte biblioteker på Sketch Cloud og så meget mere. Tjek alt det, der er nyt i dette blogindlæg.

Design + Sketch og Sketch-appkilder er dedikeret til at give dig det bedste af Sketch. Oplev over 3000 ressourcer fra designer og udviklere over hele verden. Når du opretter dit næste Sketch-design eller prototype, kan du overveje at dele det med samfundet.