数据可视化表格-设计经验分享!

 前言

表格是数据可视化中最入门的数据图,也最为实用,在网页后台几乎是必不可少的元素,数据可视化大屏中也常常出现。表格的设计似乎所有人都会,但为什么总有一些表格看起来很舒服,用起来也方便,而有些则不然!今天就跟大家分享一下表格的设计经验!

 案例优化 

 

上图的表格样式常常在网页后台,PPT中看到,似乎也看不出什么问题,俗话说了,没有对比就没有伤害,接下来我们就找找它的问题,并一步步优化它,最后对比就知道它有什么问题了!

排版第一原则“文字左对齐,数字右对齐”

我们阅读文字的习惯是从左到右,文字左对齐,视觉焦点更集中不跳跃,阅读起来最为顺畅舒服。

天下武功, 唯快不破,数字右对齐,能快速让观者识别数字体量。人通常在读一个较大的数字时是从后面开始感知的,例如这个数字"¥546,825,23.96"从左往右看一下子很难看出来“5”在千万上,都是先通过后面的位数来确定,或者先找到万的位置来判断,数字的个位对齐,在列表中也更容易判断百、千、万等小数位数,数字右对齐是最自然的阅读方式!

标题与内容同样的对齐方式

 

标题随内容对齐,内容右对齐相对的标题也就右对齐,最好不要出现内容与标题相反的对齐方式!

数字是否用表格字体

 

表格数字字体就是每个数字所占面积一致,例如“1”和“5”在一串数字中占的面积是一样的,这样就不会出现上图的情况。

同样都是万级的数字,"12,231.10"数字中出现的“1”较多就会导致上下同样位数的数字错位,这样很容易误导观者,第一感知上也会觉得“1”多的数字偏小!

上图运用了表格数字字体的效果,清晰了然!(移动端Web端都要注意这个问题)

 

去掉表格竖实线或所有实线

 

加上竖线的表格给人一种局限感,不透气,留白空间少显得杂乱,去掉竖线更有空间感!

只留分割线强调层级,适合背景是卡片式的设计样式,卡片设计无形中给表单加了一个外框,使得整体页面更融洽!

实线固有它的作用,但有时候也可以去掉所有实线,这样更凸出数据,加大条目的间距使得页面更加干净清爽,有空间感!

强调标题

 

第一种加粗标题字体,使得表格看起来更有层次!

第二种表格形式可以加粗标题字体,也可以添加背景色强调标题区分层级!

凸出重要信息

 

网页后台表格往往一个条目中,使用者只关注一个或几个数据,所以可以用背景色加强凸出!

表格扩展设计

 

这种创新形式可以在展示型数据可视化中运用,数据可视化设计中不用太拘谨,只要不违背数据的清晰合理展示就可以,网页后台页面建议还是规范设计,实用为主!

之前

之后

原文地址:https://www.cnblogs.com/telwanggs/p/10975440.html

时间: 2024-11-07 07:41:00

数据可视化表格-设计经验分享!的相关文章

用户界面设计经验分享:界面设计技巧分享

如此有用的文章我已记不得是什么时候发现的了,但在看完的那一刻便想将之翻译,分享给大家自己也受用. 时间过了很久,来到了2014年,终于静下心来花了大把时间连同图片一起译成了中文.像我这样业余的翻译六级分数只够及格的程序员,不敢说做到信雅达,但求意思到位. 1 尽量使用单列而不是多列布局 单列布局能够让对全局有更好的掌控.同时用户也可以一目了然内容.而多列而已则会有分散用户注意力的风险使你的主旨无法很好表达.最好的做法是用一个有逻辑的叙述来引导用户并且在文末给出你的操作按钮. 2 放出礼品往往更具

一个硬件高手的设计经验分享

一个硬件高手的设计经验分享 一:成本节约 现象一:这些拉高/拉低的电阻用多大的阻值关系不大,就选个整数5K吧 点评:市场上不存在5K的阻值,最接近的是 4.99K(精度1%),其次是5.1K(精度5%),其成本分别比精度为20%的4.7K高4倍和2倍.20%精度的电阻阻值只有1.1.5.2.2. 3.3.4.7.6.8几个类别(含10的整数倍):类似地,20%精度的电容也只有以上几种值,如果选了其它的值就必须使用更高的精度,成本就翻了几倍,却不能带来任何好处. 现象二:面板上的指示灯选什么颜色呢

专訪阿里陶辉:大规模分布式系统、高性能server设计经验分享

http://www.csdn.net/article/2014-06-27/2820432 摘要:先后就职于在国内知名的互联网公司,眼下在阿里云弹性计算部门做架构设计与核心模块代码的编写,主要负责云server管理系统和存储系统的优化.陶辉就大规模分布式系统.高性能server设计分享了自己的看法. 关注陶辉非常长时间,初次对陶辉的了解还是在我们CSDN的博客上,从2007年開始写博客,一直到如今,假设不是对技术的追求和热爱,以及热爱分享的精神,我想不是非常多人能坚持下来,拥有多年大型互联网公

web架构设计经验分享(转)

本人作为一位web工程师,着眼最多之处莫过于 性能与架构,本次幸得参与sd2.0大会,得以与同行广泛交流,于此二方面,有些心得,不敢独享,与众博友分享,本文是这次参会与众同撩交流的心得,有兴趣者可以查看视频 架构设计的几个心得: 一,不要过设计:never over design 这是一个常常被提及的话题,但是只要想想你的架构里有多少功能是根本没有用到,或者最后废弃的,就能明白其重要性了,初涉架构设计,往往倾向于设计大而化一的架构,希望设计出具有无比扩展性,能适应一切需求的增加架构,web开发领

SOA架构设计经验分享—架构、职责、数据一致性

阅读目录: 1.背景介绍 2.SOA的架构层次 2.1.应用服务(原子服务) 2.2.组合服务 2.3.业务服务(编排服务) 3.SOA化的重构 3.1.保留服务空间,为了将来服务的组合 4.运用DDD+GRASP进行分析和设计(防止主观的判断导致错误的假设) 5.SOA分布式下的数据一致性 5.1.分布式事务(基于DTC的分布式事务) 5.2.事务补偿(提供正向或反向的操作来让数据在业务上是一致的) 5.3.异步EDA(基于异步事件流来实现柔性的分布式事务) 6.总结 1.背景介绍 最近一段时

[转]SOA架构设计经验分享—架构、职责、数据一致性

阅读目录: 1.背景介绍 2.SOA的架构层次 2.1.应用服务(原子服务) 2.2.组合服务 2.3.业务服务(编排服务) 3.SOA化的重构 3.1.保留服务空间,为了将来服务的组合 4.运用DDD+GRASP进行分析和设计(防止主观的判断导致错误的假设) 5.SOA分布式下的数据一致性 5.1.分布式事务(基于DTC的分布式事务) 5.2.事务补偿(提供正向或反向的操作来让数据在业务上是一致的) 5.3.异步EDA(基于异步事件流来实现柔性的分布式事务) 6.总结 1.背景介绍 最近一段时

牛人的FPGA设计经验分享

在IC工业中有许多不同的领域,IC设计者的特征也会有些不同.在A领域的一个好的IC设计者也许会花很长时间去熟悉B领域的知识.在我们职业生涯的开始,我们应该问我们自己一些问题,我们想要成为怎样的IC设计者?消费?PC外围?通信?微处理器或DSP?等等? IC设计的基本规则和流程是一样的,无论啥样的都会加到其中.HDL,FPGA和软件等是帮助我们理解芯片的最好工具.IC的灵魂是知识.因此我们遇到的第一个挑战将是获得设计的相关信息,然后理解信息并应用它. 但是有些信息不是免费的,我们需要加入一些协会或

用Vue构建一个github“可视化大数据平台”-GitDataV,设计开发分享

写在前面 GitDataV,是一个github“大数据可视化平台”,通过它你可以更直观的看到你在github里的一些数据,(之所以打双引号,是因为我觉得这个还没到大数据可视化的程度).其实我在 上篇文章 分享的时候已经提到了这个想法,通过github提供的接口,做一个自己的“大数据分析页面”,所以我就花了几天晚上的时间,把这想法从设计到开发构建出来了,那么下面我就我个人的账号测试看看效果如下gif图 如果您感兴趣可以点击这里访问简单的:GitDataV网站(目前打包后有些小bug,但不影响正常使

企业如何开展数据可视化建设

有关数据,我们知道,不加以处理运用就会沉淀在系统中,很难成为信息.信息如果得不到利用,就不能成为资源. 在市场竞争激烈.变数不定的大环境下,越来越多的企业意识到信息资源的重要性.信息,无论是来自企业内部还是市场外部,都能帮助企业在现有资源上提高运营效率,分析挖掘辅助决策的策略,做出符合行情的战略规划. 关于企业的数据可视化建设,这里分享一个大连华锐重工的案例,原文是大连华锐重工企业管理部副部长毕建林在帆软大数据可视化分析案例巡展上的演讲. 系统独立,数据利用率低 华锐重工从2001年进行信息化建