Vodiči za skice

Automatizacija dizajna grafikona

Trikovi i savjeti za vizualizaciju podataka za aplikaciju Sketch

Hej, kako ide? Jeste li čuli za ljestvice? Grafikoni, dijagrami i pite ključni su elementi dizajna koji omogućuju bilo kome da vizualizira podatke na ugodan način rada, kao i da se mogu koristiti u tisućama snimaka nadzorne ploče oko Dribbble-a. Dizajneri i drugi ljudi proizvode ih mnogo, ponekad ispočetka, automatski ih generira na temelju određenih vrijednosti.

Svaki put kada u javnosti kažete "veliki podaci" - negdje, rodila se ljestvica.

U najnovijem ažuriranju Frames for Sketch v.1.6 dodali smo komponente Charts-a u glavnu datoteku, pa ih svakako provjerite. I u ovoj ćemo epizodi pogledati značajke i proširenja vizualizacije podataka koja vam mogu biti od pomoći u vašem svakodnevnom radu s tim grafikama.

Stvaranje

Alat vektor (V) sadrži neke trikove za određene slučajeve korištenja dizajna grafikona. Evo nekoliko primjera:

  • Možete brzo ravnomjerno rasporediti vektorske i podatkovne točke odabirom određenih elemenata i distribucijom vodoravno [⌃⌘H] ili okomito [⌃⌘V] prema X ili Y koordinatama.
  • Da biste stvorili grafikone glatkog stila u obliku vala, postavite točke na "zrcalo", a držite oba ruku s tipkom Shift [⌃] za podešavanje razmaka.
  • Zatvorite svoje vektorske staze i koristite maske za brzo prebacivanje između linearnih i područja izgleda ljestvice.
  • Postavite novu točku na sredinu između dviju postojećih točaka klikom Shift.

Ali rad s vektorima može biti vrlo dugotrajan, a možda želim generirati linije i pite na temelju podataka koji su mi već dostupni, ovo je već računalno doba?

Ovdje su neka proširenja koja mogu biti korisna:

  • Dodatak s segmentiranim krugovima - zgodan je za izradu radijalnih dijagrama poput pita, krafni i kalibra.
  • Sketch data studio - Može generirati grafikone i tablice na temelju brojčanih podataka, ali uopće ne podržavaju promjenu veličine.
  • Obrtni ili generator sadržaja - Popularni alati zahvaljujući mogućnosti brze generacije različitih vrsta lažnih podataka.
  • Numbers and Excel - oboje mogu izvoziti PDF datoteke dobre izgleda, koje možete ispustiti u Sketch, a na raspolaganju su slojevi za grafikone i ćelije tablice.

Pomoću alata Frames (ili bilo koje druge kolekcije dijeljenih stilova) možete brzo dodijeliti boju svoje marke i prenijeti svojstva na vektorske staze i oblike iz PDF-a koji ste upravo uveli - ovo je ponekad ušteda u stvarnom vremenu.

Postoje i drugi alati koje možda želite spomenuti, ali mnogi od njih imaju svoje nedostatke kada je u pitanju promjena veličine ili prilagođavanje, što vas na kraju prisiljava na rad s vektorima ili prolazak kroz modalni scenarij kreiranja vremena grafikona nakon vremena.

Prilagođavanje

Prilagodba je uvijek važna kada je u pitanju vizual. Još uvijek je otvorena soba za igranje fontova ili boja, kao i potreba prilagodbe elemenata kako bi izgledali savršeno unutar različitih stanja sučelja, a ono što na web-nadzornoj ploči može izgledati sjajno može izgledati strašno na mobilnom uređaju.

Da bismo postigli automatiziraniju prilagodbu, koristimo zasebnu ploču za izradu upravljačke ploče za pohranu dijeljenih stilova koji se mogu lako prebrisati samo sa [⌘ + LM], što je vjerojatno jedna od najosnovnijih / najpopularnijih kombinacija tipki.

Upravljačka ploča sadrži različite boje i svojstva obruba pohranjene kao dijeljeni slojevi slojeva koji mogu sadržavati vrijednosti, liniju rešetki i os.

Ova ploča omogućuje mi da brzo preusmjerim grafiku za različite zadatke, marke i projekte, kontrolirajući više svojstava obruba i popunjavanja s jednog mjesta, a ne miješam se s brojnim stilovima.

Za stvaranje podatkovnih točaka koristite simbole različitih svojstava oblika i boja koji se mogu automatski ažurirati bojama iz vašeg vodiča za stil ili bilo koje druge biblioteke simbola

Ovdje možete pronaći .sketch datoteku koja sadrži podesivi linijski grafikon + dodatne slojeve dijeljenih slojeva koje možete koristiti kao radni materijal za svoje projekte i razumjeti kako postaviti prilagodljiv dizajn grafikona.

Pritisnite sliku za preuzimanje

Mapa mape linija podijeljena je u tri skupine: grafikon (linije i podatkovne točke), brojevi (vrijednosti Y) i mrežna linija (X vrijednosti) kako bi sve uspjelo i istegnulo se, postavite:

  • Pričvrstite vrijednosti osi X i Y na dno i s lijeve / desne strane grupe slojeva i postavite ih na fiksnu veličinu kako bi glavne linije bile neovisno fleksibilne.
  • Točke podataka stavite u odvojene skupine i poravnajte ih s X / Y vrijednostima koordinata.
  • Koristite jednu masku odjednom za koordinate linija kako biste istegnuli sve karte odjednom.

Testirajte ga da biste vidjeli najbolju količinu vrijednosti ili bodova za svoj grafikon i imali dobar dan.

Nadam se da je to korisno, a ako vas zanima napredniji pristup dizajnu skica - nabavite sebi primjerak Frames Design System i umjesto da trošite vrijeme na poravnavanje oblika i igranje sa grupama slojeva, koristite našu unaprijed pripremljenu kolekciju grafikona.

Pratite sada kad imamo tablice, grafikone i svaki drugi element koji se sinkronizira kroz našu knjižnicu korisničkog sučelja, možemo prijeći na sljedeću fazu složenog dizajna nadzorne ploče.

Prije nego što odeš

  • Preuzmite demo datoteku ovdje.
  • Ovdje možete pronaći više besplatnih resursa koji se odnose na grafikon → sketchappsources.com/charts
  • Pronađite razlog i slijedite me na Twitteru i Dribbbleu