{"id":228275,"date":"2022-09-30T17:06:00","date_gmt":"2022-09-30T14:06:00","guid":{"rendered":"https:\/\/wordpress.mediadoma.com\/?p=228275"},"modified":"2022-11-09T01:56:18","modified_gmt":"2022-11-08T22:56:18","slug":"come-progettare-un-tavolo-guida-puntuale-per-renderlo-giusto","status":"publish","type":"post","link":"https:\/\/wordpress.mediadoma.com\/it\/come-progettare-un-tavolo-guida-puntuale-per-renderlo-giusto\/","title":{"rendered":"Come progettare un tavolo: guida puntuale per renderlo giusto"},"content":{"rendered":"\n

L’uso di tabelle e griglie \u00e8 comune durante la progettazione di prodotti digitali e dashboard. Le tabelle di dati aiutano a organizzare la maggior parte delle informazioni.<\/strong><\/p>\n

Presentano i dati in modo pi\u00f9 leggibile e comprensibile<\/strong>. Aiutano anche a enfatizzare i dati importanti e a migliorare la visualizzazione dei dati.<\/p>\n

Le tabelle vengono spesso utilizzate come componenti dell’interfaccia utente, ma molti continuano a commettere errori durante la progettazione di tabelle di dati. Alcuni design di tavoli sono pieni di rumore visivo o sono troppo complessi, con conseguente esperienza utente scadente.<\/p>\n

Ottenere la giusta progettazione dell’interfaccia utente della tabella crea visualizzazioni e confronti dei dati migliori. Progettare i tavoli nel modo giusto li rende attraenti e migliora la leggibilit\u00e0.<\/p>\n

Questa guida mostra come ottimizzare la progettazione della tabella di dati e migliorare la funzionalit\u00e0 della tabella.<\/p>\n

Progettazione di tabelle di dati nel modo giusto<\/strong><\/h2>\n

Quando si pianifica il design di un tavolo, ci sono due cose su cui lavorare: lo stile del tavolo e la funzionalit\u00e0 del tavolo.<\/p>\n

Stile da tavola<\/h3>\n

Allineamento dei dati della tabella<\/h4>\n

Fonte immagine<\/a><\/p>\n

Per differenziare il testo dai dati numerici, allinea il testo a sinistra<\/strong> ei numeri a destra<\/strong>. Tale allineamento rende pi\u00f9 facile confrontare due dati diversi.<\/p>\n

Le intestazioni delle tabelle devono inoltre essere allineate con i dati delle colonne per un design strutturato della tabella.<\/p>\n

Alcune celle di tabella possono avere pi\u00f9 righe di testo,<\/strong> ad esempio descrizioni. L’ allineamento verticale<\/strong> per tale contenuto dovrebbe essere in alto<\/strong>.<\/p>\n

In caso contrario, i dati della colonna non verranno allineati tra loro.<\/p>\n

Aggiunta di una sezione in primo piano<\/h4>\n

\"Come<\/a><\/p>\n

Tabella dei prezzi che puoi creare con wpDataTables<\/a><\/p>\n

Una sezione in primo piano \u00e8 una colonna, una riga o una cella<\/strong> di una tabella che l’autore desidera enfatizzare<\/strong>. Di solito viene applicato alle tabelle dei prezzi o quando si confrontano i piani di abbonamento.<\/p>\n

Utilizzare una sezione in primo piano per evidenziare le informazioni importanti nella tabella. Questo potrebbe essere il miglior piano di valore o un elemento popolare in un elenco, ad esempio.<\/p>\n

Per creare una sezione in primo piano, cambia la formattazione delle celle.<\/strong> Ad esempio, modifica il colore di riempimento della cella o la dimensione del carattere del testo per farlo risaltare.<\/p>\n

Applicare i colori<\/h4>\n

\"Come<\/a><\/p>\n

Una tabella di dati non dovrebbe avere troppi colori.<\/strong> Usali solo per intestazioni di tabelle, tendenze negative e positive e sezioni in primo piano.<\/p>\n

L’aggiunta di troppi colori crea disturbo visivo. Ci\u00f2 rende difficile distinguere gli elementi che devono essere evidenziati.<\/p>\n

Usa sfumature di grigio pi\u00f9 scure<\/strong> per il colore del carattere e sfumature di grigio pi\u00f9 chiare<\/strong> per il colore del bordo invece del normale colore nero. L’uso di sfumature di nero pi\u00f9 tenui lo rende meno intenso, riducendo l’affaticamento degli occhi.<\/p>\n

Applicare colori variabili quando si differenziano le categorie o quando si sottolineano i valori massimi e minimi. Per enfatizzare<\/strong> alcune sezioni della tabella, usa colori di riempimento<\/strong> pi\u00f9 luminosi o pi\u00f9 audaci per farle risaltare.<\/p>\n

Colori di riga alternati<\/h4>\n

\"Come<\/a><\/p>\n

Tabella con celle di unione che puoi creare con wpDataTables<\/a><\/p>\n

L’alternanza dei colori delle righe migliora la leggibilit\u00e0.<\/strong> Imposta segnali visivi<\/strong>, aiutando le persone a seguire un elenco di informazioni e collegare i dati.<\/p>\n

Ci\u00f2 \u00e8 particolarmente utile quando si crea un database di grandi dimensioni. Funziona bene anche per piccole tabelle di dati.<\/p>\n

Crea un effetto "strisce zebrate"<\/strong> alternando il colore di riempimento bianco con un colore pi\u00f9 scuro come il grigio chiaro. Se usi altri colori, usa un colore di riempimento chiaro e alternalo con una tonalit\u00e0 leggermente pi\u00f9 scura.<\/p>\n

Utilizzo di caratteri a spaziatura fissa<\/h4>\n

\"Come<\/a><\/p>\n

Per un design della tabella pi\u00f9 strutturato, usa uno stile di carattere a spaziatura fissa per i dati numerici<\/strong>.<\/p>\n

Il carattere tabulare oa spaziatura fissa ha una larghezza e una spaziatura fisse<\/strong> per ogni carattere. Ci\u00f2 migliora la tipografia e la leggibilit\u00e0.<\/p>\n

Esempi di caratteri a spaziatura fissa includono Courier, Courier New, Lucida Console e Monaco.<\/p>\n

Per migliorare ulteriormente la simmetria, assicurati di formattare le cifre della stessa lunghezza,<\/strong> come ad esempio le date. Invece di scrivere 15\/3\/2019, formatta la data come 15\/03\/2019.<\/p>\n

Visualizzazione dei dati della tabella<\/h4>\n

\"Come<\/a><\/p>\n

Trasforma i dati delle colonne in grafici a barre orizzontali.<\/strong> Questo aiuta a visualizzare i dati e generare una panoramica.<\/p>\n

I grafici a barre orizzontali consentono agli utenti di confrontare i set di dati e interpretarli con facilit\u00e0. Ogni barra si trova in una colonna accanto ai dati che rappresenta, allineata verticalmente e divisa in righe.<\/p>\n

L’inserimento di un grafico a barre spesso espande troppo la colonna. Pertanto, considera di mostrare le barre solo per visualizzare valori importanti.<\/p>\n

Un altro metodo per visualizzare i dati della tabella consiste nell’utilizzare le mappe di calore.<\/strong><\/p>\n

Le mappe di calore regolano la sfumatura di colore dello sfondo della cella o il colore di riempimento in base al valore numerico sulla cella, creando una sfumatura di un colore. Pi\u00f9 alto \u00e8 il valore numerico, pi\u00f9 scuro<\/strong> diventa il colore di riempimento.<\/p>\n

Funzionalit\u00e0 da tavolo<\/h3>\n

Rendilo reattivo<\/h4>\n

\"Come<\/a><\/p>\n

Una tabella dati efficace funziona bene su diversi dispositivi. Deve visualizzare i dati in modo leggibile<\/strong> quando viene aperto su smartphone, tablet e laptop.<\/strong><\/p>\n

La visualizzazione delle tabelle su schermi pi\u00f9 piccoli richiede molte modifiche al design delle tabelle. Un design da tavolo basato su desktop di grandi dimensioni potrebbe non funzionare su dispositivi pi\u00f9 piccoli.<\/p>\n

Prova la tabella sui dispositivi mobili<\/strong>. Assicurati che gli utenti possano scansionare le informazioni senza dover scorrere all’infinito.<\/p>\n

Fai attenzione alle colonne rimpicciolite e ai testi nascosti in quanto si traducono in un’esperienza utente scadente.<\/p>\n

Ricorda, su schermi pi\u00f9 piccoli, le colonne strette sono migliori.<\/strong> Esistono diversi modi per rendere le colonne pi\u00f9 sottili.<\/p>\n

Ci\u00f2 include l’ utilizzo di icone, abbreviazioni, formato numerico pi\u00f9 breve e dati numerici arrotondati.<\/strong> Quindi 2,5 m anzich\u00e9 2.500.000 e 0,3 anzich\u00e9 0,3241.<\/p>\n

Abilita il riordino delle colonne<\/h4>\n

\"Come<\/a><\/p>\n

Le tabelle di dati di grandi dimensioni a volte sono difficili da leggere a causa delle loro dimensioni e della quantit\u00e0 di informazioni che contengono. Consentire agli utenti di riordinare le colonne consente loro di concentrarsi sulle colonne<\/strong> che devono leggere.<\/p>\n

Significa anche che possono farlo senza scorrere avanti e indietro<\/strong>. Ci\u00f2 aiuta gli utenti a ridurre al minimo il disordine, a digerire piccole informazioni e a disporre le colonne in base alle proprie esigenze.<\/p>\n

Considera di avere un’altezza di riga fissa<\/h4>\n

\"Come<\/a><\/p>\n

Tabella che puoi creare con wpDataTables<\/a><\/p>\n

Se la tabella dati contiene molte colonne, ancorare le prime<\/strong> colonne. Ci\u00f2 manterr\u00e0 il contesto<\/strong> mentre gli utenti scorrono il resto della tabella.<\/p>\n

Avere colonne personalizzabili \u00e8 altamente raccomandato. Ma le righe<\/strong> della tabella devono avere un’altezza fissa<\/strong> per mantenere la simmetria ed evitare di confondere i lettori.<\/p>\n

Indipendentemente dai dati, l’altezza della riga fissa migliora il design e gli elementi visivi dell’interfaccia utente della tabella.<\/p>\n

Utilizzo dell’impaginazione per tabelle di dati lunghe<\/h4>\n

\"Come<\/a><\/p>\n

Tabella impaginata che puoi creare con wpDataTables<\/a><\/p>\n

Esiste una regola non scritta secondo cui le tabelle di dati non dovrebbero essere pi\u00f9 lunghe di uno schermo desktop<\/strong>. Tuttavia, ci\u00f2 non \u00e8 possibile se una tabella di dati \u00e8 lunga.<\/p>\n

Impedisci a lunghe tabelle di dati di occupare una grande porzione di una pagina Web e massimizza lo spazio bianco. Fallo abilitando la<\/strong> funzione di impaginazione.<\/p>\n

Questo serve anche a guidare i lettori<\/strong> attraverso la tabella e ad aiutarli a navigare<\/strong>.<\/p>\n

Quando si utilizza l’impaginazione, includere il numero di pagina<\/strong> per mostrare quante pagine ci sono e su quale pagina si trovano i lettori. Inoltre, per fornire agli utenti un maggiore controllo, consenti loro di personalizzare<\/strong> il numero di righe da visualizzare per pagina.<\/p>\n

Include la funzione di ordinamento delle tabelle<\/h4>\n

\"Come<\/a><\/p>\n

Consentire agli utenti di avere un maggiore controllo sulla tabella di dati migliora la progettazione dell’interfaccia utente della tabella. Se la tabella contiene molte informazioni, un modo per aiutare i lettori a individuare i dati di cui hanno bisogno consiste nell’aggiungere una funzione di ordinamento.<\/p>\n

L’ordinamento consente agli utenti di organizzare i dati<\/strong> in base a specifici ordini logici.<\/strong><\/p>\n

Pu\u00f2 essere in ordine alfabetico, data e ora modificate, crescente, decrescente e altro. Pi\u00f9 opzioni, meglio \u00e8.<\/p>\n

Un altro modo per ordinare i dati consiste nell’includere un campo di ricerca<\/strong>. Ci\u00f2 consente ai lettori di cercare dati specifici come il nome di un’azienda, la posizione, i prodotti e altro ancora.<\/p>\n

Filtraggio dei dati<\/h4>\n

\"Come<\/a><\/p>\n

Tabella con filtri che puoi creare con wpDataTables<\/a><\/p>\n

Il filtraggio dei dati \u00e8 un altro modo per aumentare la funzionalit\u00e0 di una tabella di dati. Gli utenti possono assimilare grandi quantit\u00e0 di dati, comprendere le tendenze e creare confronti.<\/p>\n

Possono anche individuare determinate informazioni e analizzare dati complessi. Ci\u00f2 \u00e8 particolarmente vero per le tabelle di dati numerici.<\/p>\n

Assicurati che gli utenti possano personalizzare parametri o set di filtri<\/strong> per determinate colonne. Inoltre, includi un’opzione di filtro avanzata per salvare il set<\/strong> di filtri creato per un uso futuro.<\/p>\n

Mantieni il contesto, usa intestazioni fisse e colonne bloccate<\/h4>\n

\"Come<\/a><\/p>\n

La lettura di una tabella di dati di grandi dimensioni richiede molto scorrimento verticale e orizzontale. Per mantenere il contesto , ancora le intestazioni delle colonne<\/strong> cos\u00ec come la prima colonna o le prime colonne.<\/strong><\/p>\n

Microsoft Excel e Fogli Google si riferiscono alle colonne ancorate come "congelate"<\/strong>.<\/p>\n

Per semplificare la navigazione tra le tabelle, aggiungi una selezione di righe completa.<\/strong> Ci\u00f2 consente agli utenti di contrassegnare le righe importanti<\/strong> mentre scorrono orizzontalmente.<\/p>\n

Questo pu\u00f2 essere complicato se la tabella ha righe espandibili e potrebbe comportare un effetto diverso.<\/p>\n

Considerazioni finali su come progettare un tavolo nel modo giusto<\/strong><\/h2>\n

Sapere cosa considerare quando si crea una progettazione dell’interfaccia utente di una tabella porta a tabelle efficaci. Questi consentono agli utenti di confrontare i dati e ordinare le informazioni<\/strong> e aumentano anche la leggibilit\u00e0<\/strong>.<\/p>\n

Imparare a progettare un tavolo consente ai designer di ridurre il rumore visivo e fare buon uso dello spazio bianco<\/strong>. I suggerimenti di progettazione forniti qui possono ottimizzare la progettazione della tabella e i dati utente.<\/p>\n

Seguire questi suggerimenti migliorer\u00e0 lo stile e la funzionalit\u00e0 complessivi della tabella. Inoltre, aiutano a migliorare l’esperienza dell’utente e l’immagine del marchio.<\/p>\n

Se ti \u00e8 piaciuto leggere questo articolo su come progettare una tabella, dovresti dare un’occhiata a questo su come creare una tabella di dati.<\/a><\/p>\n

Abbiamo anche scritto di alcuni argomenti correlati come esempi di tabelle di dati, esempi di tabelle<\/a> dei prezzi<\/a>, alternative a DataTables<\/a>, libreria di tabelle JavaScript<\/a> ,\u00a0 plug-in di tabelle di WordPress<\/a>, come creare una tabella in WordPress senza plug-<\/a> in, come inserire una tabella in WordPress<\/a>, prezzi<\/a> di WordPress \u00a0plugin\u00a0 per tabelle e<\/a> come creare tabelle statistiche in WordPress.<\/a><\/p>\n

Fonte di registrazione: wpdatatables.com<\/a><\/div><\/p>\n","protected":false},"excerpt":{"rendered":"

Le tabelle di dati aiutano a organizzare la maggior parte delle informazioni. Questa guida mostra come progettare una tabella di dati e migliorare la funzionalit\u00e0 della tabella.<\/p>\n","protected":false},"author":1,"featured_media":180135,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":"","_wp_rev_ctl_limit":""},"categories":[918,835,720,844,865],"tags":[1168],"class_list":["post-228275","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-altro","category-guida-per-principianti","category-sviluppatore","category-tutorial","category-wordpress-6","tag-affiai-it"],"_links":{"self":[{"href":"https:\/\/wordpress.mediadoma.com\/it\/wp-json\/wp\/v2\/posts\/228275","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/wordpress.mediadoma.com\/it\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/wordpress.mediadoma.com\/it\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/wordpress.mediadoma.com\/it\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/wordpress.mediadoma.com\/it\/wp-json\/wp\/v2\/comments?post=228275"}],"version-history":[{"count":0,"href":"https:\/\/wordpress.mediadoma.com\/it\/wp-json\/wp\/v2\/posts\/228275\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/wordpress.mediadoma.com\/it\/wp-json\/wp\/v2\/media\/180135"}],"wp:attachment":[{"href":"https:\/\/wordpress.mediadoma.com\/it\/wp-json\/wp\/v2\/media?parent=228275"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/wordpress.mediadoma.com\/it\/wp-json\/wp\/v2\/categories?post=228275"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/wordpress.mediadoma.com\/it\/wp-json\/wp\/v2\/tags?post=228275"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}