Accentsconagua
Share
Tidligere i år ble Sketch 49 utgitt, og sammen med det noen etterlengtede prototypingsfunksjoner. I dagens gjennomgang vil jeg gå over alt du trenger å vite om prototyping i Sketch, fra må-kjenne snarveier, helt gjennom til å få tilbakemelding og samarbeide med teamet ditt om design og prototyper.
Sammen med utgivelsen av protoypingsfunksjoner kom fire nye ikoner i Sketchs verktøylinje. Kanskje det viktigste er hotspot som, når den er valgt, lar deg slippe et interaktivt hotspot på tavlen. Neste er Link til en kunstplate som gjør at du kan koble og koble til et hotspot til et målgavel eller mål. De Vis prototyping ikonet lar deg slå den gule / oransje prototyping-brukergrensesnittet på og av i skisse. Dette er flott hvis du fortsatt designer og ikke vil se alle koblingene og hotspots i appen. Til slutt er det Forhåndsvisning ikonet som gjør det mulig å åpne et forhåndsvisningsvindu, slik at du kan bruke prototypen din der i Sketch. Vi snakker om den ene i mye mer detalj senere.
Naturligvis har Sketch implementert noen få hurtigtastene med utgivelsen av prototypingsfunksjonene. Personlig elsker jeg å bruke snarveier - jeg håper du finner dem også nyttige!
For å få en god forståelse av hvordan både hotspots og koblinger fungerer, la oss se på deres egenskaper i Kontrollpanel. Hvis du klikker på et element, vil du legge merke til en liten kategori for Prototyping med et plussymbol (+) til høyre (akkurat det samme som med Fill, Borders, and Shadows). Hvis du klikker på +, det vil slå elementet inn i et hotspot, og vil automatisk la deg legge til en kobling for det hotspotet også. Hvis du klikker vekk fra elemnt vil du miste hotspot. Men hvis du legger til en kobling, vil du da få tilgang til prototypegenskaper for det aktuelle hotspotet.
Prototypegenskapene er relativt enkle, da Sketch prototyping ennå ikke er blitt for komplisert eller omfattende.
Først er det Mål fall ned. Dette er hvor hotspotet kobles til og hvor du tapper på hotspotet, tar deg neste gang. Standard er det du allerede har valgt, men på dette punktet kan du:
Den siste tingen å vite om eiendommer i inspektøren er animasjoner. Dette dikterer overgangen som finner sted når hotspotet klikkes. Du har flere alternativer her:
Hotspots kan opprettes på to måter. Du kan manuelt opprette et rektangel på en tavla på samme måte som du manuelt skal tegne et rektangel eller et tekstlag. Alternativt kan du velge et bestemt lag eller element. Ethvert designelement kan omdannes til et hotspot, inkludert symboler!
Et hotspot i aksjonNår det gjelder symboler spesifikt, kan et hotspot plasseres innsiden et symbol, i stedet for å bruke en symboleksempel som et hotspot. Hvis du har et hotspot inne i et symbol, blir det gjentatt med hvert symboleksempel, men du kan tilsidesette det akkurat som alle andre symbolegenskaper som for eksempel et bilde, et ikon eller en tekst. Du kan også overstyre hotspotet helt, og effektivt fjerne det fra et symbol. På denne måten får du igjen bruk av symboler til kua kommer hjem uten å bekymre deg for unødvendige hotspots.
En kul liten detalj som Sketch følger med prototyping er et ikon i lag liste. Dette er det samme konseptet de har på med Symboler og Eksporterbare skiver. Tilstedeværelsen av et Hotspot-ikon i lagene gjør prototypingsopplevelsen litt mer forståelig.
Denne funksjonen er spesielt nyttig for lengre sider for mobile design! Skisse gjør det mulig å bla for lengre tavler. I videoeksempelet nedenfor ser du artikkelsvisningen for dummy-brukergrensesnittet jeg bruker for denne gjennomgangen. Du trenger ikke å bekymre deg for å sette inn noe for å få sider til å bla.
EN Startpunkt er standard artboard hvor prototypen din begynner. Som standard er det ikke en, noe som betyr at hvis du velger å forhåndsvise prototypen, åpnes den på tavla som ble valgt ved forhåndsvisningen.
Definere et startpunkt er mye mer nyttig når du er klar til å dele den med noen. For å velge en, naviger til ønsket startliste og åpne den Forhåndsvisning. Øverst i forhåndsvisningsvinduet, velg det lille Flagg ikon. Hver gang du forhåndsviser prototypen fra nå av, vil den begynne fra det utgangspunktet artikkelen.
Fravelg flaggikonet (slå det grå igjen) fjerner det som utgangspunkt, men du kan ha mer enn ett startpunkt. Hvis du velger flaggikonet på et annet tavle, vil det ikke bli fjernet fra noen andre!
"Det er sannsynlig at du vil definere et Startpunkt i begynnelsen av en flyt, men du kan også definere flere Startpoeng - en funksjon som vil være veldig nyttig når du bygger mer komplekse prototyper som inneholder mange artboards, eller hvis du vil bare at andre skal se en bestemt del av prototypen din. "- Sketch docs
For øyeblikket kan du forhåndsvise prototypen din i Skisse ved hjelp av Forhåndsvisning trekk. Vi har diskutert dette et par ganger allerede. Et vindu vil komme over Sketch app, og du kan klikke rundt og sørge for at du har ting satt opp riktig.
Det er en annen måte å forhåndsvise prototypen din på. Hvis du jobber spesielt med mobile design, kan du bruke den i Sketch Mirror. På både iPhone og iPad kan du koble enheten til Sketch. Du kan deretter forhåndsvise prototypen mer innfødt og i en skikkelig innstilling. Hotspots vil automatisk være der, interaktive og alle.
Hverken Sketch Mirror eller Preview-vinduet, gjør det enkelt å dele prototyper med andre mennesker. Så hvis du ønsker å sende den til laget ditt, eller å kjøre en rask brukbarhetstest, må du gjøre det gjennom Sketch Cloud. En prototype kan ses og brukes gjennom Sketch Cloud av alle som har en lenke. Du kan ikke eksportere en prototype som om du ville noe annet design eller element fra appen.
Du laster opp prototypen som standard når du laster opp det nåværende dokumentet til Sketch Cloud. Det blir bare eksportert med dokumentet.
Hvis du har definert et startpunkt, blir prototypen plassert under sin egen prototype-seksjon i dokumenter på Sketch Cloud. Dette er det eneste ekstra trinnet du må ta for å sikre at prototypen din er lett tilgjengelig gjennom Sketch Cloud. Når du klikker på prototypen din, starter den selvfølgelig på startpunktet og vil være interaktiv, alt klar til å gå!
Del lenken til prototypen for at alle skal få tilgang til og bruke den.
For å hjelpe samarbeid, kan du få folk til å legge igjen kommentarer på prototypen din (hvis du har kommentarer aktivert i Sketch Cloud). De vil være i stand til å legge igjen kommentarer til deg på individuelle skilt i prototypen.
For mer hjelp, ta en titt på Sketchs premade Prototyping Template.
Det er under Fil> Ny fra mal> Prototyping-mal og har en haug med sidenotater i den som forklarer funksjonene.
Den nye Sketch prototyping-funksjonen er rudimentær (for eksempel har den bare fire animasjonsegenskaper). Det bør imidlertid gjøre rask prototyping mye enklere. Du trenger ikke lenger å eksportere designene dine, og deretter importere dem til et eksternt verktøy som UXPin eller til og med Marvel.
Jeg tror det kan forbedre arbeidsflyten for designere som ikke trenger noe fancy eller kraftig. Den bør passe inn sømløst inn i arbeidsflytene sine; spesielt så hvis de allerede bruker Sketch Cloud. Hvis du trenger å raskt og raskt sette noe sammen for å vise brukerens flyt av designene dine, vil dette definitivt gjøre kunsten. Det vil hjelpe teamet til å utføre en innledende flyt eller brukervennlighetstest også. På dette punktet tror jeg ikke det er livsforandrende, men jeg kan definitivt se meg selv ved hjelp av Sketchs prototyping ved å dele med klientens UI-design for kommende prosjekter.
Har du allerede brukt Sketch prototyping-funksjonen? Hva tenker du om det? Hvordan passer det inn i arbeidsflyten din? Del med oss en lenke til en prototype du eksporterte til Sketch Cloud, slik at vi kan ta en titt også!
