Skitsevejledninger

Kortdesign-automatisering

Data visualisering tricks og tip til Sketch-appen

Hey hvordan går det? Har du hørt om diagrammer? Diagrammer, diagrammer og tærter er vigtige designelementer, der giver enhver mulighed for at visualisere data på en behagelig øjenmåde samt bruges i tusinder af instrumentbrætbilleder omkring Dribbble. Designere og andre mennesker producerer mange af dem, undertiden fra bunden, og genererer dem automatisk baseret på specifikke værdier.

Hver gang du siger “big data” offentligt - et sted fødte man et diagram.

I den seneste opdatering af Frames for Sketch v.1.6 har vi tilføjet diagramkomponenter til masterfilen, så sørg for at tjekke dem ud. Og i denne episode vil vi kigge på datavisualiseringsfunktioner og udvidelser, der kan være nyttige i dit daglige arbejde med disse grafik.

Skabelse

Vektor (V) værktøjet har nogle tricks til visse tilfælde af kortdesignbrug. Her er nogle eksempler:

  • Du kan hurtigt sprede vektor- og datapunkter jævnt ved at vælge visse elementer og distribuere dem vandret [⌃⌘H] eller lodret [⌃⌘V] i henhold til X- eller Y-koordinaterne.
  • For at skabe glatte bølgelignende stilkort skal du indstille punkter til “spejl”, og hold begge håndterere med Shift [⌃] -knap, når du justerer afstanden.
  • Luk dine vektorstier og brug masker til hurtigt at skifte mellem lineære og områdesejede diagrammer.
  • Placer et nyt punkt midtvejs mellem to eksisterende punkter med Skift-klik.

Men det kan være meget tidskrævende at arbejde med vektorpunkter, og måske vil jeg generere linjer og tærter baseret på de data, der allerede er tilgængelig for mig, dette er en computeralder allerede?

Så her nogle udvidelser, der kan være nyttige:

  • Segmenteret cirkler plugin - Praktisk til oprettelse af radiale diagrammer som Pie, Donut og Gauge.
  • Sketch data studio - Kan generere diagrammer og tabeller baseret på numeriske data, men understøtter overhovedet ikke nogen ændring af størrelse.
  • Håndværks- eller indholdsgenerator - Populære værktøjer takket være evnen til hurtigt at generere en anden type dummy-data.
  • Numre og Excel - Begge kan eksportere flot PDF-filer, som du kan falde ind i Sketch og have lag tilgængelige til diagrammer og tabelceller.

Du kan bruge Frames-værktøjssæt (eller en hvilken som helst anden samling af delte stilarter) til at tildele din mærkefarve hurtigt og strege egenskaber til vektorstier og -former fra den PDF, du lige har importeret - dette er nogle gange en realtidsbesparelse.

Der er også andre værktøjer derude, som du måske vil nævne, men mange af dem har deres egne ulemper, når det kommer til størrelse eller tilpasning, som til sidst tvinger dig til at arbejde med vektorer eller gå gennem det modale vinduescenarie med at oprette en korttid efter gang.

Tilpasning

Tilpasning er altid vigtig, når det kommer til visuals. Der er stadig et åbent rum til at lege med skrifttyper eller farver samt behovet for at justere aktiverne til at se perfekt ud i forskellige grænsefladetilstander, og hvad der kan se godt ud på et webdashboard kan sandsynligvis se forfærdeligt ud på mobilen.

For at opnå mere automatiseret tilpasning bruger vi et separat tegnebræt til at lave et Kontrolpanel til opbevaring af delte stilarter, der let kan overskrives med bare [⌘ + LM], hvilket sandsynligvis er en af ​​de mest basale / populære tastekombinationer.

Kontrolpanelet indeholder forskellige farver og grænseegenskaber, der er gemt som delte lagstilarter, der kan til værdier, gitterlinje og akse.

Dette panel giver mig mulighed for hurtigt at genoprette grafik til forskellige opgaver, mærker og projekter, kontrollere flere grænser og udfylde egenskaber fra et enkelt sted og ikke blive rodet med adskillige stilarter.

For at oprette datapunkter skal du bruge symboler med forskellige former og farveregenskaber, som kan opdateres automatisk ved hjælp af farver fra din stilguide eller ethvert andet symbolbibliotek

Her kan du finde en .sketch-fil, der indeholder justerbar linjediagram + yderligere delte lagstilarter, som du kan bruge som arbejdsmateriale til dine projekter, og til at forstå, hvordan du indstiller et responsivt diagramdesign.

Tryk på billedet for at downloade

Linjediagrammappe er opdelt i tre grupper: Diagram (linjer og datapunkter), Tal (Y-værdier) og Gridline (X-værdier) for at få alt til at fungere godt og strække, sæt:

  • Fastgør X- og Y-aksernes værdier til bunden og til venstre / højre side af laggruppen, og indstil dem til en fast størrelse for at gøre hovedlinjerne uafhængigt fleksible.
  • Sæt datapunkter i separate grupper, og juster dem med X / Y-koordinatværdierne.
  • Brug en maske på én gang til linjekoordinater til at strække alle diagrammer på én gang.

Test det for at se den bedste mængde værdier eller point, som dit diagram har, og få en god dag.

Håber, at det kommer godt med, og hvis du er interesseret i en mere avanceret skitsedesigntilgang - få dig selv en kopi af Frames Design System, og i stedet for at bruge tid på at justere figurer og lege med laggrupper, skal du bruge vores premade-samling af diagrammer.

Hold øje med nu, når vi har tabeller, diagrammer og ethvert andet element synkroniseret gennem vores UI-bibliotek, kan vi gå til det næste trin i kompleks dashboarddesign.

Før du går

  • Download demofilen her.
  • Flere gratis diagramrelaterede ressourcer her → sketchappsources.com/charts
  • Find en grund og følg mig på Twitter og Dribbble