Tietotaulukot ovat hyviä käyttöliittymän suunnitteluelementtejä, jotka tarjoavat rakenteen verkkotiedoille. Näin käyttäjät voivat skannata, suodattaa, analysoida tärkeitä tietoja ja ryhtyä toimiin.

Saadaksesi lisää ideoita tietotaulukoiden hyödyntämiseen verkkosivustoilla, tässä on joitain hienoja esimerkkejä tietotaulukoista. Siellä on myös vinkkejä sellaisen suunnitteluun.

Tietotaulukoiden yleiset käyttötavat

Tietotaulukossa on monia toimintoja, mutta sitä käytetään yleisesti:

Järjestä tiedot, jotta niitä on helpompi lukea ja katsella.
Lajittele erityyppisiä ja -määriä, mukaan lukien kiinteät ja dynaamiset tiedot.
Tee vertailuja sen kaaviomaisen asettelun vuoksi. Käytetään usein tuotteiden ja palveluiden vertailuun ja jopa hinnoittelusuunnitelmiin.

Vinkkejä tietotaulukoiden suunnitteluun

Tee taulukko, jossa on useita toimintoja.

Tietotaulukon pitäisi auttaa käyttäjiä skannaamaan ja ymmärtämään tietoja. Sen pitäisi myös antaa heille mahdollisuus analysoida, vertailla ja ryhtyä vastaaviin toimiin.

Kiinnitä asiayhteyteen liittyvä sisältö vierittäessäsi.

Tästä on hyötyä, kun lajitellaan suuria tietojoukkoja ja katsotaan niitä pienemmillä näytöillä. Se auttaa käyttäjiä ymmärtämään lukemaansa dataa.

Priorisoi yhteiset toimet.

Tietotaulukon pitäisi auttaa käyttäjiä säästämään aikaa ja vaivaa. Se tekee tämän antamalla heille mahdollisuuden suorittaa yleisiä toimintoja ja toistuvia tehtäviä siirtymättä toiselle verkkosivulle.

Ota tietosuodattimet käyttöön.

Suodattimet wpDataTablesilla luodusta tuotevertailutaulukosta

Antamalla käyttäjien käsitellä ja suodattaa tietoja auttaa heitä löytämään tarvittavat tiedot. He oppivat myös uusia oivalluksia ja voivat vertailla tietoja.

Käytä vaakasuuntaista vieritysvaihtoehtoa suurille tietosarjoille.

Vaakasuora vieritys toimii hyvin tietotaulukoissa, joissa on paljon tietoa ja sarakkeita. Käyttäjillä voi myös olla mahdollisuus ankkuroida tiettyjä sarakkeita tietojen vertailun parantamiseksi.

Laita pitkien taulukoiden sivutus.

Sivutusesimerkki wpDataTablesilla luodussa taulukossa

Vältä pitkiä tietotaulukoita jakamalla ne useille sivuille, joissa on kiinteä määrä rivejä ja sivutus. Anna käyttäjien myös muokata kullakin sivulla näytettävien rivien määrää.

Sivutus osoittaa, millä sivulla ne ovat navigoinnin helpottamiseksi.

Tee taulukon riveistä laajennettavia.

Toinen suunnitteluratkaisu joukkotietoja sisältäville taulukoille on tehdä taulukon riveistä laajennettavia. Laajennettavien tai tiivistettävien rivien avulla käyttäjät voivat lukea lisätietoja säilyttäen samalla taulukon kontekstin.

Käytä muokattavia sarakkeita.

Niiden avulla käyttäjät voivat käsitellä verkkosisältöä ja valita tiettyjä tietosarakkeita, joita he tarvitsevat tehtävään. Se parantaa myös käyttökokemusta.

Käyttäjillä tulisi myös olla mahdollisuus luoda ja tallentaa esiasetus sarakkeista tulevaa käyttöä varten.

14 erinomaista esimerkkiä tietotaulukon käyttöliittymäsuunnittelusta

Mukautuva hinnoittelutaulukko

Tällä tietotaulukolla on puhdas ja moderni muotoilu. Se sopii erinomaisesti tilausten hinnoittelusuunnitelmien esittämiseen.

Tämä CSS3-pöytä on ilmainen ja helppokäyttöinen. Se on myös muokattavissa.

Käyttäjät voivat muuttaa tekstiä ja värejä parantaakseen yleisilmettä.

DataTables JSON -näyte Material Designia käyttämällä

Tämä materiaalitietotaulukko on ihanteellinen malli toimistotietokannan luomiseen. Se sisältää sivutus – ja hakusäätimet, ja siinä on mahdollisuus lisätä lisää profiileja.

Tietotaulukon avulla käyttäjät voivat myös järjestää ja lajitella tiedot nousevaan ja laskevaan järjestykseen.

Kiinteä taulukon otsikko

Tässä Nikhil Krishnanin CSS-tietotaulukossa on kiinteä otsikko, reunattomat sarakkeet ja pystysuuntainen vieritysohjain.

Pöydässä on puhdas ulkoreuna ja ankkuroitu otsikko. Tämän ansiosta käyttäjät voivat tarkastella muuttujia vierittäessään taulukkoa alaspäin.

Ravitsemustietotaulukko HTML- ja CSS-muodossa

Tämä esimerkki näyttää CSS-tietotaulukon, joka esittää elintarvikkeen ravitsemustiedot. Ulkonäkö on samanlainen kuin tuoteetiketissä.

Käyttäjät voivat muokata tietotaulukkoa elintarvikkeen ravintosisällön mukaan. Tämän täyttäminen voi kuitenkin kestää jonkin aikaa.

Responsiivinen taulukko

Geoff Yuenin suunnittelemassa datataulukossa on moderni muotoilu ja muokattava värimaailma.

Siinä on laajennettavia rivejä ja sarakkeita. Joten tiedot mahtuvat jokaiseen soluun, kun ikkuna on joko pakattu tai venytetty.

Raikas pöytä

Tässä CSS3-tietotaulukossa on hover-tehoste, joka korostaa rivin, johon käyttäjä osoittaa. Riveillä on vuorottelevat värit luettavuuden parantamiseksi .

Siinä on myös yksinkertainen muotoilu ja selkeä asettelu valkoisilla sarakkeiden reunoilla.

Vierityksen tyylin muuttaminen (käännetyt otsikot)

Tämä on loistava esimerkki tietotaulukosta, jossa on vaakasuuntainen vieritysvaihtoehto.

Toisin kuin muut tietotaulukot, sen otsikko on ankkuroitu ensimmäiseen sarakkeeseen. Tämä auttaa käyttäjiä välttämään kontekstin menettämisen datasarakkeita selatessaan.

Tietotaulukon muotoilu on hyvin yksinkertainen, ja se hyväksyy tekstien lisäksi myös syötteitä, kuten hymiöitä.

< Taulukko > Responsiivinen

<!– 📌📌📌 ORIGINAL_TEXT –

Responsiivinen ->

Tässä Pablo Garcian responsiivisessa suunnittelussa on 3D-hover-efekti, kun käyttäjä osoittaa solua. Se korostaa myös leijuttavan solun rivin.

Riveillä on vuorottelevat värit parempaa luettavuutta varten. Tietotaulukossa on tumma värimaailma ja vaaleanpunaisia aksentteja, mikä tekee siitä ihanteellisen futuristisille verkkoteemoille.

Häivytä ja sumenna hover-tietotaulukossa

Tässä Jack Rugilen JavaScript-tietotaulukossa on häivytys- ja sumennustehoste, kun käyttäjät osoittavat riviä.

Tehoste korostaa ja keskittyy enemmän leijutetulla rivillä. Se tekee tämän sumentamalla loput rivit.

Tietotaulukossa on yksinkertainen asettelu ja harmaa värimaailma.

Responsiivinen ja helppokäyttöinen tietotaulukko

Tällä tietotaulukolla on hyvin yksinkertainen asettelu ja selkeä muotoilu, joka auttaa tiedot erottumaan joukosta.

Sen taulukon riveillä on vuorotellen valkoinen ja harmaa väri luettavuuden parantamiseksi. Otsikossa ja reunuksissa on selkeä vihreä väri.

Taulukkoperimentointi

Esimerkki näyttää kilpailuaikataulun, jossa on zoomaus hover -tehoste. Rivi skaalautuu, kun käyttäjät vievät hiiren osoittimen rivin päälle, ja palaa alkuperäiseen muotoonsa, kun osoitin siirtyy poispäin.

CSS-tietotaulukossa on reunattomia sarakkeita laajempaa tietotilaa varten. Siinä on myös vuorottelevat rivivärit luettavuuden parantamiseksi.

Materiaalisuunnittelu – Responsiivinen taulukko

Tässä CSS3-tietotaulukossa on yksinkertainen asettelu ja puhtaan valkoinen muotoilu. Nämä täydentävät värin korostus hover -tehostetta.

Siinä on pöytäkonstruktoriominaisuus. Tämän avulla käyttäjät voivat mukauttaa rivin korostuksen väriä, ottaa hover-tehosteen käyttöön ja näyttää taulukon reunat.

Muutama sarake, monta riviä

Tämä on datataulukko, jonka suunnittelu on yksinkertainen ja joka toimii sekä teksti- että numeerisilla tiedoilla. Sarakkeet ovat reunattomia ja taulukon riveillä on vuorottelevat värit.

Ne, jotka jäsentävät tietoja luetteloon, voivat hyötyä tästä suunnittelusta.

Responstable 2.0: reagoiva pöytäratkaisu

Tässä tietotaulukossa on sarake valintapainikkeita, joita voidaan käyttää lomakkeiden luomiseen.

Sarakkeet ovat yhtä leveitä ja riveillä vuorotellen valkoinen ja vaaleansininen väri. Otsikossa on selkeä sinivihreä väri muuttujien korostamiseksi.

Lopetetaan ajatukset näistä upeista esimerkeistä tietotaulukoista

Tietotaulukon käyttäminen on loistava tapa järjestää suurin osa verkkosisällöstä. Se ei ainoastaan paranna verkkosivun visuaalista suunnittelua ja asettelua, vaan myös parantaa käyttökokemusta.

Tietotaulukoiden avulla käyttäjät voivat selata tietoja ja luoda analyysin.

Tietotaulukkoa suunniteltaessa on tärkeää antaa käyttäjille mahdollisuus hallita sisältöä. Kun he voivat käsitellä ja suodattaa tietoja tarpeidensa mukaan, taulukko on hyödyllisempi.

Datataulukoiden esimerkit osoittavat joukon suunnitteluideoita. Nämä auttavat sinua luomaan tietotaulukon verkkosivustollesi.

Jos pidit tämän artikkelin lukemisesta tietotaulukoiden esimerkkeistä, sinun kannattaa tutustua tähän artikkeliin tietotaulukon tekemisestä.

Kirjoitimme myös muutamista aiheeseen liittyvistä aiheista, kuten hinnoittelutaulukon esimerkeistä, DataTables-vaihtoehdoista, JavaScript-taulukkokirjastosta, WordPress-taulukkolaajennuksista , taulukon luomisesta WordPressissä ilman laajennusta, taulukon lisäämisestä WordPressiin, WordPress-hinnoittelutaulukkolaajennuksista ja miten luoda tilastotaulukoita WordPressissä.

: wpdatatables.com