Du kan nu let tegne smukke spiral- og helixformer i Sketch

TLDR;

  • 6Spiral er et gratis plugin til Sketch til let at tegne spiralformer.
  • Du kan også tegne helixformer i en specificeret vinkel i parallelprojektion til brug i de stadig mere populære 3D-ish-isometriske illustrationer.
  • Du kan få plugin her (eller installere det via Sketch Runner). Der er også en separat sketch-fil med en tutorial og nogle eksempler, som du kan downloade.
  • Genvejen til plugin er Control + Shift + 6. spiralens første punkt er placeret i midten af ​​den aktuelle form.
  • Opdatering: Seneste version v1.0.2 fungerer med Sketch 52 (frigivet 2. oktober 2018). Hvis du er på Sketch 51.3, skal du bruge version 1.0.1.

Sådan bruges 6Spiral

Til venstre: At lave en spiral. Til højre: At lave en helix.
  1. Download den seneste udgave af plugin.
  2. Pak ud og dobbeltklik på 6Spiral.sketchplugin for at installere plugin.
  3. Lav et rektangel og med det valgte rektangel skal du gå til Plugins -> 6Spiral - Lav Spiral eller bruge genvejen Control + Shift + 6.
  4. Skift parametre for at få formen på den spiral / helix, som du gerne vil se i de ovennævnte GIF'er.
    (Bortset fra at ændre linjebredden kan du ikke anvende stylingindstillinger, mens du opretter formen.)
  5. Du ønsker måske at gøre nogle foreslåede almindelige oprydningstrin, før du anvender din egen stil. (Mere info i næste afsnit).

Oprydning efter spiral er foretaget

6Spiral opretter altid et oprindelsespunkt, som derefter kan slettes.
(Hvis den indvendige radius er indstillet til nul, vil der være to punkter ved formens oprindelsessted, og du skal slette et.)

Du vil sandsynligvis ændre grænseegenskaber til at have afrundede ender og sammenføjninger.

En dejlig måde at skabe en helt jævn spiral på er at indstille en stor hjørneradius på alle punkter (undtagen på de sidste og første punkter).

Anvendelse af sidste hånd på spiralformen. Eksemplet i gif bruger virkelig lavt punktantal for bedre at illustrere effekten af ​​hjørneradius. Brug et større pointantal, hvis dit mål er at skabe en jævn spiral.

Hvor skal man bruge spiraler

Her er et par UI-begreber om anvendelse af spiraler som indikatorer for fremdriftsindikatorer:

Konceptuel fremgang / statuslinje UI-design ved hjælp af spiralformer. Ved firkantede eller cirkulære skærme er spiraler virkelig gode med hensyn til pladsudnyttelse, hvis du har brug for at vise en længere statuslinje på en lille skærm.

Spiraler kan være nyttige til smart watch UI-design til fremdriftsbjælker og datavisualisering, hvor pladsen er begrænset.

På større skærme er der potentiale til at bruge dem i spil-HUD-design.

Stadig er brug af spiralfremgangsmåler ikke et almindeligt designmønster, og det er vigtigt at overveje, om det introducerer mere friktion for dine brugere, og hvor lang tid det vil tage dem at forstå og blive fortrolige med grænsefladen.

Spiraler bruges mere ofte i ikon- og logo-design og i illustrationer, og forhåbentlig kan dette plugin forbedre designprocessen i disse tilfælde.

Eksempler på nogle af de eksisterende spiralikoner, der kan findes på thenounproject.com.

Derudover kan du også kombinere 6Spiral med andre Sketch-plugins, som Looper og Sketch Isometric til nogle interessante effekter:

Til venstre: 6Spiral + Looper. Til højre: 6Spiral + Sketch isometrisk

Sådan bruges spiraler

For de web- og browserbaserede apps kan du eksportere som SVG og derefter kan du animere / kontrollere egenskaberne for slag-dasharray og stroke-dashoffset med CSS og Javascript. Det er nyttigt at arbejde med SVG'er til prototyper, selvom det endelige produkt skal bruges til at eksportere og arbejde med forskellige formater.

GIF af ovenstående CSS-animation.

Nu er det din tur til at lave flot spiraler

Det ville være dejligt at se, hvad folk ender med at gøre dette plugin.
Udstationering af alt arbejde, der er foretaget ved hjælp af dette plugin, i kommentarfeltet til denne artikel opfordres meget.
Du er velkommen til at medtage et link, hvis du også har sendt det design på din Behance / Dribbble / UpLabs osv. -Profil.

Afslutter

Glad for at høre om eventuelle forslag til fremtidige funktioner, du gerne vil se i plugin. Du kan nå mig via e-mail på matej.marjanovich@gmail.com eller @MatejMarjanovic på Twitter. Fejl rapporteres bedst via Github .

Håber du nyder plugin og indholdet.
Hvis du gør det, kan du give et par help hjælpe andre læsere som dig med at finde denne artikel.