5 Praktilised lahendused tundlike andmetabelite koostamiseks

Illustratsioon Dominik Korolczuk

Ma töötan Varssavis asuva riskikapitaliettevõtte App’n’roll - UI ja UX-i disainerina.

Nagu võite juba teada, nõuab tänapäevane kujundus eri tüüpi ekraanide ja suuruste eest hoolitsemist, nii et meie, disainerid, peame oma töö tulemuste võimalikult reageerima. See võib põhjustada mõningaid probleeme, eriti kui tegemist on tohutu hulga andmete mahutamisega kitsastesse mobiiltelefonide liidestesse.

Põhjus, miks otsustasin teiega lahendusi jagada, on asjaolu, et kõige tavalisemad asjad, millega ma vaeva nägin, olid andmetabelid.

Kuidas mahutada mobiilne ekraanidele lai andmetabel, kaotamata selle eesmärki ja loetavust?

Leidsin 5 levinumat lahendust andmetabelite käsitlemiseks laiekraanidel, näiteks nutitelefonides või tahvelarvutites vertikaalses režiimis. Saate seda kohe oma igapäevatöös disainerina kasutada - lähme!

Lühendada

Kõige arusaadavam on see lihtsalt mittevajalike veergude väljalõikamine ja tabeli kokkuvõtlikkuse hoidmine, jättes ainult olulised andmed. Allolevas näites on toodud Bloombergi veebisait, kus mobiilvaates on ainult 4 veergu 9-st.

Allikas: https://www.bloomberg.com/markets/stocks/futures

Kohaldatav

  • igasugused andmed
  • erinevat tüüpi sisu

Plussid

  • lihtne kasutada
  • lihtne arendada
  • lihtsus

Miinused

  • piiratud ruum andmete esitamiseks
  • vajadus osa andmetest tagasi astuda

Kui te ei soovi oma andmeid kustutada, võivad muud lahendused teile paremini sobida.

Teisaldatav

See lahendus pole kuigi reageeriv, kuid seda on lihtne kasutada ja kiire arendusega. See tähendab lihtsalt libisevate žestide kasutamist, et kerida horisontaalselt läbi kogu tabeli.

Teisaldatav tundlik andmetabelAllikas: https://codepen.io/karks88/pen/jGrjdW/

Kohaldatav

  • laiade laudade jaoks (3–8 veergu)
  • lühikeste laudade jaoks (soovitage hoida laua kogu kõrgus voldi kohal)

Plussid

  • lihtne arendada
  • lihtne kasutada

Miinused

  • mitte suurte sisuhulkade jaoks
  • legend pole pärast kerimist nähtav

Lisad

  • teravustamisrežiim kogu rea märgistamiseks, veendumaks, et vaatame kerimise ajal õigeid andmeid
  • filtreeri veerud - peida ja näita konkreetseid veerge

Varises kokku

See lahendus reageerib täielikult, kõik on ilma kerimiseta nähtavad ja veergudel navigeeritakse pühkimisliigutuste abil. Esmase veeru (legend) saab fikseerida ühes kohas, nii et me ei kaotaks andmete konteksti.

Ahendatud tundlik andmetabelSuuruse juhiste tabel aadressil http://massimodutti.com

Kohaldatav

  • lühikeste veergude jaoks
  • lühikeste laudade jaoks
  • kasulik veergude ridadeks vahetamisel

Plussid

  • lihtne kasutada
  • legend on kogu aeg nähtav

Miinused

  • ainult lühiandmete jaoks

Lisad

  • sambaid esindavaid vahekaarte saab kasutada kiireks navigeerimiseks

Muudetud

See on kuulikindel lahendus raskeimateks ülesanneteks. Põhireegel on tabelireade kokkuvarisemine eraldi kaartideks.

Muudetud tundliku andmetabeli näidehttps://elvery.net/demo/responsive-tables/ (rohkem tabeleid pole)

Kohaldatav

  • tohutul hulgal andmeid
  • erinevat tüüpi sisu

Plussid

  • kasulik tohutu hulga andmete ja selle suurusega
  • võime andmeid varjata ja varjata
  • andmete esitamise mitmekülgne vorm

Miinused

  • korduvad veerunimed
  • raske on konkreetseid andmeid ridade vahel võrrelda

Lisad

  • võime sisu hõlpsalt filtreerida ja sorteerida
  • võime jagada sisu eraldi lehtedeks

Võrreldes

See on rangelt seotud teisendatud näitega, kuid seda tasub rohkem selgitada. See lahendus võib olla väga kasulik, kui tahame veerge võrrelda. Näiteks pakkumine või tootefunktsioonid.

See sarnaneb ka ülalkirjeldatud ahendatud versiooniga, kuid on valmis suurema hulga andmete jaoks. Peame lisama vaid hõlpsa navigeerimise läbi terve tabeli, kuvades korraga ainult kahte veergu.

Andmetabeli võrdlusAllikas: http://vizio.com

Kohaldatav

  • erinevat tüüpi sisu
  • suures koguses andmeid

Plussid

  • veerge on lihtne võrrelda
  • kasulik e-kaubanduses
  • aidake otsuseid kiiremini teha

Miinused

  • näete korraga ainult kahte veergu
  • nõuab täiendavat navigeerimist

Lõplik mõte

Valitud lahenduse tüüp sõltub enamasti sellest, milliseid andmeid teil on. Hea tava on tihe koostöö esiotsa arendajaga, et valida kõige mõistlikum lahendus ajakulu ja rakendamiseks vajalike tehniliste nõuete osas.

Kui leiate, et see artikkel on kasulik, ärge kartke seda jagada. Ma kavatsen edaspidi rohkem kirjutada. Kui teil on küsimusi või soovite mulle tagasisidet anda, kommenteerige allpool.