Kuidas tabelit kujundada: juhend selle õigeks tegemiseks
Tabelite ja võrgustike kasutamine on digitaalsete toodete ja armatuurlaudade kujundamisel tavaline. Andmetabelid aitavad korraldada suurt hulka teavet.
Nad esitavad andmeid loetavamal ja arusaadavamal viisil. Samuti aitavad need rõhutada olulisi andmeid ja parandada andmete visualiseerimist.
Tabeleid kasutatakse sageli kasutajaliidese komponendina, kuid paljud teevad siiski andmetabelite kujundamisel vigu. Mõned tabelikujundused on täis visuaalset müra või on liiga keerulised, mis põhjustab kehva kasutuskogemuse.
Õige tabeli kasutajaliidese kujundus loob paremad andmete visualiseerimised ja võrdlused. Tabelite õige kujundamine muudab need atraktiivseks ja parandab loetavust.
See juhend näitab, kuidas optimeerida andmetabeli kujundust ja parandada tabeli funktsionaalsust.
Andmetabelite õige kujundamine
Lauakujunduse kavandamisel tuleb töötada kahe asjaga: laua stiili ja laua funktsionaalsusega.
Tabeli stiil
Tabeli andmete joondamine
Teksti eristamiseks numbrilistest andmetest joondage tekst vasakule ja numbrid paremale. Selline joondamine muudab kahe erineva teabe võrdlemise lihtsamaks.
Struktureeritud tabelikujunduse jaoks peaksid tabeli päised ka ühtlustuma nende veeruandmetega.
Mõnes tabeli lahtris võib olla mitu rida teksti, näiteks kirjeldusi. Sellise sisu vertikaaljoondus peaks olema ülaosas.
Vastasel juhul ei joondata veeruandmeid üksteisega.
Esiletõstetud jaotise lisamine
Hinnatabel, mille saate luua rakendusega wpDataTables
Esiletõstetud jaotis on tabeli veerg, rida või lahter, mida autor soovib rõhutada. Tavaliselt rakendatakse seda hinnatabelites või liitumisplaanide võrdlemisel.
Kasutage tabelis olulise teabe esiletõstmiseks esiletõstetud jaotist. See võib olla näiteks parima hinna ja kvaliteedi suhtega plaan või populaarne element loendis.
Esiletõstetud jaotise loomiseks muutke lahtrite vormingut. Näiteks muutke lahtri täitevärvi või teksti fondi suurust, et see silma paistaks.
Värvide pealekandmine
Andmetabelis ei tohiks olla liiga palju värve. Kasutage neid ainult tabelipäiste, negatiivsete ja positiivsete suundumuste ning esiletoodud jaotiste jaoks.
Liiga paljude värvide lisamine tekitab visuaalset müra. See muudab esiletõstmist vajavate elementide eristamise raskeks.
Kasutage fondivärvi jaoks tumedamaid halli toone ja äärisevärvi jaoks heledamaid halli toone tavalise musta värvi asemel. Pehmemate mustade toonide kasutamine muudab selle vähem intensiivseks, vähendades silmade pinget.
Kategooriate eristamisel või suurimate ja madalaimate väärtuste rõhutamisel kasutage erinevaid värve. Tabeli teatud jaotiste esiletõstmiseks kasutage heledamaid või julgemaid täitevärve, et need esile tõsta.
Rea värvide vaheldumine
Lahtrite ühendamise tabel, mille saate luua rakendusega wpDataTables
Rea värvide vaheldumine parandab loetavust. See määrab visuaalsed näpunäited, aidates inimestel jälgida teabe loendit ja ühendada andmeid.
See on eriti kasulik suure andmebaasi loomisel. See töötab hästi ka väikeste andmetabelite jaoks.
Looge sebratriipude efekt, vahetades valget täitevärvi tumedama värviga, näiteks helehalliga. Kui kasutate muid värve, kasutage heledat täitevärvi ja vahetage see veidi tumedama varjundiga.
Ühekohalise fondi kasutamine
Struktureerituma tabelikujunduse jaoks kasutage numbriliste andmete jaoks ühekohalist kirjastiili.
Tabelikujulisel ehk ühevahega fontil on iga tähemärgi jaoks fikseeritud laius ja vahekaugus . See parandab tüpograafiat ja loetavust.
Ühekohaliste fontide näideteks on Courier, Courier New, Lucida Console ja Monaco.
Sümmeetria edasiseks parandamiseks vormindage kindlasti sama pikkusega numbrid, näiteks kuupäevad. 15.03.2019 kirjutamise asemel vormindage kuupäevaks 15.03.2019.
Tabeliandmete visualiseerimine
Muutke veeruandmed horisontaalseteks tulpdiagrammideks. See aitab visualiseerida andmeid ja luua ülevaate.
Horisontaalsed tulpdiagrammid võimaldavad kasutajatel andmekogumeid võrrelda ja neid hõlpsalt tõlgendada. Iga riba asub vertikaalselt joondatud ja ridadeks jagatud veerus, mis asub nende andmete kõrval.
Lintdiagrammi lisamine laiendab sageli veergu liiga palju. Seetõttu kaaluge ribade kuvamist ainult oluliste väärtuste visualiseerimiseks.
Teine meetod tabeliandmete visualiseerimiseks on soojuskaartide kasutamine.
Soojuskaardid reguleerivad lahtri tausta või täitevärvi lahtri numbrilise väärtuse alusel, luues ühe värvi gradiendi. Mida suurem on arvväärtus, seda tumedamaks muutub täitevärv.
Tabeli funktsionaalsus
Muutke see tundlikuks
Tõhus andmetabel töötab hästi erinevates seadmetes. See peab nutitelefonides, tahvelarvutites ja sülearvutites avamisel kuvama andmeid loetavalt .
Tabelite vaatamine väiksematel ekraanidel nõuab palju muudatusi tabelikujunduses. Suurtele lauaarvutitele ehitatud tabelikujundus ei pruugi väiksemates seadmetes töötada.
Testige tabelit mobiilseadmetes. Veenduge, et kasutajad saaksid teavet läbi vaadata, ilma et peaksid lõputult kerima.
Hoiduge kahanenud veergude ja peidetud tekstide eest, kuna need põhjustavad kehva kasutuskogemuse.
Pidage meeles, et väiksematel ekraanidel on kitsad veerud paremad. Veergude õhemaks muutmiseks on erinevaid viise.
See hõlmab ikoonide, lühendite, lühema numbrivormingu ja ümardatud arvandmete kasutamist. Seega 2,5 m, mitte 2 500 000 ja 0,3, mitte 0,3241.
Veergude ümberjärjestamise lubamine
Suuri andmetabeleid on nende suuruse ja teabe hulga tõttu mõnikord raske lugeda. Kui lubate kasutajatel veerge ümber järjestada, saavad nad keskenduda veergudele, mida nad peavad lugema.
See tähendab ka seda, et nad saavad seda teha ilma edasi-tagasi kerimata. See aitab kasutajatel minimeerida segadust, seedida väikeseid teabekilde ja korraldada veerge vastavalt oma vajadustele.
Kaaluge kindla rea kõrguse kasutamist
Tabel, mille saate luua rakendusega wpDataTables
Kui andmetabel sisaldab palju veerge, ankurdage paar esimest veergu. See säilitab konteksti, kuni kasutajad ülejäänud tabelit sirvivad.
Kohandatavate veergude olemasolu on väga soovitatav. Kuid tabeliridade kõrgus peab olema fikseeritud, et säilitada sümmeetriat ja vältida lugejate segadust.
Olenemata andmetest parandab rea fikseeritud kõrgus tabeli kasutajaliidese kujundust ja visuaale.
Lehtede lehitsemise kasutamine pikkade andmetabelite jaoks
Leheküljega tabel, mille saate luua rakendusega wpDataTables
Kehtib kirjutamata reegel, et andmetabelid ei tohi olla pikemad kui töölaua ekraan. See pole aga võimalik, kui andmetabel on pikk.
Vältige pikkade andmetabelite hõivamist suure osa veebilehest ja maksimeerige tühja ruumi. Tehke seda, lubades lehekülgede muutmise funktsiooni.
See aitab ka lugejatel tabelit läbi viia ja navigeerida.
Lehekülgede kasutamisel lisage lehekülje number, mis näitab, mitu lehekülge on ja millisel lehel on lugejad. Veelgi enam, et kasutajatel oleks suurem kontroll, lubage neil kohandada, mitu rida ühel lehel vaadatakse.
Kaasa tabeli sortimise funktsioon
Andmetabeli üle suurema kontrolli võimaldamine kasutajatel täiustab tabeli kasutajaliidese kujundust. Kui tabel sisaldab palju teavet, on üks viis, kuidas aidata lugejatel vajalikke andmeid leida, on sortimisfunktsiooni lisamine.
Sorteerimine võimaldab kasutajatel järjestada andmeid kindlate loogiliste järjekordade järgi.
See võib olla tähestikuline, kuupäeva ja kellaaja muutmine, tõusev, kahanev ja palju muud. Mida rohkem valikuid, seda parem.
Teine võimalus andmete sortimiseks on lisada otsinguväli. See võimaldab lugejatel otsida konkreetseid andmeid, nagu ettevõtte nimi, asukoht, tooted ja palju muud.
Andmete filtreerimine
Tabel filtritega, mida saate luua rakendusega wpDataTables
Andmete filtreerimine on veel üks viis andmetabeli funktsionaalsuse suurendamiseks. Kasutajad saavad seedida suuri andmemahtusid, mõista suundumusi ja luua võrdlusi.
Samuti saavad nad leida teatud teavet ja analüüsida keerulisi andmeid. See kehtib eriti numbriliste andmetabelite kohta.
Veenduge, et kasutajad saaksid teatud veergude jaoks parameetreid või filtrikomplekte kohandada . Lisage ka täiustatud filtreerimisvalik, et salvestada loodud filtrikomplekt edaspidiseks kasutamiseks.
Säilitage kontekst, kasutage fikseeritud päiseid ja külmutatud veerge
Suure andmetabeli lugemine nõuab palju vertikaalset ja horisontaalset kerimist. Konteksti säilitamiseks ankurdage veerupäised ja esimene veerg või paar esimest veergu.
Microsoft Excel ja Google’i arvutustabelid viitavad ankurdatud veergudele kui "külmutatud".
Tabelis navigeerimise hõlbustamiseks lisage täielik reavalik. See võimaldab kasutajatel horisontaalselt kerimisel olulisi ridu märkida .
See võib olla keeruline, kui tabelis on laiendatavaid ridu ja see võib anda teistsuguse efekti.
Viimased mõtted, kuidas lauda õigesti kujundada
Teades, mida tabeli kasutajaliidese kujunduse loomisel arvestada, saate tõhusate tabeliteni. Need võimaldavad kasutajatel andmeid võrrelda ja teavet sortida ning parandavad ka loetavust.
Tabeli kujundamise õppimine võimaldab disaineritel vähendada visuaalset müra ja kasutada tühja ruumi hästi. Siin pakutavad disaininõuanded võivad optimeerida tabeli kujundust ja kasutajaandmeid.
Nende näpunäidete järgimine parandab laua üldist stiili ja funktsionaalsust. Lisaks aitavad need parandada kasutajakogemust ja kaubamärgi mainet.
Kui teile meeldis lugeda seda tabeli kujundamise artiklit, peaksite seda andmetabeli koostamise kohta vaatama .
Kirjutasime ka mõnest seotud teemast nagu andmetabelite näited, hinnatabeli näited, DataTablesi alternatiivid, JavaScripti tabeliteek, WordPressi tabelipluginad , kuidas WordPressis tabelit ilma pistikprogrammita luua, kuidas WordPressis tabelit lisada, WordPressi hinnakujundus tabelipluginad ja kuidas WordPressis statistikatabeleid luua.