{"id":227938,"date":"2022-09-30T16:20:00","date_gmt":"2022-09-30T13:20:00","guid":{"rendered":"https:\/\/wordpress.mediadoma.com\/?p=227938"},"modified":"2022-11-09T00:09:26","modified_gmt":"2022-11-08T21:09:26","slug":"como-projetar-uma-mesa-guia-pontual-para-acertar","status":"publish","type":"post","link":"https:\/\/wordpress.mediadoma.com\/pt-pt\/como-projetar-uma-mesa-guia-pontual-para-acertar\/","title":{"rendered":"Como projetar uma mesa: guia pontual para acertar"},"content":{"rendered":"\n

O uso de tabelas e grades \u00e9 comum ao projetar produtos digitais e pain\u00e9is. As tabelas de dados ajudam a organizar uma grande quantidade de informa\u00e7\u00f5es.<\/strong><\/p>\n

Eles apresentam dados de uma forma mais leg\u00edvel e compreens\u00edvel<\/strong>. Eles tamb\u00e9m ajudam a enfatizar dados importantes e melhorar a visualiza\u00e7\u00e3o de dados.<\/p>\n

As tabelas s\u00e3o frequentemente usadas como um componente de interface do usu\u00e1rio, mas muitos ainda cometem erros ao projetar tabelas de dados. Alguns designs de tabela est\u00e3o cheios de ru\u00eddo visual ou s\u00e3o muito complexos, resultando em uma experi\u00eancia ruim para o usu\u00e1rio.<\/p>\n

Obter o design de IU de tabela certo cria melhores visualiza\u00e7\u00f5es e compara\u00e7\u00f5es de dados. Projetar tabelas da maneira correta as torna atraentes e melhora a legibilidade.<\/p>\n

Este guia mostra como otimizar o design da tabela de dados e melhorar a funcionalidade da tabela.<\/p>\n

Projetando tabelas de dados da maneira certa<\/strong><\/h2>\n

Ao planejar um design de mesa, h\u00e1 duas coisas para trabalhar: o estilo da mesa e a funcionalidade da mesa.<\/p>\n

Estilo de tabela<\/h3>\n

Alinhando dados da tabela<\/h4>\n

Origem da imagem<\/a><\/p>\n

Para diferenciar texto de dados num\u00e9ricos, alinhe o texto \u00e0 esquerda<\/strong> e os n\u00fameros \u00e0 direita<\/strong>. Esse alinhamento facilita a compara\u00e7\u00e3o de dois dados diferentes.<\/p>\n

Os cabe\u00e7alhos de tabela tamb\u00e9m devem se alinhar com os dados da coluna para um design de tabela estruturada.<\/p>\n

Algumas c\u00e9lulas da tabela podem ter v\u00e1rias linhas de texto,<\/strong> como descri\u00e7\u00f5es. O alinhamento vertical<\/strong> para tal conte\u00fado deve estar na parte superior<\/strong>.<\/p>\n

Caso contr\u00e1rio, os dados da coluna n\u00e3o ser\u00e3o alinhados entre si.<\/p>\n

Adicionando se\u00e7\u00e3o em destaque<\/h4>\n

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

Tabela de pre\u00e7os que voc\u00ea pode criar com wpDataTables<\/a><\/p>\n

Uma se\u00e7\u00e3o em destaque \u00e9 uma coluna, linha ou c\u00e9lula<\/strong> da tabela que o autor deseja enfatizar<\/strong>. Geralmente \u00e9 aplicado a tabelas de pre\u00e7os ou ao comparar planos de assinatura.<\/p>\n

Use uma se\u00e7\u00e3o em destaque para destacar informa\u00e7\u00f5es importantes na tabela. Este pode ser o melhor plano de valor ou um elemento popular em uma lista, por exemplo.<\/p>\n

Para criar uma se\u00e7\u00e3o em destaque, altere a formata\u00e7\u00e3o das c\u00e9lulas.<\/strong> Por exemplo, modifique a cor de preenchimento da c\u00e9lula ou o tamanho da fonte do texto para destac\u00e1-lo.<\/p>\n

Aplicando cores<\/h4>\n

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

Uma tabela de dados n\u00e3o deve ter muitas cores.<\/strong> Use-os apenas para cabe\u00e7alhos de tabela, tend\u00eancias negativas e positivas e se\u00e7\u00f5es em destaque.<\/p>\n

Adicionar muitas cores cria ru\u00eddo visual. Isso torna dif\u00edcil distinguir elementos que precisam ser destacados.<\/p>\n

Use tons de cinza mais escuros<\/strong> para a cor da fonte e tons de cinza mais claros<\/strong> para a cor da borda em vez da cor preta normal. O uso de tons mais suaves de preto o torna menos intenso, reduzindo o cansa\u00e7o visual.<\/p>\n

Aplique cores variadas ao diferenciar categorias ou ao enfatizar valores mais altos e mais baixos. Para enfatizar<\/strong> determinadas se\u00e7\u00f5es na tabela, use cores de preenchimento<\/strong> mais claras ou mais ousadas para destac\u00e1-las.<\/p>\n

Cores de linha alternadas<\/h4>\n

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

Tabela com c\u00e9lulas de mesclagem que voc\u00ea pode criar com wpDataTables<\/a><\/p>\n

A altern\u00e2ncia de cores de linha melhora a legibilidade.<\/strong> Ele define dicas visuais<\/strong>, ajudando as pessoas a seguir uma lista de informa\u00e7\u00f5es e conectar dados.<\/p>\n

Isso \u00e9 especialmente \u00fatil ao criar um banco de dados grande. Tamb\u00e9m funciona bem para pequenas tabelas de dados.<\/p>\n

Crie um efeito de ‘listras de zebra’<\/strong> alternando a cor de preenchimento branca com uma cor mais escura, como cinza claro. Se estiver usando outras cores, use uma cor de preenchimento clara e alterne-a com um tom um pouco mais escuro.<\/p>\n

Usando fonte monoespa\u00e7ada<\/h4>\n

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

Para um design de tabela mais estruturado, use um estilo de fonte monoespa\u00e7ada para dados num\u00e9ricos<\/strong>.<\/p>\n

A fonte tabular ou monoespa\u00e7ada tem largura e espa\u00e7amento fixos<\/strong> para cada caractere. Isso melhora a tipografia e a legibilidade.<\/p>\n

Exemplos de fontes monoespa\u00e7adas incluem Courier, Courier New, Lucida Console e Monaco.<\/p>\n

Para melhorar ainda mais a simetria, certifique-se de formatar d\u00edgitos no mesmo comprimento,<\/strong> como datas, por exemplo. Em vez de escrever 15\/3\/2019, formate a data como 15\/03\/2019.<\/p>\n

Visualizando dados da tabela<\/h4>\n

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

Transforme dados de coluna em gr\u00e1ficos de barras horizontais.<\/strong> Isso ajuda a visualizar os dados e gerar uma vis\u00e3o geral.<\/p>\n

Os gr\u00e1ficos de barras horizontais permitem que os usu\u00e1rios comparem conjuntos de dados e os interpretem com facilidade. Cada barra fica em uma coluna ao lado dos dados que representa, alinhada verticalmente e dividida em linhas.<\/p>\n

A inser\u00e7\u00e3o de um gr\u00e1fico de barras muitas vezes expande demais a coluna. Assim, considere mostrar barras apenas para visualizar valores importantes.<\/p>\n

Outro m\u00e9todo para visualizar os dados da tabela \u00e9 usar mapas de calor.<\/strong><\/p>\n

Os mapas de calor ajustam a tonalidade da cor do plano de fundo da c\u00e9lula ou a cor de preenchimento com base no valor num\u00e9rico da c\u00e9lula, criando um gradiente de uma cor. Quanto maior o valor num\u00e9rico, mais escura<\/strong> se torna a cor de preenchimento.<\/p>\n

Funcionalidade da tabela<\/h3>\n

Torne-o responsivo<\/h4>\n

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

Uma tabela de dados eficaz funciona bem em diferentes dispositivos. Ele deve exibir dados de maneira leg\u00edvel<\/strong> quando aberto em smartphones, tablets e laptops.<\/strong><\/p>\n

A visualiza\u00e7\u00e3o de tabelas em telas menores requer muitas mudan\u00e7as no design da tabela. Um design de mesa criado em desktops grandes pode n\u00e3o funcionar em dispositivos menores.<\/p>\n

Teste a tabela em dispositivos m\u00f3veis<\/strong>. Certifique-se de que os usu\u00e1rios possam digitalizar as informa\u00e7\u00f5es sem precisar rolar infinitamente.<\/p>\n

Cuidado com colunas reduzidas e textos ocultos, pois isso resulta em uma experi\u00eancia de usu\u00e1rio ruim.<\/p>\n

Lembre-se, em telas menores, colunas estreitas s\u00e3o melhores.<\/strong> Existem diferentes maneiras de tornar as colunas mais finas.<\/p>\n

Isso inclui o uso de \u00edcones, abrevia\u00e7\u00f5es, formato de n\u00famero mais curto e dados num\u00e9ricos arredondados.<\/strong> Portanto, 2,5 m em vez de 2.500.000 e 0,3 em vez de 0,3241.<\/p>\n

Ativar a reordena\u00e7\u00e3o de colunas<\/h4>\n

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

\u00c0s vezes, tabelas de dados grandes s\u00e3o dif\u00edceis de ler devido ao seu tamanho e \u00e0 quantidade de informa\u00e7\u00f5es que cont\u00eam. Habilitar os usu\u00e1rios a reordenar as colunas permite que eles se concentrem nas colunas<\/strong> que precisam ler.<\/p>\n

Isso tamb\u00e9m significa que eles podem fazer isso sem rolar para frente e para tr\u00e1s<\/strong>. Isso ajuda os usu\u00e1rios a minimizar a desordem, digerir pequenas informa\u00e7\u00f5es e organizar as colunas de acordo com suas necessidades.<\/p>\n

Considere ter uma altura de linha fixa<\/h4>\n

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

Tabela que voc\u00ea pode criar com wpDataTables<\/a><\/p>\n

Se a tabela de dados contiver muitas colunas, ancore as primeiras<\/strong> colunas. Isso manter\u00e1 o contexto<\/strong> enquanto os usu\u00e1rios percorrem o restante da tabela.<\/p>\n

Ter colunas personaliz\u00e1veis \u200b\u200b\u00e9 altamente recomendado. Mas as linhas<\/strong> da tabela devem ter uma altura fixa<\/strong> para manter a simetria e evitar confundir os leitores.<\/p>\n

Independentemente dos dados, a altura fixa da linha melhora o design e os visuais da interface do usu\u00e1rio da tabela.<\/p>\n

Usando pagina\u00e7\u00e3o para tabelas de dados longas<\/h4>\n

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

Tabela paginada que voc\u00ea pode criar com wpDataTables<\/a><\/p>\n

Existe uma regra n\u00e3o escrita de que as tabelas de dados n\u00e3o devem ser maiores que uma tela de desktop<\/strong>. No entanto, isso n\u00e3o \u00e9 poss\u00edvel se uma tabela de dados for longa.<\/p>\n

Evite que tabelas de dados longas ocupem uma grande parte de uma p\u00e1gina da Web e maximize o espa\u00e7o em branco. Fa\u00e7a isso ativando o<\/strong> recurso de pagina\u00e7\u00e3o.<\/p>\n

Isso tamb\u00e9m serve para guiar os leitores<\/strong> pela tabela e ajud\u00e1-los a navegar<\/strong>.<\/p>\n

Ao usar a pagina\u00e7\u00e3o, inclua o n\u00famero da p\u00e1gina<\/strong> para mostrar quantas p\u00e1ginas existem e em qual p\u00e1gina os leitores est\u00e3o. Al\u00e9m disso, para fornecer mais controle aos usu\u00e1rios, permita que eles personalizem<\/strong> quantas linhas visualizar por p\u00e1gina.<\/p>\n

Incluir recurso de classifica\u00e7\u00e3o de tabela<\/h4>\n

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

Permitir que os usu\u00e1rios tenham mais controle sobre a tabela de dados aprimora o design da interface do usu\u00e1rio da tabela. Se a tabela contiver muitas informa\u00e7\u00f5es, uma maneira de ajudar os leitores a localizar os dados de que precisam \u00e9 adicionar um recurso de classifica\u00e7\u00e3o.<\/p>\n

A classifica\u00e7\u00e3o permite que os usu\u00e1rios organizem os dados<\/strong> de acordo com ordens l\u00f3gicas espec\u00edficas.<\/strong><\/p>\n

Isso pode ser alfab\u00e9tico, data e hora modificadas, ascendente, descendente e muito mais. Quanto mais op\u00e7\u00f5es, melhor.<\/p>\n

Outra maneira de classificar os dados \u00e9 incluir um campo de pesquisa<\/strong>. Isso permite que os leitores pesquisem dados espec\u00edficos, como o nome de uma empresa, localiza\u00e7\u00e3o, produtos e muito mais.<\/p>\n

Filtrando dados<\/h4>\n

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

Tabela com filtros que voc\u00ea pode criar com wpDataTables<\/a><\/p>\n

Filtrar dados \u00e9 outra maneira de aumentar a funcionalidade de uma tabela de dados. Os usu\u00e1rios podem digerir grandes quantidades de dados, entender tend\u00eancias e criar compara\u00e7\u00f5es.<\/p>\n

Eles tamb\u00e9m podem localizar certas informa\u00e7\u00f5es e analisar dados complexos. Isto \u00e9 especialmente verdade para tabelas de dados num\u00e9ricos.<\/p>\n

Certifique -se de que os usu\u00e1rios possam personalizar par\u00e2metros ou conjuntos de filtros<\/strong> para determinadas colunas. Al\u00e9m disso, inclua uma op\u00e7\u00e3o de filtragem avan\u00e7ada para salvar o conjunto de filtros que<\/strong> eles criaram para uso futuro.<\/p>\n

Mantenha o contexto, use cabe\u00e7alhos fixos e colunas congeladas<\/h4>\n

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

Ler uma grande tabela de dados requer muita rolagem vertical e horizontal. Para manter o contexto , ancore os cabe\u00e7alhos das colunas<\/strong>, bem como a primeira coluna ou as primeiras colunas.<\/strong><\/p>\n

O Microsoft Excel e o Google Sheets referem-se \u00e0s colunas ancoradas como "congeladas"<\/strong>.<\/p>\n

Para facilitar a navega\u00e7\u00e3o na tabela, adicione uma sele\u00e7\u00e3o de linha completa.<\/strong> Isso permite que os usu\u00e1rios marquem linhas importantes<\/strong> \u00e0 medida que rolam horizontalmente.<\/p>\n

Isso pode ser complicado se a tabela tiver linhas expans\u00edveis e pode resultar em um efeito diferente.<\/p>\n

Considera\u00e7\u00f5es finais sobre como projetar uma mesa da maneira certa<\/strong><\/h2>\n

Saber o que considerar ao criar um design de IU de tabela leva a tabelas eficazes. Isso permite que os usu\u00e1rios comparem dados e classifiquem informa\u00e7\u00f5es,<\/strong> al\u00e9m de aumentar a legibilidade<\/strong>.<\/p>\n

Aprender a projetar uma mesa permite que os designers reduzam o ru\u00eddo visual e fa\u00e7am bom uso do espa\u00e7o em branco<\/strong>. As dicas de design fornecidas aqui podem otimizar o design da tabela e os dados do usu\u00e1rio.<\/p>\n

Seguir essas dicas melhorar\u00e1 o estilo e a funcionalidade geral da tabela. Al\u00e9m disso, eles ajudam a melhorar a experi\u00eancia do usu\u00e1rio e a imagem da marca.<\/p>\n

Se voc\u00ea gostou de ler este artigo sobre como criar uma tabela, confira este artigo sobre como criar uma tabela de dados.<\/a><\/p>\n

Tamb\u00e9m escrevemos sobre alguns assuntos relacionados, como exemplos de tabelas de dados, exemplos de tabelas<\/a> de pre\u00e7os<\/a>, alternativas de DataTables<\/a>, biblioteca de tabelas JavaScript<\/a>, plugins de tabelas WordPress<\/a>, como criar uma tabela no WordPress sem um plugin<\/a>, como inserir uma tabela no WordPress<\/a>, pre\u00e7os<\/a> do WordPress \u00a0plugins de tabela e<\/a> como criar tabelas estat\u00edsticas no WordPress.<\/a><\/p>\n

Fonte de grava\u00e7\u00e3o: wpdatatables.com<\/a><\/div><\/p>\n","protected":false},"excerpt":{"rendered":"

As tabelas de dados ajudam a organizar uma grande quantidade de informa\u00e7\u00f5es. Este guia mostra como projetar uma tabela de dados e melhorar a funcionalidade da tabela.<\/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":[722,837,920,846,867],"tags":[1170],"class_list":["post-227938","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-desenvolvedor","category-guia-para-iniciantes","category-outro","category-tutoriais","category-wordpress-8","tag-affiai-pt-pt"],"_links":{"self":[{"href":"https:\/\/wordpress.mediadoma.com\/pt-pt\/wp-json\/wp\/v2\/posts\/227938","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/wordpress.mediadoma.com\/pt-pt\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/wordpress.mediadoma.com\/pt-pt\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/wordpress.mediadoma.com\/pt-pt\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/wordpress.mediadoma.com\/pt-pt\/wp-json\/wp\/v2\/comments?post=227938"}],"version-history":[{"count":0,"href":"https:\/\/wordpress.mediadoma.com\/pt-pt\/wp-json\/wp\/v2\/posts\/227938\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/wordpress.mediadoma.com\/pt-pt\/wp-json\/wp\/v2\/media\/180135"}],"wp:attachment":[{"href":"https:\/\/wordpress.mediadoma.com\/pt-pt\/wp-json\/wp\/v2\/media?parent=227938"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/wordpress.mediadoma.com\/pt-pt\/wp-json\/wp\/v2\/categories?post=227938"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/wordpress.mediadoma.com\/pt-pt\/wp-json\/wp\/v2\/tags?post=227938"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}