Kuinka suunnitella taulukko: On-Point-opas sen tekemiseen oikein
Taulukot ja ruudukot ovat yleisiä digitaalisia tuotteita ja kojelaudoita suunniteltaessa. Tietotaulukot auttavat järjestämään suuren osan tiedoista.
He esittävät tiedot luettavammin ja ymmärrettävämmin. Ne auttavat myös korostamaan tärkeää dataa ja parantamaan tietojen visualisointia.
Taulukoita käytetään usein käyttöliittymäkomponenttina, mutta monet tekevät silti virheitä tietotaulukoiden suunnittelussa. Jotkut pöytämallit ovat täynnä visuaalista kohinaa tai ovat liian monimutkaisia, mikä johtaa huonoon käyttökokemukseen.
Oikean taulukon käyttöliittymäsuunnittelun hankkiminen luo parempia tietojen visualisointeja ja vertailuja. Pöytien oikea suunnittelu tekee niistä houkuttelevia ja parantaa luettavuutta.
Tämä opas näyttää, kuinka voit optimoida tietotaulukon suunnittelun ja parantaa taulukon toimivuutta.
Tietotaulukoiden suunnittelu oikealla tavalla
Pöytäsuunnittelua suunniteltaessa on huomioitava kaksi asiaa: pöydän tyyli ja pöydän toiminnallisuus.
Pöydän tyyli
Taulukon tietojen tasaus
Voit erottaa tekstin numeerisista tiedoista kohdistamalla tekstin vasemmalle ja numerot oikealle. Tällainen kohdistus helpottaa kahden eri tiedon vertailua.
Taulukon otsikoiden tulee myös olla kohdakkain niiden saraketietojen kanssa jäsenneltyä taulukkoa varten.
Joissakin taulukon soluissa voi olla useita tekstirivejä, kuten kuvauksia. Tällaisen sisällön pystysuuntaisen tasauksen tulee olla yläreunassa.
Muutoin saraketietoja ei kohdisteta keskenään.
Lisätään suositeltu osio
Hinnoittelutaulukko, jonka voit luoda wpDataTablesilla
Suositeltu osa on taulukon sarake, rivi tai solu, jota kirjoittaja haluaa korostaa. Sitä käytetään yleensä hinnoittelutaulukoissa tai tilaussuunnitelmien vertailussa.
Käytä suositeltua osiota korostaaksesi tärkeitä tietoja taulukosta. Tämä voi olla edullisin suunnitelma tai suosittu elementti esimerkiksi listan joukossa.
Voit luoda suositellun osan muuttamalla solujen muotoilua. Muokkaa esimerkiksi solun täyttöväriä tai tekstin fonttikokoa, jotta se erottuu joukosta.
Värien levittäminen
Tietotaulukossa ei saa olla liikaa värejä. Käytä niitä vain taulukoiden otsikoissa, negatiivisissa ja positiivisissa trendeissä ja suosituissa osioissa.
Liian monien värien lisääminen aiheuttaa visuaalista kohinaa. Tämän vuoksi on vaikea erottaa elementtejä, jotka on korostettava.
Käytä tummempia harmaan sävyjä fontin värinä ja vaaleampia harmaan sävyjä reunavärinä tavallisen mustan värin sijaan. Pehmeämpien mustan sävyjen käyttö tekee siitä vähemmän intensiivisen, mikä vähentää silmien rasitusta.
Käytä erilaisia värejä, kun erotat luokkia tai korostat korkeimpia ja pienimpiä arvoja. Voit korostaa tiettyjä taulukon osia käyttämällä kirkkaampia tai rohkeampia täyttövärejä, jotta ne erottuvat muista.
Vaihtelevat rivin värit
Taulukko yhdistetyillä soluilla, jonka voit luoda wpDataTablesilla
Rivien värien vaihtaminen parantaa luettavuutta. Se asettaa visuaalisia vihjeitä, auttaa ihmisiä seuraamaan tietoluetteloa ja yhdistämään tietoja.
Tämä on erityisen hyödyllistä luotaessa suurta tietokantaa. Se toimii hyvin myös pienissä tietotaulukoissa.
Luo seepraraitavaikutelma vaihtamalla valkoista täyteväriä tummempaan väriin, kuten vaaleanharmaaseen. Jos käytät muita värejä, käytä vaaleaa täyteväriä ja vaihda se hieman tummempaan sävyyn.
Käytä yksivälistä fonttia
Jos haluat jäsennellymmän taulukon suunnittelun, käytä yksivälistä kirjasintyyliä numeerisille tiedoille.
Taulukkomaisella tai yksivälisellä fontilla on kiinteä leveys ja välit jokaiselle merkille. Tämä parantaa typografiaa ja luettavuutta.
Esimerkkejä yksivälisistä fonteista ovat Courier, Courier New, Lucida Console ja Monaco.
Parantaaksesi symmetriaa entisestään, muista muotoilla numerot samanpituisiksi, kuten esimerkiksi päivämäärät. Sen sijaan, että kirjoitat 15.3.2019, muotoile päivämäärä 15.3.2019.
Taulukon tietojen visualisointi
Muuta saraketiedot vaakasuuntaisiksi pylväskaavioiksi. Tämä auttaa visualisoimaan tietoja ja luomaan yleiskatsauksen.
Vaakasuuntaisten pylväskaavioiden avulla käyttäjät voivat verrata tietojoukkoja ja tulkita niitä helposti. Jokainen palkki sijaitsee sarakkeessa edustamiensa tietojen vieressä pystysuunnassa tasattuina ja riveihin jaettuina.
Pylväskaavion lisääminen usein laajentaa saraketta liikaa. Harkitse siis palkkien näyttämistä vain tärkeiden arvojen visualisoimiseksi.
Toinen tapa visualisoida taulukkotietoja on käyttää lämpökarttoja.
Lämpökartat säätävät solun taustan värisävyä tai täyttöväriä solun numeerisen arvon perusteella luoden yhden värin gradientin. Mitä suurempi numeroarvo, sitä tummemmaksi täyttöväri tulee.
Taulukon toiminnallisuus
Tee siitä reagoiva
Tehokas tietotaulukko toimii hyvin eri laitteilla. Sen on näytettävä tiedot luettavalla tavalla, kun se avataan älypuhelimissa, tableteissa ja kannettavissa tietokoneissa.
Taulukoiden katseleminen pienemmillä näytöillä vaatii paljon muutoksia taulukon suunnitteluun. Suurille pöytäkoneille rakennettu pöytäsuunnittelu ei välttämättä toimi pienemmillä laitteilla.
Testaa taulukkoa mobiililaitteilla. Varmista, että käyttäjät voivat selata tietoja ilman loputonta selaamista.
Varo kutistettuja sarakkeita ja piilotettuja tekstejä, koska ne heikentävät käyttökokemusta.
Muista, että pienemmillä näytöillä kapeat sarakkeet ovat parempia. Pylväitä voidaan ohuempia eri tavoilla.
Tämä sisältää kuvakkeiden, lyhenteiden, lyhyemmän numeromuodon ja pyöristetyn numerotietojen käytön. Joten 2,5 metriä 2 500 000 sijasta ja 0,3 0,3241:n sijaan.
Ota käyttöön sarakkeiden uudelleenjärjestäminen
Suuria tietotaulukoita on joskus vaikea lukea niiden koon ja tietomäärän vuoksi. Kun käyttäjät voivat järjestää sarakkeita uudelleen, he voivat keskittyä sarakkeisiin, jotka heidän on luettava.
Se tarkoittaa myös sitä, että he voivat tehdä tämän rullaamatta edestakaisin. Tämä auttaa käyttäjiä minimoimaan sotkua, sulattamaan pieniä tietoja ja järjestämään sarakkeet tarpeidensa mukaan.
Harkitse kiinteän rivin korkeuden käyttöä
Taulukko, jonka voit luoda wpDataTablesilla
Jos tietotaulukko sisältää useita sarakkeita, ankkuroi ensimmäiset sarakkeet. Tämä säilyttää kontekstin, kun käyttäjät selaavat taulukon muuta osaa.
Mukautettavien sarakkeiden käyttö on erittäin suositeltavaa. Mutta taulukon riveillä on oltava kiinteä korkeus symmetrian säilyttämiseksi ja lukijoiden hämmennyksen välttämiseksi.
Tiedoista riippumatta kiinteä rivikorkeus parantaa taulukon käyttöliittymän suunnittelua ja visuaalista ilmettä.
Sivutuksen käyttäminen pitkissä tietotaulukoissa
Sivutettu taulukko, jonka voit luoda wpDataTablesilla
On olemassa kirjoittamaton sääntö, jonka mukaan datataulukot eivät saa olla pidempiä kuin työpöydän näyttö. Tämä ei kuitenkaan ole mahdollista, jos tietotaulukko on pitkä.
Estä pitkiä tietotaulukoita viemästä suurta osaa verkkosivusta ja maksimoi tyhjä tila. Tee tämä ottamalla käyttöön sivutusominaisuus.
Tämä myös ohjaa lukijoita taulukon läpi ja auttaa heitä navigoimaan.
Kun käytät sivutusta, sisällytä sivunumero, joka näyttää kuinka monta sivua on ja millä sivulla lukijat ovat. Lisäksi antaaksesi käyttäjille enemmän hallintaa, anna heidän mukauttaa kuinka monta riviä he voivat tarkastella sivulla.
Sisällytä taulukon lajitteluominaisuus
Antamalla käyttäjille mahdollisuuden hallita tietotaulukkoa enemmän, taulukon käyttöliittymän suunnittelu paranee. Jos taulukko sisältää paljon tietoa, yksi tapa auttaa lukijoita löytämään tarvitsemansa tiedot on lisätä lajitteluominaisuus.
Lajittelun avulla käyttäjät voivat järjestää tiedot tiettyjen loogisten järjestysten mukaan .
Tämä voi olla aakkosjärjestys, päivämäärää ja kellonaikaa muokattu, nouseva, laskeva ja paljon muuta. Mitä enemmän vaihtoehtoja, sen parempi.
Toinen tapa lajitella tietoja on sisällyttää hakukenttä. Näin lukijat voivat etsiä tiettyjä tietoja, kuten yrityksen nimeä, sijaintia, tuotteita ja muuta.
Tietojen suodatus
Taulukko suodattimilla, jotka voit luoda wpDataTablesilla
Tietojen suodattaminen on toinen tapa lisätä tietotaulukon toimivuutta. Käyttäjät voivat sulattaa suuria tietomääriä, ymmärtää trendejä ja tehdä vertailuja.
He voivat myös paikantaa tiettyjä tietoja ja analysoida monimutkaisia tietoja. Tämä koskee erityisesti numeerisia tietotaulukoita.
Varmista, että käyttäjät voivat mukauttaa parametreja tai suodatinjoukkoja tietyille sarakkeille. Sisällytä myös edistynyt suodatusvaihtoehto, jolla voit tallentaa luomansa suodatinsarjan tulevaa käyttöä varten.
Säilytä konteksti, käytä kiinteitä otsikoita ja lukittuja sarakkeita
Suuren tietotaulukon lukeminen vaatii paljon pysty- ja vaakavieritystä. Kontekstin säilyttämiseksi ankkuroi sarakkeiden otsikot sekä ensimmäinen sarake tai muutama ensimmäinen sarake.
Microsoft Excel ja Google Sheets viittaavat ankkuroituihin sarakkeisiin "jäädytettyinä".
Taulukossa liikkumisen helpottamiseksi lisää täysi rivivalinta. Näin käyttäjät voivat merkitä tärkeitä rivejä vieriessään vaakasuunnassa.
Tämä voi olla hankalaa, jos taulukossa on laajennettavia rivejä, ja seurauksena voi olla erilainen vaikutus.
Viimeisiä ajatuksia pöydän oikeasta suunnittelusta
Kun tiedät, mitä tulee ottaa huomioon luotaessa taulukon käyttöliittymäsuunnittelua, voit luoda tehokkaita taulukoita. Niiden avulla käyttäjät voivat vertailla tietoja ja lajitella tietoja, ja ne myös lisäävät luettavuutta.
Pöydän suunnittelun oppiminen auttaa suunnittelijoita vähentämään visuaalista kohinaa ja hyödyntämään tyhjää tilaa. Tässä annetut suunnitteluvinkit voivat optimoida taulukon suunnittelun ja käyttäjätiedot.
Näiden vinkkien noudattaminen parantaa pöydän yleistä tyyliä ja toimivuutta. Lisäksi ne auttavat parantamaan käyttäjäkokemusta ja brändikuvaa.
Jos pidit tämän artikkelin lukemisesta taulukon suunnittelusta, sinun kannattaa tutustua tähän tietotaulukon tekemiseen.
Kirjoitimme myös muutamista aiheeseen liittyvistä aiheista, kuten esimerkeistä datataulukoista, hinnoittelutaulukoiden esimerkkeistä, DataTables-vaihtoehdoista, JavaScript-taulukkokirjastosta, WordPressin taulukkolaajennuksista , taulukon luomisesta WordPressiin ilman lisäosaa, taulukon lisäämisestä WordPressiin, WordPressin hinnoittelusta taulukkolaajennukset ja tilastotaulukoiden luominen WordPressissä.