5 Käytännöllisiä ratkaisuja reagoivien tietotaulukoiden tekemiseen

Kuva Dominik Korolczuk

Työskentelen vanhempana UI- ja UX-suunnittelijana App’n’rollille - Varsovaan sijoittautuneelle venture building -yhtiölle.

Kuten ehkä tiedät, nykypäivän suunnittelu vaatii erityyppisten näytöiden ja kokojen hoitoa, joten suunnittelijoiden on tehtävä työmme tuloksista mahdollisimman reagoivia. Se voi aiheuttaa ongelmia, etenkin kun kyse on suuren määrän datan sovittamisesta kapeisiin matkapuhelinrajapintoihin.

Syy, että päätin jakaa ratkaisut kanssasi, on se, että yleisimmät asiat, joiden kanssa kamppailen, olivat datataulut.

Kuinka sovittaa laaja tietotaulukko mobiililaitteiden näytöille menettämättä tarkoitustaan ​​ja luettavuuttaan?

Löysin viisi yleistä ratkaisua datataulukoiden käsittelemiseen laajakuvissa, kuten älypuhelimissa tai tableteissa pystysuunnassa. Voit käyttää sitä välittömästi päivittäisessä työssäsi suunnittelijana - mennään!

Lyhentää

Selvin tapa on leikata tarpeettomia sarakkeita ja pitää taulukko tiiviin jättämällä vain tärkeät tiedot. Alla olevassa esimerkissä näkyy Bloombergin verkkosivusto, jossa on vain 4 yhdeksästä sarakkeesta mobiilinäkymässä.

Lähde: https://www.bloomberg.com/markets/stocks/futures

sovellettavat

  • kaikenlaista tietoa
  • erityyppistä sisältöä

Plussat

  • helppokäyttöinen
  • helppo kehittää
  • yksinkertaisuus

Haittoja

  • rajoitettu tila tietojen esittämiseen
  • täytyy erota osasta tietoja

Jos et halua pudottaa tietojasi, muut ratkaisut saattavat sopia sinulle paremmin.

siirrettävä

Tämä ratkaisu ei ole aivan reagoiva, mutta helppo käyttää ja nopea kehitys. Kyse on vain pyyhkäisyeleiden käyttämisestä selataksesi koko pöytää vaakatasossa.

Siirrettävä reagoiva datataulukkoLähde: https://codepen.io/karks88/pen/jGrjdW/

sovellettavat

  • leveille pöydille (3–8 saraketta)
  • lyhyitä pöytiä varten (suosittelemme pitämään pöydän koko korkeuden taiton yläpuolella)

Plussat

  • helppo kehittää
  • helppokäyttöinen

Haittoja

  • ei suurille määrille sisältöä
  • legenda ei ole näkyvissä vierityksen jälkeen

Ekstrat

  • tarkennustila koko rivin merkitsemiseksi varmistaaksemme, että tarkastelemme oikeita tietoja vierityksen aikana
  • suodata sarakkeet - piilota ja näytä tietyt sarakkeet

Romahtanut

Tämä ratkaisu on täysin reagoiva, kaikki on näkyvissä ilman vieritystä ja sarakkeita navigoidaan pyyhkäisyeleillä. Ensisijainen sarake (selite) voidaan kiinnittää yhteen paikkaan, joten emme menetä tietojen sisältöä.

Tiivistetty reagoiva tietotaulukkoKoko-ohjetaulukko osoitteessa http://massimodutti.com

sovellettavat

  • lyhyille sarakkeille
  • lyhyille pöydille
  • hyödyllinen vaihdettaessa sarakkeita riveiksi

Plussat

  • helppokäyttöinen
  • legenda on näkyvissä koko ajan

Haittoja

  • vain lyhyitä tietoja varten

Ekstrat

  • sarakkeita edustavilla välilehdillä voidaan navigoida nopeasti

Transformed

Se on luodinkestävä ratkaisu vaikeimpiin tehtäviin. Pääsääntö on pöydän rivien romahtaminen erillisiksi korteiksi.

Muunnettu reagoiva datataulukko-esimerkkihttps://elvery.net/demo/responsive-table/ (Ei enää taulukoita)

sovellettavat

  • valtava määrä tietoa
  • erityyppistä sisältöä

Plussat

  • hyödyllinen valtavan määrän tietoja ja sen koon kanssa
  • kyky romahtaa ja piilottaa joitain tietoja
  • monipuolinen tietojen esitysmuoto

Haittoja

  • toistuvat sarakkeiden nimet
  • vaikea verrata tiettyjä tietoja rivien välillä

Ekstrat

  • kyky suodattaa ja lajitella sisältöä helposti
  • kyky jakaa sisältö erillisille sivuille

verrataan

Tämä liittyy tiukasti Transformed-esimerkkiin, mutta se ansaitsee selityksen enemmän. Tämä ratkaisu voi olla erittäin hyödyllinen, kun haluamme verrata sarakkeita. Esimerkiksi tarjous tai tuotetoiminnot.

Se on myös samanlainen kuin edellä kuvailtu Rivitetty, mutta se on valmis suuremmalle tietomäärälle. Lisättävämme on vain helppo selata koko taulukkoa, näyttäen vain kaksi saraketta kerrallaan.

Tietotaulukon vertailuLähde: http://vizio.com

sovellettavat

  • erityyppistä sisältöä
  • suuret tietomäärät

Plussat

  • helppo vertailla sarakkeita
  • hyödyllinen verkkokaupassa
  • auttaa päätöksentekoa nopeammin

Haittoja

  • näet vain kaksi saraketta kerrallaan
  • vaatii lisänavigoinnin

Lopullinen ajatus

Valitsemasi ratkaisutyyppi riippuu lähinnä siitä, millaisia ​​tietoja sinulla on. Hyvä käytäntö on tiivis yhteistyö käyttöliittymän kehittäjän kanssa, jotta voidaan valita järkevin ratkaisu ajankäytön ja soveltamiseen tarvittavien teknisten vaatimusten suhteen.

Jos pidät artikkelista hyödyllistä, älä epäröi jakaa sitä. Aion kirjoittaa lisää tulevaisuudessa. Jos sinulla on kysyttävää tai haluat antaa minulle palautetta, kommentoi alla.