Luonnosoppaat

Kartan suunnittelun automatisointi

Tietojen visualisointi temppuja ja vinkkejä Sketch-sovellukseen

Hei miten menee? Oletko kuullut kaavioista? Kaaviot, kaaviot ja piirakat ovat tärkeitä suunnitteluselementtejä, joiden avulla kuka tahansa voi visualisoida tietoja mukavalla silmämääräisella tavalla, ja niitä voidaan käyttää myös tuhansissa kojelaudan kuvauksissa Dribbblen ympärillä. Suunnittelijat ja muut ihmiset tuottavat paljon heistä, joskus tyhjästä, tuottaen ne automaattisesti tiettyjen arvojen perusteella.

Joka kerta kun sanot ”big data” julkisesti - jossain, kaavio syntyi.

Viimeisimmässä kehyksessä Sketch v.1.6 -päivityksessä olemme lisänneet kaaviokomponentit päätiedostoon, joten muista tarkistaa ne. Ja tässä jaksossa tarkastellaan tietojen visualisointiominaisuuksia ja laajennuksia, joista voi olla apua päivittäisessä työssäsi näiden grafiikoiden kanssa.

luominen

Vektori (V) -työkalulla on joitain temppuja tietyille kaavion suunnittelukäyttötapauksille. Tässä muutamia esimerkkejä:

  • Voit levittää nopeasti vektori- ja datapisteitä tasaisesti valitsemalla tietyt elementit ja jakamalla ne vaakasuoraan [⌃⌘H] tai pystysuunnassa [⌃⌘V] X- tai Y-koordinaattien mukaan.
  • Luo sujuvan aallon tyyppisiä tyylikarttoja asettamalla pistetyypiksi ”peili” ja pitämällä molempia käsittelijöitä painikkeella Shift [⌃], kun etäisyyttä säädetään.
  • Sulje vektorireitit ja käytä maskeja siirtyäksesi nopeasti lineaarisen ja alueen näköisen kaavion välillä.
  • Sijoita uusi piste keskelle kahden olemassa olevan pisteen väliin Vaihto-napsautuksella.

Mutta vektoripisteiden kanssa työskenteleminen voi olla erittäin aikaa vievää, ja ehkä haluan luoda rivejä ja piirakoita jo saatavilla olevan tiedon perusteella, tämä on jo tietokonekausi?

Joten tässä joitain laajennuksia, jotka saattavat olla hyödyllisiä:

  • Segmentoidut ympyrät -laajennus - kätevä radiaalisten kaavioiden, kuten piirakka, munkki ja mittari, luomiseen.
  • Sketch data studio - Voi luoda kaavioita ja taulukoita numeerisen datan perusteella, mutta ei tue mitään koon muuttamista.
  • Käsityö- tai sisältögeneraattori - Suositut työkalut ansiosta, että kyetään nopeasti tuottamaan erityyppisiä dummy-tietoja.
  • Numerot ja Excel - Molemmat voivat viedä hyvän näköisiä PDF-tiedostoja, jotka voit pudottaa Sketchiin ja joilla on kerroksia käytettävissä kaavioille ja taulukkosoluille.

Voit käyttää Kehykset-työkalupakkia (tai mitä tahansa muuta jaettua tyylikokoelmaa) määrittääksesi tuotemerkin värit nopeasti ja viivaominaisuudet juuri tuomasi PDF-tiedoston vektoripolkuihin ja muotoihin - tämä on joskus reaaliaikainen säästäjä.

Siellä on myös muita työkaluja, jotka haluat ehkä mainita, mutta monilla niistä on omat haittapuolensa koon muuttamisessa tai räätälöinnissä, mikä pakottaa lopulta työskentelemään vektoreiden kanssa tai käymään läpi modulaarisen ikkunan skenaarion luomaan kaavioajan. ajan jälkeen.

Räätälöinti

Mukauttaminen on aina tärkeää visuaalien suhteen. Vielä on avoin huone, jossa voi pelata fontteilla tai väreillä, ja tarve säätää sisältöä niin, että se näyttää täydelliseltä eri käyttöliittymätiloissa, ja mikä voi näyttää hyvältä verkon kojetaululta, se voi todennäköisesti näyttää kauhealta mobiililaitteissa.

Automaattisemman räätälöinnin aikaansaamiseksi käytämme erillistä kuvataulua ohjauspaneelin tallentamiseen jaettuja tyylejä varten, jotka voidaan helposti korvata vain [⌘ + LM] -sovelluksella, joka on todennäköisesti yksi peruselimellisimmistä / suosituimmista näppäinyhdistelmistä.

Ohjauspaneeli sisältää erilaisia ​​värejä ja reunusominaisuuksia, jotka on tallennettu jaetuiksi kerrostyyleiksi, joita voidaan käyttää arvoille, ruudukkoviivoille ja akseleille.

Tämän paneelin avulla voin nopeasti muokata erilaisia ​​grafiikoita erilaisille tehtäville, tuotemerkeille ja projekteille, hallita useita reunuksia ja täyttöominaisuuksia yhdestä paikasta enkä sekoitu lukuisiin tyyleihin.

Datapisteiden luomiseen käytetään symboleita, joilla on eri muodot ja väriominaisuudet, jotka voidaan päivittää automaattisesti tyylioppaan tai minkä tahansa muun symbolikirjaston väreillä.

Täältä löydät .sketch-tiedoston, joka sisältää säädettävän viivakaavion + ylimääräiset jaetut kerrosmallit, joita voit käyttää projektimateriaalina, ja ymmärtää kuinka reagoiva kaavion suunnittelu määritetään.

Lataa kuva painamalla kuvaa

Viivakarttakansio on jaettu kolmeen ryhmään: Kaavio (viivat ja datapisteet), Numerot (Y-arvot) ja Ruudukko (X-arvot), jotta kaikki toimisi hyvin ja venyisi, aseta:

  • Kiinnitä X- ja Y-akselien arvot kerrosryhmän pohjalle ja vasemmalle / oikealle puolelle ja aseta ne kiinteään kokoon, jotta pääjohdoista tehdään itsenäisesti joustavia.
  • Laita datapisteet erillisiin ryhmiin ja kohdista ne X / Y-koordinaattiarvoihin.
  • Käytä yhtä maskia kerralla linjakoordinaatteihin venyttääksesi kaikki kaaviot kerralla.

Testaa sitä nähdäksesi paras määrä arvoja tai pisteitä, jotka kaaviollasi on ja on hyvä päivä.

Toivottavasti se on hyödyllinen, ja jos olet kiinnostunut edistyneemmästä luonnossuunnittelutavasta - hanki itsellesi kopio Frames Design System -sovelluksesta. Sen sijaan, että viettäisit aikaa muotoilujen sovittamiseen ja kerrosryhmiin pelaamiseen, käytä esivalmistettua kokoelmakaavioamme.

Pysy ajan tasalla nyt, kun meillä on taulukoita, kaavioita ja kaikki muut elementit synkronoituina käyttöliittymäkirjastoomme kautta, voimme siirtyä monimutkaisen kojelaudan suunnittelun seuraavaan vaiheeseen.

Ennen kuin lähdet

  • Lataa demon tiedosto täältä.
  • Lisää ilmaisia ​​kaavioihin liittyviä resursseja täällä → sketchappsources.com/charts
  • Löydä syy ja seuraa minua Twitterissä ja Dribbblessa