5 praktiske løsninger til at fremstille lydhøre datatabeller

Illustration af Dominik Korolczuk

Jeg arbejder som Senior UI & UX Designer for App’n’roll - et Warszawabaseret venture building-selskab.

Som du måske ved, kræver dagens design at passe på forskellige typer skærme og størrelser, så vi designere er nødt til at gøre resultaterne af vores arbejde så lydhør som muligt. Det kan medføre nogle problemer, især når det drejer sig om at montere en enorm mængde data i smalle mobiltelefongrænseflader.

Årsagen til, at jeg besluttede at dele løsningen med dig, er, at de mest almindelige ting, jeg kæmpede med, var datatabeller.

Hvordan passer man til en bred datatabel på mobilskærme uden at miste dens formål og læsbarhed?

Jeg fandt 5 almindelige løsninger til håndtering af datatabeller på brede skærme såsom smartphones eller tablets i lodret tilstand. Du kan bruge det med det samme i dit daglige arbejde som designer - lad os gå!

Afkort

Den mest ligefremme, det handler bare om at skære unødvendige kolonner ud og holde tabellen kortfattet ved kun at forlade de vigtige data. Eksemplet nedenfor viser Bloomberg-webstedet med kun 4 ud af 9 kolonner i mobilvisningen.

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

Anvendelig

  • enhver form for data
  • forskellige typer indhold

Fordele

  • let at bruge
  • let at udvikle
  • enkelhed

Ulemper

  • begrænset plads til datapræsentation
  • nødt til at fratræde en del af dataene

Hvis du ikke vil slippe nogen af ​​dine data, kan de andre løsninger muligvis være bedre egnet til dig.

bevægelig

Denne løsning er ikke helt lydhør, men let at bruge og hurtig under udvikling. Det handler bare om at bruge svejsebevægelser til at rulle gennem hele tabellen vandret.

Bevægelig responsiv datatabelKilde: https://codepen.io/karks88/pen/jGrjdW/

Anvendelig

  • til brede tabeller (3–8 kolonner)
  • til korte borde (anbefales at holde bordets højde over folden)

Fordele

  • let at udvikle
  • let at bruge

Ulemper

  • ikke for store mængder indhold
  • sagnet er ikke synligt efter rulle

Ekstra

  • fokuseringstilstand til markering af hele rækken for at sikre, at vi ser på de rigtige data, mens vi ruller
  • filterkolonner - skjul og vis bestemte kolonner

Kollapsede

Denne løsning er fuldt responsiv, alt er synligt uden at rulle, og kolonner navigeres ved hjælp af svejsebevægelser. Den primære kolonne (forklaring) kan rettes et sted, så vi ikke mister sammenhængen med data.

Sammenbrudt responsiv datatabelStørrelsesguide-tabel på http://massimodutti.com

Anvendelig

  • til korte kolonner
  • til korte borde
  • nyttigt, når du udskifter kolonner i rækker

Fordele

  • let at bruge
  • legenden er synlig hele tiden

Ulemper

  • kun til korte data

Ekstra

  • faner, der repræsenterer kolonner, kan bruges til at navigere hurtigt

Transformeret

Det er en skudsikker løsning til de hårdeste opgaver. Hovedreglen er sammenbrud af tabelraderne i separate kort.

Eksempel på transformeret responsiv datatabelhttps://elvery.net/demo/responsive-tables/ (Ingen flere tabeller)

Anvendelig

  • en enorm mængde data
  • forskellige typer indhold

Fordele

  • nyttig med en enorm mængde data og dens størrelse
  • evne til at kollapse og skjule nogle data
  • en alsidig form for datapræsentation

Ulemper

  • gentagne kolonnenavne
  • svært at sammenligne bestemte data mellem rækker

Ekstra

  • evnen til at filtrere og sortere indholdet let
  • evnen til at dele indholdet i separate sider

Sammenligning

Denne er strengt relateret til det transformerede eksempel, men det fortjener at blive forklaret mere. Denne løsning kan være meget nyttig, når vi vil sammenligne kolonnerne. For eksempel et tilbud eller produktfunktionaliteter.

Det ligner også det sammenbrudte, som jeg beskrev ovenfor, men det er klar til en større mængde data. Alt, hvad vi skal tilføje, er nem navigation gennem hele tabellen, der kun viser to kolonner ad gangen.

Sammenligning af datatabelKilde: http://vizio.com

Anvendelig

  • forskellige typer indhold
  • store mængder data

Fordele

  • let at sammenligne kolonnerne
  • nyttig i e-handel
  • hjælpe med at tage beslutninger hurtigere

Ulemper

  • du ser kun to kolonner ad gangen
  • kræver yderligere navigation

Endelig tanke

Den type løsning, du vælger, afhænger hovedsageligt af, hvilken type data du har. En god praksis er det tætte samarbejde med en front-end-udvikler for at vælge den mest rimelige løsning med hensyn til tidsforbrug og tekniske krav, der er nødvendige for at anvende.

Hvis du finder denne artikel nyttig, skal du ikke tøve med at dele den. Jeg vil skrive mere i fremtiden. Hvis du har spørgsmål eller gerne vil give mig nogle feedback, bedes du kommentere nedenfor.