5 Praktična rješenja za izradu responzivnih podataka

Ilustracija Dominik Korolczuk

Radim kao stariji UI & UX dizajner za App'nroll - tvrtku za izgradnju pothvata sa sjedištem u Varšavi.

Kao što možda znate, današnji dizajn zahtijeva brigu o raznim vrstama ekrana i veličinama, tako da mi dizajneri moramo omogućiti da rezultati našeg rada budu što odgovorniji. To može uzrokovati određene probleme, posebno kada je u pitanju uklapanje ogromne količine podataka u uska sučelja mobilnih telefona.

Razlog zbog kojeg sam odlučio podijeliti rješenja s vama je činjenica da su najčešće stvari s kojima sam se borio bile tablice podataka.

Kako uklopiti široku tablicu podataka na zaslone mobilnih uređaja bez gubitka svrhe i čitljivosti?

Pronašao sam 5 uobičajenih rješenja za rukovanje tablicama podataka na širokim ekranima, poput pametnih telefona ili tableta u vertikalnom načinu rada. Možete ga koristiti odmah u svom svakodnevnom radu kao dizajnera - krenimo!

Skratiti

Najpraktičniji je, upravo izrezivanje nepotrebnih stupaca i održavanje tablice sažetim ostavljanjem samo ključnih podataka. Primjer u nastavku prikazuje web stranicu Bloomberg sa samo 4 od 9 stupaca na mobilnom prikazu.

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

primjenjivo

  • bilo koje vrste podataka
  • razne vrste sadržaja

prozodija

  • jednostavan za korištenje
  • lako razvijati
  • jednostavnost

kontra

  • ograničen prostor za prezentaciju podataka
  • treba odustati od dijela podataka

Ako ne želite da ispustite nijedan podatak, druga rješenja mogu vam bolje odgovarati.

pokretan

Ovo rješenje nije baš prilagodljivo, ali jednostavno je za korištenje i brzo u razvoju. To je samo korištenje kretnja prstom za pomicanje kroz čitavu tablicu vodoravno.

Tablica podataka s pokretnim odzivomIzvor: https://codepen.io/karks88/pen/jGrjdW/

primjenjivo

  • za široke tablice (3–8 stupaca)
  • za kratke tablice (preporučujemo da zadržite svu visinu stola iznad preklopa)

prozodija

  • lako razvijati
  • jednostavan za korištenje

kontra

  • a ne za velike količine sadržaja
  • legenda nije vidljiva nakon pomicanja

Dodaci

  • način fokusiranja za označavanje cijelog retka da bismo bili sigurni da pregledamo odgovarajuće podatke dok se krećemo
  • filtrirajte stupce - sakrijte i prikažite pojedine stupce

Sažeto

Ovo rješenje u potpunosti reagira, sve je vidljivo bez pomicanja i kolonama se kreće pomoću kretnje prstom. Primarni stupac (legenda) može se popraviti na jednom mjestu kako ne bismo izgubili kontekst podataka.

Sažeto tablica sa odazivnim podacimaTablica vodiča veličine na http://massimodutti.com

primjenjivo

  • za kratke stupce
  • za kratke stolove
  • korisno kod izmjene stupaca u redove

prozodija

  • jednostavan za korištenje
  • legenda je vidljiva cijelo vrijeme

kontra

  • samo za kratke podatke

Dodaci

  • Kartice koje predstavljaju stupce mogu se koristiti za brzo kretanje

transformirana

To je neprobojno rješenje za najteže zadatke. Glavno pravilo je sabiranje redaka tablica u zasebne kartice.

Primjer tablice transformiranih reaktivnih podatakahttps://elvery.net/demo/responsive-tables/ (Nema više tablica)

primjenjivo

  • ogromna količina podataka
  • razne vrste sadržaja

prozodija

  • koristan s ogromnom količinom podataka i njegove veličine
  • sposobnost urušavanja i skrivanja nekih podataka
  • svestran oblik prezentacije podataka

kontra

  • ponavljajuća imena stupaca
  • teško je usporediti određene podatke između redaka

Dodaci

  • mogućnost lakoće filtriranja i sortiranja sadržaja
  • mogućnost dijeljenja sadržaja na zasebne stranice

uspoređujući

Ovaj je strogo povezan s primjerom Transformiran, ali zaslužuje biti objašnjen više. Ovo rješenje može biti vrlo korisno kada želimo usporediti stupce. Na primjer, ponuda ili funkcionalnost proizvoda.

Isto je tako i sa srušenim gore opisanim, ali spreman je za veću količinu podataka. Sve što trebamo dodati je jednostavna navigacija kroz cijelu tablicu, prikazivanje samo dva stupca odjednom.

Usporedba tablice podatakaIzvor: http://vizio.com

primjenjivo

  • razne vrste sadržaja
  • velike količine podataka

prozodija

  • lako usporediti stupce
  • korisno u e-trgovini
  • pomoći bržem donošenju odluka

kontra

  • vidite samo dva stupca odjednom
  • zahtijeva dodatnu navigaciju

Završna misao

Vrsta rješenja koje odaberete uglavnom ovisi o vrsti podataka koju imate. Dobra praksa je uska suradnja s naprednim programerom za odabir najprihvatljivijeg rješenja s obzirom na potrošnju vremena i tehničke zahtjeve potrebne za primjenu.

Ako smatrate da je ovaj članak koristan, nemojte oklijevati podijeliti ga. Ubuduće ću pisati više Ako imate pitanja ili želite poslati povratne informacije, komentirajte u nastavku.